Convert ComponentViews to classes

src/dom_components/model/ToolbarButton.js

@@ -1,8 +1,8 @@
 import Backbone from 'backbone';
 
-export default Backbone.Model.extend({
-  defaults: {
+export default class ToolbarButton extends Backbone.Model {
+  defaults = {
     command: '',
-    attributes: {}
-  }
-});
+    attributes: {},
+  };
+}

src/dom_components/view/ComponentCommentView.js

@@ -1,7 +1,7 @@
 import ComponentView from './ComponentTextNodeView';
 
-export default ComponentView.extend({
+export default class ComponentCommentView extends ComponentView {
   _createElement() {
     return document.createComment(this.model.get('content'));
   }
-});
+}

src/dom_components/view/ComponentFrameView.js

@@ -1,31 +1,31 @@
 import ComponentView from './ComponentView';
 import { createEl, find, attrUp } from 'utils/dom';
 
-export default ComponentView.extend({
-  tagName: 'div',
+export default class ComponentFrameView extends ComponentView.extend {
+  tagName = 'div';
 
   initialize(...args) {
     ComponentView.prototype.initialize.apply(this, args);
     this.listenTo(this.model, 'change:attributes:src', this.updateSrc);
-  },
+  }
 
   updateSrc() {
     const frame = find(this.el, 'iframe')[0];
     frame && attrUp(frame, { src: this.__getSrc() });
-  },
+  }
 
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
     const frame = createEl('iframe', {
       class: `${this.ppfx}no-pointer`,
       style: 'width: 100%; height: 100%; border: none',
-      src: this.__getSrc()
+      src: this.__getSrc(),
     });
     this.el.appendChild(frame);
     return this;
-  },
+  }
 
   __getSrc() {
     return this.model.getAttributes().src || '';
   }
-});
+}

src/dom_components/view/ComponentImageView.js

@@ -1,23 +1,23 @@
 import { isString } from 'underscore';
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  tagName: 'img',
+export default class ComponentImageView extends ComponentView {
+  tagName = 'img';
 
-  events: {
+  events = {
     dblclick: 'onActive',
     click: 'initResize',
     error: 'onError',
     load: 'onLoad',
     dragstart: 'noDrag',
-  },
+  };
 
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
     this.listenTo(this.model, 'change:src', this.updateSrc);
     this.classEmpty = `${this.ppfx}plh-image`;
     this.fetchFile();
-  },
+  }
 
   /**
    * Fetch file if exists
@@ -36,7 +36,7 @@ export default ComponentView.extend({
       });
       model.set('file', '');
     }
-  },
+  }
 
   /**
    * Update src attribute
@@ -48,7 +48,7 @@ export default ComponentView.extend({
     const srcExists = src && !model.isDefaultSrc();
     model.addAttributes({ src });
     $el[srcExists ? 'removeClass' : 'addClass'](classEmpty);
-  },
+  }
 
   /**
    * Open dialog for image changing
@@ -71,22 +71,22 @@ export default ComponentView.extend({
         accept: 'image/*',
       });
     }
-  },
+  }
 
   onError() {
     const fallback = this.model.getSrcResult({ fallback: 1 });
     if (fallback) this.el.src = fallback;
-  },
+  }
 
   onLoad() {
     // Used to update component tools box (eg. toolbar, resizer) once the image is loaded
     this.em.trigger('change:canvasOffset');
-  },
+  }
 
   noDrag(ev) {
     ev.preventDefault();
     return false;
-  },
+  }
 
   render() {
     this.renderAttributes();
@@ -98,5 +98,5 @@ export default ComponentView.extend({
     this.postRender();
 
     return this;
-  },
-});
+  }
+}

src/dom_components/view/ComponentLabelView.js

@@ -1,5 +1,5 @@
 import ComponentLinkView from './ComponentLinkView';
 
-export default ComponentLinkView.extend({
-  tagName: 'span' // Avoid Firefox bug with label editing #2332
-});
+export default class ComponentLabelView extends ComponentLinkView {
+  tagName = 'span'; // Avoid Firefox bug with label editing #2332
+}

src/dom_components/view/ComponentLinkView.js

@@ -1,6 +1,6 @@
 import ComponentView from './ComponentTextView';
 
-export default ComponentView.extend({
+export default class ComponentLinkView extends ComponentView {
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
 
@@ -10,4 +10,4 @@ export default ComponentView.extend({
 
     return this;
   }
-});
+}

src/dom_components/view/ComponentMapView.js

@@ -1,15 +1,14 @@
-import Backbone from 'backbone';
 import ComponentView from './ComponentImageView';
 
-export default ComponentView.extend({
-  tagName: 'div',
+export default class ComponentMapView extends ComponentView {
+  tagName = 'div';
 
-  events: {},
+  events = {};
 
   initialize(o) {
     ComponentView.prototype.initialize.apply(this, arguments);
     this.classEmpty = this.ppfx + 'plh-map';
-  },
+  }
 
   /**
    * Update the map on the canvas
@@ -17,7 +16,7 @@ export default ComponentView.extend({
    */
   updateSrc() {
     this.getIframe().src = this.model.get('src');
-  },
+  }
 
   getIframe() {
     if (!this.iframe) {
@@ -30,7 +29,7 @@ export default ComponentView.extend({
       this.iframe = ifrm;
     }
     return this.iframe;
-  },
+  }
 
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
@@ -38,4 +37,4 @@ export default ComponentView.extend({
     this.el.appendChild(this.getIframe());
     return this;
   }
-});
+}

