Sfoglia il codice sorgente

Changed: Bind dropdown behavior to `DropdownView` instead of `Model`.

Maciej Gołaszewski 8 anni fa
parent
commit
997ce9843f
1 ha cambiato i file con 11 aggiunte e 12 eliminazioni
  1. 11 12
      packages/ckeditor5-alignment/src/alignmentui.js

+ 11 - 12
packages/ckeditor5-alignment/src/alignmentui.js

@@ -10,7 +10,6 @@
 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 bindOneToMany from '@ckeditor/ckeditor5-ui/src/bindings/bindonetomany';
 import { createDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
@@ -85,11 +84,9 @@ 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 dropdownModel = new Model( {
+			dropdownView.set( {
 				label: t( 'Text alignment' ),
 				defaultIcon: alignLeftIcon,
 				withText: false,
@@ -97,28 +94,30 @@ export default class AlignmentUI extends Plugin {
 				tooltip: true
 			} );
 
+			const buttons = options.map( option => {
+				return componentFactory.create( commandNameFromOptionName( option ) );
+			} );
+
 			// TODO: binding with callback as in headings
 			// Add specialised behavior
 
 			// Change icon upon selection
-			bindOneToMany( dropdownModel, 'icon', buttons, 'isOn', ( ...areActive ) => {
+			bindOneToMany( dropdownView, 'icon', buttons, 'isOn', ( ...areActive ) => {
 				const index = areActive.findIndex( value => value );
 
 				// If none of the commands is active, display either defaultIcon or first button icon.
-				if ( index < 0 && dropdownModel.defaultIcon ) {
-					return dropdownModel.defaultIcon;
+				if ( index < 0 && dropdownView.defaultIcon ) {
+					return dropdownView.defaultIcon;
 				}
 
 				return buttons[ index < 0 ? 0 : index ].icon;
 			} );
 
-			bindOneToMany( dropdownModel, 'isEnabled', buttons, 'isEnabled',
+			bindOneToMany( dropdownView, 'isEnabled', buttons, 'isEnabled',
 				( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
 			);
 
-			const dropdownView = createDropdown( dropdownModel, locale );
-
-			addToolbarToDropdown( dropdownView, buttons, dropdownModel );
+			addToolbarToDropdown( dropdownView, buttons );
 
 			return dropdownView;
 		} );