Refactor more files to classes

src/device_manager/index.js

@@ -33,7 +33,7 @@
  * @module Devices
  */
 import { isString } from 'underscore';
-import Module from 'common/module';
+import Module from '../common/module';
 import defaults from './config/config';
 import Device from './model/Device';
 import Devices from './model/Devices';
@@ -72,7 +72,7 @@ export default () => {
       add: evAdd,
       // addBefore: evAddBefore,
       remove: evRemove,
-      removeBefore: evRemoveBefore
+      removeBefore: evRemoveBefore,
     },
 
     init(config = {}) {
@@ -130,7 +130,7 @@ export default () => {
           ...opts,
           id: props,
           name: opts.name || props,
-          width
+          width,
         };
       } else {
         result = props;
@@ -217,7 +217,7 @@ export default () => {
       view && view.remove();
       view = new DevicesView({
         collection: devices,
-        config: c
+        config: c,
       });
       return view.render().el;
     },
@@ -228,6 +228,6 @@ export default () => {
       view && view.remove();
       [devices, view].forEach(i => (i = null));
       c = {};
-    }
+    },
   };
 };

src/device_manager/model/Device.js

@@ -1,4 +1,4 @@
-import { Model } from 'backbone';
+import { Model } from '../../common';
 
 /**
  * @typedef Device
@@ -15,16 +15,14 @@ export default class Device extends Model {
       width: null,
       height: '',
       widthMedia: null,
-      priority: null
+      priority: null,
     };
   }
 
   initialize() {
-    this.get('widthMedia') === null &&
-      this.set('widthMedia', this.get('width'));
+    this.get('widthMedia') === null && this.set('widthMedia', this.get('width'));
     this.get('width') === null && this.set('width', this.get('widthMedia'));
-    !this.get('priority') &&
-      this.set('priority', parseFloat(this.get('widthMedia')) || 0);
+    !this.get('priority') && this.set('priority', parseFloat(this.get('widthMedia')) || 0);
     const toCheck = ['width', 'height', 'widthMedia'];
     toCheck.forEach(prop => this.checkUnit(prop));
   }

src/device_manager/model/Devices.js

@@ -1,4 +1,4 @@
-import { Collection } from 'backbone';
+import { Collection } from '../../common';
 import Device from './Device';
 
 export default class Devices extends Collection {

src/device_manager/view/DevicesView.js

@@ -1,5 +1,5 @@
-import { View } from 'backbone';
-import html from 'utils/html';
+import { View } from '../../common';
+import html from '../../utils/html';
 
 export default class DevicesView extends View {
   template({ ppfx, label }) {
@@ -19,7 +19,7 @@ export default class DevicesView extends View {
 
   events() {
     return {
-      change: 'updateDevice'
+      change: 'updateDevice',
     };
   }
 

src/domain_abstract/model/Styleable.js

@@ -1,6 +1,6 @@
 import { isString, isArray, keys, isUndefined } from 'underscore';
-import { shallowDiff } from 'utils/mixins';
-import ParserHtml from 'parser/model/ParserHtml';
+import { shallowDiff } from '../../utils/mixins';
+import ParserHtml from '../../parser/model/ParserHtml';
 
 const parseStyle = ParserHtml().parseStyle;
 

src/domain_abstract/model/TypeableCollection.js

@@ -1,8 +1,5 @@
 import { isFunction } from 'underscore';
-import Backbone from 'backbone';
-
-const Model = Backbone.Model;
-const View = Backbone.View;
+import { View, Model } from '../../common';
 
 export default {
   types: [],

src/domain_abstract/ui/InputColor.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
-import ColorPicker from 'utils/ColorPicker';
+import ColorPicker from '../../utils/ColorPicker';
 import Input from './Input';
 
 const { $ } = Backbone;

src/domain_abstract/ui/InputNumber.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
 import { bindAll, isUndefined, indexOf } from 'underscore';
-import { on, off } from 'utils/mixins';
+import { on, off } from '../../utils/mixins';
 import Input from './Input';
 
 const $ = Backbone.$;

src/editor/index.js

@@ -54,10 +54,10 @@
  * ## Methods
  * @module Editor
  */
+import html from '../utils/html';
 import defaults from './config/config';
 import EditorModel from './model/Editor';
 import EditorView from './view/EditorView';
