@ckeditor/ckeditor5-ui 35.2.1 → 35.3.0

package/src/dropdown/button/splitbuttonview.js

@@ -2,21 +2,15 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module ui/dropdown/button/splitbuttonview
  */
-
 import View from '../../view';
 import ButtonView from '../../button/buttonview';
-
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-
 import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
-
 import '../../../theme/components/dropdown/splitbutton.css';
-
 /**
  * The split button view class.
  *
@@ -38,205 +32,163 @@ import '../../../theme/components/dropdown/splitbutton.css';
  * @extends module:ui/view~View
  */
 export default class SplitButtonView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		// Implement the Button interface.
-		this.set( 'class' );
-		this.set( 'icon' );
-		this.set( 'isEnabled', true );
-		this.set( 'isOn', false );
-		this.set( 'isToggleable', false );
-		this.set( 'isVisible', true );
-		this.set( 'keystroke' );
-		this.set( 'label' );
-		this.set( 'tabindex', -1 );
-		this.set( 'tooltip' );
-		this.set( 'tooltipPosition', 's' );
-		this.set( 'type', 'button' );
-		this.set( 'withText', false );
-
-		/**
-		 * Collection of the child views inside of the split button {@link #element}.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		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.arrowView = this._createArrowView();
-
-		/**
-		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
-		 * keystrokes of the split button:
-		 *
-		 * * <kbd>▶</kbd> moves focus to arrow view when action view is focused,
-		 * * <kbd>◀</kbd> moves focus to action view when arrow view is focused.
-		 *
-		 * @readonly
-		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
-		 */
-		this.keystrokes = new KeystrokeHandler();
-
-		/**
-		 * Tracks information about DOM focus in the dropdown.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker}
-		 */
-		this.focusTracker = new FocusTracker();
-
-		this.setTemplate( {
-			tag: 'div',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-splitbutton',
-					bind.to( 'class' ),
-					bind.if( 'isVisible', 'ck-hidden', value => !value ),
-					this.arrowView.bindTemplate.if( 'isOn', 'ck-splitbutton_open' )
-				]
-			},
-
-			children: this.children
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this.children.add( this.actionView );
-		this.children.add( this.arrowView );
-
-		this.focusTracker.add( this.actionView.element );
-		this.focusTracker.add( this.arrowView.element );
-
-		this.keystrokes.listenTo( this.element );
-
-		// Overrides toolbar focus cycling behavior.
-		this.keystrokes.set( 'arrowright', ( evt, cancel ) => {
-			if ( this.focusTracker.focusedElement === this.actionView.element ) {
-				this.arrowView.focus();
-
-				cancel();
-			}
-		} );
-
-		// Overrides toolbar focus cycling behavior.
-		this.keystrokes.set( 'arrowleft', ( evt, cancel ) => {
-			if ( this.focusTracker.focusedElement === this.arrowView.element ) {
-				this.actionView.focus();
-
-				cancel();
-			}
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	destroy() {
-		super.destroy();
-
-		this.focusTracker.destroy();
-		this.keystrokes.destroy();
-	}
-
-	/**
-	 * Focuses the {@link #actionView#element} of the action part of split button.
-	 */
-	focus() {
-		this.actionView.focus();
-	}
-
-	/**
-	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #actionView} and binds it with main split button
-	 * attributes.
-	 *
-	 * @private
-	 * @returns {module:ui/button/buttonview~ButtonView}
-	 */
-	_createActionView() {
-		const actionView = new ButtonView();
-
-		actionView.bind(
-			'icon',
-			'isEnabled',
-			'isOn',
-			'isToggleable',
-			'keystroke',
-			'label',
-			'tabindex',
-			'tooltip',
-			'tooltipPosition',
-			'type',
-			'withText'
-		).to( this );
-
-		actionView.extendTemplate( {
-			attributes: {
-				class: 'ck-splitbutton__action'
-			}
-		} );
-
-		actionView.delegate( 'execute' ).to( this );
-
-		return actionView;
-	}
-
-	/**
-	 * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #arrowView} and binds it with main split button
-	 * attributes.
-	 *
-	 * @private
-	 * @returns {module:ui/button/buttonview~ButtonView}
-	 */
-	_createArrowView() {
-		const arrowView = new ButtonView();
-		const bind = arrowView.bindTemplate;
-
-		arrowView.icon = dropdownArrowIcon;
-
-		arrowView.extendTemplate( {
-			attributes: {
-				class: [
-					'ck-splitbutton__arrow'
-				],
-				'data-cke-tooltip-disabled': bind.to( 'isOn' ),
-				'aria-haspopup': true,
-				'aria-expanded': bind.to( 'isOn', value => String( value ) )
-			}
-		} );
-
-		arrowView.bind( 'isEnabled' ).to( this );
-		arrowView.bind( 'label' ).to( this );
-		arrowView.bind( 'tooltip' ).to( this );
-
-		arrowView.delegate( 'execute' ).to( this, 'open' );
-
-		return arrowView;
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        // Implement the Button interface.
+        this.set('class', undefined);
+        this.set('labelStyle', undefined);
+        this.set('icon', undefined);
+        this.set('isEnabled', true);
+        this.set('isOn', false);
+        this.set('isToggleable', false);
+        this.set('isVisible', true);
+        this.set('keystroke', undefined);
+        this.set('withKeystroke', false);
+        this.set('label', undefined);
+        this.set('tabindex', -1);
+        this.set('tooltip', false);
+        this.set('tooltipPosition', 's');
+        this.set('type', 'button');
+        this.set('withText', false);
+        /**
+         * Collection of the child views inside of the split button {@link #element}.
+         *
+         * @readonly
+         * @member {module:ui/viewcollection~ViewCollection}
+         */
+        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.arrowView = this._createArrowView();
+        /**
+         * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
+         * keystrokes of the split button:
+         *
+         * * <kbd>▶</kbd> moves focus to arrow view when action view is focused,
+         * * <kbd>◀</kbd> moves focus to action view when arrow view is focused.
+         *
+         * @readonly
+         * @member {module:utils/keystrokehandler~KeystrokeHandler}
+         */
+        this.keystrokes = new KeystrokeHandler();
+        /**
+         * Tracks information about DOM focus in the dropdown.
+         *
+         * @readonly
+         * @member {module:utils/focustracker~FocusTracker}
+         */
+        this.focusTracker = new FocusTracker();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-splitbutton',
+                    bind.to('class'),
+                    bind.if('isVisible', 'ck-hidden', value => !value),
+                    this.arrowView.bindTemplate.if('isOn', 'ck-splitbutton_open')
+                ]
+            },
+            children: this.children
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.children.add(this.actionView);
+        this.children.add(this.arrowView);
+        this.focusTracker.add(this.actionView.element);
+        this.focusTracker.add(this.arrowView.element);
+        this.keystrokes.listenTo(this.element);
+        // Overrides toolbar focus cycling behavior.
+        this.keystrokes.set('arrowright', (evt, cancel) => {
+            if (this.focusTracker.focusedElement === this.actionView.element) {
+                this.arrowView.focus();
+                cancel();
+            }
+        });
+        // Overrides toolbar focus cycling behavior.
+        this.keystrokes.set('arrowleft', (evt, cancel) => {
+            if (this.focusTracker.focusedElement === this.arrowView.element) {
+                this.actionView.focus();
+                cancel();
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Focuses the {@link #actionView#element} of the action part of split button.
+     */
+    focus() {
+        this.actionView.focus();
+    }
+    /**
+     * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #actionView} and binds it with main split button
+     * attributes.
+     *
+     * @private
+     * @returns {module:ui/button/buttonview~ButtonView}
+     */
+    _createActionView() {
+        const actionView = new ButtonView();
+        actionView.bind('icon', 'isEnabled', 'isOn', 'isToggleable', 'keystroke', 'label', 'tabindex', 'tooltip', 'tooltipPosition', 'type', 'withText').to(this);
+        actionView.extendTemplate({
+            attributes: {
+                class: 'ck-splitbutton__action'
+            }
+        });
+        actionView.delegate('execute').to(this);
+        return actionView;
+    }
+    /**
+     * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #arrowView} and binds it with main split button
+     * attributes.
+     *
+     * @private
+     * @returns {module:ui/button/buttonview~ButtonView}
+     */
+    _createArrowView() {
+        const arrowView = new ButtonView();
+        const bind = arrowView.bindTemplate;
+        arrowView.icon = dropdownArrowIcon;
+        arrowView.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-splitbutton__arrow'
+                ],
+                'data-cke-tooltip-disabled': bind.to('isOn'),
+                'aria-haspopup': true,
+                'aria-expanded': bind.to('isOn', value => String(value))
+            }
+        });
+        arrowView.bind('isEnabled').to(this);
+        arrowView.bind('label').to(this);
+        arrowView.bind('tooltip').to(this);
+        arrowView.delegate('execute').to(this, 'open');
+        return arrowView;
+    }
 }

