2018-06-17 16:07:19 +00:00
|
|
|
/**
|
|
|
|
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
|
|
|
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
2014-04-11 20:05:45 +00:00
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Contains UI features related to an editor instance.
|
|
|
|
*
|
|
|
|
* @class
|
|
|
|
* @mixins CKEDITOR.event
|
2018-06-17 16:07:19 +00:00
|
|
|
* @constructor Creates a `ui` class instance.
|
2014-04-11 20:05:45 +00:00
|
|
|
* @param {CKEDITOR.editor} editor The editor instance.
|
|
|
|
*/
|
|
|
|
CKEDITOR.ui = function( editor ) {
|
|
|
|
if ( editor.ui )
|
|
|
|
return editor.ui;
|
|
|
|
|
|
|
|
this.items = {};
|
|
|
|
this.instances = {};
|
|
|
|
this.editor = editor;
|
|
|
|
|
|
|
|
/**
|
2018-06-17 16:07:19 +00:00
|
|
|
* Object used to store private stuff.
|
2014-04-11 20:05:45 +00:00
|
|
|
*
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
this._ = {
|
|
|
|
handlers: {}
|
|
|
|
};
|
|
|
|
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
|
|
|
|
// PACKAGER_RENAME( CKEDITOR.ui )
|
|
|
|
|
|
|
|
CKEDITOR.ui.prototype = {
|
|
|
|
/**
|
|
|
|
* Adds a UI item to the items collection. These items can be later used in
|
|
|
|
* the interface.
|
|
|
|
*
|
|
|
|
* // Add a new button named 'MyBold'.
|
|
|
|
* editorInstance.ui.add( 'MyBold', CKEDITOR.UI_BUTTON, {
|
|
|
|
* label: 'My Bold',
|
|
|
|
* command: 'bold'
|
|
|
|
* } );
|
|
|
|
*
|
|
|
|
* @param {String} name The UI item name.
|
|
|
|
* @param {Object} type The item type.
|
|
|
|
* @param {Object} definition The item definition. The properties of this
|
|
|
|
* object depend on the item type.
|
|
|
|
*/
|
|
|
|
add: function( name, type, definition ) {
|
|
|
|
// Compensate the unique name of this ui item to definition.
|
|
|
|
definition.name = name.toLowerCase();
|
|
|
|
|
|
|
|
var item = this.items[ name ] = {
|
|
|
|
type: type,
|
|
|
|
// The name of {@link CKEDITOR.command} which associate with this UI.
|
|
|
|
command: definition.command || null,
|
|
|
|
args: Array.prototype.slice.call( arguments, 2 )
|
|
|
|
};
|
|
|
|
|
|
|
|
CKEDITOR.tools.extend( item, definition );
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2018-06-17 16:07:19 +00:00
|
|
|
* Retrieves the created UI objects by name.
|
2014-04-11 20:05:45 +00:00
|
|
|
*
|
|
|
|
* @param {String} name The name of the UI definition.
|
|
|
|
*/
|
|
|
|
get: function( name ) {
|
|
|
|
return this.instances[ name ];
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Gets a UI object.
|
|
|
|
*
|
2018-06-17 16:07:19 +00:00
|
|
|
* @param {String} name The UI item name.
|
2014-04-11 20:05:45 +00:00
|
|
|
* @returns {Object} The UI element.
|
|
|
|
*/
|
|
|
|
create: function( name ) {
|
|
|
|
var item = this.items[ name ],
|
|
|
|
handler = item && this._.handlers[ item.type ],
|
|
|
|
command = item && item.command && this.editor.getCommand( item.command );
|
|
|
|
|
|
|
|
var result = handler && handler.create.apply( this, item.args );
|
|
|
|
|
|
|
|
this.instances[ name ] = result;
|
|
|
|
|
|
|
|
// Add reference inside command object.
|
|
|
|
if ( command )
|
|
|
|
command.uiItems.push( result );
|
|
|
|
|
|
|
|
if ( result && !result.type )
|
|
|
|
result.type = item.type;
|
|
|
|
|
|
|
|
return result;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Adds a handler for a UI item type. The handler is responsible for
|
2018-06-17 16:07:19 +00:00
|
|
|
* transforming UI item definitions into UI objects.
|
2014-04-11 20:05:45 +00:00
|
|
|
*
|
|
|
|
* @param {Object} type The item type.
|
|
|
|
* @param {Object} handler The handler definition.
|
|
|
|
*/
|
|
|
|
addHandler: function( type, handler ) {
|
|
|
|
this._.handlers[ type ] = handler;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2018-06-17 16:07:19 +00:00
|
|
|
* Returns the unique DOM element that represents one editor's UI part, also known as "space".
|
|
|
|
* There are 3 main editor spaces available: `top`, `contents` and `bottom`
|
|
|
|
* and their availability depends on editor type.
|
2014-04-11 20:05:45 +00:00
|
|
|
*
|
|
|
|
* // Hide the bottom space in the UI.
|
2018-06-17 16:07:19 +00:00
|
|
|
* var bottom = editor.ui.space( 'bottom' );
|
2014-04-11 20:05:45 +00:00
|
|
|
* bottom.setStyle( 'display', 'none' );
|
|
|
|
*
|
2018-06-17 16:07:19 +00:00
|
|
|
* @param {String} name The name of the space.
|
2014-04-11 20:05:45 +00:00
|
|
|
* @returns {CKEDITOR.dom.element} The element that represents the space.
|
|
|
|
*/
|
|
|
|
space: function( name ) {
|
|
|
|
return CKEDITOR.document.getById( this.spaceId( name ) );
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2018-06-17 16:07:19 +00:00
|
|
|
* Returns the HTML ID for a specific UI space name.
|
2014-04-11 20:05:45 +00:00
|
|
|
*
|
2018-06-17 16:07:19 +00:00
|
|
|
* @param {String} name The name of the space.
|
|
|
|
* @returns {String} The ID of an element representing this space in the DOM.
|
2014-04-11 20:05:45 +00:00
|
|
|
*/
|
|
|
|
spaceId: function( name ) {
|
|
|
|
return this.editor.id + '_' + name;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
CKEDITOR.event.implementOn( CKEDITOR.ui );
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal event fired when a new UI element is ready.
|
|
|
|
*
|
|
|
|
* @event ready
|
2018-06-17 16:07:19 +00:00
|
|
|
* @param {Object} data The new UI element.
|
2014-04-11 20:05:45 +00:00
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Virtual class which just illustrates the features of handler objects to be
|
|
|
|
* passed to the {@link CKEDITOR.ui#addHandler} function.
|
2018-06-17 16:07:19 +00:00
|
|
|
* This class is not really a part of the API, so do not call its constructor.
|
2014-04-11 20:05:45 +00:00
|
|
|
*
|
|
|
|
* @class CKEDITOR.ui.handlerDefinition
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
2018-06-17 16:07:19 +00:00
|
|
|
* Transforms an item definition into a UI item object.
|
2014-04-11 20:05:45 +00:00
|
|
|
*
|
|
|
|
* editorInstance.ui.addHandler( CKEDITOR.UI_BUTTON, {
|
|
|
|
* create: function( definition ) {
|
|
|
|
* return new CKEDITOR.ui.button( definition );
|
|
|
|
* }
|
|
|
|
* } );
|
|
|
|
*
|
|
|
|
* @method create
|
|
|
|
* @param {Object} definition The item definition.
|
|
|
|
* @returns {Object} The UI element.
|
|
|
|
* @todo We lack the "UI element" abstract super class.
|
|
|
|
*/
|
2018-06-17 16:07:19 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* The element in the {@link CKEDITOR#document host page's document} that contains the editor content.
|
|
|
|
* If the [fixed editor UI](#!/guide/dev_uitypes-section-fixed-user-interface) is used, then it will be set to
|
|
|
|
* `editor.ui.space( 'contents' )` — i.e. the `<div>` which contains the editor `<iframe>` (in case of classic editor)
|
|
|
|
* or {@link CKEDITOR.editable} (in case of inline editor). Otherwise it is set to the {@link CKEDITOR.editable} itself.
|
|
|
|
*
|
|
|
|
* Use the position of this element if you need to position elements placed in the host page's document relatively to the
|
|
|
|
* editor content.
|
|
|
|
*
|
|
|
|
* var editor = CKEDITOR.instances.editor1;
|
|
|
|
* console.log( editor.ui.contentsElement.getName() ); // 'div'
|
|
|
|
*
|
|
|
|
* @since 4.5
|
|
|
|
* @readonly
|
|
|
|
* @property {CKEDITOR.dom.element} contentsElement
|
|
|
|
*/
|