Refactor code manager files to classes

src/code_manager/model/CodeMirrorEditor.js

@@ -1,6 +1,6 @@
 import { bindAll } from 'underscore';
-import Backbone from 'backbone';
-import { hasWin } from 'utils/mixins';
+import { Model } from '../../common';
+import { hasWin } from '../../utils/mixins';
 
 let CodeMirror;
 
@@ -11,40 +11,39 @@ if (hasWin()) {
   require('codemirror-formatting');
 }
 
-export default Backbone.Model.extend({
-  CodeMirror,
-
-  defaults: {
-    input: '',
-    label: '',
-    codeName: '',
-    theme: 'hopscotch',
-    readOnly: true,
-    lineNumbers: true
-  },
+export default class CodeMirrorEditor extends Model {
+  defaults() {
+    return {
+      input: '',
+      label: '',
+      codeName: '',
+      theme: 'hopscotch',
+      readOnly: true,
+      lineNumbers: true,
+    };
+  }
 
-  /** @inheritdoc */
   init(el) {
     bindAll(this, 'onChange');
     this.editor = CodeMirror.fromTextArea(el, {
       dragDrop: false,
       lineWrapping: true,
       mode: this.get('codeName'),
-      ...this.attributes
+      ...this.attributes,
     });
     this.element = el;
     this.editor.on('change', this.onChange);
 
     return this;
-  },
+  }
 
   onChange() {
     this.trigger('update', this);
-  },
+  }
 
   getEditor() {
     return this.editor;
-  },
+  }
 
   /**
    * The element where the viewer is attached
@@ -52,7 +51,7 @@ export default Backbone.Model.extend({
    */
   getElement() {
     return this.element;
-  },
+  }
 
   /**
    * Set the element which contains the viewer attached.
@@ -64,7 +63,7 @@ export default Backbone.Model.extend({
   setElement(el) {
     this.element = el;
     return this;
-  },
+  }
 
   /**
    * Refresh the viewer
@@ -73,7 +72,7 @@ export default Backbone.Model.extend({
   refresh() {
     this.getEditor().refresh();
     return this;
-  },
+  }
 
   /**
    * Focus the viewer
@@ -82,12 +81,12 @@ export default Backbone.Model.extend({
   focus() {
     this.getEditor().focus();
     return this;
-  },
+  }
 
   getContent() {
     const ed = this.getEditor();
     return ed && ed.getValue();
-  },
+  }
 
   /** @inheritdoc */
   setContent(v, opts = {}) {
@@ -103,4 +102,6 @@ export default Backbone.Model.extend({
 
     !opts.noRefresh && setTimeout(() => this.refresh());
   }
-});
+}
+
+CodeMirrorEditor.prototype.CodeMirror = CodeMirror;

src/code_manager/model/CssGenerator.js

@@ -1,6 +1,6 @@
-import Backbone from 'backbone';
 import { bindAll, isUndefined, each } from 'underscore';
-import { hasWin } from 'utils/mixins';
+import { Model } from '../../common';
+import { hasWin } from '../../utils/mixins';
 
 const maxValue = Number.MAX_VALUE;
 
@@ -9,12 +9,12 @@ export const getMediaLength = mediaQuery => {
   return !length ? '' : length[0];
 };
 
