Kaynağa Gözat

Docs: Update dropdown related documentation.

Maciej Gołaszewski 8 yıl önce
ebeveyn
işleme
d530cfa1f9

+ 11 - 3
packages/ckeditor5-ui/src/dropdown/button/createbuttondropdown.js

@@ -10,7 +10,7 @@
 import createDropdown from '../createdropdown';
 
 import ToolbarView from '../../toolbar/toolbarview';
-import { closeDropdownOnBlur, closeDropdownOnExecute, openDropdownOnArrows } from '../utils';
+import { closeDropdownOnBlur, closeDropdownOnExecute, focusDropdownContentsOnArrows } from '../utils';
 
 import '../../../theme/components/dropdown/buttondropdown.css';
 
@@ -20,7 +20,7 @@ import '../../../theme/components/dropdown/buttondropdown.css';
  *
  *		const buttons = [];
  *
- * 		buttons.push( new ButtonView() );
+ *		buttons.push( new ButtonView() );
  *		buttons.push( editor.ui.componentFactory.get( 'someButton' ) );
  *
  *		const model = new Model( {
@@ -104,11 +104,19 @@ export default function createButtonDropdown( model, buttonViews, locale ) {
 
 	closeDropdownOnBlur( dropdownView );
 	closeDropdownOnExecute( dropdownView, buttonGroupView.items );
-	openDropdownOnArrows( dropdownView, buttonGroupView );
+	focusDropdownContentsOnArrows( dropdownView, buttonGroupView );
 
 	return dropdownView;
 }
 
+// Returns an array of binding components for
+// {@link module:utils/observablemixin~Observable#bind} from a set of iterable
+// buttons.
+//
+// @private
+// @param {Iterable.<module:ui/button/buttonview~ButtonView>} buttons
+// @param {String} attribute
+// @returns {Array.<String>}
 function getBindingTargets( buttons, attribute ) {
 	return Array.prototype.concat( ...buttons.map( button => [ button, attribute ] ) );
 }

+ 2 - 2
packages/ckeditor5-ui/src/dropdown/list/createlistdropdown.js

@@ -10,7 +10,7 @@
 import ListView from '../../list/listview';
 import ListItemView from '../../list/listitemview';
 import createDropdown from '../createdropdown';
-import { closeDropdownOnBlur, closeDropdownOnExecute, openDropdownOnArrows } from '../utils';
+import { closeDropdownOnBlur, closeDropdownOnExecute, focusDropdownContentsOnArrows } from '../utils';
 
 /**
  * Creates an instance of {@link module:ui/dropdown/list/listdropdownview~ListDropdownView} class using
@@ -67,7 +67,7 @@ export default function createListDropdown( model, locale ) {
 
 	closeDropdownOnBlur( dropdownView );
 	closeDropdownOnExecute( dropdownView, listView.items );
-	openDropdownOnArrows( dropdownView, listView );
+	focusDropdownContentsOnArrows( dropdownView, listView );
 
 	return dropdownView;
 }

+ 20 - 3
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -9,7 +9,13 @@
 
 /* global document */
 
-export function openDropdownOnArrows( dropdownView, panelViewContents ) {
+/**
+ * Adds a behavior to a dropdownView that focuses dropdown panel view contents on keystrokes.
+ *
+ * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+ * @param panelViewContents
+ */
+export function focusDropdownContentsOnArrows( dropdownView, panelViewContents ) {
 	// If the dropdown panel is already open, the arrow down key should
 	// focus the first element in list.
 	dropdownView.keystrokes.set( 'arrowdown', ( data, cancel ) => {
@@ -29,9 +35,15 @@ export function openDropdownOnArrows( dropdownView, panelViewContents ) {
 	} );
 }
 
-export function closeDropdownOnExecute( dropdownView, items ) {
+/**
+ * Adds a behavior to a dropdownView that closes dropdown view on any view collection item's "execute" event.
+ *
+ * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+ * @param {module:ui/viewcollection~ViewCollection} viewCollection
+ */
+export function closeDropdownOnExecute( dropdownView, viewCollection ) {
 	// TODO: Delegate all events instead of just execute.
-	items.delegate( 'execute' ).to( dropdownView );
+	viewCollection.delegate( 'execute' ).to( dropdownView );
 
 	// Close the dropdown when one of the list items has been executed.
 	dropdownView.on( 'execute', () => {
@@ -39,6 +51,11 @@ export function closeDropdownOnExecute( dropdownView, items ) {
 	} );
 }
 
+/**
+ * Adds a behavior to a dropdownView that closes opened dropdown on user click outside the dropdown.
+ *
+ * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+ */
 export function closeDropdownOnBlur( dropdownView ) {
 	dropdownView.on( 'change:isOpen', ( evt, name, value ) => {
 		if ( value ) {