Refactor css composer files to classes

src/css_composer/index.js

@@ -27,15 +27,15 @@
  * @module CssComposer
  */
 
-import { isArray, isString, isUndefined, each } from 'underscore';
-import { isObject } from 'utils/mixins';
+import { isArray, isString, isUndefined } from 'underscore';
+import { isObject } from '../utils/mixins';
+import Module from '../common/module';
+import Selectors from '../selector_manager/model/Selectors';
+import Selector from '../selector_manager/model/Selector';
 import defaults from './config/config';
 import CssRule from './model/CssRule';
 import CssRules from './model/CssRules';
 import CssRulesView from './view/CssRulesView';
-import Selectors from 'selector_manager/model/Selectors';
-import Selector from 'selector_manager/model/Selector';
-import Module from 'common/module';
 
 export default () => {
   let em;

src/css_composer/model/CssRule.js

@@ -1,9 +1,9 @@
-import { Model } from 'backbone';
-import Styleable from 'domain_abstract/model/Styleable';
 import { isEmpty, forEach, isString, isArray } from 'underscore';
-import Selectors from 'selector_manager/model/Selectors';
-import { getMediaLength } from 'code_manager/model/CssGenerator';
-import { isEmptyObj, hasWin } from 'utils/mixins';
+import { Model } from '../../common';
+import Styleable from '../../domain_abstract/model/Styleable';
+import Selectors from '../../selector_manager/model/Selectors';
+import { getMediaLength } from '../../code_manager/model/CssGenerator';
+import { isEmptyObj, hasWin } from '../../utils/mixins';
 
 const { CSS } = hasWin() ? window : {};
 

src/css_composer/model/CssRules.js

@@ -1,11 +1,7 @@
-import Backbone from 'backbone';
+import { Collection } from '../../common';
 import CssRule from './CssRule';
 
-const { Collection } = Backbone;
-
-export default Collection.extend({
-  model: CssRule,
-
+export default class CssRules extends Collection {
   initialize(models, opt) {
     // Inject editor
     if (opt && opt.em) this.editor = opt.em;
@@ -15,22 +11,22 @@ export default Collection.extend({
       this.on('remove', this.onRemove);
       this.on('add', this.onAdd);
     });
-  },
+  }
 
   toJSON(opts) {
     const result = Collection.prototype.toJSON.call(this, opts);
     return result.filter(rule => rule.style && !rule.shallow);
-  },
+  }
 
   onAdd(model, c, o) {
     model.ensureSelectors(model, c, o); // required for undo
-  },
+  }
 
   onRemove(removed) {
     const em = this.editor;
     em.stopListening(removed);
     em.get('UndoManager').remove(removed);
-  },
+  }
 
   add(models, opt = {}) {
     if (typeof models === 'string') {
@@ -38,5 +34,7 @@ export default Collection.extend({
     }
     opt.em = this.editor;
     return Collection.prototype.add.apply(this, [models, opt]);
-  },
-});
+  }
+}
+
+CssRules.prototype.model = CssRule;

src/css_composer/view/CssGroupRuleView.js

@@ -1,9 +1,9 @@
 import CssRuleView from './CssRuleView';
 
-export default CssRuleView.extend({
-  _createElement: function(tagName) {
+export default class CssGroupRuleView extends CssRuleView {
+  _createElement() {
     return document.createTextNode('');
-  },
+  }
 
   render() {
     const model = this.model;
@@ -11,4 +11,4 @@ export default CssRuleView.extend({
     this.el.textContent = model.getDeclaration({ important });
     return this;
   }
-});
+}

src/css_composer/view/CssRuleView.js

@@ -1,7 +1,9 @@
-import Backbone from 'backbone';
+import { View } from '../../common';
 
-export default Backbone.View.extend({
-  tagName: 'style',
+export default class CssRuleView extends View {
+  tagName() {
+    return 'style';
+  }
 
   initialize(o = {}) {
     this.config = o.config || {};
@@ -9,7 +11,7 @@ export default Backbone.View.extend({
     this.listenTo(model, 'change', this.render);
     this.listenTo(model, 'destroy remove', this.remove);
     this.listenTo(model.get('selectors'), 'change', this.render);
-  },
+  }
 
   render() {
     const { model, el } = this;
@@ -17,4 +19,4 @@ export default Backbone.View.extend({
     el.innerHTML = model.toCSS({ important });
     return this;
   }
-});
+}

src/css_composer/view/CssRulesView.js

@@ -1,13 +1,11 @@
-import Backbone from 'backbone';
+import { View } from '../../common';
+import { createEl } from '../../utils/dom';
 import CssRuleView from './CssRuleView';
 import CssGroupRuleView from './CssGroupRuleView';
 
-const $ = Backbone.$;
+const getBlockId = (pfx, order) => `${pfx}${order ? `-${parseFloat(order)}` : ''}`;
 
-const getBlockId = (pfx, order) =>
-  `${pfx}${order ? `-${parseFloat(order)}` : ''}`;
-
-export default Backbone.View.extend({
+export default class CssRulesView extends View {
   initialize(o) {
     const config = o.config || {};
     this.atRules = {};
@@ -18,7 +16,7 @@ export default Backbone.View.extend({
     const coll = this.collection;
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.render);
-  },
+  }
 
   /**
    * Add to collection
@@ -27,7 +25,7 @@ export default Backbone.View.extend({
    * */
   addTo(model) {
     this.addToCollection(model);
-  },
+  }
 
   /**
    * Add new object to collection
@@ -100,16 +98,11 @@ export default Backbone.View.extend({
     }
 
     return rendered;
-  },
+  }
 
   getMediaWidth(mediaText) {
-    return (
-      mediaText &&
-      mediaText
-        .replace(`(${this.em.getConfig('mediaCondition')}: `, '')
-        .replace(')', '')
-    );
-  },
+    return mediaText && mediaText.replace(`(${this.em.getConfig('mediaCondition')}: `, '').replace(')', '');
+  }
 
   render() {
     this.renderStarted = 1;
@@ -119,18 +112,13 @@ export default Backbone.View.extend({
     $el.empty();
 
     // Create devices related DOM structure, ensure also to have a default container
-    const prs = em
-      .get('DeviceManager')
-      .getAll()
-      .pluck('priority');
+    const prs = em.get('DeviceManager').getAll().pluck('priority');
     prs.every(pr => pr) && prs.unshift(0);
-    prs.forEach(pr =>
-      $(`<div id="${getBlockId(className, pr)}"></div>`).appendTo(frag)
-    );
+    prs.forEach(pr => frag.appendChild(createEl('div', { id: getBlockId(className, pr) })));
 
     collection.each(model => this.addToCollection(model, frag));
     $el.append(frag);
     $el.attr('class', className);
     return this;
   }
-});
+}