Przeglądaj źródła

Merge branch t/ckeditor5-ui/344

Internal: Aligned dropdowns usage to changed in the UI. See ckeditor/ckeditor5-ui#361.
Piotrek Koszuliński 8 lat temu
rodzic
commit
fb68c57b4f

+ 39 - 13
packages/ckeditor5-alignment/src/alignmentui.js

@@ -10,8 +10,8 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import Model from '@ckeditor/ckeditor5-ui/src/model';
-import createButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown';
+
+import { createDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
 import { commandNameFromOptionName } from './alignmentcommand';
 import { isSupported } from './alignmentediting';
@@ -83,21 +83,47 @@ export default class AlignmentUI extends Plugin {
 			.forEach( option => this._addButton( option ) );
 
 		componentFactory.add( 'alignmentDropdown', locale => {
-			const buttons = options.map( option => {
-				return componentFactory.create( commandNameFromOptionName( option ) );
-			} );
+			const dropdownView = createDropdown( locale );
 
-			const model = new Model( {
+			// Add existing alignment buttons to dropdown's toolbar.
+			const buttons = options.map( option => componentFactory.create( commandNameFromOptionName( option ) ) );
+			addToolbarToDropdown( dropdownView, buttons );
+
+			// Configure dropdown properties an behavior.
+			dropdownView.buttonView.set( {
 				label: t( 'Text alignment' ),
-				defaultIcon: alignLeftIcon,
-				withText: false,
-				isVertical: true,
-				tooltip: true,
-				toolbarClassName: 'ck-editor-toolbar',
-				buttons
+				tooltip: true
+			} );
+
+			dropdownView.toolbarView.isVertical = true;
+
+			dropdownView.extendTemplate( {
+				attributes: {
+					class: 'ck-alignment-dropdown'
+				}
 			} );
 
-			return createButtonDropdown( model, locale );
+			// The default icon is align left as we do not support RTL yet (see #3).
+			const defaultIcon = alignLeftIcon;
+
+			// Change icon to reflect current selection's alignment.
+			dropdownView.buttonView.bind( 'icon' ).toMany( buttons, 'isOn', ( ...areActive ) => {
+				// Get the index of an active button.
+				const index = areActive.findIndex( value => value );
+
+				// If none of the commands is active, display either defaultIcon or the first button's icon.
+				if ( index < 0 ) {
+					return defaultIcon;
+				}
+
+				// Return active button's icon.
+				return buttons[ index ].icon;
+			} );
+
+			// Enable button if any of the buttons is enabled.
+			dropdownView.bind( 'isEnabled' ).toMany( buttons, 'isEnabled', ( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled ) );
+
+			return dropdownView;
 		} );
 	}
 

+ 7 - 3
packages/ckeditor5-alignment/tests/alignmentui.js

@@ -209,19 +209,23 @@ describe( 'Alignment UI', () => {
 			dropdown = editor.ui.componentFactory.create( 'alignmentDropdown' );
 		} );
 
-		it( 'button has the base properties', () => {
+		it( '#buttonView has the base properties', () => {
 			const button = dropdown.buttonView;
 
 			expect( button ).to.have.property( 'label', 'Text alignment' );
 			expect( button ).to.have.property( 'icon' );
 			expect( button ).to.have.property( 'tooltip', true );
-			expect( button ).to.have.property( 'withText', false );
+		} );
+
+		it( 'should add custom CSS class to dropdown', () => {
+			dropdown.render();
+
+			expect( dropdown.element.classList.contains( 'ck-alignment-dropdown' ) ).to.be.true;
 		} );
 
 		it( '#toolbarView has the base properties', () => {
 			const toolbarView = dropdown.toolbarView;
 
-			expect( toolbarView ).to.have.property( 'className', 'ck-editor-toolbar' );
 			expect( toolbarView ).to.have.property( 'isVertical', true );
 		} );