Răsfoiți Sursa

Merge pull request #193 from ckeditor/t/155

Renamed el properties to element.
Piotrek Koszuliński 10 ani în urmă
părinte
comite
05e8ae7585

+ 10 - 11
packages/ckeditor5-engine/src/ui/region.js

@@ -19,7 +19,6 @@ export default class Region {
 	 * Creates an instance of the {@link Region} class.
 	 *
 	 * @param {String} name The name of the Region.
-	 * @param {HTMLElement} [el] The element used for this region.
 	 * @constructor
 	 */
 	constructor( name ) {
@@ -42,24 +41,24 @@ export default class Region {
 		 *
 		 * @property {HTMLElement}
 		 */
-		this.el = null;
+		this.element = null;
 	}
 
 	/**
 	 * Initializes region instance with an element. Usually it comes from {@link View#init}.
 	 *
-	 * @param {HTMLElement} regiobEl Element of this region.
+	 * @param {HTMLElement} regionElement Element of this region.
 	 */
-	init( regionEl ) {
-		this.el = regionEl;
+	init( regionElement ) {
+		this.element = regionElement;
 
-		if ( regionEl ) {
+		if ( regionElement ) {
 			this.views.on( 'add', ( evt, childView, index ) => {
-				regionEl.insertBefore( childView.el, regionEl.childNodes[ index + 1 ] );
+				regionElement.insertBefore( childView.element, regionElement.childNodes[ index + 1 ] );
 			} );
 
 			this.views.on( 'remove', ( evt, childView ) => {
-				childView.el.remove();
+				childView.element.remove();
 			} );
 		}
 	}
@@ -68,9 +67,9 @@ export default class Region {
 	 * Destroys region instance.
 	 */
 	destroy() {
-		if ( this.el ) {
+		if ( this.element ) {
 			for ( let view of this.views ) {
-				view.el.remove();
+				view.element.remove();
 				this.views.remove( view );
 			}
 		}
@@ -78,6 +77,6 @@ export default class Region {
 		// Drop the reference to HTMLElement but don't remove it from DOM.
 		// Element comes as a parameter and it could be a part of the View.
 		// Then it's up to the View what to do with it when the View is destroyed.
-		this.el = this.views = null;
+		this.element = this.views = null;
 	}
 }

+ 16 - 16
packages/ckeditor5-engine/src/ui/view.js

@@ -64,7 +64,7 @@ export default class View {
 		 * @private
 		 * @property {HTMLElement}
 		 */
-		this._el = null;
+		this._element = null;
 
 		/**
 		 * An instance of Template to generate {@link #_el}.
@@ -79,11 +79,11 @@ export default class View {
 	 * Element of this view. The element is rendered on first reference
 	 * using {@link #template} definition and {@link #_template} object.
 	 *
-	 * @property el
+	 * @property element
 	 */
-	get el() {
-		if ( this._el ) {
-			return this._el;
+	get element() {
+		if ( this._element ) {
+			return this._element;
 		}
 
 		if ( !this.template ) {
@@ -101,11 +101,11 @@ export default class View {
 
 		this._template = new Template( this.template );
 
-		return ( this._el = this._template.render() );
+		return ( this._element = this._template.render() );
 	}
 
-	set el( el ) {
-		this._el = el;
+	set element( el ) {
+		this._element = el;
 	}
 
 	/**
@@ -120,16 +120,16 @@ export default class View {
 	 *
 	 *		let view = new View();
 	 *
-	 *		// region.name == "foo", region.el == view.el.firstChild
+	 *		// region.name == "foo", region.element == view.element.firstChild
 	 *		view.register( 'foo', el => el.firstChild );
 	 *
-	 *		// region.name == "bar", region.el == view.el.querySelector( 'span' )
+	 *		// region.name == "bar", region.element == view.element.querySelector( 'span' )
 	 *		view.register( new Region( 'bar' ), 'span' );
 	 *
-	 *		// region.name == "bar", region.el == view.el.querySelector( '#div#id' )
+	 *		// region.name == "bar", region.element == view.element.querySelector( '#div#id' )
 	 *		view.register( 'bar', 'div#id', true );
 	 *
-	 *		// region.name == "baz", region.el == null
+	 *		// region.name == "baz", region.element == null
 	 *		view.register( 'baz', true );
 	 *
 	 * @param {String|Region} stringOrRegion The name or an instance of the Region
@@ -254,10 +254,10 @@ export default class View {
 		}
 
 		if ( this.template ) {
-			this.el.remove();
+			this.element.remove();
 		}
 
-		this.model = this.regions = this.template = this._regionsSelectors = this._el = this._template = null;
+		this.model = this.regions = this.template = this._regionsSelectors = this._element = this._template = null;
 	}
 
 	/**
@@ -273,9 +273,9 @@ export default class View {
 			regionSelector = this._regionsSelectors[ region.name ];
 
 			if ( typeof regionSelector == 'string' ) {
-				regionEl = this.el.querySelector( regionSelector );
+				regionEl = this.element.querySelector( regionSelector );
 			} else if ( typeof regionSelector == 'function' ) {
-				regionEl = regionSelector( this.el );
+				regionEl = regionSelector( this.element );
 			} else {
 				regionEl = null;
 			}

+ 1 - 1
packages/ckeditor5-engine/tests/ui/controller.js

@@ -275,7 +275,7 @@ function defineParentViewClass() {
 		constructor() {
 			super();
 
-			this.el = document.createElement( 'span' );
+			this.element = document.createElement( 'span' );
 			this.register( 'x', true );
 		}
 	};

+ 1 - 1
packages/ckeditor5-engine/tests/ui/controllercollection.js

@@ -104,7 +104,7 @@ function defineParentViewClass() {
 		constructor() {
 			super();
 
-			this.el = document.createElement( 'span' );
+			this.element = document.createElement( 'span' );
 			this.register( 'x', true );
 		}
 	};

+ 7 - 7
packages/ckeditor5-engine/tests/ui/region.js

@@ -20,7 +20,7 @@ describe( 'View', () => {
 	describe( 'constructor', () => {
 		it( 'accepts name', () => {
 			expect( region.name ).to.be.equal( 'foo' );
-			expect( region.el ).to.be.null;
+			expect( region.element ).to.be.null;
 			expect( region.views.length ).to.be.equal( 0 );
 		} );
 	} );
@@ -29,7 +29,7 @@ describe( 'View', () => {
 		it( 'accepts region element', () => {
 			region.init( el );
 
-			expect( region.el ).to.be.equal( el );
+			expect( region.element ).to.be.equal( el );
 		} );
 	} );
 
@@ -37,13 +37,13 @@ describe( 'View', () => {
 		it( 'updates DOM when adding views', () => {
 			region.init( el );
 
-			expect( region.el.childNodes.length ).to.be.equal( 0 );
+			expect( region.element.childNodes.length ).to.be.equal( 0 );
 
 			region.views.add( new TestViewA() );
-			expect( region.el.childNodes.length ).to.be.equal( 1 );
+			expect( region.element.childNodes.length ).to.be.equal( 1 );
 
 			region.views.add( new TestViewA() );
-			expect( region.el.childNodes.length ).to.be.equal( 2 );
+			expect( region.element.childNodes.length ).to.be.equal( 2 );
 		} );
 
 		it( 'does not update DOM when no region element', () => {
@@ -82,7 +82,7 @@ describe( 'View', () => {
 			region.init( el );
 			region.views.add( new TestViewA() );
 
-			const elRef = region.el;
+			const elRef = region.element;
 			const viewsRef = region.views;
 
 			region.destroy();
@@ -91,7 +91,7 @@ describe( 'View', () => {
 			expect( region.name ).to.be.equal( 'foo' );
 			expect( region.views ).to.be.null;
 			expect( viewsRef.length ).to.be.equal( 0 );
-			expect( region.el ).to.be.null;
+			expect( region.element ).to.be.null;
 		} );
 
 		it( 'destroys an element–less region', () => {

+ 46 - 46
packages/ckeditor5-engine/tests/ui/view.js

@@ -40,11 +40,11 @@ describe( 'View', () => {
 			expect( view.regions.length ).to.be.equal( 0 );
 			expect( view.template ).to.be.null;
 			expect( view._regionsSelectors ).to.be.empty;
-			expect( view._el ).to.be.null;
+			expect( view._element ).to.be.null;
 			expect( view._template ).to.be.null;
 
 			expect( () => {
-				view.el;
+				view.element;
 			} ).to.throw( CKEditorError, /ui-view-notemplate/ );
 		} );
 	} );
@@ -89,8 +89,8 @@ describe( 'View', () => {
 
 			view.init();
 
-			expect( region1.el ).to.be.equal( view.el.firstChild );
-			expect( region2.el ).to.be.equal( view.el.lastChild );
+			expect( region1.element ).to.be.equal( view.element.firstChild );
+			expect( region2.element ).to.be.equal( view.element.lastChild );
 		} );
 
 		it( 'initializes view regions with function selector', () => {
@@ -104,8 +104,8 @@ describe( 'View', () => {
 
 			view.init();
 
-			expect( region1.el ).to.be.equal( view.el.firstChild );
-			expect( region2.el ).to.be.equal( view.el.lastChild );
+			expect( region1.element ).to.be.equal( view.element.firstChild );
+			expect( region2.element ).to.be.equal( view.element.lastChild );
 		} );
 
 		it( 'initializes view regions with boolean selector', () => {
@@ -119,8 +119,8 @@ describe( 'View', () => {
 
 			view.init();
 
-			expect( region1.el ).to.be.null;
-			expect( region2.el ).to.be.null;
+			expect( region1.element ).to.be.null;
+			expect( region2.element ).to.be.null;
 		} );
 	} );
 
@@ -200,8 +200,8 @@ describe( 'View', () => {
 		it( 'invokes out of #template', () => {
 			setTestViewInstance( { a: 1 } );
 
-			expect( view.el ).to.be.an.instanceof( HTMLElement );
-			expect( view.el.nodeName ).to.be.equal( 'A' );
+			expect( view.element ).to.be.an.instanceof( HTMLElement );
+			expect( view.element.nodeName ).to.be.equal( 'A' );
 		} );
 
 		it( 'can be explicitly declared', () => {
@@ -209,13 +209,13 @@ describe( 'View', () => {
 				constructor() {
 					super();
 
-					this.el = document.createElement( 'span' );
+					this.element = document.createElement( 'span' );
 				}
 			}
 
 			view = new CustomView();
 
-			expect( view.el ).to.be.an.instanceof( HTMLElement );
+			expect( view.element ).to.be.an.instanceof( HTMLElement );
 		} );
 	} );
 
@@ -252,10 +252,10 @@ describe( 'View', () => {
 
 			setTestViewInstance( { foo: 'bar' } );
 
-			expect( view.el.outerHTML ).to.be.equal( '<p class="bar">abc</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p class="bar">abc</p>' );
 
 			view.model.foo = 'baz';
-			expect( view.el.outerHTML ).to.be.equal( '<p class="baz">abc</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p class="baz">abc</p>' );
 		} );
 
 		it( 'allows binding "text" to the model', () => {
@@ -274,11 +274,11 @@ describe( 'View', () => {
 
 			setTestViewInstance( { foo: 'bar' } );
 
-			expect( view.el.outerHTML ).to.be.equal( '<p>bar<b>baz</b></p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p>bar<b>baz</b></p>' );
 
 			// TODO: A solution to avoid nuking the children?
 			view.model.foo = 'qux';
-			expect( view.el.outerHTML ).to.be.equal( '<p>qux</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p>qux</p>' );
 		} );
 
 		it( 'allows binding to the model with value processing', () => {
@@ -296,10 +296,10 @@ describe( 'View', () => {
 			} );
 
 			setTestViewInstance( { foo: 3 } );
-			expect( view.el.outerHTML ).to.be.equal( '<p class="positive">positive</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p class="positive">positive</p>' );
 
 			view.model.foo = -7;
-			expect( view.el.outerHTML ).to.be.equal( '<p class="negative">negative</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p class="negative">negative</p>' );
 		} );
 
 		it( 'allows binding to the model with custom callback', () => {
@@ -320,10 +320,10 @@ describe( 'View', () => {
 			} );
 
 			setTestViewInstance( { foo: 'moo' } );
-			expect( view.el.outerHTML ).to.be.equal( '<p>moo</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p>moo</p>' );
 
 			view.model.foo = 'changed';
-			expect( view.el.outerHTML ).to.be.equal( '<p class="changed">changed</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p class="changed">changed</p>' );
 		} );
 	} );
 
@@ -344,10 +344,10 @@ describe( 'View', () => {
 
 			view.on( 'a', spy );
 
-			dispatchEvent( view.el, 'x' );
+			dispatchEvent( view.element, 'x' );
 			sinon.assert.calledWithExactly( spy,
 				sinon.match.has( 'name', 'a' ),
-				sinon.match.has( 'target', view.el )
+				sinon.match.has( 'target', view.element )
 			);
 		} );
 
@@ -369,14 +369,14 @@ describe( 'View', () => {
 			view.on( 'a', spy1 );
 			view.on( 'b', spy2 );
 
-			dispatchEvent( view.el, 'x' );
+			dispatchEvent( view.element, 'x' );
 			sinon.assert.calledWithExactly( spy1,
 				sinon.match.has( 'name', 'a' ),
-				sinon.match.has( 'target', view.el )
+				sinon.match.has( 'target', view.element )
 			);
 			sinon.assert.calledWithExactly( spy2,
 				sinon.match.has( 'name', 'b' ),
-				sinon.match.has( 'target', view.el )
+				sinon.match.has( 'target', view.element )
 			);
 		} );
 
@@ -424,41 +424,41 @@ describe( 'View', () => {
 			view.on( 'c', spy3 );
 
 			// Test "test@p".
-			dispatchEvent( view.el, 'test' );
+			dispatchEvent( view.element, 'test' );
 
 			sinon.assert.callCount( spy1, 0 );
 			sinon.assert.callCount( spy2, 0 );
 			sinon.assert.callCount( spy3, 0 );
 
 			// Test "test@.y".
-			dispatchEvent( view.el.firstChild, 'test' );
+			dispatchEvent( view.element.firstChild, 'test' );
 
 			expect( spy1.firstCall.calledWithExactly(
 				sinon.match.has( 'name', 'a' ),
-				sinon.match.has( 'target', view.el.firstChild )
+				sinon.match.has( 'target', view.element.firstChild )
 			) ).to.be.true;
 
 			sinon.assert.callCount( spy2, 0 );
 			sinon.assert.callCount( spy3, 0 );
 
 			// Test "test@div".
-			dispatchEvent( view.el.lastChild, 'test' );
+			dispatchEvent( view.element.lastChild, 'test' );
 
 			sinon.assert.callCount( spy1, 1 );
 
 			expect( spy2.firstCall.calledWithExactly(
 				sinon.match.has( 'name', 'b' ),
-				sinon.match.has( 'target', view.el.lastChild )
+				sinon.match.has( 'target', view.element.lastChild )
 			) ).to.be.true;
 
 			sinon.assert.callCount( spy3, 0 );
 
 			// Test "test@.y".
-			dispatchEvent( view.el.lastChild.firstChild, 'test' );
+			dispatchEvent( view.element.lastChild.firstChild, 'test' );
 
 			expect( spy1.secondCall.calledWithExactly(
 				sinon.match.has( 'name', 'a' ),
-				sinon.match.has( 'target', view.el.lastChild.firstChild )
+				sinon.match.has( 'target', view.element.lastChild.firstChild )
 			) ).to.be.true;
 
 			sinon.assert.callCount( spy2, 1 );
@@ -486,15 +486,15 @@ describe( 'View', () => {
 
 			setTestViewInstance();
 
-			dispatchEvent( view.el, 'x' );
-			dispatchEvent( view.el.firstChild, 'y' );
+			dispatchEvent( view.element, 'x' );
+			dispatchEvent( view.element.firstChild, 'y' );
 
 			sinon.assert.calledWithExactly( spy1,
-				sinon.match.has( 'target', view.el )
+				sinon.match.has( 'target', view.element )
 			);
 
 			sinon.assert.calledWithExactly( spy2,
-				sinon.match.has( 'target', view.el.firstChild )
+				sinon.match.has( 'target', view.element.firstChild )
 			);
 		} );
 
@@ -519,10 +519,10 @@ describe( 'View', () => {
 
 			view.on( 'a', spy );
 
-			dispatchEvent( view.el.firstChild, 'x' );
+			dispatchEvent( view.element.firstChild, 'x' );
 			sinon.assert.calledWithExactly( spy,
 				sinon.match.has( 'name', 'a' ),
-				sinon.match.has( 'target', view.el.firstChild )
+				sinon.match.has( 'target', view.element.firstChild )
 			);
 		} );
 
@@ -543,7 +543,7 @@ describe( 'View', () => {
 			view.on( 'a', spy );
 
 			let div = document.createElement( 'div' );
-			view.el.appendChild( div );
+			view.element.appendChild( div );
 
 			dispatchEvent( div, 'test' );
 			sinon.assert.calledWithExactly( spy, sinon.match.has( 'name', 'a' ), sinon.match.has( 'target', div ) );
@@ -560,14 +560,14 @@ describe( 'View', () => {
 			expect( view.regions ).to.be.null;
 			expect( view.template ).to.be.null;
 			expect( view._regionsSelectors ).to.be.null;
-			expect( view._el ).to.be.null;
+			expect( view._element ).to.be.null;
 			expect( view._template ).to.be.null;
 		} );
 
 		it( 'detaches the element from DOM', () => {
-			const elRef = view.el;
+			const elRef = view.element;
 
-			document.createElement( 'div' ).appendChild( view.el );
+			document.createElement( 'div' ).appendChild( view.element );
 
 			view.destroy();
 
@@ -600,12 +600,12 @@ describe( 'View', () => {
 			setTestViewInstance( { foo: 'bar' } );
 
 			const modelRef = view.model;
-			const elRef = view.el;
+			const elRef = view.element;
 
-			expect( view.el.outerHTML ).to.be.equal( '<p>bar</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p>bar</p>' );
 
 			modelRef.foo = 'baz';
-			expect( view.el.outerHTML ).to.be.equal( '<p>baz</p>' );
+			expect( view.element.outerHTML ).to.be.equal( '<p>baz</p>' );
 
 			view.destroy();
 
@@ -648,7 +648,7 @@ function setTestViewInstance( model ) {
 	view = new TestView( new Model( model ) );
 
 	if ( view.template ) {
-		document.body.appendChild( view.el );
+		document.body.appendChild( view.element );
 	}
 }