view.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. /**
  7. * Basic View class.
  8. *
  9. * @class View
  10. * @extends Model
  11. */
  12. CKEDITOR.define( [ 'collection', 'model', 'ui/template' ], function( Collection, Model, Template ) {
  13. class View extends Model {
  14. /**
  15. * Creates an instance of the {@link View} class.
  16. *
  17. * @param {Model} mode (View)Model of this View.
  18. * @constructor
  19. */
  20. constructor( model ) {
  21. super();
  22. /**
  23. * Model of this view.
  24. */
  25. this.model = new Model( model );
  26. /**
  27. * Regions which belong to this view.
  28. */
  29. this.regions = new Collection();
  30. /**
  31. * The list of listeners attached in this view.
  32. *
  33. * @property {Array}
  34. */
  35. this.listeners = [];
  36. }
  37. /**
  38. * Element of this view. The element is rendered on first reference.
  39. *
  40. * @property el
  41. */
  42. get el() {
  43. if ( this._el ) {
  44. return this._el;
  45. }
  46. // Render the element using the template.
  47. this._el = this.render();
  48. // Attach defined listeners.
  49. this.listeners.map( l => l.call( this ) );
  50. return this._el;
  51. }
  52. /**
  53. * Binds a property of the model to a specific listener that
  54. * updates the view when the property changes.
  55. *
  56. * @param {Model} model Model to which the property is bound to.
  57. * @param {String} property Property name in the model.
  58. * @param {Function} [callback] Callback function executed on property change in model.
  59. * @constructor
  60. */
  61. bind( property, callback ) {
  62. var model = this.model;
  63. return function( el, updater ) {
  64. // TODO: Use ES6 default arguments syntax.
  65. var changeCallback = callback || updater;
  66. function executeCallback( el, value ) {
  67. var result = changeCallback( el, value );
  68. if ( typeof result != 'undefined' ) {
  69. updater( el, result );
  70. }
  71. }
  72. // Execute callback when the property changes.
  73. model.on( 'change:' + property, ( evt, value ) => executeCallback( el, value ) );
  74. // Set the initial state of the view.
  75. executeCallback( el, model[ property ] );
  76. };
  77. }
  78. /**
  79. * Binds native DOM event listener to View event.
  80. *
  81. * @param {HTMLElement} el DOM element that fires the event.
  82. * @param {String} domEvt The name of DOM event the listener listens to.
  83. * @param {String} fireEvent The name of the View event fired then DOM event fires.
  84. */
  85. domListener( el, domEvt, fireEvt ) {
  86. el.addEventListener( domEvt, this.fire.bind( this, fireEvt ) );
  87. }
  88. /**
  89. * Renders View's {@link el} using {@link Template} instance.
  90. *
  91. * @returns {HTMLElement}
  92. */
  93. render() {
  94. this._template = new Template( this.template );
  95. return this._template.render();
  96. }
  97. destroy() {}
  98. }
  99. return View;
  100. } );