General updates by removing dependencies from jquery

src/canvas/view/CanvasView.js

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

src/commands/view/CommandAbstract.js

@@ -1,78 +1,78 @@
-var Backbone = require('backbone');
+const $ = Backbone.$
 
 module.exports = Backbone.View.extend({
 
-	/**
-	 * Initialize method that can't be removed
-	 * @param	{Object}	o Options
-	 * @private
-	 * */
-	initialize(o) {
-		this.config				= o || {};
-		this.editorModel 	= this.em = this.config.em || {};
-		this.pfx					= this.config.stylePrefix;
-		this.ppfx					= this.config.pStylePrefix;
-		this.hoverClass		= this.pfx + 'hover';
-		this.badgeClass		= this.pfx + 'badge';
-		this.plhClass			= this.pfx + 'placeholder';
-		this.freezClass		= this.ppfx + 'freezed';
-
-		this.canvas = this.em.get && this.em.get('Canvas');
-
-		if(this.em.get)
-			this.setElement(this.getCanvas());
-
-		if(this.canvas){
-			this.$canvas = this.$el;
-			this.$wrapper = $(this.getCanvasWrapper());
-			this.frameEl = this.canvas.getFrameEl();
-			this.canvasTool = this.getCanvasTools();
-			this.bodyEl = this.getCanvasBody();
-		}
-
-		this.init(this.config);
-	},
-
-	/**
-	 * On frame scroll callback
-	 * @param  {[type]} e [description]
-	 * @return {[type]}   [description]
-	 */
-	onFrameScroll(e) {},
-
-	/**
-	 * Returns canval element
-	 * @return {HTMLElement}
-	 */
-	getCanvas() {
-		return this.canvas.getElement();
-	},
-
-	/**
-	 * Get canvas body element
-	 * @return {HTMLElement}
-	 */
-	getCanvasBody() {
-		return this.canvas.getBody();
-	},
-
-	/**
-	 * Get canvas wrapper element
-	 * @return {HTMLElement}
-	 */
-	getCanvasWrapper() {
-		return this.canvas.getWrapperEl();
-	},
-
-	/**
-	 * Get canvas wrapper element
-	 * @return {HTMLElement}
-	 */
-	getCanvasTools() {
-		return this.canvas.getToolsEl();
-	},
-
-	/**
+  /**
+   * Initialize method that can't be removed
+   * @param  {Object}  o Options
+   * @private
+   * */
+  initialize(o) {
+    this.config        = o || {};
+    this.editorModel   = this.em = this.config.em || {};
+    this.pfx          = this.config.stylePrefix;
+    this.ppfx          = this.config.pStylePrefix;
+    this.hoverClass    = this.pfx + 'hover';
+    this.badgeClass    = this.pfx + 'badge';
+    this.plhClass      = this.pfx + 'placeholder';
+    this.freezClass    = this.ppfx + 'freezed';
+
+    this.canvas = this.em.get && this.em.get('Canvas');
+
+    if(this.em.get)
+      this.setElement(this.getCanvas());
+
+    if(this.canvas){
+      this.$canvas = this.$el;
+      this.$wrapper = $(this.getCanvasWrapper());
+      this.frameEl = this.canvas.getFrameEl();
+      this.canvasTool = this.getCanvasTools();
+      this.bodyEl = this.getCanvasBody();
+    }
+
+    this.init(this.config);
+  },
+
+  /**
+   * On frame scroll callback
+   * @param  {[type]} e [description]
+   * @return {[type]}   [description]
+   */
+  onFrameScroll(e) {},
+
+  /**
+   * Returns canval element
+   * @return {HTMLElement}
+   */
+  getCanvas() {
+    return this.canvas.getElement();
+  },
+
+  /**
+   * Get canvas body element
+   * @return {HTMLElement}
+   */
+  getCanvasBody() {
+    return this.canvas.getBody();
+  },
+
+  /**
+   * Get canvas wrapper element
+   * @return {HTMLElement}
+   */
+  getCanvasWrapper() {
+    return this.canvas.getWrapperEl();
+  },
+
+  /**
+   * Get canvas wrapper element
+   * @return {HTMLElement}
+   */
+  getCanvasTools() {
+    return this.canvas.getToolsEl();
+  },
+
+  /**
    * Get the offset of the element
    * @param  {HTMLElement} el
    * @return {Object}
@@ -85,27 +85,27 @@ module.exports = Backbone.View.extend({
     };
   },
 
-	/**
-	 * Callback triggered after initialize
-	 * @param	{Object}	o 	Options
-	 * @private
-	 * */
-	init(o) {},
-
-	/**
-	 * Method that run command
-	 * @param	{Object}	em 		Editor model
-	 * @param	{Object}	sender	Button sender
-	 * @private
-	 * */
-	run(em, sender) {},
-
-	/**
-	 * Method that stop command
-	 * @param	{Object}	em Editor model
-	 * @param	{Object}	sender	Button sender
-	 * @private
-	 * */
-	stop(em, sender) {},
+  /**
+   * Callback triggered after initialize
+   * @param  {Object}  o   Options
+   * @private
+   * */
+  init(o) {},
+
+  /**
+   * Method that run command
+   * @param  {Object}  em     Editor model
+   * @param  {Object}  sender  Button sender
+   * @private
+   * */
+  run(em, sender) {},
+
+  /**
+   * Method that stop command
+   * @param  {Object}  em Editor model
+   * @param  {Object}  sender  Button sender
+   * @private
+   * */
+  stop(em, sender) {},
 
 });

src/dom_components/view/ComponentView.js

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

