Merge pull request #183 from ckeditor/t/175

Feature: Scrolling DOM utilities should support multi-window scenarios. Closes #175.
ckeditor · Sep 21, 2017 · a5c27ea · a5c27ea
2 parents dca8f8f + 7998f25
commit a5c27ea
Show file tree

Hide file tree

Showing 16 changed files with 678 additions and 194 deletions.
diff --git a/src/dom/getborderwidths.js b/src/dom/getborderwidths.js
@@ -7,8 +7,6 @@
  * @module utils/dom/getborderwidths
  */
 
-import global from './global';
-
 /**
  * Returns an object containing CSS border widths of a specified HTML element.
  *
@@ -17,7 +15,8 @@ import global from './global';
  * with numerical values of the `border-[top,left,right,bottom]-width` CSS styles.
  */
 export default function getBorderWidths( element ) {
-	const style = global.window.getComputedStyle( element );
+	// Call getComputedStyle on the window the element document belongs to.
+	const style = element.ownerDocument.defaultView.getComputedStyle( element );
 
 	return {
 		top: parseInt( style.borderTopWidth, 10 ),

diff --git a/src/dom/iswindow.js b/src/dom/iswindow.js
@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module utils/dom/iswindow
+ */
+
+/**
+ * Checks if the object is a native DOM Window.
+ *
+ * @param {*} obj
+ * @returns {Boolean}
+ */
+export default function isWindow( obj ) {
+	return Object.prototype.toString.apply( obj ) == '[object Window]';
+}
diff --git a/src/dom/position.js b/src/dom/position.js
@@ -11,6 +11,7 @@ import global from './global';
 import Rect from './rect';
 import getPositionedAncestor from './getpositionedancestor';
 import getBorderWidths from './getborderwidths';
+import isFunction from '../lib/lodash/isFunction';
 
 /**
  * Calculates the `position: absolute` coordinates of a given element so it can be positioned with respect to the
@@ -79,13 +80,13 @@ import getBorderWidths from './getborderwidths';
 export function getOptimalPosition( { element, target, positions, limiter, fitInViewport } ) {
 	// If the {@link module:utils/dom/position~Options#target} is a function, use what it returns.
 	// https://github.com/ckeditor/ckeditor5-utils/issues/157
-	if ( typeof target == 'function' ) {
+	if ( isFunction( target ) ) {
 		target = target();
 	}
 
 	// If the {@link module:utils/dom/position~Options#limiter} is a function, use what it returns.
 	// https://github.com/ckeditor/ckeditor5-ui/issues/260
-	if ( typeof limiter == 'function' ) {
+	if ( isFunction( limiter ) ) {
 		limiter = limiter();
 	}
 

diff --git a/src/dom/rect.js b/src/dom/rect.js
@@ -7,8 +7,8 @@
  * @module utils/dom/rect
  */
 
-import global from './global';
 import isRange from './isrange';
+import isWindow from './iswindow';
 import isElement from '../lib/lodash/isElement';
 import getBorderWidths from './getborderwidths';
 import log from '../log';
@@ -90,8 +90,8 @@ export default class Rect {
 			} else {
 				copyRectProperties( this, source.getBoundingClientRect() );
 			}
-		} else if ( source === global.window ) {
-			const { innerWidth, innerHeight } = global.window;
+		} else if ( isWindow( source ) ) {
+			const { innerWidth, innerHeight } = source;
 
 			copyRectProperties( this, {
 				top: 0,
@@ -253,11 +253,11 @@ export default class Rect {
 		let visibleRect = this.clone();
 
 		// There's no ancestor to crop <body> with the overflow.
-		if ( source != global.document.body ) {
+		if ( !isBody( source ) ) {
 			let parent = source.parentNode || source.commonAncestorContainer;
 
 			// Check the ancestors all the way up to the <body>.
-			while ( parent && parent != global.document.body ) {
+			while ( parent && !isBody( parent ) ) {
 				const parentRect = new Rect( parent );
 				const intersectionRect = visibleRect.getIntersection( parentRect );
 
@@ -320,9 +320,9 @@ export default class Rect {
 		const source = this._source;
 		let scrollBarWidth, scrollBarHeight;
 
-		if ( source === global.window ) {
-			scrollBarWidth = global.window.innerWidth - global.document.documentElement.clientWidth;
-			scrollBarHeight = global.window.innerHeight - global.document.documentElement.clientHeight;
+		if ( isWindow( source ) ) {
+			scrollBarWidth = source.innerWidth - source.document.documentElement.clientWidth;
+			scrollBarHeight = source.innerHeight - source.document.documentElement.clientHeight;
 		} else {
 			const borderWidths = getBorderWidths( this._source );
 
@@ -385,3 +385,16 @@ function copyRectProperties( rect, source ) {
 		rect[ p ] = source[ p ];
 	}
 }
+
+// Checks if provided object is a <body> HTML element.
+//
+// @private
+// @param {HTMLElement|Range} elementOrRange
+// @returns {Boolean}
+function isBody( elementOrRange ) {
+	if ( !isElement( elementOrRange ) ) {
+		return false;
+	}
+
+	return elementOrRange === elementOrRange.ownerDocument.body;
+}