@ckeditor/ckeditor5-ui 35.2.1 → 35.3.0

package/src/button/buttonview.js

@@ -2,20 +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/button/buttonview
  */
-
 import View from '../view';
 import IconView from '../icon/iconview';
-
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import env from '@ckeditor/ckeditor5-utils/src/env';
-
 import '../../theme/components/button/button.css';
-
 /**
  * The button view class.
  *
@@ -36,258 +31,224 @@ import '../../theme/components/button/button.css';
  * @implements module:ui/button/button~Button
  */
 export default class ButtonView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-		const ariaLabelUid = uid();
-
-		// Implement the Button interface.
-		this.set( 'class' );
-		this.set( 'labelStyle' );
-		this.set( 'icon' );
-		this.set( 'isEnabled', true );
-		this.set( 'isOn', false );
-		this.set( 'isVisible', true );
-		this.set( 'isToggleable', false );
-		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 );
-		this.set( 'withKeystroke', false );
-
-		/**
-		 * Collection of the child views inside of the button {@link #element}.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		/**
-		 * Label of the button view. It is configurable using the {@link #label label attribute}.
-		 *
-		 * @readonly
-		 * @member {module:ui/view~View} #labelView
-		 */
-		this.labelView = this._createLabelView( ariaLabelUid );
-
-		/**
-		 * The icon view of the button. Will be added to {@link #children} when the
-		 * {@link #icon icon attribute} is defined.
-		 *
-		 * @readonly
-		 * @member {module:ui/icon/iconview~IconView} #iconView
-		 */
-		this.iconView = new IconView();
-
-		this.iconView.extendTemplate( {
-			attributes: {
-				class: 'ck-button__icon'
-			}
-		} );
-
-		/**
-		 * A view displaying the keystroke of the button next to the {@link #labelView label}.
-		 * Added to {@link #children} when the {@link #withKeystroke `withKeystroke` attribute}
-		 * is defined.
-		 *
-		 * @readonly
-		 * @member {module:ui/view/view~View} #keystrokeView
-		 */
-		this.keystrokeView = this._createKeystrokeView();
-
-		/**
-		 * Tooltip of the button bound to the template.
-		 *
-		 * @see #tooltip
-		 * @see #_getTooltipString
-		 * @private
-		 * @observable
-		 * @member {String|undefined} #_tooltipString
-		 */
-		this.bind( '_tooltipString' ).to(
-			this, 'tooltip',
-			this, 'label',
-			this, 'keystroke',
-			this._getTooltipString.bind( this )
-		);
-
-		const template = {
-			tag: 'button',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-button',
-					bind.to( 'class' ),
-					bind.if( 'isEnabled', 'ck-disabled', value => !value ),
-					bind.if( 'isVisible', 'ck-hidden', value => !value ),
-					bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
-					bind.if( 'withText', 'ck-button_with-text' ),
-					bind.if( 'withKeystroke', 'ck-button_with-keystroke' )
-				],
-				type: bind.to( 'type', value => value ? value : 'button' ),
-				tabindex: bind.to( 'tabindex' ),
-				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
-				'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
-				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false ),
-				'data-cke-tooltip-text': bind.to( '_tooltipString' ),
-				'data-cke-tooltip-position': bind.to( 'tooltipPosition' )
-			},
-
-			children: this.children,
-
-			on: {
-				click: bind.to( evt => {
-					// We can't make the button disabled using the disabled attribute, because it won't be focusable.
-					// Though, shouldn't this condition be moved to the button controller?
-					if ( this.isEnabled ) {
-						this.fire( 'execute' );
-					} else {
-						// Prevent the default when button is disabled, to block e.g.
-						// automatic form submitting. See ckeditor/ckeditor5-link#74.
-						evt.preventDefault();
-					}
-				} )
-			}
-		};
-
-		// On Safari we have to force the focus on a button on click as it's the only browser
-		// that doesn't do that automatically. See #12115.
-		if ( env.isSafari ) {
-			template.on.mousedown = bind.to( evt => {
-				this.focus();
-				evt.preventDefault();
-			} );
-		}
-
-		this.setTemplate( template );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		if ( this.icon ) {
-			this.iconView.bind( 'content' ).to( this, 'icon' );
-			this.children.add( this.iconView );
-		}
-
-		this.children.add( this.labelView );
-
-		if ( this.withKeystroke && this.keystroke ) {
-			this.children.add( this.keystrokeView );
-		}
-	}
-
-	/**
-	 * Focuses the {@link #element} of the button.
-	 */
-	focus() {
-		this.element.focus();
-	}
-
-	/**
-	 * Creates a label view instance and binds it with button attributes.
-	 *
-	 * @private
-	 * @param {String} ariaLabelUid The aria label UID.
-	 * @returns {module:ui/view~View}
-	 */
-	_createLabelView( ariaLabelUid ) {
-		const labelView = new View();
-		const bind = this.bindTemplate;
-
-		labelView.setTemplate( {
-			tag: 'span',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-button__label'
-				],
-				style: bind.to( 'labelStyle' ),
-				id: `ck-editor__aria-label_${ ariaLabelUid }`
-			},
-
-			children: [
-				{
-					text: this.bindTemplate.to( 'label' )
-				}
-			]
-		} );
-
-		return labelView;
-	}
-
-	/**
-	 * Creates a view that displays a keystroke next to a {@link #labelView label }
-	 * and binds it with button attributes.
-	 *
-	 * @private
-	 * @returns {module:ui/view~View}
-	 */
-	_createKeystrokeView() {
-		const keystrokeView = new View();
-
-		keystrokeView.setTemplate( {
-			tag: 'span',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-button__keystroke'
-				]
-			},
-
-			children: [
-				{
-					text: this.bindTemplate.to( 'keystroke', text => getEnvKeystrokeText( text ) )
-				}
-			]
-		} );
-
-		return keystrokeView;
-	}
-
-	/**
-	 * Gets the text for the tooltip from the combination of
-	 * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
-	 *
-	 * @private
-	 * @see #tooltip
-	 * @see #_tooltipString
-	 * @param {Boolean|String|Function} tooltip Button tooltip.
-	 * @param {String} label Button label.
-	 * @param {String} keystroke Button keystroke.
-	 * @returns {String}
-	 */
-	_getTooltipString( tooltip, label, keystroke ) {
-		if ( tooltip ) {
-			if ( typeof tooltip == 'string' ) {
-				return tooltip;
-			} else {
-				if ( keystroke ) {
-					keystroke = getEnvKeystrokeText( keystroke );
-				}
-
-				if ( tooltip instanceof Function ) {
-					return tooltip( label, keystroke );
-				} else {
-					return `${ label }${ keystroke ? ` (${ keystroke })` : '' }`;
-				}
-			}
-		}
-
-		return '';
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        const ariaLabelUid = uid();
+        // 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('isVisible', true);
+        this.set('isToggleable', false);
+        this.set('keystroke', undefined);
+        this.set('label', undefined);
+        this.set('tabindex', -1);
+        this.set('tooltip', false);
+        this.set('tooltipPosition', 's');
+        this.set('type', 'button');
+        this.set('withText', false);
+        this.set('withKeystroke', false);
+        /**
+         * Collection of the child views inside of the button {@link #element}.
+         *
+         * @readonly
+         * @member {module:ui/viewcollection~ViewCollection}
+         */
+        this.children = this.createCollection();
+        /**
+         * Label of the button view. It is configurable using the {@link #label label attribute}.
+         *
+         * @readonly
+         * @member {module:ui/view~View} #labelView
+         */
+        this.labelView = this._createLabelView(ariaLabelUid);
+        /**
+         * The icon view of the button. Will be added to {@link #children} when the
+         * {@link #icon icon attribute} is defined.
+         *
+         * @readonly
+         * @member {module:ui/icon/iconview~IconView} #iconView
+         */
+        this.iconView = new IconView();
+        this.iconView.extendTemplate({
+            attributes: {
+                class: 'ck-button__icon'
+            }
+        });
+        /**
+         * A view displaying the keystroke of the button next to the {@link #labelView label}.
+         * Added to {@link #children} when the {@link #withKeystroke `withKeystroke` attribute}
+         * is defined.
+         *
+         * @readonly
+         * @member {module:ui/view/view~View} #keystrokeView
+         */
+        this.keystrokeView = this._createKeystrokeView();
+        /**
+         * Tooltip of the button bound to the template.
+         *
+         * @see #tooltip
+         * @see #_getTooltipString
+         * @private
+         * @observable
+         * @member {String|undefined} #_tooltipString
+         */
+        this.bind('_tooltipString').to(this, 'tooltip', this, 'label', this, 'keystroke', this._getTooltipString.bind(this));
+        const template = {
+            tag: 'button',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-button',
+                    bind.to('class'),
+                    bind.if('isEnabled', 'ck-disabled', value => !value),
+                    bind.if('isVisible', 'ck-hidden', value => !value),
+                    bind.to('isOn', value => value ? 'ck-on' : 'ck-off'),
+                    bind.if('withText', 'ck-button_with-text'),
+                    bind.if('withKeystroke', 'ck-button_with-keystroke')
+                ],
+                type: bind.to('type', value => value ? value : 'button'),
+                tabindex: bind.to('tabindex'),
+                'aria-labelledby': `ck-editor__aria-label_${ariaLabelUid}`,
+                'aria-disabled': bind.if('isEnabled', true, value => !value),
+                'aria-pressed': bind.to('isOn', value => this.isToggleable ? String(!!value) : false),
+                'data-cke-tooltip-text': bind.to('_tooltipString'),
+                'data-cke-tooltip-position': bind.to('tooltipPosition')
+            },
+            children: this.children,
+            on: {
+                click: bind.to(evt => {
+                    // We can't make the button disabled using the disabled attribute, because it won't be focusable.
+                    // Though, shouldn't this condition be moved to the button controller?
+                    if (this.isEnabled) {
+                        this.fire('execute');
+                    }
+                    else {
+                        // Prevent the default when button is disabled, to block e.g.
+                        // automatic form submitting. See ckeditor/ckeditor5-link#74.
+                        evt.preventDefault();
+                    }
+                })
+            }
+        };
+        // On Safari we have to force the focus on a button on click as it's the only browser
+        // that doesn't do that automatically. See #12115.
+        if (env.isSafari) {
+            template.on.mousedown = bind.to(evt => {
+                this.focus();
+                evt.preventDefault();
+            });
+        }
+        this.setTemplate(template);
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        if (this.icon) {
+            this.iconView.bind('content').to(this, 'icon');
+            this.children.add(this.iconView);
+        }
+        this.children.add(this.labelView);
+        if (this.withKeystroke && this.keystroke) {
+            this.children.add(this.keystrokeView);
+        }
+    }
+    /**
+     * Focuses the {@link #element} of the button.
+     */
+    focus() {
+        this.element.focus();
+    }
+    /**
+     * Creates a label view instance and binds it with button attributes.
+     *
+     * @private
+     * @param {String} ariaLabelUid The aria label UID.
+     * @returns {module:ui/view~View}
+     */
+    _createLabelView(ariaLabelUid) {
+        const labelView = new View();
+        const bind = this.bindTemplate;
+        labelView.setTemplate({
+            tag: 'span',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-button__label'
+                ],
+                style: bind.to('labelStyle'),
+                id: `ck-editor__aria-label_${ariaLabelUid}`
+            },
+            children: [
+                {
+                    text: this.bindTemplate.to('label')
+                }
+            ]
+        });
+        return labelView;
+    }
+    /**
+     * Creates a view that displays a keystroke next to a {@link #labelView label }
+     * and binds it with button attributes.
+     *
+     * @private
+     * @returns {module:ui/view~View}
+     */
+    _createKeystrokeView() {
+        const keystrokeView = new View();
+        keystrokeView.setTemplate({
+            tag: 'span',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-button__keystroke'
+                ]
+            },
+            children: [
+                {
+                    text: this.bindTemplate.to('keystroke', text => getEnvKeystrokeText(text))
+                }
+            ]
+        });
+        return keystrokeView;
+    }
+    /**
+     * Gets the text for the tooltip from the combination of
+     * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
+     *
+     * @private
+     * @see #tooltip
+     * @see #_tooltipString
+     * @param {Boolean|String|Function} tooltip Button tooltip.
+     * @param {String} label Button label.
+     * @param {String} keystroke Button keystroke.
+     * @returns {String}
+     */
+    _getTooltipString(tooltip, label, keystroke) {
+        if (tooltip) {
+            if (typeof tooltip == 'string') {
+                return tooltip;
+            }
+            else {
+                if (keystroke) {
+                    keystroke = getEnvKeystrokeText(keystroke);
+                }
+                if (tooltip instanceof Function) {
+                    return tooltip(label, keystroke);
+                }
+                else {
+                    return `${label}${keystroke ? ` (${keystroke})` : ''}`;
+                }
+            }
+        }
+        return '';
+    }
 }

