| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /**
- * @module editor-classic/classiceditorui
- */
- import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
- import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
- import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
- /**
- * The classic editor UI class.
- */
- export default class ClassicEditorUI {
- /**
- * Creates an instance of the editor UI class.
- *
- * @param {module:core/editor/editor~Editor} editor The editor instance.
- * @param {module:ui/editorui/editoruiview~EditorUIView} view View of the ui.
- */
- constructor( editor, view ) {
- /**
- * Editor that the UI belongs to.
- *
- * @readonly
- * @member {module:core/editor/editor~Editor}
- */
- this.editor = editor;
- /**
- * View of the ui.
- *
- * @readonly
- * @member {module:ui/editorui/editoruiview~EditorUIView}
- */
- this.view = view;
- /**
- * Instance of the {@link module:ui/componentfactory~ComponentFactory}.
- *
- * @readonly
- * @member {module:ui/componentfactory~ComponentFactory}
- */
- this.componentFactory = new ComponentFactory( editor );
- /**
- * Keeps information about editor focus.
- *
- * @readonly
- * @member {module:utils/focustracker~FocusTracker}
- */
- this.focusTracker = new FocusTracker();
- /**
- * Instance of the {@link module:core/keystrokehandler~KeystrokeHandler}.
- * Unlike {@link core/editor/standardeditor~StandardEditor#keystrokes}, this
- * keystroke handler is focused on keystrokes associated exclusively with the
- * user interface, not edited content. It takes care of accessibility–related
- * keystrokes (i.e. focus the toolbar) and similar, leaving content
- * keystrokes (i.e. bold text, insert link) to aforementioned instance
- * in `StandardEditor`.
- *
- * @readonly
- * @member {module:core/keystrokehandler~KeystrokeHandler}
- */
- this.keystrokes = new KeystrokeHandler();
- // Set–up the view.
- view.set( 'width', editor.config.get( 'ui.width' ) );
- view.set( 'height', editor.config.get( 'ui.height' ) );
- // Set–up the toolbar.
- view.toolbar.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
- view.toolbar.limiterElement = view.element;
- // Setup the editable.
- const editingRoot = editor.editing.createRoot( 'div' );
- view.editable.bind( 'isReadOnly', 'isFocused' ).to( editingRoot );
- view.editable.name = editingRoot.rootName;
- this.focusTracker.add( view.editableElement );
- }
- /**
- * Initializes the UI.
- *
- * @returns {Promise} A Promise resolved when the initialization process is finished.
- */
- init() {
- const editor = this.editor;
- return this.view.init()
- .then( () => {
- const toolbarConfig = editor.config.get( 'toolbar' );
- const promises = [];
- if ( toolbarConfig ) {
- for ( let name of toolbarConfig ) {
- promises.push( this.view.toolbar.items.add( this.componentFactory.create( name ) ) );
- }
- }
- return Promise.all( promises );
- } )
- .then( () => {
- const toolbarFocusTracker = this.view.toolbar.focusTracker;
- // Because toolbar items can get focus, the overall state of
- // the toolbar must also be tracked.
- this.focusTracker.add( this.view.toolbar.element );
- // Listen on the keystrokes from the main UI.
- this.keystrokes.listenTo( this.view.element );
- // Listen on the keystrokes from the floating panels, toolbars and the such.
- this.keystrokes.listenTo( this.view._bodyCollectionContainer );
- // Focus the toolbar on the keystroke, if not already focused.
- this.keystrokes.set( 'alt + f10', ( data, cancel ) => {
- if ( this.focusTracker.isFocused && !toolbarFocusTracker.isFocused ) {
- this.view.toolbar.focus();
- cancel();
- }
- } );
- // Blur the toolbar and bring the focus back to editable on the keystroke.
- this.keystrokes.set( 'esc', ( data, cancel ) => {
- if ( toolbarFocusTracker.isFocused ) {
- editor.editing.view.focus();
- cancel();
- }
- } );
- } );
- }
- /**
- * Destroys the UI.
- *
- * @returns {Promise} A Promise resolved when the destruction process is finished.
- */
- destroy() {
- return this.view.destroy();
- }
- }
|