Browse Source

Improved code readability.

Oskar Wróbel 7 years ago
parent
commit
7aec577409
1 changed files with 36 additions and 24 deletions
  1. 36 24
      packages/ckeditor5-image/src/image/imageloadobserver.js

+ 36 - 24
packages/ckeditor5-image/src/image/imageloadobserver.js

@@ -47,35 +47,47 @@ export default class ImageLoadObserver extends DomEventObserver {
 	observe( domRoot, name ) {
 		const viewRoot = this.document.getRoot( name );
 
+		// When there is a change in one of the view element
+		// we need to check if there are any new `<img/>` elements to observe.
 		viewRoot.on( 'change:children', ( evt, node ) => {
-			this.view.once( 'render', () => {
-				if ( !node.is( 'element' ) || node.is( 'attributeElement' ) ) {
-					return;
-				}
+			// Wait for the render to be sure that `<img/>` elements are rendered in the DOM root.
+			this.view.once( 'render', () => this._updateObservedElements( domRoot, node ) );
+		} );
+	}
+
+	/**
+	 * Updates the list of observed `<img/>` elements.
+	 *
+	 * @private
+	 * @param {HTMLElement} domRoot DOM root element.
+	 * @param {module:engine/view/element~Element} viewNode View element where children have changed.
+	 */
+	_updateObservedElements( domRoot, viewNode ) {
+		if ( !viewNode.is( 'element' ) || viewNode.is( 'attributeElement' ) ) {
+			return;
+		}
 
-				const domNode = this.view.domConverter.mapViewToDom( node );
+		const domNode = this.view.domConverter.mapViewToDom( viewNode );
 
-				// If there is no `domNode` it means that it was removed from the DOM in the meanwhile.
-				if ( !domNode ) {
-					return;
-				}
+		// If there is no `domNode` it means that it was removed from the DOM in the meanwhile.
+		if ( !domNode ) {
+			return;
+		}
 
-				for ( const domElement of domNode.querySelectorAll( 'img' ) ) {
-					if ( !this._observedElements.has( domElement ) ) {
-						this._domObserver.listenTo( domElement, 'load', ( evt, domEvt ) => this.onDomEvent( domEvt ) );
-						this._observedElements.add( domElement );
-					}
-				}
+		for ( const domElement of domNode.querySelectorAll( 'img' ) ) {
+			if ( !this._observedElements.has( domElement ) ) {
+				this._domObserver.listenTo( domElement, 'load', ( evt, domEvt ) => this.onDomEvent( domEvt ) );
+				this._observedElements.add( domElement );
+			}
+		}
 
-				// Clean up the list of observed elements from elements that has been removed from the root.
-				for ( const domElement of this._observedElements ) {
-					if ( !domRoot.contains( domElement ) ) {
-						this._domObserver.stopListening( domElement );
-						this._observedElements.delete( domElement );
-					}
-				}
-			} );
-		} );
+		// Clean up the list of observed elements from elements that has been removed from the root.
+		for ( const domElement of this._observedElements ) {
+			if ( !domRoot.contains( domElement ) ) {
+				this._domObserver.stopListening( domElement );
+				this._observedElements.delete( domElement );
+			}
+		}
 	}
 
 	/**