Ver Fonte

Changed: Review `SplitButton#actionView` bindings.

Maciej Gołaszewski há 8 anos atrás
pai
commit
42fe68fb37

+ 62 - 2
packages/ckeditor5-ui/src/button/splitbuttonview.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module ui/button/buttonview
+ * @module ui/button/splitbuttonview
  */
 
 import View from '../view';
@@ -61,6 +61,15 @@ export default class SplitButtonView extends View {
 		 */
 		this.set( 'label' );
 
+		/**
+		 * (Optional) The keystroke associated with the button, i.e. <kbd>CTRL+B</kbd>,
+		 * in the string format compatible with {@link module:utils/keyboard}.
+		 *
+		 * @observable
+		 * @member {Boolean} #keystroke
+		 */
+		this.set( 'keystroke' );
+
 		/**
 		 * (Optional) An XML {@link module:ui/icon/iconview~IconView#content content} of the icon.
 		 * When defined, an {@link #iconView} will be added to the action button.
@@ -70,6 +79,44 @@ export default class SplitButtonView extends View {
 		 */
 		this.set( 'icon' );
 
+		/**
+		 * (Optional) Tooltip of the button, i.e. displayed when hovering the button with the mouse cursor.
+		 *
+		 * * If defined as a `Boolean` (e.g. `true`), then combination of `label` and `keystroke` will be set as a tooltip.
+		 * * If defined as a `String`, tooltip will equal the exact text of that `String`.
+		 * * If defined as a `Function`, `label` and `keystroke` will be passed to that function, which is to return
+		 * a string with the tooltip text.
+		 *
+		 *		const view = new ButtonView( locale );
+		 *		view.tooltip = ( label, keystroke ) => `A tooltip for ${ label } and ${ keystroke }.`
+		 *
+		 * @observable
+		 * @default false
+		 * @member {Boolean|String|Function} #tooltip
+		 */
+		this.set( 'tooltip' );
+
+		/**
+		 * Controls whether the button view is "on". It makes sense when a feature it represents
+		 * is currently active, e.g. a bold button is "on" when the selection is in the bold text.
+		 *
+		 * To disable the button, use {@link #isEnabled} instead.
+		 *
+		 * @observable
+		 * @member {Boolean} #isOn
+		 */
+		this.set( 'isOn', false );
+
+		/**
+		 * Controls whether the button view is enabled, i.e. it can be clicked and execute an action.
+		 *
+		 * To change the "on" state of the button, use {@link #isOn} instead.
+		 *
+		 * @observable
+		 * @member {Boolean} #isEnabled
+		 */
+		this.set( 'isEnabled', true );
+
 		/**
 		 * Collection of the child views inside of the split button {@link #element}.
 		 *
@@ -78,7 +125,20 @@ export default class SplitButtonView extends View {
 		 */
 		this.children = this.createCollection();
 
+		/**
+		 * A main button of split button.
+		 *
+		 * @readonly
+		 * @member {module:ui/button/buttonview~ButtonView}
+		 */
 		this.actionView = this._createActionView();
+
+		/**
+		 * A secondary button of split button that opens dropdown.
+		 *
+		 * @readonly
+		 * @member {module:ui/button/buttonview~ButtonView}
+		 */
 		this.selectView = this._createSelectView();
 
 		/**
@@ -162,7 +222,7 @@ export default class SplitButtonView extends View {
 	_createActionView() {
 		const buttonView = new ButtonView();
 
-		buttonView.bind( 'icon', 'isEnabled', 'label' ).to( this );
+		buttonView.bind( 'icon', 'isEnabled', 'label', 'isOn', 'tooltip', 'keystroke' ).to( this );
 
 		buttonView.delegate( 'execute' ).to( this );
 

+ 1 - 15
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -79,8 +79,7 @@ export function createDropdown( locale ) {
  * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  */
 export function createSplitButtonDropdown( locale ) {
-	const buttonView = createSplitButtonForDropdown( locale );
-
+	const buttonView = new SplitButtonView( locale );
 	const dropdownView = prepareDropdown( locale, buttonView );
 
 	addDefaultBehavior( dropdownView );
@@ -200,19 +199,6 @@ function prepareDropdown( locale, buttonView ) {
 	return dropdownView;
 }
 
-// Creates a split button view instance to be used as a toolbar button that opens a dropdown.
-//
-// @param {module:utils/locale~Locale} locale The locale instance.
-// @returns {module:ui/button/splitbuttonview~SplitButtonView}
-function createSplitButtonForDropdown( locale ) {
-	const splitButtonView = new SplitButtonView( locale );
-
-	// TODO: Check if those binding are in good place (maybe move them to SplitButton) or add tests.
-	splitButtonView.actionView.bind( 'isOn', 'tooltip' ).to( splitButtonView );
-
-	return splitButtonView;
-}
-
 // Creates a default button view instance to be used as a toolbar button that opens a dropdown.
 //
 // @param {module:utils/locale~Locale} locale The locale instance.