diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 1afd43f8f..d68a474e2 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -1,5 +1,5 @@ -const Backbone = require('backbone'); const FrameView = require('./FrameView'); +const $ = Backbone.$; module.exports = Backbone.View.extend({ diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index 18c2d4093..8c615b8e8 100644 --- a/src/commands/view/CommandAbstract.js +++ b/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) {}, }); diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index bc216642c..28c9f6f85 100644 --- a/src/dom_components/view/ComponentView.js +++ b/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({ diff --git a/src/domain_abstract/ui/Input.js b/src/domain_abstract/ui/Input.js index c5f92dc32..1ee991690 100644 --- a/src/domain_abstract/ui/Input.js +++ b/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(``), - 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(``); + el.find(`.${holderClass}`).append(this.getInputEl()); return this; } diff --git a/src/domain_abstract/ui/InputNumber.js b/src/domain_abstract/ui/InputNumber.js index 41bac9c91..80ebd3523 100644 --- a/src/domain_abstract/ui/InputNumber.js +++ b/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 = $(``); @@ -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; } diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 066e09874..6f1ab7a04 100644 --- a/src/editor/model/Editor.js +++ b/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({ diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index ee8ef81d0..9b23c353c 100644 --- a/src/editor/view/EditorView.js +++ b/src/editor/view/EditorView.js @@ -1,3 +1,5 @@ +const $ = Backbone.$; + module.exports = Backbone.View.extend({ initialize() { diff --git a/src/style_manager/view/PropertiesView.js b/src/style_manager/view/PropertiesView.js index 2686210b1..da3ec1ee5 100644 --- a/src/style_manager/view/PropertiesView.js +++ b/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($('
', {class: "clear"})); this.$el.attr('class', this.pfx + 'properties'); return this; } diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 2f5f46a64..e0a39e839 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -1,4 +1,5 @@ const PropertyView = require('./PropertyView'); +const $ = Backbone.$; module.exports = PropertyView.extend({ diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js index cf737ddb8..3bd049a8e 100644 --- a/src/style_manager/view/PropertySelectView.js +++ b/src/style_manager/view/PropertySelectView.js @@ -1,3 +1,5 @@ +const $ = Backbone.$; + module.exports = require('./PropertyView').extend({ templateInput() { diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 2916b8b3e..8681c290b 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/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'); diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 32070ba19..fcd074f5b 100644 --- a/src/style_manager/view/PropertyView.js +++ b/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'; diff --git a/test/helper.js b/test/helper.js index 07cfbf1e5..002247040 100644 --- a/test/helper.js +++ b/test/helper.js @@ -7,7 +7,6 @@ import { JSDOM } from 'jsdom'; const dom = new JSDOM(''); 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) => { diff --git a/webpack.config.js b/webpack.config.js index 533226f30..00c807d4f 100644 --- a/webpack.config.js +++ b/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' + } }, }