Extend few methods on Backbone and cash

src/block_manager/view/BlockView.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({
 

src/code_manager/view/EditorView.js

@@ -18,7 +18,7 @@ module.exports = Backbone.View.extend({
     obj.pfx = this.pfx;
     this.$el.html( this.template(obj) );
     this.$el.attr('class', this.pfx + 'editor-c');
-    this.$el.find('#'+this.pfx+'code').html(this.model.get('input'));
+    this.$el.find('#'+this.pfx+'code').append(this.model.get('input'));
     return this;
   },
 

src/commands/view/CreateComponent.js

@@ -1,5 +1,5 @@
-var Backbone = require('backbone');
-var SelectPosition = require('./SelectPosition');
+const SelectPosition = require('./SelectPosition');
+const $ = Backbone.$;
 
 module.exports = _.extend({}, SelectPosition, {
 

src/commands/view/DeleteComponent.js

@@ -1,5 +1,5 @@
-var Backbone = require('backbone');
-var SelectComponent = require('./SelectComponent');
+const SelectComponent = require('./SelectComponent');
+const $ = Backbone.$;
 
 module.exports = _.extend({},SelectComponent,{
 

src/commands/view/ExportTemplate.js

@@ -1,3 +1,5 @@
+const $ = Backbone.$;
+
 module.exports = {
 
   run(editor, sender) {

src/commands/view/MoveComponent.js

@@ -1,6 +1,6 @@
-var Backbone = require('backbone');
-var SelectComponent = require('./SelectComponent');
-var SelectPosition = require('./SelectPosition');
+const SelectComponent = require('./SelectComponent');
+const SelectPosition = require('./SelectPosition');
+const $ = Backbone.$;
 
 module.exports = _.extend({}, SelectPosition, SelectComponent, {
 

src/commands/view/OpenBlocks.js

@@ -1,3 +1,5 @@
+const $ = Backbone.$;
+
 module.exports = {
 
   run(editor, sender) {
@@ -6,7 +8,7 @@ module.exports = {
     var bm = editor.BlockManager;
     var panelC;
     if(!this.blocks){
-      this.blocks = $('<div/>').get(0);
+      this.blocks = $('<div></div>').get(0);
       this.blocks.appendChild(bm.render());
       var panels = editor.Panels;
       if(!panels.getPanel('views-container'))

src/commands/view/OpenLayers.js

@@ -1,4 +1,5 @@
-var Layers = require('navigator');
+const Layers = require('navigator');
+const $ = Backbone.$;
 
 module.exports = {
 

src/commands/view/OpenTraitManager.js

@@ -1,3 +1,5 @@
+const $ = Backbone.$;
+
 module.exports = {
 
   run(editor, sender) {
@@ -8,7 +10,7 @@ module.exports = {
     if(!this.obj){
       var tmView = tm.getTraitsViewer();
       var confTm = tm.getConfig();
-      this.obj = $('<div/>')
+      this.obj = $('<div></div>')
       .append('<div class="'+pfx+'traits-label">' + confTm.labelContainer + '</div>')
       .get(0);
       this.obj.appendChild(tmView.render().el);

src/commands/view/SelectPosition.js

@@ -1,3 +1,5 @@
+const $ = Backbone.$;
+
 module.exports = {
 
   /**

src/commands/view/ShowOffset.js

@@ -1,4 +1,4 @@
-const $ = require('backbone').$;
+const $ = Backbone.$;
 
 module.exports = {
 

src/editor/model/Editor.js

@@ -25,17 +25,12 @@ const UndoManager = require('backbone-undo');
 const key = require('keymaster');
 let timedInterval;
 
-require('utils/cashAdds')(Backbone.$);
-
-/*
-if (!$) {
-  $ = cash;
-  window.$ = $;
-}
-console.log(Backbone.$);
-if (!Backbone.$) {
-  Backbone.$ = $;
-}*/
+require('utils/extender')({
+  Backbone: Backbone,
+  $: Backbone.$
+});
+
+const $ = Backbone.$;
 
 module.exports = Backbone.Model.extend({
 

src/modal_dialog/view/ModalView.js

@@ -48,8 +48,12 @@ module.exports = Backbone.View.extend({
    * @private
    */
   getContent() {
-    if(!this.$content)
-      this.$content  = this.$el.find('.'+this.pfx+'content #'+this.pfx+'c');
+    const pfx = this.pfx;
+
+    if (!this.$content) {
+      this.$content = this.$el.find(`.${pfx}content #${pfx}c`);
+    }
+
     return this.$content;
   },
 
@@ -70,8 +74,11 @@ module.exports = Backbone.View.extend({
    * */
   updateContent() {
     var content = this.getContent();
-    this.getCollector().append(content.children());
-    content.html(this.model.get('content'));
+    const children = content.children();
+    const coll = this.getCollector();
+    const body = this.model.get('content');
+    children.length && coll.append(children);
+    content.empty().append(body);
   },
 
   /**

src/panels/view/ButtonView.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({
 

src/rich_text_editor/index.js

@@ -21,6 +21,8 @@
  * http://www.quirksmode.org/dom/execCommand.html
  * @module RichTextEditor
  */
+const $ = Backbone.$;
+
 module.exports = () => {
   var c = {},
   defaults = require('./config/config'),

src/rich_text_editor/view/CommandButtonSelectView.js

@@ -1,5 +1,5 @@
-var Backbone = require('backbone');
-var CommandButtonView = require('./CommandButtonView');
+const CommandButtonView = require('./CommandButtonView');
+const $ = Backbone.$;
 
 module.exports = CommandButtonView.extend({
 

src/style_manager/view/PropertyFileView.js

@@ -1,5 +1,5 @@
-var Backbone = require('backbone');
-var PropertyView = require('./PropertyView');
+const PropertyView = require('./PropertyView');
+const $ = Backbone.$;
 
 module.exports = PropertyView.extend({
 

src/style_manager/view/PropertyStackView.js

@@ -293,7 +293,7 @@ module.exports = PropertyCompositeView.extend({
       n.push(o);
     },this);
 
-    this.$props.detach();
+    //this.$props.detach();
     var layers = this.getLayers();
     layers.reset();
     layers.add(n);

src/trait_manager/view/TraitSelectView.js

@@ -1,5 +1,5 @@
-var Backbone = require('backbone');
-var TraitView = require('./TraitView');
+const TraitView = require('./TraitView');
+const $ = Backbone.$;
 
 module.exports = TraitView.extend({
 

src/trait_manager/view/TraitView.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({
 

src/utils/Dragger.js

@@ -1,3 +1,5 @@
+const $ = Backbone.$;
+
 var getBoundingRect = (el, win) => {
   var w = win || window;
   var rect = el.getBoundingClientRect();

src/utils/Resizer.js

@@ -1,3 +1,5 @@
+const $ = Backbone.$;
+
 var defaults = {
   // Function which returns custom X and Y coordinates of the mouse
   mousePosFetcher: null,

src/utils/Sorter.js

@@ -1,4 +1,3 @@
-const Backbone = require('backbone');
 const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({

src/utils/cashAdds.js

@@ -1,16 +0,0 @@
-module.exports = ($) => {
-  const fn = $.fn;
-  fn.hide = function() {
-    return this.css('display', 'none');
-  }
-
-  fn.show = function() {
-    return this.css('display', 'block');
-  }
-
-  fn.focus = function() {
-    const el = this.get(0);
-    el && el.focus();
-    return this;
-  }
-}

src/utils/extender.js

@@ -0,0 +1,111 @@
+module.exports = ({$, Backbone}) => {
+  if (Backbone) {
+    const ViewProt = Backbone.View.prototype;
+    const eventNsMap = {};
+
+    ViewProt.delegate = function(eventName, selector, listener) {
+      const vid = '.delegateEvents' + this.cid;
+      this.$el.on(eventName, selector, listener);
+      //return this;
+      let eventMap = eventNsMap[vid];
+
+      if (!eventMap) {
+        eventMap = [];
+        eventNsMap[vid] = eventMap;
+      }
+
+      eventMap.push({eventName, selector, listener});
+      return this;
+    };
+
+    ViewProt.undelegateEvents = function() {
+      const vid = '.delegateEvents' + this.cid;
+      if (this.$el) {
+        //this.$el.off(); return this;
+        let eventMap = eventNsMap[vid];
+
+        if (eventMap) {
+          eventMap.forEach(({eventName, selector, listener}) => {
+            this.$el.off(eventName, selector, listener);
+          });
+        }
+      }
+      return this;
+    };
+
+    ViewProt.undelegate = function(ev, sel, list) {
+      const vid = '.delegateEvents' + this.cid;
+      //this.$el.off(ev, sel, list); return this;
+      let eventMap = eventNsMap[vid];
+
+      if (eventMap) {
+        eventMap.forEach(({eventName, selector, listener}) => {
+          if (eventName == ev && selector == sel) {
+            this.$el.off(eventName, selector, listener);
+          }
+        });
+      }
+
+      return this;
+    };
+  }
+
+  if ($) {
+    const fn = $.fn;
+    fn.hide = function() {
+      return this.css('display', 'none');
+    }
+
+    fn.show = function() {
+      return this.css('display', 'block');
+    }
+
+    fn.focus = function() {
+      const el = this.get(0);
+      el && el.focus();
+      return this;
+    }
+
+    // For spectrum compatibility
+    fn.bind = function(ev, h) {
+      return this.on(ev, h);
+    }
+
+    fn.click = function(h) {
+      return this.on('click', h);
+    }
+
+    fn.change = function(h) {
+      return this.on('change', h);
+    }
+
+    fn.keydown = function(h) {
+      return this.on('keydown', h);
+    }
+
+    fn.delegate = function(selector, events, data, handler) {
+      if (!handler) {
+        handler = data;
+      }
+
+      return this.on(events, selector, function(e) {
+        e.data = data;
+        handler(e);
+      });
+    }
+
+    $.map = function(items, clb) {
+      const ar = [];
+
+      for (var i = 0; i < items.length; i++) {
+        ar.push(clb(items[i], i));
+      }
+
+      return ar;
+    }
+
+    $.inArray = function(val, arr) {
+      return arr.indexOf(val);
+    }
+  }
+}

test/specs/css_composer/e2e/CssComposer.js

@@ -1,3 +1,5 @@
+const $ = Backbone.$;
+
 module.exports = {
   run() {
       describe('E2E tests', () => {

test/specs/dom_components/model/Component.js

@@ -6,6 +6,7 @@ const ComponentLink = require('dom_components/model/ComponentLink');
 const ComponentMap = require('dom_components/model/ComponentMap');
 const ComponentVideo = require('dom_components/model/ComponentVideo');
 const Components = require('dom_components/model/Components');
+const $ = Backbone.$;
 
 module.exports = {
   run() {