src/dom_components/view/ComponentScriptView.js

@@ -1,9 +1,9 @@
 import ComponentView from './ComponentImageView';
 
-export default ComponentView.extend({
-  tagName: 'script',
+export default class ComponentScriptView extends ComponentView {
+  tagName = 'script';
 
-  events: {},
+  events = {};
 
   render() {
     const { model, em } = this;
@@ -39,4 +39,4 @@ export default ComponentView.extend({
     this.postRender();
     return this;
   }
-});
+}

src/dom_components/view/ComponentSvgView.js

@@ -1,7 +1,7 @@
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  _createElement: function(tagName) {
+export default class ComponentSvgView extends ComponentView {
+  _createElement(tagName) {
     return document.createElementNS('http://www.w3.org/2000/svg', tagName);
   }
-});
+}

src/dom_components/view/ComponentTableBodyView.js

@@ -1,3 +1,3 @@
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({});
+export default class ComponentTableBodyView extends ComponentView {}

src/dom_components/view/ComponentTextNodeView.js

@@ -1,24 +1,24 @@
 import ComponentView from './ComponentView';
 
-export default ComponentView.extend({
+export default class ComponentTextNodeView extends ComponentView {
   initialize() {
     ComponentView.prototype.initialize.apply(this, arguments);
-  },
+  }
 
   // Clear methods used on Nodes with attributes
-  _setAttributes() {},
-  renderAttributes() {},
-  updateStatus() {},
-  updateClasses() {},
-  setAttribute() {},
-  updateAttributes() {},
-  initClasses() {},
-  initComponents() {},
-  delegateEvents() {},
+  _setAttributes() {}
+  renderAttributes() {}
+  updateStatus() {}
+  updateClasses() {}
+  setAttribute() {}
+  updateAttributes() {}
+  initClasses() {}
+  initComponents() {}
+  delegateEvents() {}
 
   _createElement() {
     return document.createTextNode('');
-  },
+  }
 
   render() {
     const { model, el } = this;
@@ -26,4 +26,4 @@ export default ComponentView.extend({
     el.textContent = model.get('content');
     return this;
   }
-});
+}

src/dom_components/view/ComponentTextView.js

@@ -4,11 +4,11 @@ import { bindAll } from 'underscore';
 
 const compProt = ComponentView.prototype;
 
-export default ComponentView.extend({
-  events: {
+export default class ComponentTextView extends ComponentView {
+  events = {
     dblclick: 'onActive',
     input: 'onInput',
-  },
+  };
 
   initialize(o) {
     compProt.initialize.apply(this, arguments);
@@ -19,11 +19,11 @@ export default ComponentView.extend({
     this.listenTo(model, 'change:content', this.updateContentText);
     this.listenTo(model, 'sync:content', this.syncContent);
     this.rte = em && em.get('RichTextEditor');
-  },
+  }
 
   updateContentText(m, v, opts = {}) {
     !opts.fromDisable && this.disableEditing();
-  },
+  }
 
   canActivate() {
     const { model, rteEnabled, em } = this;
@@ -52,7 +52,7 @@ export default ComponentView.extend({
     }
 
     return { result, delegate };
-  },
+  }
 
   /**
    * Enable element content editing
@@ -85,11 +85,11 @@ export default ComponentView.extend({
     }
 
     this.toggleEvents(1);
-  },
+  }
 
   onDisable() {
     this.disableEditing();
-  },
+  }
 
   /**
    * Disable element content editing
@@ -115,7 +115,7 @@ export default ComponentView.extend({
     }
 
     this.toggleEvents();
-  },
+  }
 
   /**
    * get content from RTE
@@ -126,7 +126,7 @@ export default ComponentView.extend({
     const canGetRteContent = activeRte && typeof activeRte.getContent === 'function';
 
     return canGetRteContent ? activeRte.getContent() : this.getChildrenContainer().innerHTML;
-  },
+  }
 
   /**
    * Merge content from the DOM to the model
@@ -147,7 +147,7 @@ export default ComponentView.extend({
     } else {
       comps.resetFromString(content, opts);
     }
-  },
+  }
 
   insertComponent(content, opts = {}) {
     const { model, el } = this;
@@ -184,7 +184,7 @@ export default ComponentView.extend({
     }
 
     return model.append(content, opts);
-  },
+  }
 
   /**
    * Callback on input event
@@ -197,7 +197,7 @@ export default ComponentView.extend({
 
     // Update toolbars
     em && em.trigger(ev, this.model);
-  },
+  }
 
   /**
    * Isolate disable propagation method
@@ -206,7 +206,7 @@ export default ComponentView.extend({
    * */
   disablePropagation(e) {
     e.stopPropagation();
-  },
+  }
 
   /**
    * Enable/Disable events
@@ -245,5 +245,5 @@ export default ComponentView.extend({
         el && el.tagName == 'BODY' && (el = 0);
       }
     }
-  },
-});
+  }
+}

src/dom_components/view/ComponentVideoView.js

@@ -1,28 +1,20 @@
 import ComponentView from './ComponentImageView';
 import OComponentView from './ComponentView';
 
-export default ComponentView.extend({
-  tagName: 'div',
+export default class ComponentVideoView extends ComponentView {
+  tagName = 'div';
 
-  events: {},
+  events = {};
 
   initialize(o) {
     OComponentView.prototype.initialize.apply(this, arguments);
     const { model } = this;
-    const props = [
-      'loop',
-      'autoplay',
-      'controls',
-      'color',
-      'rel',
-      'modestbranding',
-      'poster'
-    ];
+    const props = ['loop', 'autoplay', 'controls', 'color', 'rel', 'modestbranding', 'poster'];
     const events = props.map(p => `change:${p}`).join(' ');
     this.listenTo(model, 'change:provider', this.updateProvider);
     this.listenTo(model, 'change:src', this.updateSrc);
     this.listenTo(model, events, this.updateVideo);
-  },
+  }
 
   /**
    * Rerender on update of the provider
@@ -32,7 +24,7 @@ export default ComponentView.extend({
     var prov = this.model.get('provider');
     this.el.innerHTML = '';
     this.el.appendChild(this.renderByProvider(prov));
-  },
+  }
 
   /**
    * Update the source of the video
@@ -57,7 +49,7 @@ export default ComponentView.extend({
     }
 
     videoEl.src = src;
-  },
+  }
 
   /**
    * Update video parameters
@@ -79,7 +71,7 @@ export default ComponentView.extend({
         videoEl.controls = md.get('controls');
         videoEl.poster = md.get('poster');
     }
-  },
+  }
 
   renderByProvider(prov) {
     var videoEl;
@@ -98,14 +90,14 @@ export default ComponentView.extend({
     }
     this.videoEl = videoEl;
     return videoEl;
-  },
+  }
 
   renderSource() {
     var el = document.createElement('video');
     el.src = this.model.get('src');
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   renderYoutube() {
     var el = document.createElement('iframe');
@@ -114,7 +106,7 @@ export default ComponentView.extend({
     el.setAttribute('allowfullscreen', true);
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   renderYoutubeNoCookie() {
     var el = document.createElement('iframe');
@@ -123,7 +115,7 @@ export default ComponentView.extend({
     el.setAttribute('allowfullscreen', true);
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   renderVimeo() {
     var el = document.createElement('iframe');
@@ -132,13 +124,13 @@ export default ComponentView.extend({
     el.setAttribute('allowfullscreen', true);
     this.initVideoEl(el);
     return el;
-  },
+  }
 
   initVideoEl(el) {
     el.className = this.ppfx + 'no-pointer';
     el.style.height = '100%';
     el.style.width = '100%';
-  },
+  }
 
   render(...args) {
     ComponentView.prototype.render.apply(this, args);
@@ -148,4 +140,4 @@ export default ComponentView.extend({
     this.updateVideo();
     return this;
   }
-});
+}

src/dom_components/view/ComponentView.js

@@ -6,14 +6,14 @@ import Selectors from 'selector_manager/model/Selectors';
 import { replaceWith } from 'utils/dom';
 import { setViewEl } from 'utils/mixins';
 
-export default Backbone.View.extend({
+export default class ComponentView extends Backbone.View {
   className() {
     return this.getClasses();
-  },
+  }
 
   tagName() {
     return this.model.get('tagName');
-  },
+  }
 
   initialize(opt = {}) {
     const model = this.model;
@@ -50,13 +50,13 @@ export default Backbone.View.extend({
     };
     this.delegateEvents();
     !modelOpt.temporary && this.init(this._clbObj());
-  },
+  }
 
   __isDraggable() {
     const { model, config } = this;
     const { draggable } = model.attributes;
     return config.draggableComponents && draggable;
-  },
+  }
 
   _clbObj() {
     const { em, model, el } = this;
@@ -65,27 +65,27 @@ export default Backbone.View.extend({
       model,
       el,
     };
-  },
+  }
 
   /**
    * Initialize callback
    */
-  init() {},
+  init() {}
 
   /**
    * Remove callback
    */
-  removed() {},
+  removed() {}
 
   /**
    * Callback executed when the `active` event is triggered on component
    */
-  onActive() {},
+  onActive() {}
 
   /**
    * Callback executed when the `disable` event is triggered on component
    */
-  onDisable() {},
+  onDisable() {}
 
   remove() {
     Backbone.View.prototype.remove.apply(this, arguments);
@@ -102,7 +102,7 @@ export default Backbone.View.extend({
     $el.data({ model: '', collection: '', view: '' });
     // delete model.view; // Sorter relies on this property
     return this;
-  },
+  }
 
   handleDragStart(event) {
     if (!this.__isDraggable()) return false;
@@ -112,7 +112,7 @@ export default Backbone.View.extend({
       target: this.model,
       event,
     });
-  },
+  }
 
   initClasses() {
     const { model } = this;
@@ -125,7 +125,7 @@ export default Backbone.View.extend({
       this.listenTo(classes, 'add remove change', this.updateClasses);
       classes.length && this.importClasses();
     }
-  },
+  }
 
   initComponents(opts = {}) {
     const { model, $el, childrenView } = this;
@@ -140,7 +140,7 @@ export default Backbone.View.extend({
       !opts.avoidRender && this.renderChildren();
       this.listenTo(...toListen);
     }
-  },
+  }
 
   /**
    * Handle any property change
@@ -155,7 +155,7 @@ export default Backbone.View.extend({
     for (let prop in model.changed) {
       model.emitUpdate(prop);
     }
-  },
+  }
 
   /**
    * Import, if possible, classes inside main container
@@ -169,7 +169,7 @@ export default Backbone.View.extend({
         clm.add(m.get('name'));
       });
     }
-  },
+  }
 
   /**
    * Update item on status change
@@ -212,7 +212,7 @@ export default Backbone.View.extend({
 
     cls = cls.trim();
     cls && el.setAttribute('class', cls);
-  },
+  }
 
   /**
    * Update highlight attribute
@@ -223,7 +223,7 @@ export default Backbone.View.extend({
     const isTextable = model.get('textable');
     const hl = model.get('highlightable') && (isTextable || !model.isChildOf('text'));
     this.setAttribute('data-gjs-highlightable', hl ? true : '');
-  },
+  }
 
   /**
    * Update style attribute
@@ -238,7 +238,7 @@ export default Backbone.View.extend({
     } else {
       this.setAttribute('style', model.styleToString(opts));
     }
-  },
+  }
 
   /**
    * Update classe attribute
@@ -251,7 +251,7 @@ export default Backbone.View.extend({
     // Regenerate status class
     this.updateStatus();
     this.onAttrUpdate();
-  },
+  }
 
   /**
    * Update single attribute
@@ -261,7 +261,7 @@ export default Backbone.View.extend({
   setAttribute(name, value) {
     const el = this.$el;
     value ? el.attr(name, value) : el.removeAttr(name);
-  },
+  }
 
   /**
    * Get classes from attributes.
@@ -272,7 +272,7 @@ export default Backbone.View.extend({
    * */
   getClasses() {
     return this.model.getClasses().join(' ');
-  },
+  }
 
   /**
    * Update attributes
@@ -304,7 +304,7 @@ export default Backbone.View.extend({
     keys(attr).forEach(key => attr[key] === false && delete attr[key]);
 
     $el.attr(attr);
-  },
+  }
 
   /**
    * Update component content
@@ -314,7 +314,7 @@ export default Backbone.View.extend({
     const content = this.model.get('content');
     const hasComps = this.model.components().length;
     this.getChildrenContainer().innerHTML = hasComps ? '' : content;
-  },
+  }
 
   /**
    * Prevent default helper
@@ -323,7 +323,7 @@ export default Backbone.View.extend({
    */
   prevDef(e) {
     e.preventDefault();
-  },
+  }
 
   /**
    * Render component's script
@@ -333,7 +333,7 @@ export default Backbone.View.extend({
     const { model, em } = this;
     if (!model.get('script')) return;
     em && em.get('Canvas').getCanvasView().updateScript(this);
-  },
+  }
 
   /**
    * Return children container
@@ -369,7 +369,7 @@ export default Backbone.View.extend({
     }
 
     return container;
-  },
+  }
 
   /**
    * This returns rect informations not affected by the canvas zoom.
@@ -399,7 +399,7 @@ export default Backbone.View.extend({
     assignRect(target);
 
     return rect;
-  },
+  }
 
   isInViewport({ rect } = {}) {
     const { el } = this;
@@ -415,7 +415,7 @@ export default Backbone.View.extend({
       top <= frame.scrollBottom &&
       left <= frameElement.offsetWidth + body.scrollLeft
     );
-  },
+  }
 
   scrollIntoView(opts = {}) {
     const rect = this.getOffsetRect();
@@ -435,7 +435,7 @@ export default Backbone.View.extend({
         });
       }
     }
-  },
+  }
 
   /**
    * Recreate the element of the view
@@ -447,18 +447,18 @@ export default Backbone.View.extend({
     this._setData();
     replaceWith(el, this.el);
     this.render();
-  },
+  }
 
   _setData() {
     const { model } = this;
     const collection = model.components();
     const view = this;
     this.$el.data({ model, collection, view });
-  },
+  }
 
   _getFrame() {
     return this.config.frameView;
-  },
+  }
 
   /**
    * Render children components
@@ -482,14 +482,14 @@ export default Backbone.View.extend({
     for (var i = 0, len = childNodes.length; i < len; i++) {
       container.appendChild(childNodes.shift());
     }
-  },
+  }
 
   renderAttributes() {
     this.updateAttributes();
     this.updateClasses();
-  },
+  }
 
-  onAttrUpdate() {},
+  onAttrUpdate() {}
 
   render() {
     this.renderAttributes();
@@ -500,13 +500,13 @@ export default Backbone.View.extend({
     this.postRender();
 
     return this;
-  },
+  }
 
   postRender() {
     if (!this.modelOpt.temporary) {
       this.onRender(this._clbObj());
     }
-  },
+  }
 
-  onRender() {},
-});
+  onRender() {}
+}

src/dom_components/view/ComponentsView.js

@@ -2,7 +2,7 @@ import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
 import { removeEl } from '../../utils/dom';
 
-export default Backbone.View.extend({
+export default class ComponentsView extends Backbone.View {
   initialize(o) {
     this.opts = o || {};
     this.config = o.config || {};
@@ -11,7 +11,7 @@ export default Backbone.View.extend({
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.resetChildren);
     this.listenTo(coll, 'remove', this.removeChildren);
-  },
+  }
 
   removeChildren(removed, coll, opts = {}) {
     removed.views.forEach(view => {
@@ -24,7 +24,7 @@ export default Backbone.View.extend({
 
     const inner = removed.components();
     inner.forEach(it => this.removeChildren(it, coll, opts));
-  },
+  }
 
   /**
    * Add to collection
@@ -45,7 +45,7 @@ export default Backbone.View.extend({
       };
       triggerAdd(model);
     }
-  },
+  }
 
   /**
    * Add new object to collection
@@ -120,13 +120,13 @@ export default Backbone.View.extend({
     }
 
     return rendered;
-  },
+  }
 
   resetChildren(models, { previousModels = [] } = {}) {
     this.parentEl.innerHTML = '';
     previousModels.forEach(md => this.removeChildren(md, this.collection));
     models.each(model => this.addToCollection(model));
-  },
+  }
 
   render(parent) {
     const el = this.el;
@@ -136,5 +136,5 @@ export default Backbone.View.extend({
     el.innerHTML = '';
     el.appendChild(frag);
     return this;
-  },
-});
+  }
+}

src/dom_components/view/ToolbarButtonView.js

@@ -1,23 +1,23 @@
 import Backbone from 'backbone';
 
-export default Backbone.View.extend({
+export default class ToolbarButtonView extends Backbone.View {
   events() {
     return (
       this.model.get('events') || {
         mousedown: 'handleClick',
       }
     );
-  },
+  }
 
   attributes() {
     return this.model.get('attributes');
-  },
+  }
 
   initialize(opts = {}) {
     const { config = {} } = opts;
     this.em = config.em;
     this.editor = config.editor;
-  },
+  }
 
   handleClick(event) {
     event.preventDefault();
@@ -48,7 +48,7 @@ export default Backbone.View.extend({
 
     em.trigger('toolbar:run:before');
     this.execCommand(calibrated);
-  },
+  }
 
   execCommand(event) {
     const opts = { event };
@@ -62,7 +62,7 @@ export default Backbone.View.extend({
     if (typeof command === 'string') {
       editor.runCommand(command, opts);
     }
-  },
+  }
 
   render() {
     const { editor, $el, model } = this;
@@ -73,5 +73,5 @@ export default Backbone.View.extend({
     id && $el.addClass(`${pfx}toolbar-item__${id}`);
     label && $el.append(label);
     return this;
-  },
-});
+  }
+}