Browse Source

Merge pull request #68 from ckeditor/t/48

t/48: Moved editor bindings to ckeditor5-ui-default.
Piotrek Koszuliński 9 years ago
parent
commit
7a213f88bd

+ 0 - 39
packages/ckeditor5-ui/src/bindings/stickytoolbar.js

@@ -1,39 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import mix from '../../utils/mix.js';
-import ToolbarBindingsMixin from './toolbarbindingsmixin.js';
-import BaseStickyToolbar from '../toolbar/sticky/stickytoolbar.js';
-
-/**
- * The editor sticky toolbar controller class.
- *
- * See {@link ui.stickyToolbar.StickyToolbar}.
- *
- * @memberOf ui.bindings
- * @extends ui.stickyToolbar.StickyToolbar
- */
-export default class StickyToolbar extends BaseStickyToolbar {
-	/**
-	 * Creates an instance of {@link ui.bindings.StickyToolbar} class.
-	 *
-	 * @param {ui.stickyToolbar.StickyToolbarModel} model Model of this sticky toolbar.
-	 * @param {ui.View} view View of this sticky toolbar.
-	 * @param {core.editor.Editor} editor
-	 */
-	constructor( model, view, editor ) {
-		super( model, view );
-
-		this.editor = editor;
-	}
-
-	init() {
-		this.bindToolbarItems();
-
-		return super.init();
-	}
-}
-
-mix( StickyToolbar, ToolbarBindingsMixin );

+ 0 - 39
packages/ckeditor5-ui/src/bindings/toolbar.js

@@ -1,39 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import mix from '../../utils/mix.js';
-import ToolbarBindingsMixin from './toolbarbindingsmixin.js';
-import BaseToolbar from '../toolbar/toolbar.js';
-
-/**
- * The editor toolbar controller class.
- *
- * See {@link ui.toolbar.Toolbar}.
- *
- * @memberOf ui.bindings
- * @extends ui.toolbar.Toolbar
- */
-export default class Toolbar extends BaseToolbar {
-	/**
-	 * Creates a new toolbar instance.
-	 *
-	 * @param {ui.Model} model
-	 * @param {ui.View} view
-	 * @param {core.editor.Editor} editor
-	 */
-	constructor( model, view, editor ) {
-		super( model, view );
-
-		this.editor = editor;
-	}
-
-	init() {
-		this.bindToolbarItems();
-
-		return super.init();
-	}
-}
-
-mix( Toolbar, ToolbarBindingsMixin );

+ 0 - 41
packages/ckeditor5-ui/src/bindings/toolbarbindingsmixin.js

@@ -1,41 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import Collection from '../../utils/collection.js';
-
-/**
- * Mixin that injects the common Toolbar–like bindings.
- *
- * See {@link ui.bindings.Toolbar}.
- *
- * @mixin ui.bindings.ToolbarBindingsMixin
- */
-const ToolbarBindingsMixin = {
-	/**
-	 * Adds items like buttons to the toolbar. Buttons are generated by the
-	 * {@link ui.editorUI.EditorUI#featureComponents} factory.
-	 */
-	bindToolbarItems() {
-		/**
-		 * Collection of toolbar items.
-		 *
-		 * @member {utils.Collection} ui.bindings.ToolbarBindingsMixin#items
-		 */
-		this.items = new Collection();
-
-		if ( this.model.config ) {
-			// Translate config to dynamic item collection.
-			for ( let name of this.model.config ) {
-				this.items.add( { name } );
-			}
-		}
-
-		this.collections.get( 'items' ).bind( this.items ).as( ( { name } ) => {
-			return this.editor.ui.featureComponents.create( name );
-		} );
-	}
-};
-
-export default ToolbarBindingsMixin;

+ 0 - 8
packages/ckeditor5-ui/src/editableui.jsdoc

@@ -1,8 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @namespace ui.editableUI
- */

+ 0 - 70
packages/ckeditor5-ui/src/editableui/editableui.js