package/src/dropdown/dropdownpanelfocusable.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/dropdown/dropdownpanelview.js

@@ -2,14 +2,11 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module ui/dropdown/dropdownpanelview
  */
-
 import View from '../view';
 import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
-
 /**
  * The dropdown panel view class.
  *
@@ -18,113 +15,105 @@ import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  * @extends module:ui/view~View
  */
 export default class DropdownPanelView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * Controls whether the panel is visible.
-		 *
-		 * @observable
-		 * @member {Boolean} #isVisible
-		 */
-		this.set( 'isVisible', false );
-
-		/**
-		 * The position of the panel, relative to the parent.
-		 *
-		 * This property is reflected in the CSS class set to {@link #element} that controls
-		 * the position of the panel.
-		 *
-		 * @observable
-		 * @default 'se'
-		 * @member {'s'|'se'|'sw'|'sme'|'smw'|'n'|'ne'|'nw'|'nme'|'nmw'} #position
-		 */
-		this.set( 'position', 'se' );
-
-		/**
-		 * Collection of the child views in this panel.
-		 *
-		 * A common child type is the {@link module:ui/list/listview~ListView} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
-		 * See {@link module:ui/dropdown/utils~addListToDropdown} and
-		 * {@link module:ui/dropdown/utils~addToolbarToDropdown} to learn more about child views of dropdowns.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		this.setTemplate( {
-			tag: 'div',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-reset',
-					'ck-dropdown__panel',
-					bind.to( 'position', value => `ck-dropdown__panel_${ value }` ),
-					bind.if( 'isVisible', 'ck-dropdown__panel-visible' )
-				]
-			},
-
-			children: this.children,
-
-			on: {
-				// Drag and drop in the panel should not break the selection in the editor.
-				// https://github.com/ckeditor/ckeditor5-ui/issues/228
-				selectstart: bind.to( evt => evt.preventDefault() )
-			}
-		} );
-	}
-
-	/**
-	 * Focuses the first view in the {@link #children} collection.
-	 *
-	 * See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
-	 */
-	focus() {
-		if ( this.children.length ) {
-			if ( typeof this.children.first.focus === 'function' ) {
-				this.children.first.focus();
-			} else {
-				/**
-				 * The child view of a dropdown could not be focused because it is missing the `focus()` method.
-				 *
-				 * This warning appears when a dropdown {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open} and it
-				 * attempts to focus the {@link module:ui/dropdown/dropdownpanelview~DropdownPanelView#children first child} of its panel
-				 * but the child does not implement the
-				 * {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable focusable interface}.
-				 *
-				 * Focusing the content of a dropdown on open greatly improves the accessibility. Please make sure the view instance
-				 * provides the `focus()` method for the best user experience.
-				 *
-				 * @error ui-dropdown-panel-focus-child-missing-focus
-				 * @param {module:ui/view~View} childView
-				 * @param {module:ui/dropdown/dropdownpanelview~DropdownPanelView} dropdownPanel
-				 */
-				logWarning( 'ui-dropdown-panel-focus-child-missing-focus', { childView: this.children.first, dropdownPanel: this } );
-			}
-		}
-	}
-
-	/**
-	 * Focuses the view element or last item in view collection on opening dropdown's panel.
-	 *
-	 * See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
-	 */
-	focusLast() {
-		if ( this.children.length ) {
-			const lastChild = this.children.last;
-
-			if ( typeof lastChild.focusLast === 'function' ) {
-				lastChild.focusLast();
-			} else {
-				lastChild.focus();
-			}
-		}
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        /**
+         * Controls whether the panel is visible.
+         *
+         * @observable
+         * @member {Boolean} #isVisible
+         */
+        this.set('isVisible', false);
+        /**
+         * The position of the panel, relative to the parent.
+         *
+         * This property is reflected in the CSS class set to {@link #element} that controls
+         * the position of the panel.
+         *
+         * @observable
+         * @default 'se'
+         * @member {'s'|'se'|'sw'|'sme'|'smw'|'n'|'ne'|'nw'|'nme'|'nmw'} #position
+         */
+        this.set('position', 'se');
+        /**
+         * Collection of the child views in this panel.
+         *
+         * A common child type is the {@link module:ui/list/listview~ListView} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
+         * See {@link module:ui/dropdown/utils~addListToDropdown} and
+         * {@link module:ui/dropdown/utils~addToolbarToDropdown} to learn more about child views of dropdowns.
+         *
+         * @readonly
+         * @member {module:ui/viewcollection~ViewCollection}
+         */
+        this.children = this.createCollection();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-reset',
+                    'ck-dropdown__panel',
+                    bind.to('position', value => `ck-dropdown__panel_${value}`),
+                    bind.if('isVisible', 'ck-dropdown__panel-visible')
+                ]
+            },
+            children: this.children,
+            on: {
+                // Drag and drop in the panel should not break the selection in the editor.
+                // https://github.com/ckeditor/ckeditor5-ui/issues/228
+                selectstart: bind.to(evt => evt.preventDefault())
+            }
+        });
+    }
+    /**
+     * Focuses the first view in the {@link #children} collection.
+     *
+     * See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
+     */
+    focus() {
+        if (this.children.length) {
+            const firstChild = this.children.first;
+            if (typeof firstChild.focus === 'function') {
+                firstChild.focus();
+            }
+            else {
+                /**
+                 * The child view of a dropdown could not be focused because it is missing the `focus()` method.
+                 *
+                 * This warning appears when a dropdown {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open} and it
+                 * attempts to focus the {@link module:ui/dropdown/dropdownpanelview~DropdownPanelView#children first child} of its panel
+                 * but the child does not implement the
+                 * {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable focusable interface}.
+                 *
+                 * Focusing the content of a dropdown on open greatly improves the accessibility. Please make sure the view instance
+                 * provides the `focus()` method for the best user experience.
+                 *
+                 * @error ui-dropdown-panel-focus-child-missing-focus
+                 * @param {module:ui/view~View} childView
+                 * @param {module:ui/dropdown/dropdownpanelview~DropdownPanelView} dropdownPanel
+                 */
+                logWarning('ui-dropdown-panel-focus-child-missing-focus', { childView: this.children.first, dropdownPanel: this });
+            }
+        }
+    }
+    /**
+     * Focuses the view element or last item in view collection on opening dropdown's panel.
+     *
+     * See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
+     */
+    focusLast() {
+        if (this.children.length) {
+            const lastChild = this.children.last;
+            if (typeof lastChild.focusLast === 'function') {
+                lastChild.focusLast();
+            }
+            else {
+                lastChild.focus();
+            }
+        }
+    }
 }