editable.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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 Controller from '../ui/controller.js';
  7. import Model from '../ui/model.js';
  8. import utils from '../../utils/utils.js';
  9. import ObservableMixin from '../../utils/observablemixin.js';
  10. /**
  11. * @memberOf core.editable
  12. * @extends core.ui.Controller
  13. * @mixes utils.ObservaleMixin
  14. */
  15. export default class Editable extends Controller {
  16. /**
  17. * Creates a new instance of the Editable class.
  18. *
  19. * @param editor
  20. */
  21. constructor( editor ) {
  22. super();
  23. this.editor = editor;
  24. /**
  25. * Whether the editable is in read-write or read-only mode.
  26. *
  27. * @member {Boolean} core.editable.Editable#isEditable
  28. */
  29. this.set( 'isEditable', true );
  30. /**
  31. * Whether the editable is focused.
  32. *
  33. * @readonly
  34. * @member {Boolean} core.editable.Editable#isFocused
  35. */
  36. this.set( 'isFocused', false );
  37. }
  38. /**
  39. * The model for the editable view.
  40. *
  41. * @readonly
  42. * @type {core.ui.Model}
  43. */
  44. get viewModel() {
  45. if ( this._viewModel ) {
  46. return this._viewModel;
  47. }
  48. const viewModel = new Model( {
  49. isFocused: this.isFocused
  50. } );
  51. this._viewModel = viewModel;
  52. viewModel.bind( 'isEditable' ).to( this );
  53. this.bind( 'isFocused' ).to( viewModel );
  54. return viewModel;
  55. }
  56. /**
  57. * Temporary implementation (waiting for integration with the data model).
  58. *
  59. * @param {String} data HTML to be loaded.
  60. */
  61. setData( data ) {
  62. this.view.editableElement.innerHTML = data;
  63. }
  64. /**
  65. * Temporary implementation (waiting for integration with the data model).
  66. *
  67. * @returns {String} HTML string.
  68. */
  69. getData() {
  70. return this.view.editableElement.innerHTML;
  71. }
  72. }
  73. utils.mix( Editable, ObservableMixin );
  74. /**
  75. * The editable model interface.
  76. *
  77. * @memberOf core.editable
  78. * @interface EditableModel
  79. */
  80. /**
  81. * Whether the editable has focus.
  82. *
  83. * @member {Boolean} core.editable.EditableModel#isFocused
  84. */
  85. /**
  86. * Whether the editable is not in read-only mode.
  87. *
  88. * @member {Boolean} core.editable.EditableModel#isEditable
  89. */