package/src/button/switchbuttonview.js

@@ -2,16 +2,12 @@
  * @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/button/switchbuttonview
  */
-
 import View from '../view';
 import ButtonView from './buttonview';
-
 import '../../theme/components/button/switchbutton.css';
-
 /**
  * The switch button view class.
  *
@@ -29,71 +25,60 @@ import '../../theme/components/button/switchbutton.css';
  * @extends module:ui/button/buttonview~ButtonView
  */
 export default class SwitchButtonView extends ButtonView {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		this.isToggleable = true;
-
-		/**
-		 * The toggle switch of the button.
-		 *
-		 * @readonly
-		 * @member {module:ui/view~View} #toggleSwitchView
-		 */
-		this.toggleSwitchView = this._createToggleView();
-
-		this.extendTemplate( {
-			attributes: {
-				class: 'ck-switchbutton'
-			}
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this.children.add( this.toggleSwitchView );
-	}
-
-	/**
-	 * Creates a toggle child view.
-	 *
-	 * @private
-	 * @returns {module:ui/view~View}
-	 */
-	_createToggleView() {
-		const toggleSwitchView = new View();
-
-		toggleSwitchView.setTemplate( {
-			tag: 'span',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-button__toggle'
-				]
-			},
-
-			children: [
-				{
-					tag: 'span',
-
-					attributes: {
-						class: [
-							'ck',
-							'ck-button__toggle__inner'
-						]
-					}
-				}
-			]
-		} );
-
-		return toggleSwitchView;
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        this.isToggleable = true;
+        /**
+         * The toggle switch of the button.
+         *
+         * @readonly
+         * @member {module:ui/view~View} #toggleSwitchView
+         */
+        this.toggleSwitchView = this._createToggleView();
+        this.extendTemplate({
+            attributes: {
+                class: 'ck-switchbutton'
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.children.add(this.toggleSwitchView);
+    }
+    /**
+     * Creates a toggle child view.
+     *
+     * @private
+     * @returns {module:ui/view~View}
+     */
+    _createToggleView() {
+        const toggleSwitchView = new View();
+        toggleSwitchView.setTemplate({
+            tag: 'span',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-button__toggle'
+                ]
+            },
+            children: [
+                {
+                    tag: 'span',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-button__toggle__inner'
+                        ]
+                    }
+                }
+            ]
+        });
+        return toggleSwitchView;
+    }
 }