editable.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. import utils from './utils/utils.js';
  7. import ObservableMixin from './utils/observablemixin.js';
  8. import FocusObserver from './engine/treeview/observer/focusobserver.js';
  9. /**
  10. * Class representing a single editable element. It combines the {@link ckeditor5.Editable#viewElement editable view}
  11. * with the {@link ckeditor5.Editable#domElement editable DOM element} to which the view is rendering.
  12. *
  13. * @memberOf ckeditor5
  14. * @mixes utils.ObservaleMixin
  15. */
  16. export default class Editable {
  17. /**
  18. * Creates a new instance of the Editable class.
  19. *
  20. * @param {ckeditor5.Editor} editor The editor instance.
  21. * @param {String} name The name of the editable.
  22. */
  23. constructor( editor, name ) {
  24. /**
  25. * The editor instance.
  26. *
  27. * @readonly
  28. * @member {ckeditor5.Editor} ckeditor5.Editable#editor
  29. */
  30. this.editor = editor;
  31. /**
  32. * The name of the editable.
  33. *
  34. * @readonly
  35. * @member {String} ckeditor5.Editable#name
  36. */
  37. this.name = name;
  38. /**
  39. * Whether the editable is in read-write or read-only mode.
  40. *
  41. * @observable
  42. * @member {Boolean} ckeditor5.Editable#isEditable
  43. */
  44. this.set( 'isEditable', true );
  45. /**
  46. * Whether the editable is focused.
  47. *
  48. * @readonly
  49. * @observable
  50. * @member {Boolean} ckeditor5.Editable#isFocused
  51. */
  52. this.set( 'isFocused', false );
  53. /**
  54. * The editable DOM element.
  55. *
  56. * @readonly
  57. * @member {HTMLElement} ckeditor5.Editable#domElement
  58. */
  59. /**
  60. * The view element which holds this editable.
  61. *
  62. * @readonly
  63. * @member {engine.treeView.Element} ckeditor5.Editable#viewElement
  64. */
  65. }
  66. /**
  67. * Binds the {@link ckeditor5.Editable#viewElement editable's view} to a concrete DOM element.
  68. *
  69. * @param {HTMLElement} domElement The DOM element which holds the editable.
  70. */
  71. bindTo( domElement ) {
  72. const editingView = this.editor.editing.view;
  73. const viewElement = editingView.createRoot( domElement, this.name );
  74. this.domElement = domElement;
  75. this.viewElement = viewElement;
  76. // Move to EditingController constructor.
  77. editingView.addObserver( FocusObserver );
  78. this.listenTo( editingView, 'focus', ( evt, data ) => {
  79. if ( data.target === this.viewElement ) {
  80. this.isFocused = true;
  81. }
  82. } );
  83. this.listenTo( editingView, 'blur', ( evt, data ) => {
  84. if ( data.target === this.viewElement ) {
  85. this.isFocused = false;
  86. }
  87. } );
  88. }
  89. /**
  90. * Destroys the editable.
  91. */
  92. destroy() {
  93. this.stopListening();
  94. this.domElement = this.viewElement = null;
  95. }
  96. }
  97. utils.mix( Editable, ObservableMixin );