| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- /**
- * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- 'use strict';
- import utils from './utils/utils.js';
- import ObservableMixin from './utils/observablemixin.js';
- import FocusObserver from './engine/treeview/observer/focusobserver.js';
- /**
- * Class representing a single editable element. It combines the {@link ckeditor5.Editable#viewElement editable view}
- * with the {@link ckeditor5.Editable#domElement editable DOM element} to which the view is rendering.
- *
- * @memberOf ckeditor5
- * @mixes utils.ObservaleMixin
- */
- export default class Editable {
- /**
- * Creates a new instance of the Editable class.
- *
- * @param {ckeditor5.Editor} editor The editor instance.
- * @param {String} name The name of the editable.
- */
- constructor( editor, name ) {
- /**
- * The editor instance.
- *
- * @readonly
- * @member {ckeditor5.Editor} ckeditor5.Editable#editor
- */
- this.editor = editor;
- /**
- * The name of the editable.
- *
- * @readonly
- * @member {String} ckeditor5.Editable#name
- */
- this.name = name;
- /**
- * Whether the editable is in read-write or read-only mode.
- *
- * @observable
- * @member {Boolean} ckeditor5.Editable#isEditable
- */
- this.set( 'isEditable', true );
- /**
- * Whether the editable is focused.
- *
- * @readonly
- * @observable
- * @member {Boolean} ckeditor5.Editable#isFocused
- */
- this.set( 'isFocused', false );
- /**
- * The editable DOM element.
- *
- * @readonly
- * @member {HTMLElement} ckeditor5.Editable#domElement
- */
- /**
- * The view element which holds this editable.
- *
- * @readonly
- * @member {engine.treeView.Element} ckeditor5.Editable#viewElement
- */
- }
- /**
- * Binds the {@link ckeditor5.Editable#viewElement editable's view} to a concrete DOM element.
- *
- * @param {HTMLElement} domElement The DOM element which holds the editable.
- */
- bindTo( domElement ) {
- const editingView = this.editor.editing.view;
- const viewElement = editingView.createRoot( domElement, this.name );
- this.domElement = domElement;
- this.viewElement = viewElement;
- // Move to EditingController constructor.
- editingView.addObserver( FocusObserver );
- this.listenTo( editingView, 'focus', ( evt, data ) => {
- if ( data.target === this.viewElement ) {
- this.isFocused = true;
- }
- } );
- this.listenTo( editingView, 'blur', ( evt, data ) => {
- if ( data.target === this.viewElement ) {
- this.isFocused = false;
- }
- } );
- }
- /**
- * Destroys the editable.
- */
- destroy() {
- this.stopListening();
- this.domElement = this.viewElement = null;
- }
- }
- utils.mix( Editable, ObservableMixin );
|