-import html from 'utils/html';
 
 export default (config = {}, opts = {}) => {
   const { $ } = opts;

src/editor/model/Editor.js

@@ -1,9 +1,9 @@
 import { isUndefined, isArray, contains, toArray, keys, bindAll } from 'underscore';
 import Backbone from 'backbone';
-import $ from 'utils/cash-dom';
-import Extender from 'utils/extender';
-import { getModel, hasWin } from 'utils/mixins';
-import { Model } from 'common';
+import $ from '../../utils/cash-dom';
+import Extender from '../../utils/extender';
+import { getModel, hasWin } from '../../utils/mixins';
+import { Model } from '../../common';
 import Selected from './Selected';
 
 Backbone.$ = $;

src/editor/model/Selected.js

@@ -1,5 +1,5 @@
-import { Collection, Model } from 'backbone';
 import { isArray } from 'underscore';
+import { Collection, Model } from '../../common';
 
 export class Selectable extends Model {}
 
@@ -34,9 +34,7 @@ export default class Selected extends Collection {
   }
 
   removeComponent(component, opts) {
-    const toRemove = (isArray(component) ? component : [component]).map(c =>
-      this.getByComponent(c)
-    );
+    const toRemove = (isArray(component) ? component : [component]).map(c => this.getByComponent(c));
     return this.remove(toRemove, opts);
   }
 }

src/editor/view/EditorView.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
-import { View } from 'common';
-import { appendStyles } from 'utils/mixins';
+import { View } from '../../common';
+import { appendStyles } from '../../utils/mixins';
 
 const $ = Backbone.$;
 

src/i18n/index.js

@@ -27,7 +27,7 @@
  * @module I18n
  */
 import { isUndefined, isString } from 'underscore';
-import { hasWin } from 'utils/mixins';
+import { hasWin } from '../utils/mixins';
 import config from './config';
 
 const isObj = el => !Array.isArray(el) && el !== null && typeof el === 'object';

src/keymaps/index.js

@@ -44,8 +44,8 @@
  */
 
 import { isString } from 'underscore';
-import { hasWin } from 'utils/mixins';
-import keymaster from 'utils/keymaster';
+import { hasWin } from '../utils/mixins';
+import keymaster from '../utils/keymaster';
 
 hasWin() && keymaster.init(window);
 

src/modal_dialog/model/Modal.js

