8
0
Просмотр исходного кода

Changed: Bind dropdown item isActive to header commands.

Maciej Gołaszewski 7 лет назад
Родитель
Сommit
69645588ca
2 измененных файлов с 54 добавлено и 27 удалено
  1. 29 26
      packages/ckeditor5-table/src/tableui.js
  2. 25 1
      packages/ckeditor5-table/tests/tableui.js

+ 29 - 26
packages/ckeditor5-table/src/tableui.js

@@ -53,10 +53,10 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableColumn', locale => {
 			const options = [
-				{ command: 'setColumnHeader', label: 'Header column' },
-				{ command: 'insertColumnBefore', label: 'Insert column before' },
-				{ command: 'insertColumnAfter', label: 'Insert column after' },
-				{ command: 'removeColumn', label: 'Delete column' }
+				{ commandName: 'setColumnHeader', label: 'Header column', bindIsActive: true },
+				{ commandName: 'insertColumnBefore', label: 'Insert column before' },
+				{ commandName: 'insertColumnAfter', label: 'Insert column after' },
+				{ commandName: 'removeColumn', label: 'Delete column' }
 			];
 
 			return this._prepareDropdown( 'Column', tableColumnIcon, options, locale );
@@ -64,10 +64,10 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableRow', locale => {
 			const options = [
-				{ command: 'setRowHeader', label: 'Header row' },
-				{ command: 'insertRowBelow', label: 'Insert row below' },
-				{ command: 'insertRowAbove', label: 'Insert row above' },
-				{ command: 'removeRow', label: 'Delete row' }
+				{ commandName: 'setRowHeader', label: 'Header row', bindIsActive: true },
+				{ commandName: 'insertRowBelow', label: 'Insert row below' },
+				{ commandName: 'insertRowAbove', label: 'Insert row above' },
+				{ commandName: 'removeRow', label: 'Delete row' }
 			];
 
 			return this._prepareDropdown( 'Row', tableRowIcon, options, locale );
@@ -75,10 +75,10 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'mergeCell', locale => {
 			const options = [
-				{ command: 'mergeCellUp', label: 'Merge cell up' },
-				{ command: 'mergeCellRight', label: 'Merge cell right' },
-				{ command: 'mergeCellDown', label: 'Merge cell down' },
-				{ command: 'mergeCellLeft', label: 'Merge cell left' }
+				{ commandName: 'mergeCellUp', label: 'Merge cell up' },
+				{ commandName: 'mergeCellRight', label: 'Merge cell right' },
+				{ commandName: 'mergeCellDown', label: 'Merge cell down' },
+				{ commandName: 'mergeCellLeft', label: 'Merge cell left' }
 			];
 
 			return this._prepareDropdown( 'Merge cell', tableMergeCellIcon, options, locale );
@@ -86,8 +86,8 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'splitCell', locale => {
 			const options = [
-				{ command: 'splitCellVertically', label: 'Split cell vertically' },
-				{ command: 'splitCellHorizontally', label: 'Split cell horizontally' }
+				{ commandName: 'splitCellVertically', label: 'Split cell vertically' },
+				{ commandName: 'splitCellHorizontally', label: 'Split cell horizontally' }
 			];
 
 			return this._prepareDropdown( 'Split cell', tableSplitCellIcon, options, locale );
@@ -112,8 +112,8 @@ export default class TableUI extends Plugin {
 
 		const dropdownItems = new Collection();
 
-		for ( const { command, label } of options ) {
-			addListOption( command, label, editor, commands, dropdownItems );
+		for ( const option of options ) {
+			addListOption( option, editor, commands, dropdownItems );
 		}
 
 		addListToDropdown( dropdownView, dropdownItems );
@@ -137,16 +137,15 @@ export default class TableUI extends Plugin {
 	}
 }
 
-/**
- * Adds an option to a list view.
- *
- * @param {String} commandName
- * @param {String} label
- * @param {module:core/editor/editor~Editor} editor
- * @param {Array.<module:core/command~Command>} commands
- * @param {module:utils/collection~Collection} dropdownItems
- */
-function addListOption( commandName, label, editor, commands, dropdownItems ) {
+// Adds an option to a list view.
+//
+// @param {Object} commandName
+// @param {String} label
+// @param {module:core/editor/editor~Editor} editor
+// @param {Array.<module:core/command~Command>} commands
+// @param {module:utils/collection~Collection} dropdownItems
+function addListOption( option, editor, commands, dropdownItems ) {
+	const { commandName, label, bindIsActive } = option;
 	const command = editor.commands.get( commandName );
 
 	commands.push( command );
@@ -158,5 +157,9 @@ function addListOption( commandName, label, editor, commands, dropdownItems ) {
 
 	itemModel.bind( 'isEnabled' ).to( command );
 
+	if ( bindIsActive ) {
+		itemModel.bind( 'isActive' ).to( command, 'value' );
+	}
+
 	dropdownItems.add( itemModel );
 }

+ 25 - 1
packages/ckeditor5-table/tests/tableui.js

@@ -163,6 +163,18 @@ describe( 'TableUI', () => {
 			expect( spy.calledOnce ).to.be.true;
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setRowHeader' );
 		} );
+
+		it( 'should bind set header row command value to dropdown item', () => {
+			const items = dropdown.listView.items;
+
+			const setRowHeaderCommand = editor.commands.get( 'setRowHeader' );
+
+			setRowHeaderCommand.value = false;
+			expect( items.get( 0 ).isActive ).to.be.false;
+
+			setRowHeaderCommand.value = true;
+			expect( items.get( 0 ).isActive ).to.be.true;
+		} );
 	} );
 
 	describe( 'tableColumn dropdown', () => {
@@ -228,7 +240,7 @@ describe( 'TableUI', () => {
 			expect( dropdown.buttonView.isEnabled ).to.be.false;
 		} );
 
-		it( 'should focus view a+fter command execution', () => {
+		it( 'should focus view after command execution', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 
 			dropdown.listView.items.get( 0 ).fire( 'execute' );
@@ -244,6 +256,18 @@ describe( 'TableUI', () => {
 			expect( spy.calledOnce ).to.be.true;
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setColumnHeader' );
 		} );
+
+		it( 'should bind set header column command value to dropdown item', () => {
+			const items = dropdown.listView.items;
+
+			const setColumnHeaderCommand = editor.commands.get( 'setColumnHeader' );
+
+			setColumnHeaderCommand.value = false;
+			expect( items.get( 0 ).isActive ).to.be.false;
+
+			setColumnHeaderCommand.value = true;
+			expect( items.get( 0 ).isActive ).to.be.true;
+		} );
 	} );
 
 	describe( 'mergeCell dropdown', () => {