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

Changed: update dropdowns to match the new API.

Maciej Gołaszewski 8 лет назад
Родитель
Сommit
3fdee0518a
1 измененных файлов с 13 добавлено и 24 удалено
  1. 13 24
      packages/ckeditor5-heading/src/heading.js

+ 13 - 24
packages/ckeditor5-heading/src/heading.js

@@ -11,10 +11,12 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import HeadingEngine from './headingengine';
 import HeadingEngine from './headingengine';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
-import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
+
+import { enableModelIfOneIsEnabled, getBindingTargets } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
 
 import '../theme/heading.css';
 import '../theme/heading.css';
+import { addDefaultBehavior, addListViewToDropdown, createSingleButtonDropdown } from '../../ckeditor5-ui/src/dropdown/utils';
 
 
 /**
 /**
  * The headings feature. It introduces the `headings` drop-down and the `heading1`-`headingN` commands which allow
  * The headings feature. It introduces the `headings` drop-down and the `heading1`-`headingN` commands which allow
@@ -74,16 +76,12 @@ export default class Heading extends Plugin {
 			tooltip: dropdownTooltip
 			tooltip: dropdownTooltip
 		} );
 		} );
 
 
-		dropdownModel.bind( 'isEnabled' ).to(
-			// Bind to #isEnabled of each command...
-			...getCommandsBindingTargets( commands, 'isEnabled' ),
-			// ...and set it true if any command #isEnabled is true.
-			( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
-		);
+		enableModelIfOneIsEnabled( dropdownModel, commands );
 
 
+		// TODO: might be unified as above but require a callback
 		dropdownModel.bind( 'label' ).to(
 		dropdownModel.bind( 'label' ).to(
 			// Bind to #value of each command...
 			// Bind to #value of each command...
-			...getCommandsBindingTargets( commands, 'value' ),
+			...getBindingTargets( commands, 'value' ),
 			// ...and chose the title of the first one which #value is true.
 			// ...and chose the title of the first one which #value is true.
 			( ...areActive ) => {
 			( ...areActive ) => {
 				const index = areActive.findIndex( value => value );
 				const index = areActive.findIndex( value => value );
@@ -95,9 +93,12 @@ export default class Heading extends Plugin {
 
 
 		// Register UI component.
 		// Register UI component.
 		editor.ui.componentFactory.add( 'headings', locale => {
 		editor.ui.componentFactory.add( 'headings', locale => {
-			const dropdown = createListDropdown( dropdownModel, locale );
+			const dropdownView = createSingleButtonDropdown( dropdownModel, locale );
+
+			addListViewToDropdown( dropdownView, dropdownModel, locale );
+			addDefaultBehavior( dropdownView );
 
 
-			dropdown.extendTemplate( {
+			dropdownView.extendTemplate( {
 				attributes: {
 				attributes: {
 					class: [
 					class: [
 						'ck-heading-dropdown'
 						'ck-heading-dropdown'
@@ -106,12 +107,12 @@ export default class Heading extends Plugin {
 			} );
 			} );
 
 
 			// Execute command when an item from the dropdown is selected.
 			// Execute command when an item from the dropdown is selected.
-			this.listenTo( dropdown, 'execute', evt => {
+			this.listenTo( dropdownView, 'execute', evt => {
 				editor.execute( evt.source.commandName );
 				editor.execute( evt.source.commandName );
 				editor.editing.view.focus();
 				editor.editing.view.focus();
 			} );
 			} );
 
 
-			return dropdown;
+			return dropdownView;
 		} );
 		} );
 	}
 	}
 
 
@@ -149,18 +150,6 @@ export default class Heading extends Plugin {
 	}
 	}
 }
 }
 
 
-// Returns an array of binding components for
-// {@link module:utils/observablemixin~Observable#bind} from a set of iterable
-// commands.
-//
-// @private
-// @param {Iterable.<module:core/command~Command>} commands
-// @param {String} attribute
-// @returns {Array.<String>}
-function getCommandsBindingTargets( commands, attribute ) {
-	return Array.prototype.concat( ...commands.map( c => [ c, attribute ] ) );
-}
-
 /**
 /**
  * The configuration of the heading feature. Introduced by the {@link module:heading/headingengine~HeadingEngine} feature.
  * The configuration of the heading feature. Introduced by the {@link module:heading/headingengine~HeadingEngine} feature.
  *
  *