Convert code to using class

src/dom_components/model/Components.js

@@ -40,7 +40,7 @@ const getComponentsFromDefs = (items, all = {}, opts = {}) => {
   });
 };
 
-export default Backbone.Collection.extend({
+export default class Components extends Backbone.Collection {
   initialize(models, opt = {}) {
     this.opt = opt;
     this.listenTo(this, 'add', this.onAdd);
@@ -50,7 +50,7 @@ export default Backbone.Collection.extend({
     this.config = config;
     this.em = em;
     this.domc = opt.domc || (em && em.get('DomComponents'));
-  },
+  }
 
   resetChildren(models, opts = {}) {
     const coll = this;
@@ -60,7 +60,7 @@ export default Backbone.Collection.extend({
     opts.keepIds = getComponentIds(prev).filter(pr => newIds.indexOf(pr) >= 0);
     toRemove.forEach(md => this.removeChildren(md, coll, opts));
     models.each(model => this.onAdd(model));
-  },
+  }
 
   resetFromString(input = '', opts = {}) {
     opts.keepIds = getComponentIds(this);
@@ -71,7 +71,7 @@ export default Backbone.Collection.extend({
     const newCmps = getComponentsFromDefs(cmps, allByID, opts);
     this.reset(newCmps, opts);
     this.em?.trigger('component:content', this.parent, opts, input);
-  },
+  }
 
   removeChildren(removed, coll, opts = {}) {
     // Removing a parent component can cause this function
@@ -123,7 +123,7 @@ export default Backbone.Collection.extend({
     em.stopListening(removed);
     em.stopListening(removed.get('classes'));
     removed.__postRemove();
-  },
+  }
 
   model(attrs, options) {
     const { opt } = options.collection;
@@ -155,7 +155,7 @@ export default Backbone.Collection.extend({
     }
 
     return new model(attrs, options);
-  },
+  }
 
   parseString(value, opt = {}) {
     const { em, domc } = this;
@@ -173,7 +173,7 @@ export default Backbone.Collection.extend({
     }
 
     return parsed.html;
-  },
+  }
 
   add(models, opt = {}) {
     opt.keepIds = [...(opt.keepIds || []), ...getComponentIds(opt.previousModels)];
@@ -197,7 +197,7 @@ export default Backbone.Collection.extend({
     const result = Backbone.Collection.prototype.add.apply(this, [models, opt]);
     this.__firstAdd = result;
     return result;
-  },
+  }
 
   /**
    * Process component definition.
@@ -250,7 +250,7 @@ export default Backbone.Collection.extend({
     }
 
     return model;
-  },
+  }
 
   onAdd(model, c, opts = {}) {
     const { domc, em } = this;
@@ -267,9 +267,9 @@ export default Backbone.Collection.extend({
 
     model.__postAdd({ recursive: 1 });
     this.__onAddEnd();
-  },
+  }
 
-  __onAddEnd: debounce(function () {
+  __onAddEnd = debounce(function () {
     // TODO to check symbols on load, probably this might be removed as symbols
     // are always recovered from the model
     // const { domc } = this;
@@ -295,5 +295,5 @@ export default Backbone.Collection.extend({
     //   });
     // };
     // onAll(toCheck);
-  }),
-});
+  });
+}

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() {}
+}