-export default Backbone.Model.extend({
+export default class CssGenerator extends Model {
   initialize() {
     bindAll(this, 'sortRules');
     this.compCls = [];
     this.ids = [];
-  },
+  }
 
   /**
    * Get CSS from a component
@@ -39,7 +39,7 @@ export default Backbone.Model.extend({
     const components = model.components();
     components.each(model => (code += this.buildFromModel(model, opts)));
     return code;
-  },
+  }
 
   build(model, opts = {}) {
     const { json } = opts;
@@ -110,7 +110,7 @@ export default Backbone.Model.extend({
     }
 
     return json ? codeJson.filter(r => r) : code;
-  },
+  }
 
   /**
    * Get CSS from the rule model
@@ -141,7 +141,7 @@ export default Backbone.Model.extend({
     }
 
     return result;
-  },
+  }
 
   /**
    * Get matched rules of a component
@@ -174,7 +174,7 @@ export default Backbone.Model.extend({
     result = result.filter((rule, i) => result.indexOf(rule) === i);
 
     return result;
-  },
+  }
 
   /**
    * Get the numeric length of the media query string
@@ -186,7 +186,7 @@ export default Backbone.Model.extend({
     if (!length) return maxValue;
 
     return parseFloat(length[1]);
-  },
+  }
 
   /**
    * Return a sorted array from media query object
@@ -202,7 +202,7 @@ export default Backbone.Model.extend({
       const right = isMobFirst ? b.key : a.key;
       return this.getQueryLength(left) - this.getQueryLength(right);
     });
-  },
+  }
 
   sortRules(a, b) {
     const getKey = rule => rule.get('mediaText');
@@ -210,7 +210,7 @@ export default Backbone.Model.extend({
     const left = isMobFirst ? getKey(a) : getKey(b);
     const right = isMobFirst ? getKey(b) : getKey(a);
     return this.getQueryLength(left) - this.getQueryLength(right);
-  },
+  }
 
   /**
    * Return passed selector without states
@@ -223,5 +223,5 @@ export default Backbone.Model.extend({
       .split(' ')
       .map(item => item.split(':')[0])
       .join(' ');
-  },
-});
+  }
+}

src/code_manager/model/HtmlGenerator.js

@@ -1,4 +1,4 @@
-import { Model } from 'backbone';
+import { Model } from '../../common';
 
 export default class HTMLGenerator extends Model {
   build(model, opts = {}) {

src/code_manager/model/JsGenerator.js

@@ -1,12 +1,12 @@
 import { extend } from 'underscore';
-import Backbone from 'backbone';
+import { Model } from '../../common';
 
 function isFunctionEmpty(fn) {
   const content = fn.toString().match(/\{([\s\S]*)\}/m)[1]; // content between first and last { }
   return content.replace(/^\s*\/\/.*$/gm, '').trim().length === 0; // remove comments
 }
 
-export default Backbone.Model.extend({
+export default class JsGenerator extends Model {
   mapModel(model) {
     var code = '';
     var script = model.get('script-export') || model.get('script');
@@ -49,7 +49,7 @@ export default Backbone.Model.extend({
     }, this);
 
     return code;
-  },
+  }
 
   build(model) {
     this.mapJs = {};
@@ -88,5 +88,5 @@ export default Backbone.Model.extend({
     }
 
     return code;
-  },
-});
+  }
+}

src/code_manager/model/JsonGenerator.js

@@ -1,23 +1,22 @@
 import { each } from 'underscore';
-import Backbone from 'backbone';
+import { Model, Collection } from '../../common';
 
-export default Backbone.Model.extend({
-  /** @inheritdoc */
+export default class JsonGenerator extends Model {
   build(model) {
     var json = model.toJSON();
     this.beforeEach(json);
 
     each(
       json,
-      function(v, attr) {
+      function (v, attr) {
         var obj = json[attr];
-        if (obj instanceof Backbone.Model) {
+        if (obj instanceof Model) {
           json[attr] = this.build(obj);
-        } else if (obj instanceof Backbone.Collection) {
+        } else if (obj instanceof Collection) {
           var coll = obj;
           json[attr] = [];
           if (coll.length) {
-            coll.each(function(el, index) {
+            coll.each(function (el, index) {
               json[attr][index] = this.build(el);
             }, this);
           }
@@ -27,7 +26,7 @@ export default Backbone.Model.extend({
     );
 
     return json;
-  },
+  }
 
   /**
    * Execute on each object
@@ -36,4 +35,4 @@ export default Backbone.Model.extend({
   beforeEach(obj) {
     delete obj.status;
   }
-});
+}

src/code_manager/view/EditorView.js

@@ -1,5 +1,5 @@
-import html from 'utils/html';
-import { View } from 'backbone';
+import { View } from '../../common';
+import html from '../../utils/html';
 
 export default class EditorView extends View {
   template({ pfx, codeName, label }) {