src/domain_abstract/ui/Input.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({
 
@@ -6,8 +6,6 @@ module.exports = Backbone.View.extend({
     'change': 'handleChange',
   },
 
-  template: _.template(`<span class='<%= holderClass %>'></span>`),
-
   initialize(opts) {
     var opt = opts || {};
     var ppfx = opt.ppfx || '';
@@ -66,13 +64,12 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    var el = this.$el;
+    const el = this.$el;
+    const ppfx = this.ppfx;
+    const holderClass = `${ppfx}input-holder`;
     el.addClass(this.inputClass);
-    el.html(this.template({
-      holderClass: this.inputHolderClass,
-      ppfx: this.ppfx
-    }));
-    el.find('.'+ this.inputHolderClass).html(this.getInputEl());
+    el.html(`<span class="${holderClass}"></span>`);
+    el.find(`.${holderClass}`).append(this.getInputEl());
     return this;
   }
 

src/domain_abstract/ui/InputNumber.js

@@ -102,7 +102,7 @@ module.exports = Backbone.View.extend({
    * @return {HTMLElement}
    */
   getInputEl() {
-    if(!this.inputEl) {
+    if (!this.inputEl) {
       const cls = this.inputCls;
       const plh = this.model.get('defaults');
       this.inputEl = $(`<input type="text" class="${cls}" placeholder="${plh}">`);
@@ -277,11 +277,12 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    var ppfx = this.ppfx;
-    this.$el.html(this.template({ppfx}));
-    this.$el.find('.'+ ppfx +'input-holder').html(this.getInputEl());
-    this.$el.find('.' + ppfx + 'field-units').html(this.getUnitEl());
-    this.$el.addClass(this.contClass);
+    const ppfx = this.ppfx;
+    const el = this.$el;
+    el.html(this.template({ppfx}));
+    el.find(`.${ppfx}input-holder`).append(this.getInputEl());
+    el.find(`.${ppfx}field-units`).html(this.getUnitEl());
+    el.addClass(this.contClass);
     return this;
   }
 

src/editor/model/Editor.js

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

src/editor/view/EditorView.js

@@ -1,3 +1,5 @@
+const $ = Backbone.$;
+
 module.exports = Backbone.View.extend({
 
   initialize() {

src/style_manager/view/PropertiesView.js

@@ -1,12 +1,11 @@
-var Backbone = require('backbone');
-var PropertyView = require('./PropertyView');
-var PropertyIntegerView = require('./PropertyIntegerView');
-var PropertyRadioView = require('./PropertyRadioView');
-var PropertySelectView = require('./PropertySelectView');
-var PropertyColorView = require('./PropertyColorView');
-var PropertyFileView = require('./PropertyFileView');
-var PropertyCompositeView = require('./PropertyCompositeView');
-var PropertyStackView = require('./PropertyStackView');
+const PropertyView = require('./PropertyView');
+const PropertyIntegerView = require('./PropertyIntegerView');
+const PropertyRadioView = require('./PropertyRadioView');
+const PropertySelectView = require('./PropertySelectView');
+const PropertyColorView = require('./PropertyColorView');
+const PropertyFileView = require('./PropertyFileView');
+const PropertyCompositeView = require('./PropertyCompositeView');
+const PropertyStackView = require('./PropertyStackView');
 
 module.exports = Backbone.View.extend({
 
@@ -44,7 +43,6 @@ module.exports = Backbone.View.extend({
     });
 
     this.$el.append(fragment);
-    this.$el.append($('<div>', {class: "clear"}));
     this.$el.attr('class', this.pfx + 'properties');
     return this;
   }

src/style_manager/view/PropertyCompositeView.js

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

src/style_manager/view/PropertySelectView.js

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

src/style_manager/view/PropertyStackView.js

@@ -1,4 +1,3 @@
-var Backbone = require('backbone');
 var PropertyCompositeView = require('./PropertyCompositeView');
 var Layers = require('./../model/Layers');
 var LayersView = require('./LayersView');

src/style_manager/view/PropertyView.js

@@ -84,7 +84,7 @@ module.exports = Backbone.View.extend({
     const config = this.config;
     const updatedCls = `${ppfx}color-hl`;
     const computedCls = `${ppfx}color-warn`;
-    const labelEl = this.$el.find(`> .${pfx}label`);
+    const labelEl = this.$el.children(`.${pfx}label`);
     const clearStyle = this.getClearEl().style;
     labelEl.removeClass(`${updatedCls} ${computedCls}`);
     clearStyle.display = 'none';

test/helper.js

@@ -7,7 +7,6 @@ import { JSDOM } from 'jsdom';
 
 const dom = new JSDOM('<!doctype html><html><body></body></html>');
 const window = dom.window;
-//const $ = jquery(window);
 
 // Fix for the spectrum lib
 var Module = require('module');
@@ -15,6 +14,7 @@ var originalRequire = Module.prototype.require;
 
 Module.prototype.require = function(name) {
   if (name == 'jquery') {
+    console.log('REQUIRE jquery', Backbone.$);
     return Backbone.$;
   }
   return originalRequire.apply(this, arguments);
@@ -50,6 +50,7 @@ grapesjs.init({container: 'body',autorender: 0, storageManager: {
   autoload: 0,
   type:'none'
 },});
+
 window.$ = Backbone.$;
 
 Object.keys(window).forEach((key) => {

webpack.config.js

@@ -30,9 +30,6 @@ module.exports = {
   plugins: plugins,
   module: {
     loaders: [{
-        test: /backbone\.js$/,
-        use: ['imports-loader?define=>false']
-      },{
         test: /grapesjs\/index\.js$/,
         loader: 'string-replace-loader',
         query: {
@@ -48,5 +45,8 @@ module.exports = {
   },
   resolve: {
     modules: ['src', 'node_modules'],
+    alias: {
+      jquery: 'cash-dom'
+    }
   },
 }