@@ -1,70 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import Controller from '../controller.js';
-
-/**
- * The editable UI controller class. It glues the engine editable
- * {@link engine.view.RootEditableElement} with the UI.
- *
- *		// An instance of EditableUI.
- *		new EditableUI( editor, editable, new EditableUIView() );
- *
- * See {@link ui.editableUI.EditableUIView}.
- *
- * @memberOf ui.editableUI
- * @extends ui.Controller
- */
-export default class EditableUI extends Controller {
-	/**
-	 * Creates an instance of {@link ui.editableUI.EditableUI} class.
-	 *
-	 * @param {engine.view.RootEditableElement} editable The editable element (in the engine).
-	 * Also the {@link ui.editableUI.EditableUIModel} for editable UI instance.
-	 * @param {ui.View} [view] An instance of EditableUIView.
-	 * @param {core.editor.Editor} [editor] The editor instance.
-	 */
-	constructor( editable, view, editor ) {
-		super( editable, view );
-
-		/**
-		 * The editor instance.
-		 *
-		 * @readonly
-		 * @member {core.editor.Editor} ui.editableUI.EditableUI#editor
-		 */
-		this.editor = editor;
-
-		view.model.bind( 'isReadOnly', 'isFocused' ).to( editable );
-		view.model.set( 'name', editable.rootName );
-	}
-}
-
-/**
- * The editable UI {@link ui.Model} interface.
- *
- * @interface ui.editableUI.EditableUIModel
- */
-
-/**
- * Controls whether the editable is writable or not.
- *
- * @observable
- * @member {Boolean} ui.editableUI.EditableUIModel#isReadOnly
- */
-
-/**
- * Controls whether the editable is focused, i.e. the user is typing in it.
- *
- * @observable
- * @member {Boolean} ui.editableUI.EditableUIModel#isFocused
- */
-
-/**
- * The name of the editable UI.
- *
- * @observable
- * @member {String} ui.editableUI.EditableUIModel#name
- */

+ 0 - 105
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -1,105 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import View from '../view.js';
-import Template from '../template.js';
-
-/**
- * The editable UI view class.
- *
- * See {@link ui.editableUI.EditableUI}.
- *
- * @memberOf ui.editableUI
- * @extends ui.View
- */
-export default class EditableUIView extends View {
-	/**
-	 * Creates an instance of {@link ui.editableUI.EditableUIView} class.
-	 *
-	 * @param {utils.Locale} [locale] The {@link core.editor.Editor#locale editor's locale} instance.
-	 * @param {HTMLElement} [editableElement] The editable element. If not specified, this view
-	 * should create it. Otherwise, the existing element should be used.
-	 */
-	constructor( locale, editableElement ) {
-		super( locale );
-
-		const bind = this.bind;
-
-		if ( editableElement ) {
-			this.element = this.editableElement = editableElement;
-		}
-
-		this.template = new Template( {
-			tag: 'div',
-			attributes: {
-				class: [
-					bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ),
-					'ck-editor__editable'
-				],
-				contenteditable: bind.to( 'isReadOnly', value => !value ),
-			}
-		} );
-
-		/**
-		 * The element which is the main editable element (usually the one with `contentEditable="true"`).
-		 *
-		 * @readonly
-		 * @member {HTMLElement} ui.editableUI.EditableUIView#editableElement
-		 */
-
-		/**
-		 * Model of this editable UI view.
-		 *
-		 * @member {ui.editableUI.EditableUIViewModel} ui.editableUI.EditableUIView#model
-		 */
-	}
-
-	/**
-	 * Initializes the View by either applying the {@link template} to the existing
-	 * {@link editableElement} or assigns {@link element} as {@link editableElement}.
-	 */
-	init() {
-		if ( this.editableElement ) {
-			this.template.apply( this.editableElement );
-		} else {
-			this.editableElement = this.element;
-		}
-
-		super.init();
-	}
-
-	destroy() {
-		super.destroy();
-
-		this.editableElement.contentEditable = false;
-	}
-}
-
-/**
- * The editable UI view {@link ui.Model} interface.
- *
- * @interface ui.editableUI.EditableUIViewModel
- */
-
-/**
- * Controls whether the editable is writable or not.
- *
- * @observable
- * @member {Boolean} ui.editableUI.EditableUIViewModel#isReadOnly
- */
-
-/**
- * Controls whether the editable is focused, i.e. the user is typing in it.
- *
- * @observable
- * @member {Boolean} ui.editableUI.EditableUIViewModel#isFocused
- */
-
-/**
- * The name of the editable UI view.
- *
- * @observable
- * @member {String} ui.editableUI.EditableUIViewModel#name
- */