@@ -1,4 +1,4 @@
-import { Model } from 'backbone';
+import { Model } from '../../common';
 
 export default class Modal extends Model {
   defaults() {
@@ -6,7 +6,7 @@ export default class Modal extends Model {
       title: '',
       content: '',
       attributes: {},
-      open: false
+      open: false,
     };
   }
 

src/modal_dialog/view/ModalView.js

@@ -1,4 +1,4 @@
-import { View } from 'backbone';
+import { View } from '../../common';
 
 export default class ModalView extends View {
   template({ pfx, ppfx, content, title }) {
@@ -18,7 +18,7 @@ export default class ModalView extends View {
   events() {
     return {
       click: 'onClick',
-      'click [data-close-modal]': 'hide'
+      'click [data-close-modal]': 'hide',
     };
   }
 
@@ -45,8 +45,7 @@ export default class ModalView extends View {
    * @private
    */
   getCollector() {
-    if (!this.$collector)
-      this.$collector = this.$el.find('.' + this.pfx + 'collector');
+    if (!this.$collector) this.$collector = this.$el.find('.' + this.pfx + 'collector');
     return this.$collector;
   }
 
@@ -127,7 +126,7 @@ export default class ModalView extends View {
     $el.removeAttr(currAttr.join(' '));
     $el.attr({
       ...(attr || {}),
-      class: `${pfx}container ${(attr && attr.class) || ''}`.trim()
+      class: `${pfx}container ${(attr && attr.class) || ''}`.trim(),
     });
   }
 

src/navigator/index.js

@@ -1,6 +1,6 @@
+import { isElement } from 'underscore';
 import defaults from './config/config';
 import View from './view/ItemView';
-import { isElement } from 'underscore';
 
 export default () => {
   let em;
@@ -95,7 +95,7 @@ export default () => {
         level: 0,
         config,
         opened: config.opened || {},
-        model: em.get('DomComponents').getWrapper()
+        model: em.get('DomComponents').getWrapper(),
       });
       return layers.render().el;
     },
@@ -103,6 +103,6 @@ export default () => {
     destroy() {
       layers && layers.remove();
       [em, layers, config].forEach(i => (i = {}));
-    }
+    },
   };
 };

src/navigator/view/ItemView.js

@@ -1,30 +1,31 @@
 import { isUndefined, isString, bindAll } from 'underscore';
-import { getModel, isEscKey, isEnterKey } from 'utils/mixins';
-import Backbone from 'backbone';
-import ComponentView from 'dom_components/view/ComponentView';
-import { eventDrag } from 'dom_components/model/Component';
+import { View } from '../../common';
+import { getModel, isEscKey, isEnterKey } from '../../utils/mixins';
+import ComponentView from '../../dom_components/view/ComponentView';
+import { eventDrag } from '../../dom_components/model/Component';
 
 const inputProp = 'contentEditable';
 const styleOpts = { mediaText: '' };
-const $ = Backbone.$;
 const isStyleHidden = (style = {}) => {
   return (style.display || '').trim().indexOf('none') === 0;
 };
 let ItemsView;
 
-export default Backbone.View.extend({
-  events: {
-    'mousedown [data-toggle-move]': 'startSort',
-    'touchstart [data-toggle-move]': 'startSort',
-    'click [data-toggle-visible]': 'toggleVisibility',
-    'click [data-toggle-open]': 'toggleOpening',
-    'click [data-toggle-select]': 'handleSelect',
-    'mouseover [data-toggle-select]': 'handleHover',
-    'mouseout [data-toggle-select]': 'handleHoverOut',
-    'dblclick [data-name]': 'handleEdit',
-    'keydown [data-name]': 'handleEditKey',
-    'focusout [data-name]': 'handleEditEnd',
-  },
+export default class ItemView extends View {
+  events() {
+    return {
+      'mousedown [data-toggle-move]': 'startSort',
+      'touchstart [data-toggle-move]': 'startSort',
+      'click [data-toggle-visible]': 'toggleVisibility',
+      'click [data-toggle-open]': 'toggleOpening',
+      'click [data-toggle-select]': 'handleSelect',
+      'mouseover [data-toggle-select]': 'handleHover',
+      'mouseout [data-toggle-select]': 'handleHoverOut',
+      'dblclick [data-name]': 'handleEdit',
+      'keydown [data-name]': 'handleEditKey',
+      'focusout [data-name]': 'handleEditEnd',
+    };
+  }
 
   template(model) {
     const { pfx, ppfx, config, clsNoEdit } = this;
@@ -61,7 +62,7 @@ export default Backbone.View.extend({
         <i class="fa fa-arrows"></i>
       </div>
       <div class="${this.clsChildren}"></div>`;
-  },
+  }
 
   initialize(o = {}) {
     bindAll(this, '__render');
@@ -109,11 +110,11 @@ export default Backbone.View.extend({
       render: this.__render,
       listenTo: this.listenTo,
     });
-  },
+  }
 
   updateName() {
     this.getInputName().innerText = this.model.getName();
-  },
+  }
 
   getVisibilityEl() {
     if (!this.eyeEl) {
@@ -121,7 +122,7 @@ export default Backbone.View.extend({
     }
 
     return this.eyeEl;
-  },
+  }
 
   updateVisibility() {
     const pfx = this.pfx;
@@ -132,7 +133,7 @@ export default Backbone.View.extend({
     const method = hidden ? 'addClass' : 'removeClass';
     this.$el[method](hClass);
     this.getVisibilityEl()[method](hideIcon);
-  },
+  }
 
   /**
    * Toggle visibility
@@ -163,7 +164,7 @@ export default Backbone.View.extend({
 
     model.setStyle(style, styleOpts);
     em && em.trigger('component:toggled'); // Updates Style Manager #2938
-  },
+  }
 
   /**
    * Handle the edit of the component name
@@ -177,12 +178,12 @@ export default Backbone.View.extend({
     document.execCommand('selectAll', false, null);
     em && em.setEditing(1);
     $el.find(`.${this.inputNameCls}`).removeClass(clsNoEdit).addClass(clsEdit);
-  },
+  }
 
   handleEditKey(ev) {
     ev.stopPropagation();
     (isEscKey(ev) || isEnterKey(ev)) && this.handleEditEnd(ev);
-  },
+  }
 
   /**
    * Handle with the end of editing of the component name
@@ -197,11 +198,11 @@ export default Backbone.View.extend({
     this.setName(name, { component: this.model, propName: 'custom-name' });
     em && em.setEditing(0);
     $el.find(`.${this.inputNameCls}`).addClass(clsNoEdit).removeClass(clsEdit);
-  },
+  }
 
   setName(name, { propName }) {
     this.model.set(propName, name);
-  },
+  }
 
   /**
    * Get the input containing the name of the component
@@ -212,7 +213,7 @@ export default Backbone.View.extend({
       this.inputName = this.el.querySelector(`.${this.inputNameCls}`);
     }
     return this.inputName;
-  },
+  }
 
   /**
    * Update item opening
@@ -233,7 +234,7 @@ export default Backbone.View.extend({
       this.getCaret().removeClass(chvDown);
       delete opened[model.cid];
     }
-  },
+  }
 
   /**
    * Toggle item opening
@@ -248,7 +249,7 @@ export default Backbone.View.extend({
     if (!model.get('components').length) return;
 
     model.set('open', !model.get('open'));
-  },
+  }
 
   /**
    * Handle component selection
@@ -262,7 +263,7 @@ export default Backbone.View.extend({
       const scroll = config.scrollCanvas;
       scroll && model.views.forEach(view => view.scrollIntoView(scroll));
     }
-  },
+  }
 
   /**
    * Handle component selection
@@ -271,13 +272,13 @@ export default Backbone.View.extend({
     e.stopPropagation();
     const { em, config, model } = this;
     em && config.showHover && em.setHovered(model, { fromLayers: 1 });
-  },
+  }
 
   handleHoverOut(ev) {
     ev.stopPropagation();
     const { em, config } = this;
     em && config.showHover && em.setHovered(0, { fromLayers: 1 });
-  },
+  }
 
   /**
    * Delegate to sorter
@@ -294,7 +295,7 @@ export default Backbone.View.extend({
       sorter.onMoveClb = data => em.trigger(eventDrag, data);
       sorter.startSort(e.target);
     }
-  },
+  }
 
   /**
    * Freeze item
@@ -303,7 +304,7 @@ export default Backbone.View.extend({
   freeze() {
     this.$el.addClass(this.pfx + 'opac50');
     this.model.set('open', 0);
-  },
+  }
 
   /**
    * Unfreeze item
@@ -311,7 +312,7 @@ export default Backbone.View.extend({
    * */
   unfreeze() {
     this.$el.removeClass(this.pfx + 'opac50');
-  },
+  }
 
   /**
    * Update item on status change
@@ -324,7 +325,7 @@ export default Backbone.View.extend({
         noExtHl: 1,
       },
     ]);
-  },
+  }
 
   /**
    * Check if component is visible
@@ -333,7 +334,7 @@ export default Backbone.View.extend({
    * */
   isVisible() {
     return !isStyleHidden(this.model.getStyle());
-  },
+  }
 
   /**
    * Update item aspect after children changes
@@ -354,7 +355,7 @@ export default Backbone.View.extend({
     title[count ? 'removeClass' : 'addClass'](clsNoChild);
     if (cnt) cnt.innerHTML = count || '';
     !count && model.set('open', 0);
-  },
+  }
 
   /**
    * Count children inside model
@@ -371,7 +372,7 @@ export default Backbone.View.extend({
       count++;
     }, this);
     return count;
-  },
+  }
 
   getCaret() {
     if (!this.caret || !this.caret.length) {
@@ -380,33 +381,33 @@ export default Backbone.View.extend({
     }
 
     return this.caret;
-  },
+  }
 
   setRoot(el) {
     el = isString(el) ? this.em.getWrapper().find(el)[0] : el;
-    const model = getModel(el, $);
+    const model = getModel(el);
     if (!model) return;
     this.stopListening();
     this.model = model;
     this.initialize(this.opt);
     this._rendered && this.render();
-  },
+  }
 
   updateLayerable() {
     const { parentView } = this;
     const toRerender = parentView || this;
     toRerender.render();
-  },
+  }
 
   __clearItems() {
     const { items } = this;
     items && items.remove();
-  },
+  }
 
   remove() {
-    Backbone.View.prototype.remove.apply(this, arguments);
+    View.prototype.remove.apply(this, arguments);
     this.__clearItems();
-  },
+  }
 
   render() {
     const { model, config, pfx, ppfx, opt } = this;
@@ -454,7 +455,7 @@ export default Backbone.View.extend({
     this.__render();
     this._rendered = 1;
     return this;
-  },
+  }
 
   __render() {
     const { model, config, el } = this;
@@ -462,5 +463,5 @@ export default Backbone.View.extend({
     const opt = { component: model, el };
     onRender.bind(this)(opt);
     this.em.trigger('layer:render', opt);
-  },
-});
+  }
+}

src/navigator/view/ItemsView.js

@@ -1,7 +1,7 @@
-import { View } from 'backbone';
-import { eventDrag } from 'dom_components/model/Component';
+import { View } from '../../common';
+import { eventDrag } from '../../dom_components/model/Component';
 
-export default View.extend({
+export default class ItemsView extends View {
   initialize(o = {}) {
     this.items = [];
     this.opt = o;
@@ -38,7 +38,7 @@ export default View.extend({
         avoidSelectOnEnd: 1,
         nested: 1,
         ppfx,
-        pfx
+        pfx,
       });
     }
 
@@ -47,14 +47,14 @@ export default View.extend({
     // For the sorter
     this.$el.data('collection', coll);
     parent && this.$el.data('model', parent);
-  },
+  }
 
   removeChildren(removed) {
     const view = removed.viewLayer;
     if (!view) return;
     view.remove();
     removed.viewLayer = 0;
-  },
+  }
 
   /**
    * Add to collection
@@ -65,7 +65,7 @@ export default View.extend({
   addTo(model) {
     var i = this.collection.indexOf(model);
     this.addToCollection(model, null, i);
-  },
+  }
 
   /**
    * Add new object to collection
@@ -87,7 +87,7 @@ export default View.extend({
       config: this.config,
       sorter: this.sorter,
       isCountable: this.isCountable,
-      opened: this.opt.opened
+      opened: this.opt.opened,
     });
     const rendered = item.render().el;
 
@@ -105,21 +105,17 @@ export default View.extend({
         // In case the added is new in the collection index will be -1
         if (index < 0) {
           this.$el.append(rendered);
-        } else
-          this.$el
-            .children()
-            .eq(index)
-            [method](rendered);
+        } else this.$el.children().eq(index)[method](rendered);
       } else this.$el.append(rendered);
     }
     this.items.push(item);
     return rendered;
-  },
+  }
 
   remove() {
     View.prototype.remove.apply(this, arguments);
     this.items.map(i => i.remove());
-  },
+  }
 
   /**
    * Check if the model could be count by the navigator
@@ -130,14 +126,11 @@ export default View.extend({
   isCountable(model, hide) {
     var type = model.get('type');
     var tag = model.get('tagName');
-    if (
-      ((type == 'textnode' || tag == 'br') && hide) ||
-      !model.get('layerable')
-    ) {
+    if (((type == 'textnode' || tag == 'br') && hide) || !model.get('layerable')) {
       return false;
     }
     return true;
-  },
+  }
 
   render() {
     const frag = document.createDocumentFragment();
@@ -148,4 +141,4 @@ export default View.extend({
     el.className = this.className;
     return this;
   }
-});
+}

src/pages/index.js

@@ -45,8 +45,8 @@
  */
 
 import { isString, bindAll, unique, flatten } from 'underscore';
-import { createId } from 'utils/mixins';
-import { Model, Module } from 'common';
+import { createId } from '../utils/mixins';
+import { Model, Module } from '../common';
 import Pages from './model/Pages';
 import Page from './model/Page';
 

src/pages/model/Page.js

@@ -1,12 +1,12 @@
-import { Model } from 'common';
 import { result, forEach } from 'underscore';
-import Frames from 'canvas/model/Frames';
+import { Model } from '../../common';
+import Frames from '../../canvas/model/Frames';
 
 export default class Page extends Model {
   defaults() {
     return {
       frames: [],
-      _undo: true
+      _undo: true,
     };
   }
 

src/pages/model/Pages.js

@@ -1,4 +1,4 @@
-import { Collection } from 'backbone';
+import { Collection } from '../../common';
 import Page from './Page';
 
 export default class Pages extends Collection {

src/panels/model/Button.js

@@ -1,23 +1,25 @@
-import Backbone from 'backbone';
+import { Model } from '../../common';
 
-export default Backbone.Model.extend({
-  defaults: {
-    id: '',
-    label: '',
-    tagName: 'span',
-    className: '',
-    command: '',
-    context: '',
-    buttons: [],
-    attributes: {},
-    options: {},
-    active: false,
-    dragDrop: false,
-    togglable: true,
-    runDefaultCommand: true,
-    stopDefaultCommand: false,
-    disable: false
-  },
+export default class Button extends Model {
+  defaults() {
+    return {
+      id: '',
+      label: '',
+      tagName: 'span',
+      className: '',
+      command: '',
+      context: '',
+      buttons: [],
+      attributes: {},
+      options: {},
+      active: false,
+      dragDrop: false,
+      togglable: true,
+      runDefaultCommand: true,
+      stopDefaultCommand: false,
+      disable: false,
+    };
+  }
 
   initialize(options) {
     if (this.get('buttons').length) {
@@ -25,4 +27,4 @@ export default Backbone.Model.extend({
       this.set('buttons', new Buttons(this.get('buttons')));
     }
   }
-});
+}

src/panels/model/Buttons.js

@@ -1,9 +1,7 @@
-import Backbone from 'backbone';
+import { Collection } from '../../common';
 import Button from './Button';
 
-export default Backbone.Collection.extend({
-  model: Button,
-
+export default class Buttons extends Collection {
   /**
    * Deactivate all buttons, except one passed
    * @param  {Object}  except  Model to ignore
@@ -15,11 +13,10 @@ export default Backbone.Collection.extend({
     this.forEach((model, index) => {
       if (model !== except) {
         model.set('active', false);
-        if (r && model.get('buttons').length)
-          model.get('buttons').deactivateAllExceptOne(except, r);
+        if (r && model.get('buttons').length) model.get('buttons').deactivateAllExceptOne(except, r);
       }
     });
-  },
+  }
 
   /**
    * Deactivate all buttons
@@ -34,7 +31,7 @@ export default Backbone.Collection.extend({
         model.set('active', false, { fromCollection: 1 });
       }
     });
-  },
+  }
 
   /**
    * Disables all buttons
@@ -49,7 +46,7 @@ export default Backbone.Collection.extend({
         model.set('disable', true);
       }
     });
-  },
+  }
 
   /**
    * Disables all buttons, except one passed
@@ -62,9 +59,10 @@ export default Backbone.Collection.extend({
     this.forEach((model, index) => {
       if (model !== except) {
         model.set('disable', true);
-        if (r && model.get('buttons').length)
-          model.get('buttons').disableAllButtonsExceptOne(except, r);
+        if (r && model.get('buttons').length) model.get('buttons').disableAllButtonsExceptOne(except, r);
       }
     });
   }
-});
+}
+
+Buttons.prototype.model = Button;

src/panels/model/Panel.js

@@ -1,18 +1,20 @@
-import Backbone from 'backbone';
+import { Model } from '../../common';
 import Buttons from './Buttons';
 
-export default Backbone.Model.extend({
-  defaults: {
-    id: '',
-    content: '',
-    visible: true,
-    buttons: [],
-    attributes: {}
-  },
+export default class Panel extends Model {
+  defaults() {
+    return {
+      id: '',
+      content: '',
+      visible: true,
+      buttons: [],
+      attributes: {},
+    };
+  }
 
   initialize(options) {
     this.btn = this.get('buttons') || [];
     this.buttons = new Buttons(this.btn);
     this.set('buttons', this.buttons);
   }
-});
+}

src/panels/model/Panels.js

@@ -1,6 +1,6 @@
-import Backbone from 'backbone';
+import { Collection } from '../../common';
 import Panel from './Panel';
 
-export default Backbone.Collection.extend({
-  model: Panel
-});
+export default class Panels extends Collection {}
+
+Panels.prototype.model = Panel;

src/panels/view/ButtonView.js

@@ -1,16 +1,16 @@
-import Backbone from 'backbone';
 import { isString, isObject, isFunction } from 'underscore';
+import { View } from '../../common';
 
-const $ = Backbone.$;
-
-export default Backbone.View.extend({
+export default class ButtonView extends View {
   tagName() {
     return this.model.get('tagName');
-  },
+  }
 
-  events: {
-    click: 'clicked'
-  },
+  events() {
+    return {
+      click: 'clicked',
+    };
+  }
 
   initialize(o) {
     const { model } = this;
@@ -39,16 +39,12 @@ export default Backbone.View.extend({
 
     if (em && isString(command) && listen) {
       const chnOpt = { fromListen: 1 };
-      this.listenTo(em, `run:${command}`, () =>
-        model.set('active', true, chnOpt)
-      );
-      this.listenTo(em, `stop:${command}`, () =>
-        model.set('active', false, chnOpt)
-      );
+      this.listenTo(em, `run:${command}`, () => model.set('active', true, chnOpt));
+      this.listenTo(em, `stop:${command}`, () => model.set('active', false, chnOpt));
     }
 
     if (em && em.get) this.commands = em.get('Commands');
-  },
+  }
 
   /**
    * Updates class name of the button
@@ -61,7 +57,7 @@ export default Backbone.View.extend({
     const attrCls = model.get('attributes').class;
     const classStr = `${attrCls ? attrCls : ''} ${pfx}btn ${cls ? cls : ''}`;
     this.$el.attr('class', classStr.trim());
-  },
+  }
 
   /**
    * Updates attributes of the button
@@ -76,7 +72,7 @@ export default Backbone.View.extend({
     title && $el.attr({ title });
 
     this.updateClassName();
-  },
+  }
 
   /**
    * Updates visibility of children buttons
@@ -88,7 +84,7 @@ export default Backbone.View.extend({
 
     if (this.model.get('bntsVis')) this.$buttons.addClass(this.btnsVisCls);
     else this.$buttons.removeClass(this.btnsVisCls);
-  },
+  }
 
   /**
    * Update active status of the button
@@ -116,23 +112,21 @@ export default Backbone.View.extend({
     if (model.get('active')) {
       !fromCollection && model.collection.deactivateAll(context, model);
       model.set('active', true, { silent: true }).trigger('checkActive');
-      !fromListen &&
-        commands.runCommand(command, { ...options, sender: model });
+      !fromListen && commands.runCommand(command, { ...options, sender: model });
 
       // Disable button if the command has no stop method
       command.noStop && model.set('active', false);
     } else {
       $el.removeClass(activeCls);
-      !fromListen &&
-        commands.stopCommand(command, { ...options, sender: model, force: 1 });
+      !fromListen && commands.stopCommand(command, { ...options, sender: model, force: 1 });
     }
-  },
+  }
 
   updateDisable() {
     const { disableCls, model } = this;
     const disable = model.get('disable');
     this.$el[disable ? 'addClass' : 'removeClass'](disableCls);
-  },
+  }
 
   /**
    * Update active style status
@@ -142,7 +136,7 @@ export default Backbone.View.extend({
   checkActive() {
     const { model, $el, activeCls } = this;
     model.get('active') ? $el.addClass(activeCls) : $el.removeClass(activeCls);
-  },
+  }
 
   /**
    * Triggered when button is clicked
@@ -153,11 +147,10 @@ export default Backbone.View.extend({
   clicked(e) {
     const { model } = this;
 
-    if (model.get('bntsVis') || model.get('disable') || !model.get('command'))
-      return;
+    if (model.get('bntsVis') || model.get('disable') || !model.get('command')) return;
 
     this.toggleActive();
-  },
+  }
 
   toggleActive() {
     const { model, em } = this;
@@ -173,7 +166,7 @@ export default Backbone.View.extend({
     } else {
       if (model.get('stopDefaultCommand')) em.stopDefault();
     }
-  },
+  }
 
   render() {
     const { model } = this;
@@ -187,4 +180,4 @@ export default Backbone.View.extend({
 
     return this;
   }
-});
+}

src/panels/view/ButtonsView.js

@@ -1,8 +1,8 @@
-import Backbone from 'backbone';
-import ButtonView from './ButtonView';
 import { result } from 'underscore';
+import { View } from '../../common';
+import ButtonView from './ButtonView';
 
-export default Backbone.View.extend({
+export default class ButtonsView extends View {
   initialize(o) {
     this.opt = o || {};
     this.config = this.opt.config || {};
@@ -11,7 +11,7 @@ export default Backbone.View.extend({
     this.listenTo(this.collection, 'add', this.addTo);
     this.listenTo(this.collection, 'reset remove', this.render);
     this.className = this.pfx + 'buttons';
-  },
+  }
 
   /**
    * Add to collection
@@ -21,7 +21,7 @@ export default Backbone.View.extend({
    * */
   addTo(model) {
     this.addToCollection(model);
-  },
+  }
 
   /**
    * Add new object to collection
@@ -38,7 +38,7 @@ export default Backbone.View.extend({
       el,
       model,
       config: this.config,
-      parentM: this.parentM
+      parentM: this.parentM,
     });
     const rendered = view.render().el;
 
@@ -49,13 +49,13 @@ export default Backbone.View.extend({
     }
 
     return rendered;
-  },
+  }
 
   render() {
     var fragment = document.createDocumentFragment();
     this.$el.empty();
 
-    this.collection.each(function(model) {
+    this.collection.each(function (model) {
       this.addToCollection(model, fragment);
     }, this);
 
@@ -63,4 +63,4 @@ export default Backbone.View.extend({
     this.$el.attr('class', result(this, 'className'));
     return this;
   }
-});
+}

src/panels/view/PanelView.js

@@ -1,7 +1,7 @@
-import Backbone from 'backbone';
+import { View } from '../../common';
 import ButtonsView from './ButtonsView';
 
-export default Backbone.View.extend({
+export default class PanelView extends View {
   initialize(o) {
     const config = o.config || {};
     const model = this.model;
@@ -15,21 +15,21 @@ export default Backbone.View.extend({
     this.listenTo(model, 'change:content', this.updateContent);
     this.listenTo(model, 'change:visible', this.toggleVisible);
     model.view = this;
-  },
+  }
 
   /**
    * Append content of the panel
    * */
   appendContent() {
     this.$el.append(this.model.get('appendContent'));
-  },
+  }
 
   /**
    * Update content
    * */
   updateContent() {
     this.$el.html(this.model.get('content'));
-  },
+  }
 
   toggleVisible() {
     if (!this.model.get('visible')) {
@@ -37,11 +37,11 @@ export default Backbone.View.extend({
       return;
     }
     this.$el.removeClass(`${this.ppfx}hidden`);
-  },
+  }
 
   attributes() {
     return this.model.get('attributes');
-  },
+  }
 
   initResize() {
     const em = this.config.em;
@@ -94,25 +94,21 @@ export default Backbone.View.extend({
           const forContainer = target == 'container';
           const styleWidth = style[keyWidth];
           const styleHeight = style[keyHeight];
-          const width =
-            styleWidth && !forContainer ? parseFloat(styleWidth) : rect.width;
-          const height =
-            styleHeight && !forContainer
-              ? parseFloat(styleHeight)
-              : rect.height;
+          const width = styleWidth && !forContainer ? parseFloat(styleWidth) : rect.width;
+          const height = styleHeight && !forContainer ? parseFloat(styleHeight) : rect.height;
           return {
             left: 0,
             top: 0,
             width,
-            height
+            height,
           };
         },
-        ...resizable
+        ...resizable,
       });
       resizer.blur = () => {};
       resizer.focus(this.el);
     }
-  },
+  }
 
   render() {
     const $el = this.$el;
@@ -125,7 +121,7 @@ export default Backbone.View.extend({
     if (this.buttons.length) {
       var buttons = new ButtonsView({
         collection: this.buttons,
-        config: this.config
+        config: this.config,
       });
       $el.append(buttons.render().el);
     }
@@ -133,4 +129,4 @@ export default Backbone.View.extend({
     $el.append(this.model.get('content'));
     return this;
   }
-});
+}

src/panels/view/PanelsView.js

@@ -1,7 +1,7 @@
-import Backbone from 'backbone';
+import { View } from '../../common';
 import PanelView from './PanelView';
 
-export default Backbone.View.extend({
+export default class PanelsView extends View {
   initialize(o) {
     this.opt = o || {};
     this.config = this.opt.config || {};
@@ -11,12 +11,12 @@ export default Backbone.View.extend({
     this.listenTo(items, 'reset', this.render);
     this.listenTo(items, 'remove', this.onRemove);
     this.className = this.pfx + 'panels';
-  },
+  }
 
   onRemove(model) {
     const view = model.view;
     view && view.remove();
-  },
+  }
 
   /**
    * Add to collection
@@ -27,7 +27,7 @@ export default Backbone.View.extend({
    * */
   addTo(model) {
     this.addToCollection(model);
-  },
+  }
 
   /**
    * Add new object to collection
@@ -45,7 +45,7 @@ export default Backbone.View.extend({
     const view = new PanelView({
       el,
       model,
-      config
+      config,
     });
     const rendered = view.render().el;
     const appendTo = model.get('appendTo');
@@ -65,7 +65,7 @@ export default Backbone.View.extend({
 
     view.initResize();
     return rendered;
-  },
+  }
 
   render() {
     const $el = this.$el;
@@ -76,4 +76,4 @@ export default Backbone.View.extend({
     $el.attr('class', this.className);
     return this;
   }
-});
+}