|
@@ -16,11 +16,12 @@
|
|
|
CKEDITOR.define( [
|
|
CKEDITOR.define( [
|
|
|
'collection',
|
|
'collection',
|
|
|
'model',
|
|
'model',
|
|
|
|
|
+ 'ui/region',
|
|
|
'ui/template',
|
|
'ui/template',
|
|
|
'ckeditorerror',
|
|
'ckeditorerror',
|
|
|
'ui/domemittermixin',
|
|
'ui/domemittermixin',
|
|
|
'utils'
|
|
'utils'
|
|
|
-], ( Collection, Model, Template, CKEditorError, DOMEmitterMixin, utils ) => {
|
|
|
|
|
|
|
+], ( Collection, Model, Region, Template, CKEditorError, DOMEmitterMixin, utils ) => {
|
|
|
class View extends Model {
|
|
class View extends Model {
|
|
|
/**
|
|
/**
|
|
|
* Creates an instance of the {@link View} class.
|
|
* Creates an instance of the {@link View} class.
|
|
@@ -43,6 +44,10 @@ CKEDITOR.define( [
|
|
|
idProperty: 'name'
|
|
idProperty: 'name'
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * @property {Object} regionsDef
|
|
|
|
|
+ */
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* @property {HTMLElement} _el
|
|
* @property {HTMLElement} _el
|
|
|
*/
|
|
*/
|
|
@@ -61,7 +66,60 @@ CKEDITOR.define( [
|
|
|
* @returns
|
|
* @returns
|
|
|
*/
|
|
*/
|
|
|
init() {
|
|
init() {
|
|
|
- // TODO: What if we used render() here?
|
|
|
|
|
|
|
+ this._initRegions();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * @param
|
|
|
|
|
+ * @returns
|
|
|
|
|
+ */
|
|
|
|
|
+ _initRegions() {
|
|
|
|
|
+ let regionName, region;
|
|
|
|
|
+
|
|
|
|
|
+ // Add regions that haven't been created yet (i.e. by addChild()).
|
|
|
|
|
+ // Those regions have no children Views at that point.
|
|
|
|
|
+ for ( regionName in this.regionsDef ) {
|
|
|
|
|
+ if ( !this.regions.get( regionName ) ) {
|
|
|
|
|
+ this._createRegion( regionName );
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // Initialize regions. Feed them with an element of this View.
|
|
|
|
|
+ for ( region of this.regions ) {
|
|
|
|
|
+ region.init( this );
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * @param
|
|
|
|
|
+ * @returns
|
|
|
|
|
+ */
|
|
|
|
|
+ addChild( childView, regionName, index ) {
|
|
|
|
|
+ // Create a Region instance on demand.
|
|
|
|
|
+ const region = this.regions.get( regionName ) || this._createRegion( regionName );
|
|
|
|
|
+
|
|
|
|
|
+ region.addChild( childView, index );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * @param
|
|
|
|
|
+ * @returns
|
|
|
|
|
+ */
|
|
|
|
|
+ removeChild( childView, regionName ) {
|
|
|
|
|
+ return this.regions.get( regionName ).removeChild( childView );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * @param
|
|
|
|
|
+ * @returns
|
|
|
|
|
+ */
|
|
|
|
|
+ _createRegion( regionName ) {
|
|
|
|
|
+ // Use region element definition from `View#regions`.
|
|
|
|
|
+ const region = new Region( regionName, this.regionsDef[ regionName ] );
|
|
|
|
|
+
|
|
|
|
|
+ this.regions.add( region );
|
|
|
|
|
+
|
|
|
|
|
+ return region;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -73,6 +131,10 @@ CKEDITOR.define( [
|
|
|
return this._el || this.render();
|
|
return this._el || this.render();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ set el( el ) {
|
|
|
|
|
+ this._el = el;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* Binds a `property` of View's model so the DOM of the View is updated when the `property`
|
|
* Binds a `property` of View's model so the DOM of the View is updated when the `property`
|
|
|
* changes. It returns a function which, once called in the context of a DOM element,
|
|
* changes. It returns a function which, once called in the context of a DOM element,
|
|
@@ -134,7 +196,7 @@ CKEDITOR.define( [
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Prepare pre–defined listeners.
|
|
// Prepare pre–defined listeners.
|
|
|
- this.prepareListeners();
|
|
|
|
|
|
|
+ this._prepareListeners();
|
|
|
|
|
|
|
|
this._template = new Template( this.template );
|
|
this._template = new Template( this.template );
|
|
|
|
|
|
|
@@ -145,6 +207,9 @@ CKEDITOR.define( [
|
|
|
* Destroys the View.
|
|
* Destroys the View.
|
|
|
*/
|
|
*/
|
|
|
destroy() {
|
|
destroy() {
|
|
|
|
|
+ const regions = this.regions;
|
|
|
|
|
+ let region;
|
|
|
|
|
+
|
|
|
// Drop the reference to the model.
|
|
// Drop the reference to the model.
|
|
|
this.model = null;
|
|
this.model = null;
|
|
|
|
|
|
|
@@ -154,8 +219,8 @@ CKEDITOR.define( [
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Remove and destroy regions.
|
|
// Remove and destroy regions.
|
|
|
- for ( let region of this.regions ) {
|
|
|
|
|
- this.regions.remove( region ).destroy();
|
|
|
|
|
|
|
+ for ( region of regions ) {
|
|
|
|
|
+ regions.remove( region ).destroy();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Remove all listeners related to this view.
|
|
// Remove all listeners related to this view.
|
|
@@ -169,7 +234,7 @@ CKEDITOR.define( [
|
|
|
*
|
|
*
|
|
|
* The execution is performed by {@link Template} class.
|
|
* The execution is performed by {@link Template} class.
|
|
|
*/
|
|
*/
|
|
|
- prepareListeners() {
|
|
|
|
|
|
|
+ _prepareListeners() {
|
|
|
if ( this.template ) {
|
|
if ( this.template ) {
|
|
|
this._prepareElementListeners( this.template );
|
|
this._prepareElementListeners( this.template );
|
|
|
}
|
|
}
|
|
@@ -269,18 +334,6 @@ CKEDITOR.define( [
|
|
|
def.children.map( this._prepareElementListeners, this );
|
|
def.children.map( this._prepareElementListeners, this );
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- /**
|
|
|
|
|
- * @param
|
|
|
|
|
- * @returns
|
|
|
|
|
- */
|
|
|
|
|
- add( view, regionName, index ) {
|
|
|
|
|
- this.regions.get( regionName ).add( view, index );
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- remove( view, regionName ) {
|
|
|
|
|
- this.regions.get( regionName ).remove( view );
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
utils.extend( View.prototype, DOMEmitterMixin );
|
|
utils.extend( View.prototype, DOMEmitterMixin );
|