+ 0 - 44
packages/ckeditor5-ui/src/editableui/inline/inlineeditableuiview.js

@@ -1,44 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import EditableUIView from '../../editableui/editableuiview.js';
-import Template from '../../template.js';
-
-/**
- * The inline editable UI class implementing an inline {@link ui.editableUI.EditableUIView}.
- *
- * See {@link ui.editableUI.EditableUI}, {@link ui.editableUI.EditableUIView}.
- *
- * @memberOf ui.editableUI.inline
- * @extends ui.editableUI.EditableUIView
- */
-export default class InlineEditableUIView extends EditableUIView {
-	/**
-	 * Creates an instance of the InlineEditableUIView class.
-	 *
-	 * @param {utils.Locale} [locale] The {@link core.editor.Editor#locale editor's locale} instance.
-	 * @param {HTMLElement} [editableElement] The editable element. If not specified, the {@link EditableUIView}
-	 * should create it. Otherwise, the existing element should be used.
-	 */
-	constructor( locale, editableElement ) {
-		super( locale, editableElement );
-
-		const bind = this.bind;
-		const t = this.t;
-
-		const getLabel = ( value ) => {
-			return t( 'Rich Text Editor, %0', [ value ] );
-		};
-
-		Template.extend( this.template, {
-			attributes: {
-				role: 'textbox',
-				'aria-label': bind.to( 'name', getLabel ),
-				title: bind.to( 'name', getLabel ),
-				class: 'ck-editor__editable_inline'
-			}
-		} );
-	}
-}

+ 0 - 8
packages/ckeditor5-ui/src/editorui.jsdoc

@@ -1,8 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/**
- * @namespace ui.editorUI
- */

+ 0 - 54
packages/ckeditor5-ui/src/editorui/boxed/boxededitorui.js

@@ -1,54 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import EditorUI from '../../../ui/editorui/editorui.js';
-
-/**
- * The boxed editor UI controller class. This class controls an editor interface
- * consisting of a toolbar and an editable area, enclosed within a box.
- *
- *		// An instance of BoxedEditorUI.
- *		new BoxedEditorUI( editor );
- *
- * See {@link ui.editorUI.boxed.BoxedEditorUIView}.
- *
- * @member ui.editorUI.boxed
- * @extends ui.editorUI.EditorUI
- */
-export default class BoxedEditorUI extends EditorUI {
-	/**
-	 * Creates a boxed editor UI instance.
-	 *
-	 * @param {core.editor.Editor} editor
-	 */
-	constructor( editor ) {
-		super( editor );
-
-		this.addCollection( 'top' );
-		this.addCollection( 'main' );
-
-		const config = editor.config;
-
-		/**
-		 * The editor's width. Defaults to {@link core.editor.config.ui.width}.
-		 *
-		 * Note: a specific creator that was used must support this setting.
-		 *
-		 * @observable
-		 * @property {Number} width
-		 */
-		this.set( 'width', config.get( 'ui.width' ) );
-
-		/**
-		 * The editor's height. Defaults to {@link core.editor.config.ui.height}.
-		 *
-		 * Note: a specific creator that was used must support this setting.
-		 *
-		 * @observable
-		 * @property {Number} height
-		 */
-		this.set( 'height', config.get( 'ui.height' ) );
-	}
-}

+ 0 - 76
packages/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js

