| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /**
- * @module ui/editableui/editableuiview
- */
- import View from '../view';
- import Template from '../template';
- /**
- * The editable UI view class.
- *
- * @extends module:ui/view~View
- */
- export default class EditableUIView extends View {
- /**
- * Creates an instance of EditableUIView class.
- *
- * @param {module:utils/locale~Locale} [locale] The 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.bindTemplate;
- 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 ),
- }
- } );
- /**
- * Controls whether the editable is writable or not.
- *
- * @observable
- * @member {Boolean} #isReadOnly
- */
- this.set( 'isReadOnly', false );
- /**
- * Controls whether the editable is focused, i.e. the user is typing in it.
- *
- * @observable
- * @member {Boolean} #isFocused
- */
- this.set( 'isFocused', false );
- /**
- * An external {@link #editableElement} passed into the constructor, which also means
- * the view will not render its {@link #template}.
- *
- * @member {HTMLElement} #externalElement
- */
- this.externalElement = editableElement;
- /**
- * The element which is the main editable element (usually the one with `contentEditable="true"`).
- *
- * @readonly
- * @member {HTMLElement} #editableElement
- */
- }
- /**
- * Initializes the view by either applying the {@link #template} to the existing
- * {@link #editableElement} or assigning {@link #element} as {@link #editableElement}.
- */
- init() {
- if ( this.externalElement ) {
- this.template.apply( this.externalElement );
- } else {
- this.editableElement = this.element;
- }
- super.init();
- }
- /**
- * @inheritDoc
- */
- destroy() {
- if ( this.externalElement ) {
- this.template.revert( this.externalElement );
- }
- super.destroy();
- }
- }
|