Ver código fonte

Code refactoring.

Aleksander Nowodzinski 6 anos atrás
pai
commit
4fe050b303

+ 31 - 21
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -183,15 +183,15 @@ export default class ToolbarView extends View {
 		} );
 
 		/**
-		 * An instance of the active toolbar feature that shapes its look and behavior.
+		 * An instance of the active toolbar behavior that shapes its look and functionality.
 		 *
-		 * See {@link module:ui/toolbar/toolbarview~ToolbarFeature} to learn more.
+		 * See {@link module:ui/toolbar/toolbarview~ToolbarBehavior} to learn more.
 		 *
 		 * @protected
 		 * @readonly
-		 * @member {module:ui/toolbar/toolbarview~ToolbarFeature}
+		 * @member {module:ui/toolbar/toolbarview~ToolbarBehavior}
 		 */
-		this._feature = this.options.shouldGroupWhenFull ? new DynamicGrouping( this ) : new StaticLayout( this );
+		this._behavior = this.options.shouldGroupWhenFull ? new DynamicGrouping( this ) : new StaticLayout( this );
 	}
 
 	/**
@@ -216,14 +216,14 @@ export default class ToolbarView extends View {
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
 
-		this._feature.render( this );
+		this._behavior.render( this );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	destroy() {
-		this._feature.destroy();
+		this._behavior.destroy();
 
 		return super.destroy();
 	}
@@ -319,15 +319,19 @@ class ItemsView extends View {
 }
 
 /**
- * A toolbar feature that makes it static and unresponsive to the changes of the environment.
+ * A toolbar behavior that makes it static and unresponsive to the changes of the environment.
  * It also allows toolbar with the vertical layout.
  *
  * @private
- * @implements module:ui/toolbar/toolbarview~ToolbarFeature
+ * @implements module:ui/toolbar/toolbarview~ToolbarBehavior
  */
 class StaticLayout {
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the {@link module:ui/toolbar/toolbarview~StaticLayout} toolbar
+	 * behavior.
+	 *
+	 * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar this behavior
+	 * is added to.
 	 */
 	constructor( view ) {
 		const bind = view.bindTemplate;
@@ -363,7 +367,7 @@ class StaticLayout {
 }
 
 /**
- * A toolbar feature that makes its items respond to the changes in the geometry.
+ * A toolbar behavior that makes its items respond to the changes in the geometry.
  *
  * In a nutshell, it groups {@link module:ui/toolbar/toolbarview~ToolbarView#items}
  * that do not fit into visually into a single row of the toolbar (due to limited space).
@@ -379,11 +383,15 @@ class StaticLayout {
  *	└───────────────────────────────────────────────────────────────────────────────────────────────┘
  *
  * @private
- * @implements module:ui/toolbar/toolbarview~ToolbarFeature
+ * @implements module:ui/toolbar/toolbarview~ToolbarBehavior
  */
 class DynamicGrouping {
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the {@link module:ui/toolbar/toolbarview~DynamicGrouping} toolbar
+	 * behavior.
+	 *
+	 * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar this behavior
+	 * is added to.
 	 */
 	constructor( view ) {
 		/**
@@ -545,7 +553,10 @@ class DynamicGrouping {
 	}
 
 	/**
-	 * @inheritDoc
+	 * Enables dynamic items grouping based on the dimensions of the toolbar.
+	 *
+	 * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar this behavior
+	 * is added to.
 	 */
 	render( view ) {
 		this.viewElement = view.element;
@@ -554,7 +565,7 @@ class DynamicGrouping {
 	}
 
 	/**
-	 * @inheritDoc
+	 * Cleans up the internals used by this behavior.
 	 */
 	destroy() {
 		// The dropdown may not be in ToolbarView#children at the moment of toolbar destruction
@@ -780,27 +791,26 @@ class DynamicGrouping {
  */
 
 /**
- * A class interface defining a (sub–)feature of the {@link module:ui/toolbar/toolbarview~ToolbarView}.
+ * A class interface defining a behavior of the {@link module:ui/toolbar/toolbarview~ToolbarView}.
  *
- * Toolbar features extend its look and behavior and have an impact on the
+ * Toolbar behaviors extend its look and functionality and have an impact on the
  * {@link module:ui/toolbar/toolbarview~ToolbarView#element} template or
  * {@link module:ui/toolbar/toolbarview~ToolbarView#render rendering}. They can be enabled
  * conditionally, e.g. depending on the configuration of the toolbar.
  *
  * @private
- * @interface module:ui/toolbar/toolbarview~ToolbarFeature
+ * @interface module:ui/toolbar/toolbarview~ToolbarBehavior
  */
 
 /**
- * Creates a new toolbar feature instance.
+ * Creates a new toolbar behavior instance.
  *
  * The instance is created in the {@link module:ui/toolbar/toolbarview~ToolbarView#constructor} of the toolbar.
  * This is the right place to extend the {@link module:ui/toolbar/toolbarview~ToolbarView#template} of
  * the toolbar, define extra toolbar properties, etc..
  *
  * @method #constructor
- * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar this feature.
- * is added to.
+ * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar this behavior is added to.
  */
 
 /**
@@ -815,7 +825,7 @@ class DynamicGrouping {
 
 /**
  * A method called after the toolbar has been {@link module:ui/toolbar/toolbarview~ToolbarView#destroy destroyed}.
- * It allows cleaning up after the toolbar feature, for instance, this is the right place to detach
+ * It allows cleaning up after the toolbar behavior, for instance, this is the right place to detach
  * event listeners, free up references, etc..
  *
  * @readonly

+ 35 - 35
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -95,8 +95,8 @@ describe( 'ToolbarView', () => {
 			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
 
-		it( 'creates #_feature', () => {
-			expect( view._feature ).to.be.an.instanceOf( Object );
+		it( 'creates #_behavior', () => {
+			expect( view._behavior ).to.be.an( 'object' );
 		} );
 	} );
 
@@ -293,13 +293,13 @@ describe( 'ToolbarView', () => {
 			} );
 		} );
 
-		it( 'calls _feature#render()', () => {
+		it( 'calls _behavior#render()', () => {
 			const view = new ToolbarView( locale );
-			sinon.spy( view._feature, 'render' );
+			sinon.spy( view._behavior, 'render' );
 
 			view.render();
-			sinon.assert.calledOnce( view._feature.render );
-			sinon.assert.calledWithExactly( view._feature.render, view );
+			sinon.assert.calledOnce( view._behavior.render );
+			sinon.assert.calledWithExactly( view._behavior.render, view );
 
 			view.destroy();
 		} );
@@ -307,18 +307,18 @@ describe( 'ToolbarView', () => {
 
 	describe( 'destroy()', () => {
 		it( 'destroys the feature', () => {
-			sinon.spy( view._feature, 'destroy' );
+			sinon.spy( view._behavior, 'destroy' );
 
 			view.destroy();
 
-			sinon.assert.calledOnce( view._feature.destroy );
+			sinon.assert.calledOnce( view._behavior.destroy );
 		} );
 
-		it( 'calls _feature#destroy()', () => {
-			sinon.spy( view._feature, 'destroy' );
+		it( 'calls _behavior#destroy()', () => {
+			sinon.spy( view._behavior, 'destroy' );
 
 			view.destroy();
-			sinon.assert.calledOnce( view._feature.destroy );
+			sinon.assert.calledOnce( view._behavior.destroy );
 		} );
 	} );
 
@@ -452,9 +452,9 @@ describe( 'ToolbarView', () => {
 			view.element.style.width = '200px';
 			document.body.appendChild( view.element );
 
-			groupedItems = view._feature.groupedItems;
-			ungroupedItems = view._feature.ungroupedItems;
-			groupedItemsDropdown = view._feature.groupedItemsDropdown;
+			groupedItems = view._behavior.groupedItems;
+			ungroupedItems = view._behavior.ungroupedItems;
+			groupedItemsDropdown = view._behavior.groupedItemsDropdown;
 		} );
 
 		afterEach( () => {
@@ -469,7 +469,7 @@ describe( 'ToolbarView', () => {
 			} );
 
 			it( 'updates the UI as new #items are added', () => {
-				sinon.spy( view._feature, '_updateGrouping' );
+				sinon.spy( view._behavior, '_updateGrouping' );
 
 				const itemA = focusable();
 				const itemB = focusable();
@@ -481,7 +481,7 @@ describe( 'ToolbarView', () => {
 				view.items.add( itemA );
 				view.items.add( itemB );
 
-				sinon.assert.calledTwice( view._feature._updateGrouping );
+				sinon.assert.calledTwice( view._behavior._updateGrouping );
 
 				expect( ungroupedItems ).to.have.length( 2 );
 				expect( groupedItems ).to.have.length( 0 );
@@ -514,16 +514,16 @@ describe( 'ToolbarView', () => {
 				view.items.add( itemC );
 				view.items.add( itemD );
 
-				sinon.spy( view._feature, '_updateGrouping' );
+				sinon.spy( view._behavior, '_updateGrouping' );
 				view.items.remove( 2 );
 
 				expect( ungroupedItems.map( i => i ) ).to.have.ordered.members( [ itemA ] );
 				expect( groupedItems.map( i => i ) ).to.have.ordered.members( [ itemB, itemD ] );
 
-				sinon.assert.calledOnce( view._feature._updateGrouping );
+				sinon.assert.calledOnce( view._behavior._updateGrouping );
 
 				view.items.remove( 0 );
-				sinon.assert.calledTwice( view._feature._updateGrouping );
+				sinon.assert.calledTwice( view._behavior._updateGrouping );
 
 				expect( ungroupedItems.map( i => i ) ).to.have.ordered.members( [ itemB, itemD ] );
 			} );
@@ -565,8 +565,8 @@ describe( 'ToolbarView', () => {
 			view.element.style.width = '350px';
 
 			// Some grouped items cannot be ungrouped because there is not enough space and they will
-			// land back in #_feature.groupedItems after an attempt was made.
-			view._feature._updateGrouping();
+			// land back in #_behavior.groupedItems after an attempt was made.
+			view._behavior._updateGrouping();
 			expect( ungroupedItems.map( i => i ) ).to.have.ordered.members( [ itemA, itemB, itemC ] );
 			expect( groupedItems.map( i => i ) ).to.have.ordered.members( [ itemD ] );
 		} );
@@ -586,7 +586,7 @@ describe( 'ToolbarView', () => {
 			view.element.style.width = '350px';
 
 			// All grouped items will be ungrouped because they fit just alright in the main space.
-			view._feature._updateGrouping();
+			view._behavior._updateGrouping();
 			expect( ungroupedItems.map( i => i ) ).to.have.ordered.members( [ itemA, itemB, itemC ] );
 			expect( groupedItems ).to.have.length( 0 );
 			expect( view.children ).to.have.length( 1 );
@@ -610,8 +610,8 @@ describe( 'ToolbarView', () => {
 
 				view.render();
 
-				sinon.assert.calledOnce( view._feature.resizeObserver.observe );
-				sinon.assert.calledWithExactly( view._feature.resizeObserver.observe, view.element );
+				sinon.assert.calledOnce( view._behavior.resizeObserver.observe );
+				sinon.assert.calledWithExactly( view._behavior.resizeObserver.observe, view.element );
 
 				view.destroy();
 			} );
@@ -670,15 +670,15 @@ describe( 'ToolbarView', () => {
 				view.items.add( focusable() );
 				view.items.add( focusable() );
 
-				sinon.spy( view._feature, '_updateGrouping' );
+				sinon.spy( view._behavior, '_updateGrouping' );
 				view.element.style.width = '500px';
 
 				setTimeout( () => {
-					sinon.assert.calledOnce( view._feature._updateGrouping );
+					sinon.assert.calledOnce( view._behavior._updateGrouping );
 					view.element.style.height = '500px';
 
 					setTimeout( () => {
-						sinon.assert.calledOnce( view._feature._updateGrouping );
+						sinon.assert.calledOnce( view._behavior._updateGrouping );
 						done();
 					}, 100 );
 				}, 100 );
@@ -698,15 +698,15 @@ describe( 'ToolbarView', () => {
 					shouldGroupWhenFull: true
 				} );
 
-				testUtils.sinon.spy( view._feature, '_updateGrouping' );
+				testUtils.sinon.spy( view._behavior, '_updateGrouping' );
 
 				view.render();
 
-				view._feature.resizeObserver.callback( [
+				view._behavior.resizeObserver.callback( [
 					{ contentRect: { width: 42 } }
 				] );
 
-				sinon.assert.calledTwice( view._feature._updateGrouping );
+				sinon.assert.calledTwice( view._behavior._updateGrouping );
 
 				view.destroy();
 			} );
@@ -731,7 +731,7 @@ describe( 'ToolbarView', () => {
 				view.element.style.width = '500px';
 
 				// The dropdown hides; it does not belong to any collection but it still exist.
-				view._feature._updateGrouping();
+				view._behavior._updateGrouping();
 
 				view.destroy();
 				sinon.assert.calledOnce( groupedItemsDropdown.destroy );
@@ -750,10 +750,10 @@ describe( 'ToolbarView', () => {
 				view.items.add( itemC );
 				view.items.add( itemD );
 
-				sinon.spy( view._feature.resizeObserver, 'disconnect' );
+				sinon.spy( view._behavior.resizeObserver, 'disconnect' );
 
 				view.destroy();
-				sinon.assert.calledOnce( view._feature.resizeObserver.disconnect );
+				sinon.assert.calledOnce( view._behavior.resizeObserver.disconnect );
 			} );
 		} );
 
@@ -790,7 +790,7 @@ describe( 'ToolbarView', () => {
 				view.items.add( focusable() );
 				view.items.add( focusable() );
 
-				expect( view._feature.groupedItems ).to.have.length( 1 );
+				expect( view._behavior.groupedItems ).to.have.length( 1 );
 			} );
 
 			it( 'considers the left padding of the toolbar (RTL UI)', () => {
@@ -816,7 +816,7 @@ describe( 'ToolbarView', () => {
 				view.items.add( focusable() );
 				view.items.add( focusable() );
 
-				expect( view._feature.groupedItems ).to.have.length( 1 );
+				expect( view._behavior.groupedItems ).to.have.length( 1 );
 
 				view.destroy();
 				view.element.remove();