@@ -1,76 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import EditorUIView from '../../editorui/editoruiview.js';
-import uid from '../../../utils/uid.js';
-import Template from '../../template.js';
-
-/**
- * The boxed editor UI view class. This class represents an editor interface
- * consisting of a toolbar and an editable area, enclosed within a box.
- *
- * See {@link ui.editorUI.boxed.BoxedEditorUI}.
- *
- * @member ui.editorUI.boxed
- * @extends ui.editorUI.EditorUIView
- */
-export default class BoxedEditorUIView extends EditorUIView {
-	/**
-	 * @inheritDoc
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		const t = this.t;
-		const ariaLabelUid = uid();
-
-		this.template = new Template( {
-			tag: 'div',
-
-			attributes: {
-				class: [
-					'ck-reset',
-					'ck-editor',
-					'ck-rounded-corners'
-				],
-				role: 'application',
-				dir: 'ltr',
-				lang: locale.lang,
-				'aria-labelledby': `cke-editor__aria-label_${ ariaLabelUid }`
-			},
-
-			children: [
-				{
-					tag: 'span',
-					attributes: {
-						id: `cke-editor__aria-label_${ ariaLabelUid }`,
-						class: 'cke-voice-label',
-						children: [
-							// TODO: Editor name?
-							t( 'Rich Text Editor' )
-						]
-					}
-				},
-				{
-					tag: 'div',
-					attributes: {
-						class: 'ck-editor__top ck-reset_all',
-						role: 'presentation'
-					}
-				},
-				{
-					tag: 'div',
-					attributes: {
-						class: 'ck-editor__main',
-						role: 'presentation'
-					}
-				}
-			]
-		} );
-
-		this.register( 'top', '.ck-editor__top' );
-		this.register( 'main', '.ck-editor__main' );
-	}
-}

+ 0 - 82
packages/ckeditor5-ui/src/editorui/editorui.js

@@ -1,82 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import Controller from '../controller.js';
-import ComponentFactory from '../componentfactory.js';
-import ObservableMixin from '../../utils/observablemixin.js';
-import IconManager from '../iconmanager/iconmanager.js';
-import IconManagerView from '../iconmanager/iconmanagerview.js';
-import iconManagerModel from '../../../theme/iconmanagermodel.js';
-import mix from '../../utils/mix.js';
-
-/**
- * The editor UI controller class. It's a base class for the editor
- * main view controllers.
- *
- *		// An instance of EditorUI.
- *		new EditorUI( editor );
- *
- * See {@link ui.editorUI.EditorUIView}, {@link ui.iconManager.IconManager}.
- *
- * @memberOf ui.editorUI
- * @extends ui.Controller
- * @mixes utils.ObservaleMixin
- */
-export default class EditorUI extends Controller {
-	/**
-	 * Creates an instance of {@link ui.editorUI.EditorUI} class.
-	 *
-	 * @param {core.editor.Editor} editor
-	 */
-	constructor( editor ) {
-		super();
-
-		/**
-		 * @readonly
-		 * @member {core.editor.Editor} ui.editorUI.EditorUI#editor
-		 */
-		this.editor = editor;
-
-		/**
-		 * @readonly
-		 * @member {ui.ComponentFactory} ui.editorUI.EditorUI#featureComponents
-		 */
-		this.featureComponents = new ComponentFactory( editor );
-
-		this.addCollection( 'body' );
-	}
-
-	/**
-	 * Initializes EditorUI instance.
-	 *
-	 * @returns {Promise}
-	 */
-	init() {
-		this._setupIconManager();
-
-		return super.init();
-	}
-
-	/**
-	 * Injects the {@link ui.iconManager.IconManager} into DOM.
-	 *
-	 * @protected
-	 */
-	_setupIconManager() {
-		/**
-		 * Icons available in the UI.
-		 *
-		 * @readonly
-		 * @member {Array} ui.editorUI.EditorUI#icons
-		 */
-		this.icons = iconManagerModel.icons;
-
-		this.collections.get( 'body' ).add(
-			new IconManager( iconManagerModel, new IconManagerView() )
-		);
-	}
-}
-
-mix( EditorUI, ObservableMixin );

+ 0 - 62
packages/ckeditor5-ui/src/editorui/editoruiview.js

@@ -1,62 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals document */
-
-import View from '../view.js';
-import Template from '../template.js';
-
-/**
- * The editor UI view class. Base class for the editor main views.
- *
- * See {@link ui.editorUI.EditorUI}.
- *
- * @memberOf ui.editorUI
- * @extends ui.View
- */
-export default class EditorUIView extends View {
-	/**
-	 * Creates an instance of the editor UI view class.
-	 *
-	 * @param {utils.Locale} [locale] The {@link core.editor.Editor#locale editor's locale} instance.
-	 */
-	constructor( locale ) {
-		super( locale );
-
-		this._createBodyRegion();
-
-		/**
-		 * The element holding elements of the 'body' region.
-		 *
-		 * @private
-		 * @member {HTMLElement} ui.editorUI.EditorUIView#_bodyRegionContainer
-		 */
-	}
-
-	destroy() {
-		this._bodyRegionContainer.remove();
-		this._bodyRegionContainer = null;
-	}
-
-	/**
-	 * Creates and appends to `<body>` the 'body' region container.
-	 *
-	 * @private
-	 */
-	_createBodyRegion() {
-		const bodyElement = document.createElement( 'div' );
-		document.body.appendChild( bodyElement );
-
-		new Template( {
-			attributes: {
-				class: 'ck-body ck-reset_all'
-			}
-		} ).apply( bodyElement );
-
-		this._bodyRegionContainer = bodyElement;
-
-		this.register( 'body', () => bodyElement );
-	}
-}

+ 0 - 57
packages/ckeditor5-ui/src/iconmanager/iconmanager.js

@@ -1,57 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import Controller from '../controller.js';
-
-/**
- * The icon manager controller class. It provides SVG icons, which then can
- * be used by {@link ui.icon.Icon} component and similar.
- *
- *		const model = new Model( {
- *			icons: [ 'bold', 'italic', ... ],
- *			sprite: '...' // SVG sprite
- *		} );
- *
- *		// An instance of IconManager.
- *		new IconManager( model, new IconManagerView() );
- *
- * See {@link ui.iconManager.IconManagerView}.
- *
- * @memberOf ui.iconManager
- * @extends ui.Controller
- */
-export default class IconManager extends Controller {
-	/**
-	 * Creates an instance of {@link ui.iconManager.IconManager} class.
-	 *
-	 * @param {ui.iconManager.IconManagerModel} model Model of this IconManager.
-	 * @param {ui.View} view View of this IconManager.
-	 */
-	constructor( model, view ) {
-		super( model, view );
-
-		view.model.bind( 'sprite' ).to( model );
-	}
-}
-
-/**
- * The icon manager component {@link ui.Model} interface.
- *
- * @interface ui.iconManager.IconManagerModel
- */
-
-/**
- * An array of icon names which are brought by the {@link ui.iconManager.IconManagerModel#sprite}.
- *
- * @observable
- * @member {Array.<String>} ui.iconManager.IconManagerModel#icons
- */
-
-/**
- * The actual SVG (HTML) of the icons to be injected in DOM.
- *
- * @observable
- * @member {String} ui.iconManager.IconManagerModel#sprite
- */

+ 0 - 72
packages/ckeditor5-ui/src/iconmanager/iconmanagerview.js

@@ -1,72 +0,0 @@
-/**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-/* globals document */
-
-import View from '../view.js';
-import Template from '../template.js';
-
-/**
- * The icon manager view class.
- *
- * See {@link ui.iconManager.IconManager}.
- *
- * @memberOf ui.iconManager
- * @extends ui.View
- */
-export default class IconManagerView extends View {
-	constructor( locale ) {
-		super( locale );
-
-		this.template = new Template( {
-			tag: 'svg',
-			ns: 'http://www.w3.org/2000/svg',
-			attributes: {
-				class: 'ck-icon-manager__sprite'
-			}
-		} );
-
-		/**
-		 * Model of this icon manager view.
-		 *
-		 * @member {ui.iconManager.IconManagerViewModel} ui.iconManager.IconManagerView#model
-		 */
-	}
-
-	init() {
-		// Note: In MS Edge it's not enough to set:
-		//
-		//		this.element.innerHTML = this.model.sprite;
-		//
-		// because for some reason the browser won't parse the symbols string
-		// properly as svg content. Instead, an explicit parsing is needed (#55).
-		const tmp = document.createElement( 'div' );
-
-		tmp.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg">${ this.model.sprite }</svg>`;
-
-		const symbols = tmp.firstChild.childNodes;
-
-		// Pick symbols from the tmp and put them into icon manager.
-		// Note: MS Edge does not support forEach or Symbol.iterator for NodeList.
-		for ( let i = 0; i < symbols.length; ++i ) {
-			this.element.appendChild( document.importNode( symbols[ i ], true ) );
-		}
-
-		return super.init();
-	}
-}
-
-/**
- * The icon manager view {@link ui.Model} interface.
- *
- * @interface ui.iconManager.IconManagerViewModel
- */
-
-/**
- * The actual SVG (HTML) of the icons to be injected in DOM.
- *
- * @observable
- * @member {String} ui.iconManager.IconManagerViewModel#sprite
- */