From a1ed796dc606c4566be343bb27832576c60176aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Wr=C3=B3bel?= <kontakt@oskarwrobel.pl>
Date: Tue, 26 Jun 2018 16:53:50 +0200
Subject: [PATCH] Changed ImageLoadObserver from DomEventObserver to Observer.

---
 src/image/imageloadobserver.js   | 23 +++++++++------
 tests/image/imageloadobserver.js | 48 ++++++++++++++++++++++----------
 2 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/image/imageloadobserver.js b/src/image/imageloadobserver.js
index e4d242e7..c7e4f66e 100644
--- a/src/image/imageloadobserver.js
+++ b/src/image/imageloadobserver.js
@@ -7,7 +7,7 @@
  * @module image/image/imageloadobserver
  */
 
-import DomEventObserver from '@ckeditor/ckeditor5-engine/src/view/observer/domeventobserver';
+import Observer from '@ckeditor/ckeditor5-engine/src/view/observer/observer';
 
 /**
  * Observes all new images added to the {@link module:engine/view/document~Document},
@@ -17,9 +17,9 @@ import DomEventObserver from '@ckeditor/ckeditor5-engine/src/view/observer/domev
  *
  * **Note:** This event is not fired for images that has been added to the document and rendered as `complete` (already loaded).
  *
- * @extends module:engine/view/observer/domeventobserver~DomEventObserver
+ * @extends module:engine/view/observer/observer~Observer
  */
-export default class ImageLoadObserver extends DomEventObserver {
+export default class ImageLoadObserver extends Observer {
 	constructor( view ) {
 		super( view );
 
@@ -67,7 +67,7 @@ export default class ImageLoadObserver extends DomEventObserver {
 
 		for ( const domElement of domNode.querySelectorAll( 'img' ) ) {
 			if ( !this._observedElements.has( domElement ) ) {
-				this.listenTo( domElement, 'load', ( evt, domEvt ) => this.onDomEvent( domEvt ) );
+				this.listenTo( domElement, 'load', ( evt, domEvt ) => this._fireEvents( domEvt ) );
 				this._observedElements.add( domElement );
 			}
 		}
@@ -82,11 +82,18 @@ export default class ImageLoadObserver extends DomEventObserver {
 	}
 
 	/**
-	 * @inheritDoc
+	 * Fires {@link module:engine/view/view/document~Document#event:layoutChanged} and
+	 * {@link module:engine/view/document~Document#event:imageLoaded}
+	 * if observer {@link #isEnabled is enabled}.
+	 *
+	 * @protected
+	 * @param {Event} domEvent The DOM event.
 	 */
-	onDomEvent( domEvent ) {
-		this.document.fire( 'layoutChanged' );
-		this.fire( 'imageLoaded', domEvent );
+	_fireEvents( domEvent ) {
+		if ( this.isEnabled ) {
+			this.document.fire( 'layoutChanged' );
+			this.document.fire( 'imageLoaded', domEvent );
+		}
 	}
 
 	/**
diff --git a/tests/image/imageloadobserver.js b/tests/image/imageloadobserver.js
index 34243280..75889b3f 100644
--- a/tests/image/imageloadobserver.js
+++ b/tests/image/imageloadobserver.js
@@ -6,13 +6,14 @@
 /* globals document, Event */
 
 import ImageLoadObserver from '../../src/image/imageloadobserver';
+import Observer from '@ckeditor/ckeditor5-engine/src/view/observer/observer';
 import View from '@ckeditor/ckeditor5-engine/src/view/view';
 import Position from '@ckeditor/ckeditor5-engine/src/view/position';
 import Range from '@ckeditor/ckeditor5-engine/src/view/range';
 import createViewRoot from '@ckeditor/ckeditor5-engine/tests/view/_utils/createroot';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 
-describe( 'ClickObserver', () => {
+describe( 'ImageLoadObserver', () => {
 	let view, viewDocument, observer, domRoot, viewRoot;
 
 	beforeEach( () => {
@@ -29,6 +30,10 @@ describe( 'ClickObserver', () => {
 		view.destroy();
 	} );
 
+	it( 'should extend Observer', () => {
+		expect( observer ).instanceof( Observer );
+	} );
+
 	it( 'should fire `loadImage` event for images in the document that are loaded with a delay', () => {
 		const spy = sinon.spy();
 
@@ -43,6 +48,34 @@ describe( 'ClickObserver', () => {
 		sinon.assert.calledOnce( spy );
 	} );
 
+	it( 'should fire `layoutChanged` along with `imageLoaded` event', () => {
+		const layoutChangedSpy = sinon.spy();
+		const imageLoadedSpy = sinon.spy();
+
+		view.document.on( 'layoutChanged', layoutChangedSpy );
+		view.document.on( 'imageLoaded', imageLoadedSpy );
+
+		observer._fireEvents( {} );
+
+		sinon.assert.calledOnce( layoutChangedSpy );
+		sinon.assert.calledOnce( imageLoadedSpy );
+	} );
+
+	it( 'should not fire events when observer is disabled', () => {
+		const layoutChangedSpy = sinon.spy();
+		const imageLoadedSpy = sinon.spy();
+
+		view.document.on( 'layoutChanged', layoutChangedSpy );
+		view.document.on( 'imageLoaded', imageLoadedSpy );
+
+		observer.isEnabled = false;
+
+		observer._fireEvents( {} );
+
+		sinon.assert.notCalled( layoutChangedSpy );
+		sinon.assert.notCalled( imageLoadedSpy );
+	} );
+
 	it( 'should not fire `loadImage` event for images removed from document', () => {
 		const spy = sinon.spy();
 
@@ -97,19 +130,6 @@ describe( 'ClickObserver', () => {
 		} ).to.not.throw();
 	} );
 
-	it( 'should call `layoutChanged` along with `imageLoaded` event', () => {
-		const layoutChangedSpy = sinon.spy();
-		const imageLoadedSpy = sinon.spy();
-
-		view.document.on( 'layoutChanged', layoutChangedSpy );
-		view.document.on( 'imageLoaded', imageLoadedSpy );
-
-		observer.onDomEvent( {} );
-
-		sinon.assert.calledOnce( layoutChangedSpy );
-		sinon.assert.calledOnce( imageLoadedSpy );
-	} );
-
 	it( 'should stop observing images on destroy', () => {
 		const spy = sinon.spy();