瀏覽代碼

Code refactoring in the TableCellPropertiesUI class.

Aleksander Nowodzinski 5 年之前
父節點
當前提交
6e83dd1b7c

+ 24 - 26
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js

@@ -19,11 +19,6 @@ import { repositionContextualBalloon, getBalloonCellPositionData } from '../ui/u
 const DEFAULT_BORDER_STYLE = 'none';
 const DEFAULT_HORIZONTAL_ALIGNMENT = 'left';
 const DEFAULT_VERTICAL_ALIGNMENT = 'middle';
-const CELL_PROPERTIES = [
-	'borderStyle', 'borderColor', 'borderWidth',
-	'padding', 'backgroundColor',
-	'horizontalAlignment', 'verticalAlignment',
-];
 
 /**
  * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
@@ -154,21 +149,16 @@ export default class TableCellPropertiesUI extends Plugin {
 		} );
 
 		// Create the "UI -> editor data" binding.
-		// This listener updates the editor data (via table commands) when any observable
+		// These listeners update the editor data (via table commands) when any observable
 		// property of the view has changed. This makes the view live, which means the changes are
 		// visible in the editing as soon as the user types or changes fields' values.
-		view.on( 'change', ( evt, propertyName, newValue ) => {
-			// Not all observable properties of the #view must be related to the cell editing.
-			// For instance, they can belong to some internal logic.
-			if ( !CELL_PROPERTIES.includes( propertyName ) ) {
-				return;
-			}
-
-			editor.execute( propertyNameToCommandName( propertyName ), {
-				value: newValue,
-				batch: this._undoStepBatch
-			} );
-		} );
+		view.on( 'change:borderStyle', this._getPropertyChangeCallback( 'tableCellBorderStyle' ) );
+		view.on( 'change:borderColor', this._getPropertyChangeCallback( 'tableCellBorderColor' ) );
+		view.on( 'change:borderWidth', this._getPropertyChangeCallback( 'tableCellBorderWidth' ) );
+		view.on( 'change:padding', this._getPropertyChangeCallback( 'tableCellPadding' ) );
+		view.on( 'change:backgroundColor', this._getPropertyChangeCallback( 'tableCellBackgroundColor' ) );
+		view.on( 'change:horizontalAlignment', this._getPropertyChangeCallback( 'tableCellHorizontalAlignment' ) );
+		view.on( 'change:verticalAlignment', this._getPropertyChangeCallback( 'tableCellVerticalAlignment' ) );
 
 		return view;
 	}
@@ -268,13 +258,21 @@ export default class TableCellPropertiesUI extends Plugin {
 	get _isViewInBalloon() {
 		return this._balloon.hasView( this.view );
 	}
-}
 
-// Translates view's properties into command names.
-//
-//		'borderWidth' -> 'tableCellBorderWidth'
-//
-// @param {String} propertyName
-function propertyNameToCommandName( propertyName ) {
-	return `tableCell${ propertyName[ 0 ].toUpperCase() }${ propertyName.slice( 1 ) }`;
+	/**
+	 * Creates a callback that when executed upon {@link #view view's} property change
+	 * executes a related editor command with the new property value.
+	 *
+	 * @private
+	 * @param {String} commandName
+	 * @returns {Function}
+	 */
+	_getPropertyChangeCallback( commandName ) {
+		return ( evt, propertyName, newValue ) => {
+			this.editor.execute( commandName, {
+				value: newValue,
+				batch: this._undoStepBatch
+			} );
+		};
+	}
 }

+ 4 - 2
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesui.js

@@ -213,7 +213,7 @@ describe( 'table cell properties', () => {
 					const spy = testUtils.sinon.stub( editor, 'execute' );
 
 					tableCellPropertiesUI._undoStepBatch = 'foo';
-					tableCellPropertiesView.fire( 'change', 'borderStyle', 'dotted' );
+					tableCellPropertiesView.borderStyle = 'dotted';
 
 					sinon.assert.calledOnce( spy );
 					sinon.assert.calledWithExactly( spy, 'tableCellBorderStyle', { value: 'dotted', batch: 'foo' } );
@@ -222,8 +222,10 @@ describe( 'table cell properties', () => {
 				it( 'should not affect the editor state if internal property has changed', () => {
 					const spy = testUtils.sinon.stub( editor, 'execute' );
 
+					tableCellPropertiesView.set( 'internalProp', 'foo' );
+
 					tableCellPropertiesUI._undoStepBatch = 'foo';
-					tableCellPropertiesView.fire( 'change', 'internalProp', 'foo' );
+					tableCellPropertiesView.internalProp = 'bar';
 
 					sinon.assert.notCalled( spy );
 				} );