Browse Source

Docs: Updated dropdown framework guide.

Maciej Gołaszewski 7 years ago
parent
commit
458cd14716
1 changed files with 16 additions and 51 deletions
  1. 16 51
      packages/ckeditor5-ui/docs/framework/guides/dropdowns.md

+ 16 - 51
packages/ckeditor5-ui/docs/framework/guides/dropdowns.md

@@ -9,44 +9,30 @@ order: 30
 
 ```js
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import Model from '@ckeditor/ckeditor5-ui/src/model';
-
-import addToolbarToDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/addtoolbartodropdown';
-import closeDropdownOnBlur from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/closedropdownonblur';
-import closeDropdownOnExecute from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/closedropdownonexecute';
-import createDropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/createdropdownview';
-import createSplitButtonForDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/createsplitbuttonfordropdown';
-import enableModelIfOneIsEnabled from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/enablemodelifoneisenabled';
-import focusDropdownContentsOnArrows from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/focusdropdowncontentsonarrows';
-
-const model = new Model( {
-	icon: 'some SVG',
-	tooltip: 'My dropdown'
-} );
+import bindOneToMany from '@ckeditor/ckeditor5-ui/src/bindings/bindonetomany';
+import { addToolbarToDropdown, createSplitButtonDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
 buttons.push( new ButtonView() );
 buttons.push( componentFactory.create( 'someExistingButton' ) );
 
-model.set( 'buttons', buttons );
+const dropdownView = createSplitButtonDropdown( locale );
 
-const splitButtonView = createSplitButtonForDropdown( model, locale );
-const dropdownView = createDropdownView( model, splitButtonView, locale );
+dropdownView.set( {
+	icon: 'some SVG',
+	tooltip: 'My dropdown'
+} );
 
-// Customize dropdown
 
 // This will enable toolbar button when any of button in dropdown is enabled.
-enableModelIfOneIsEnabled( model, buttons );
+bindOneToMany( dropdownView, 'isEnabled', buttons, 'isEnabled',
+	( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
+);
 
 // Make this a dropdown with toolbar inside dropdown panel.
-addToolbarToDropdown( dropdownView, model );
-
-// Add default behavior of dropdown
-closeDropdownOnBlur( dropdownView );
-closeDropdownOnExecute( dropdownView );
-focusDropdownContentsOnArrows( dropdownView );
+addToolbarToDropdown( dropdownView, buttons );
 
 // Execute current action from dropdown's split button action button.
-dropdownView.buttonView.on( 'execute', () => {
+dropdownView.on( 'execute', () => {
 	editor.execute( 'command', { value: model.commandValue } );
 	editor.editing.view.focus();
 } );
@@ -57,12 +43,7 @@ dropdownView.buttonView.on( 'execute', () => {
 ```js
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 
-import addListViewToDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/addlistviewtodropdown';
-import closeDropdownOnBlur from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/closedropdownonblur';
-import closeDropdownOnExecute from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/closedropdownonexecute';
-import createDropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/createdropdownview';
-import createButtonForDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/createbuttonfordropdown';
-import focusDropdownContentsOnArrows from '@ckeditor/ckeditor5-ui/src/dropdown/helpers/focusdropdowncontentsonarrows';
+import { addListViewToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
 const items = [
 	new Model( {
@@ -75,28 +56,12 @@ const items = [
 	} ),
 ];
 
-// Create dropdown model.
-const model = new Model( {
-	icon: 'some icon SVG',
-	items
-} );
-
-const buttonView = createButtonForDropdown( model, locale );
-const dropdownView = createDropdownView( model, buttonView, locale );
-
-// Customize dropdown
-
-// This will enable toolbar button when any of button in dropdown is enabled.
-
-addListViewToDropdown( dropdownView, model, locale );
+const dropdownView = createDropdown( locale );
 
-// Add default behavior of dropdown
-closeDropdownOnBlur( dropdownView );
-closeDropdownOnExecute( dropdownView );
-focusDropdownContentsOnArrows( dropdownView );
+addListViewToDropdown( dropdownView, items );
 
 // Execute command when an item from the dropdown is selected.
-this.listenTo( dropdownView, 'execute', evt => {
+dropdownView.on( 'execute', evt => {
 	editor.execute( evt.source.commandName );
 	editor.editing.view.focus();
 } );