瀏覽代碼

Renamed listeners->on in template definition.

Aleksander Nowodzinski 10 年之前
父節點
當前提交
289eca3fec

+ 10 - 10
packages/ckeditor5-ui/src/ui/template.js

@@ -31,7 +31,7 @@ CKEDITOR.define( function() {
 			 *             {
 			 *                 tag: 'span',
 			 *                 attributes: { ... },
-			 *                 listeners: { ... }
+			 *                 on: { ... }
 			 *             },
 			 *             {
 			 *                 ...
@@ -44,7 +44,7 @@ CKEDITOR.define( function() {
 			 *             style: callback,
 			 *             ...
 			 *         },
-			 *         listeners: {
+			 *         on: {
 			 *             w: 'a'
 			 *             x: [ 'b', 'c', callback ],
 			 *             'y@selector': 'd',
@@ -91,8 +91,8 @@ CKEDITOR.define( function() {
 		// Invoke children recursively.
 		renderElementChildren( def, el );
 
-		// Prepare binding for listeners.
-		prepareElementListeners( def, el );
+		// Activate DOM binding for event listeners.
+		activateElementListeners( def, el );
 
 		return el;
 	}
@@ -141,9 +141,9 @@ CKEDITOR.define( function() {
 		}
 	}
 
-	function prepareElementListeners( def, el ) {
-		if ( def.listeners ) {
-			for ( var l in def.listeners ) {
+	function activateElementListeners( def, el ) {
+		if ( def.on ) {
+			for ( var l in def.on ) {
 				var domEvtDef = l.split( '@' );
 				var name, selector;
 
@@ -155,10 +155,10 @@ CKEDITOR.define( function() {
 					selector = null;
 				}
 
-				if ( Array.isArray( def.listeners[ l ] ) ) {
-					def.listeners[ l ].map( i => i( el, name, selector ) );
+				if ( Array.isArray( def.on[ l ] ) ) {
+					def.on[ l ].map( i => i( el, name, selector ) );
 				} else {
-					def.listeners[ l ]( el, name, selector );
+					def.on[ l ]( el, name, selector );
 				}
 			}
 		}

+ 19 - 25
packages/ckeditor5-ui/src/ui/view.js

@@ -39,13 +39,6 @@ CKEDITOR.define( [
 			 * Regions which belong to this view.
 			 */
 			this.regions = new Collection();
-
-			/**
-			 * The list of listeners attached in this view.
-			 *
-			 * @property {Array}
-			 */
-			this.listeners = [];
 		}
 
 		/**
@@ -139,7 +132,7 @@ CKEDITOR.define( [
 		}
 
 		/**
-		 * Iterates over all "listeners" properties in {@link template} and replaces
+		 * Iterates over all "on" properties in {@link template} and replaces
 		 * listener definitions with functions which, once executed in a context of
 		 * a DOM element, will attach native DOM listeners to elements.
 		 *
@@ -164,8 +157,8 @@ CKEDITOR.define( [
 				 * So instead of
 				 *
 				 *     children: [
-				 *         { tag: 'span', listeners: { click: 'foo' } }
-				 *         { tag: 'span', listeners: { click: 'foo' } }
+				 *         { tag: 'span', on: { click: 'foo' } }
+				 *         { tag: 'span', on: { click: 'foo' } }
 				 *     ]
 				 *
 				 * a single, more efficient listener can be attached that uses **event delegation**:
@@ -174,7 +167,7 @@ CKEDITOR.define( [
 				 *     	   { tag: 'span' }
 				 *     	   { tag: 'span' }
 				 *     ],
-				 *     listeners: {
+				 *     on: {
 				 *     	   'click@span': 'foo',
 				 *     }
 				 *
@@ -199,41 +192,42 @@ CKEDITOR.define( [
 			};
 
 			/**
-			 * Iterates over "listeners" property in {@link template} definition to recursively
+			 * Iterates over "on" property in {@link template} definition to recursively
 			 * replace each listener declaration with a function which, once executed in a context
 			 * of an element, attaches native DOM listener to the element.
 			 *
 			 * @param {Object} def Template definition.
 			 */
 			function prepareElementListeners( def ) {
-				if ( def.listeners ) {
-					let listeners = def.listeners;
-					let evtNameOrCallback;
+				let on = def.on;
+
+				if ( on ) {
+					let domEvtName, evtNameOrCallback;
 
-					for ( let domEvtName in listeners ) {
-						evtNameOrCallback = listeners[ domEvtName ];
+					for ( domEvtName in on ) {
+						evtNameOrCallback = on[ domEvtName ];
 
 						// Listeners allow definition with an array:
 						//
-						//    listeners: {
-						//        'DOMEvent@selector': [ 'event1', callback ],
-						//        'DOMEvent': [ callback, 'event2', 'event3' ]
+						//    on: {
+						//        'DOMEventName@selector': [ 'event1', callback ],
+						//        'DOMEventName': [ callback, 'event2', 'event3' ]
 						//        ...
 						//    }
 						if ( Array.isArray( evtNameOrCallback ) ) {
-							listeners[ domEvtName ] = listeners[ domEvtName ].map(
+							on[ domEvtName ] = on[ domEvtName ].map(
 								evtNameOrCallback => getDOMListenerAttacher( evtNameOrCallback )
 							);
 						}
 						// Listeners allow definition with a string containing event name:
 						//
-						//    listeners: {
-						//       'DOMEvent@selector': 'event1',
-						//       'DOMEvent': 'event2'
+						//    on: {
+						//       'DOMEventName@selector': 'event1',
+						//       'DOMEventName': 'event2'
 						//       ...
 						//    }
 						else {
-							listeners[ domEvtName ] = getDOMListenerAttacher( evtNameOrCallback );
+							on[ domEvtName ] = getDOMListenerAttacher( evtNameOrCallback );
 						}
 					}
 				}

+ 6 - 6
packages/ckeditor5-ui/tests/ui/template.js

@@ -123,7 +123,7 @@ describe( 'callback value', function() {
 		expect( el.outerHTML ).to.be.equal( '<p>foo</p>' );
 	} );
 
-	it( 'works for "listeners" property', function() {
+	it( 'works for "on" property', function() {
 		var spy1 = bender.sinon.spy();
 		var spy2 = bender.sinon.spy();
 		var spy3 = bender.sinon.spy();
@@ -134,12 +134,12 @@ describe( 'callback value', function() {
 			children: [
 				{
 					tag: 'span',
-					listeners: {
+					on: {
 						bar: spy2
 					}
 				}
 			],
-			listeners: {
+			on: {
 				foo: spy1,
 				baz: [ spy3, spy4 ]
 			}
@@ -151,7 +151,7 @@ describe( 'callback value', function() {
 		sinon.assert.calledWithExactly( spy4, el, 'baz', null );
 	} );
 
-	it( 'works for "listeners" property with selectors', function() {
+	it( 'works for "on" property with selectors', function() {
 		var spy1 = bender.sinon.spy();
 		var spy2 = bender.sinon.spy();
 		var spy3 = bender.sinon.spy();
@@ -171,12 +171,12 @@ describe( 'callback value', function() {
 					attributes: {
 						'class': 'y'
 					},
-					listeners: {
+					on: {
 						'bar@p': spy2
 					}
 				},
 			],
-			listeners: {
+			on: {
 				'foo@span': spy1,
 				'baz@.y': [ spy3, spy4 ]
 			}

+ 11 - 9
packages/ckeditor5-ui/tests/ui/view.js

@@ -159,14 +159,14 @@ describe( 'bind', function() {
 	} );
 } );
 
-describe( 'listener definition', function() {
+describe( 'on', function() {
 	it( 'accepts plain binding', function() {
 		var spy = bender.sinon.spy();
 
 		setTestViewClass( function() {
 			return {
 				tag: 'p',
-				listeners: {
+				on: {
 					x: 'a',
 				}
 			};
@@ -190,7 +190,7 @@ describe( 'listener definition', function() {
 		setTestViewClass( function() {
 			return {
 				tag: 'p',
-				listeners: {
+				on: {
 					x: [ 'a', 'b' ]
 				}
 			};
@@ -226,7 +226,7 @@ describe( 'listener definition', function() {
 						attributes: {
 							'class': 'y',
 						},
-						listeners: {
+						on: {
 							'test@p': 'c'
 						}
 					},
@@ -242,7 +242,7 @@ describe( 'listener definition', function() {
 						],
 					}
 				],
-				listeners: {
+				on: {
 					'test@.y': 'a',
 					'test@div': 'b'
 				}
@@ -309,7 +309,7 @@ describe( 'listener definition', function() {
 						tag: 'span'
 					}
 				],
-				listeners: {
+				on: {
 					x: spy1,
 					'y@span': [ spy2, 'c' ],
 				}
@@ -341,7 +341,7 @@ describe( 'listener definition', function() {
 						tag: 'span'
 					}
 				],
-				listeners: {
+				on: {
 					x: 'a',
 				}
 			};
@@ -364,7 +364,7 @@ describe( 'listener definition', function() {
 		setTestViewClass( function() {
 			return {
 				tag: 'p',
-				listeners: {
+				on: {
 					'test@div': 'a'
 				}
 			};
@@ -460,7 +460,9 @@ function updateModuleReference() {
 }
 
 function createViewInstanceWithTemplate() {
-	setTestViewClass( () => { return { tag: 'a' }; } );
+	setTestViewClass( () => {
+		return { tag: 'a' };
+	} );
 	setTestViewInstance();
 }