@ckeditor/ckeditor5-ui 35.2.1 → 35.3.1

package/src/list/listview.js

@@ -2,18 +2,14 @@
  * @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/list/listview
  */
-
 import View from '../view';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-
 import '../../theme/components/list/list.css';
-
 /**
  * The list view class.
  *
@@ -21,115 +17,98 @@ import '../../theme/components/list/list.css';
  * @implements module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable
  */
 export default class ListView extends View {
-	/**
-	 * @inheritDoc
-	 */
-	constructor() {
-		super();
-
-		/**
-		 * Collection of the child list views.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.items = this.createCollection();
-
-		/**
-		 * Tracks information about DOM focus in the list.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker}
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-		 *
-		 * @readonly
-		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
-		 */
-		this.keystrokes = new KeystrokeHandler();
-
-		/**
-		 * Helps cycling over focusable {@link #items} in the list.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/focuscycler~FocusCycler}
-		 */
-		this._focusCycler = new FocusCycler( {
-			focusables: this.items,
-			focusTracker: this.focusTracker,
-			keystrokeHandler: this.keystrokes,
-			actions: {
-				// Navigate list items backwards using the arrowup key.
-				focusPrevious: 'arrowup',
-
-				// Navigate toolbar items forwards using the arrowdown key.
-				focusNext: 'arrowdown'
-			}
-		} );
-
-		this.setTemplate( {
-			tag: 'ul',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-reset',
-					'ck-list'
-				]
-			},
-
-			children: this.items
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		// Items added before rendering should be known to the #focusTracker.
-		for ( const item of this.items ) {
-			this.focusTracker.add( item.element );
-		}
-
-		this.items.on( 'add', ( evt, item ) => {
-			this.focusTracker.add( item.element );
-		} );
-
-		this.items.on( 'remove', ( evt, item ) => {
-			this.focusTracker.remove( item.element );
-		} );
-
-		// Start listening for the keystrokes coming from #element.
-		this.keystrokes.listenTo( this.element );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	destroy() {
-		super.destroy();
-
-		this.focusTracker.destroy();
-		this.keystrokes.destroy();
-	}
-
-	/**
-	 * Focuses the first focusable in {@link #items}.
-	 */
-	focus() {
-		this._focusCycler.focusFirst();
-	}
-
-	/**
-	 * Focuses the last focusable in {@link #items}.
-	 */
-	focusLast() {
-		this._focusCycler.focusLast();
-	}
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        /**
+         * Collection of the child list views.
+         *
+         * @readonly
+         * @member {module:ui/viewcollection~ViewCollection}
+         */
+        this.items = this.createCollection();
+        /**
+         * Tracks information about DOM focus in the list.
+         *
+         * @readonly
+         * @member {module:utils/focustracker~FocusTracker}
+         */
+        this.focusTracker = new FocusTracker();
+        /**
+         * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+         *
+         * @readonly
+         * @member {module:utils/keystrokehandler~KeystrokeHandler}
+         */
+        this.keystrokes = new KeystrokeHandler();
+        /**
+         * Helps cycling over focusable {@link #items} in the list.
+         *
+         * @readonly
+         * @protected
+         * @member {module:ui/focuscycler~FocusCycler}
+         */
+        this._focusCycler = new FocusCycler({
+            focusables: this.items,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate list items backwards using the arrowup key.
+                focusPrevious: 'arrowup',
+                // Navigate toolbar items forwards using the arrowdown key.
+                focusNext: 'arrowdown'
+            }
+        });
+        this.setTemplate({
+            tag: 'ul',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-reset',
+                    'ck-list'
+                ]
+            },
+            children: this.items
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        // Items added before rendering should be known to the #focusTracker.
+        for (const item of this.items) {
+            this.focusTracker.add(item.element);
+        }
+        this.items.on('add', (evt, item) => {
+            this.focusTracker.add(item.element);
+        });
+        this.items.on('remove', (evt, item) => {
+            this.focusTracker.remove(item.element);
+        });
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+     * Focuses the first focusable in {@link #items}.
+     */
+    focus() {
+        this._focusCycler.focusFirst();
+    }
+    /**
+     * Focuses the last focusable in {@link #items}.
+     */
+    focusLast() {
+        this._focusCycler.focusLast();
+    }
 }

package/src/model.js

@@ -2,38 +2,32 @@
  * @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/model
  */
-
-import mix from '@ckeditor/ckeditor5-utils/src/mix';
-import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import { Observable } from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import { extend } from 'lodash-es';
-
 /**
  * The base MVC model class.
  *
  * @mixes module:utils/observablemixin~ObservableMixin
  */
-export default class Model {
-	/**
-	 * Creates a new Model instance.
-	 *
-	 * @param {Object} [attributes] The model state attributes to be defined during the instance creation.
-	 * @param {Object} [properties] The (out of state) properties to be appended to the instance during creation.
-	 */
-	constructor( attributes, properties ) {
-		// Extend this instance with the additional (out of state) properties.
-		if ( properties ) {
-			extend( this, properties );
-		}
-
-		// Initialize the attributes.
-		if ( attributes ) {
-			this.set( attributes );
-		}
-	}
+export default class Model extends Observable {
+    /**
+     * Creates a new Model instance.
+     *
+     * @param {Object} [attributes] The model state attributes to be defined during the instance creation.
+     * @param {Object} [properties] The (out of state) properties to be appended to the instance during creation.
+     */
+    constructor(attributes, properties) {
+        super();
+        // Extend this instance with the additional (out of state) properties.
+        if (properties) {
+            extend(this, properties);
+        }
+        // Initialize the attributes.
+        if (attributes) {
+            this.set(attributes);
+        }
+    }
 }
-
-mix( Model, ObservableMixin );

package/src/notification/notification.js

@@ -2,15 +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/notification/notification
  */
-
 /* globals window */
-
 import ContextPlugin from '@ckeditor/ckeditor5-core/src/contextplugin';
-
 /**
  * The Notification plugin.
  *
@@ -24,202 +20,155 @@ import ContextPlugin from '@ckeditor/ckeditor5-core/src/contextplugin';
  * @extends module:core/contextplugin~ContextPlugin
  */
 export default class Notification extends ContextPlugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'Notification';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		// Each unhandled and not stopped `show:warning` event is displayed as a system alert.
-		this.on( 'show:warning', ( evt, data ) => {
-			window.alert( data.message ); // eslint-disable-line no-alert
-		}, { priority: 'lowest' } );
-	}
-
-	/**
-	 * Shows a success notification.
-	 *
-	 * By default, it fires the {@link #event:show:success `show:success` event} with the given `data`. The event namespace can be extended
-	 * using the `data.namespace` option. For example:
-	 *
-	 * 		showSuccess( 'Image is uploaded.', {
-	 * 			namespace: 'upload:image'
-	 * 		} );
-	 *
-	 * will fire the `show:success:upload:image` event.
-	 *
-	 * You can provide the title of the notification:
-	 *
-	 *		showSuccess( 'Image is uploaded.', {
-	 *			title: 'Image upload success'
-	 *		} );
-	 *
-	 * @param {String} message The content of the notification.
-	 * @param {Object} [data={}] Additional data.
-	 * @param {String} [data.namespace] Additional event namespace.
-	 * @param {String} [data.title] The title of the notification.
-	 */
-	showSuccess( message, data = {} ) {
-		this._showNotification( {
-			message,
-			type: 'success',
-			namespace: data.namespace,
-			title: data.title
-		} );
-	}
-
-	/**
-	 * Shows an information notification.
-	 *
-	 * By default, it fires the {@link #event:show:info `show:info` event} with the given `data`. The event namespace can be extended
-	 * using the `data.namespace` option. For example:
-	 *
-	 * 		showInfo( 'Editor is offline.', {
-	 * 			namespace: 'editor:status'
-	 * 		} );
-	 *
-	 * will fire the `show:info:editor:status` event.
-	 *
-	 * You can provide the title of the notification:
-	 *
-	 *		showInfo( 'Editor is offline.', {
-	 *			title: 'Network information'
-	 *		} );
-	 *
-	 * @param {String} message The content of the notification.
-	 * @param {Object} [data={}] Additional data.
-	 * @param {String} [data.namespace] Additional event namespace.
-	 * @param {String} [data.title] The title of the notification.
-	 */
-	showInfo( message, data = {} ) {
-		this._showNotification( {
-			message,
-			type: 'info',
-			namespace: data.namespace,
-			title: data.title
-		} );
-	}
-
-	/**
-	 * Shows a warning notification.
-	 *
-	 * By default, it fires the {@link #event:show:warning `show:warning` event}
-	 * with the given `data`. The event namespace can be extended using the `data.namespace` option. For example:
-	 *
-	 * 		showWarning( 'Image upload error.', {
-	 * 			namespace: 'upload:image'
-	 * 		} );
-	 *
-	 * will fire the `show:warning:upload:image` event.
-	 *
-	 * You can provide the title of the notification:
-	 *
-	 *		showWarning( 'Image upload error.', {
-	 *			title: 'Upload failed'
-	 *		} );
-	 *
-	 * Note that each unhandled and not stopped `warning` notification will be displayed as a system alert.
-	 * The plugin responsible for displaying warnings should `stop()` the event to prevent displaying it as an alert:
-	 *
-	 * 		notifications.on( 'show:warning', ( evt, data ) => {
-	 * 			// Do something with the data.
-	 *
-	 * 			// Stop this event to prevent displaying it as an alert.
-	 * 			evt.stop();
-	 * 		} );
-	 *
-	 * You can attach many listeners to the same event and `stop()` this event in a listener with a low priority:
-	 *
-	 * 		notifications.on( 'show:warning', ( evt, data ) => {
-	 * 			// Show the warning in the UI, but do not stop it.
-	 * 		} );
-	 *
-	 * 		notifications.on( 'show:warning', ( evt, data ) => {
-	 * 			// Log the warning to some error tracker.
-	 *
-	 * 			// Stop this event to prevent displaying it as an alert.
-	 * 			evt.stop();
-	 * 		}, { priority: 'low' } );
-	 *
-	 * @param {String} message The content of the notification.
-	 * @param {Object} [data={}] Additional data.
-	 * @param {String} [data.namespace] Additional event namespace.
-	 * @param {String} [data.title] The title of the notification.
-	 */
-	showWarning( message, data = {} ) {
-		this._showNotification( {
-			message,
-			type: 'warning',
-			namespace: data.namespace,
-			title: data.title
-		} );
-	}
-
-	/**
-	 * Fires the `show` event with the specified type, namespace and message.
-	 *
-	 * @private
-	 * @param {Object} data The message data.
-	 * @param {String} data.message The content of the notification.
-	 * @param {'success'|'info'|'warning'} data.type The type of the message.
-	 * @param {String} [data.namespace] Additional event namespace.
-	 * @param {String} [data.title=''] The title of the notification.
-	 */
-	_showNotification( data ) {
-		const event = `show:${ data.type }` + ( data.namespace ? `:${ data.namespace }` : '' );
-
-		this.fire( event, {
-			message: data.message,
-			type: data.type,
-			title: data.title || ''
-		} );
-	}
-
-	/**
-	 * Fired when one of the `showSuccess()`, `showInfo()`, `showWarning()` methods is called.
-	 *
-	 * @event show
-	 * @param {Object} data The notification data.
-	 * @param {String} data.message The content of the notification.
-	 * @param {String} data.title The title of the notification.
-	 * @param {'success'|'info'|'warning'} data.type The type of the notification.
-	 */
-
-	/**
-	 * Fired when the `showSuccess()` method is called.
-	 *
-	 * @event show:success
-	 * @param {Object} data The notification data.
-	 * @param {String} data.message The content of the notification.
-	 * @param {String} data.title The title of the notification.
-	 * @param {'success'} data.type The type of the notification.
-	 */
-
-	/**
-	 * Fired when the `showInfo()` method is called.
-	 *
-	 * @event show:info
-	 * @param {Object} data The notification data.
-	 * @param {String} data.message The content of the notification.
-	 * @param {String} data.title The title of the notification.
-	 * @param {'info'} data.type The type of the notification.
-	 */
-
-	/**
-	 * Fired when the `showWarning()` method is called.
-	 *
-	 * When this event is not handled or stopped by `event.stop()`, the `data.message` of this event will
-	 * be automatically displayed as a system alert.
-	 *
-	 * @event show:warning
-	 * @param {Object} data The notification data.
-	 * @param {String} data.message The content of the notification.
-	 * @param {String} data.title The title of the notification.
-	 * @param {'warning'} data.type The type of the notification.
-	 */
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'Notification';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        // Each unhandled and not stopped `show:warning` event is displayed as a system alert.
+        this.on('show:warning', (evt, data) => {
+            window.alert(data.message); // eslint-disable-line no-alert
+        }, { priority: 'lowest' });
+    }
+    /**
+     * Shows a success notification.
+     *
+     * By default, it fires the {@link #event:show:success `show:success` event} with the given `data`. The event namespace can be extended
+     * using the `data.namespace` option. For example:
+     *
+     * 		showSuccess( 'Image is uploaded.', {
+     * 			namespace: 'upload:image'
+     * 		} );
+     *
+     * will fire the `show:success:upload:image` event.
+     *
+     * You can provide the title of the notification:
+     *
+     *		showSuccess( 'Image is uploaded.', {
+     *			title: 'Image upload success'
+     *		} );
+     *
+     * @param {String} message The content of the notification.
+     * @param {Object} [data={}] Additional data.
+     * @param {String} [data.namespace] Additional event namespace.
+     * @param {String} [data.title] The title of the notification.
+     */
+    showSuccess(message, data = {}) {
+        this._showNotification({
+            message,
+            type: 'success',
+            namespace: data.namespace,
+            title: data.title
+        });
+    }
+    /**
+     * Shows an information notification.
+     *
+     * By default, it fires the {@link #event:show:info `show:info` event} with the given `data`. The event namespace can be extended
+     * using the `data.namespace` option. For example:
+     *
+     * 		showInfo( 'Editor is offline.', {
+     * 			namespace: 'editor:status'
+     * 		} );
+     *
+     * will fire the `show:info:editor:status` event.
+     *
+     * You can provide the title of the notification:
+     *
+     *		showInfo( 'Editor is offline.', {
+     *			title: 'Network information'
+     *		} );
+     *
+     * @param {String} message The content of the notification.
+     * @param {Object} [data={}] Additional data.
+     * @param {String} [data.namespace] Additional event namespace.
+     * @param {String} [data.title] The title of the notification.
+     */
+    showInfo(message, data = {}) {
+        this._showNotification({
+            message,
+            type: 'info',
+            namespace: data.namespace,
+            title: data.title
+        });
+    }
+    /**
+     * Shows a warning notification.
+     *
+     * By default, it fires the {@link #event:show:warning `show:warning` event}
+     * with the given `data`. The event namespace can be extended using the `data.namespace` option. For example:
+     *
+     * 		showWarning( 'Image upload error.', {
+     * 			namespace: 'upload:image'
+     * 		} );
+     *
+     * will fire the `show:warning:upload:image` event.
+     *
+     * You can provide the title of the notification:
+     *
+     *		showWarning( 'Image upload error.', {
+     *			title: 'Upload failed'
+     *		} );
+     *
+     * Note that each unhandled and not stopped `warning` notification will be displayed as a system alert.
+     * The plugin responsible for displaying warnings should `stop()` the event to prevent displaying it as an alert:
+     *
+     * 		notifications.on( 'show:warning', ( evt, data ) => {
+     * 			// Do something with the data.
+     *
+     * 			// Stop this event to prevent displaying it as an alert.
+     * 			evt.stop();
+     * 		} );
+     *
+     * You can attach many listeners to the same event and `stop()` this event in a listener with a low priority:
+     *
+     * 		notifications.on( 'show:warning', ( evt, data ) => {
+     * 			// Show the warning in the UI, but do not stop it.
+     * 		} );
+     *
+     * 		notifications.on( 'show:warning', ( evt, data ) => {
+     * 			// Log the warning to some error tracker.
+     *
+     * 			// Stop this event to prevent displaying it as an alert.
+     * 			evt.stop();
+     * 		}, { priority: 'low' } );
+     *
+     * @param {String} message The content of the notification.
+     * @param {Object} [data={}] Additional data.
+     * @param {String} [data.namespace] Additional event namespace.
+     * @param {String} [data.title] The title of the notification.
+     */
+    showWarning(message, data = {}) {
+        this._showNotification({
+            message,
+            type: 'warning',
+            namespace: data.namespace,
+            title: data.title
+        });
+    }
+    /**
+     * Fires the `show` event with the specified type, namespace and message.
+     *
+     * @private
+     * @param {Object} data The message data.
+     * @param {String} data.message The content of the notification.
+     * @param {'success'|'info'|'warning'} data.type The type of the message.
+     * @param {String} [data.namespace] Additional event namespace.
+     * @param {String} [data.title=''] The title of the notification.
+     */
+    _showNotification(data) {
+        const event = data.namespace ?
+            `show:${data.type}:${data.namespace}` :
+            `show:${data.type}`;
+        this.fire(event, {
+            message: data.message,
+            type: data.type,
+            title: data.title || ''
+        });
+    }
 }