From b46c6ed430a09c6ca566c367b161511ab8680cef Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 27 Sep 2017 03:40:17 +0200 Subject: [PATCH] Extend few methods on Backbone and cash --- src/block_manager/view/BlockView.js | 2 +- src/code_manager/view/EditorView.js | 2 +- src/commands/view/CreateComponent.js | 4 +- src/commands/view/DeleteComponent.js | 4 +- src/commands/view/ExportTemplate.js | 2 + src/commands/view/MoveComponent.js | 6 +- src/commands/view/OpenBlocks.js | 4 +- src/commands/view/OpenLayers.js | 3 +- src/commands/view/OpenTraitManager.js | 4 +- src/commands/view/SelectPosition.js | 2 + src/commands/view/ShowOffset.js | 2 +- src/editor/model/Editor.js | 17 +-- src/modal_dialog/view/ModalView.js | 15 ++- src/panels/view/ButtonView.js | 2 +- src/rich_text_editor/index.js | 2 + .../view/CommandButtonSelectView.js | 4 +- src/style_manager/view/PropertyFileView.js | 4 +- src/style_manager/view/PropertyStackView.js | 2 +- src/trait_manager/view/TraitSelectView.js | 4 +- src/trait_manager/view/TraitView.js | 2 +- src/utils/Dragger.js | 2 + src/utils/Resizer.js | 2 + src/utils/Sorter.js | 1 - src/utils/cashAdds.js | 16 --- src/utils/extender.js | 111 ++++++++++++++++++ test/specs/css_composer/e2e/CssComposer.js | 2 + test/specs/dom_components/model/Component.js | 1 + 27 files changed, 168 insertions(+), 54 deletions(-) delete mode 100644 src/utils/cashAdds.js create mode 100644 src/utils/extender.js diff --git a/src/block_manager/view/BlockView.js b/src/block_manager/view/BlockView.js index c9a1410a4..48239b12e 100644 --- a/src/block_manager/view/BlockView.js +++ b/src/block_manager/view/BlockView.js @@ -1,4 +1,4 @@ -var Backbone = require('backbone'); +const $ = Backbone.$; module.exports = Backbone.View.extend({ diff --git a/src/code_manager/view/EditorView.js b/src/code_manager/view/EditorView.js index 3165f3d36..679b8b564 100644 --- a/src/code_manager/view/EditorView.js +++ b/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; }, diff --git a/src/commands/view/CreateComponent.js b/src/commands/view/CreateComponent.js index 1b2193ddc..bb6e6d5fb 100644 --- a/src/commands/view/CreateComponent.js +++ b/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, { diff --git a/src/commands/view/DeleteComponent.js b/src/commands/view/DeleteComponent.js index 0ca30d039..dcdd304b3 100644 --- a/src/commands/view/DeleteComponent.js +++ b/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,{ diff --git a/src/commands/view/ExportTemplate.js b/src/commands/view/ExportTemplate.js index d8a8ab597..400aa92ef 100644 --- a/src/commands/view/ExportTemplate.js +++ b/src/commands/view/ExportTemplate.js @@ -1,3 +1,5 @@ +const $ = Backbone.$; + module.exports = { run(editor, sender) { diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index ac89a8fc3..ef3d80c92 100644 --- a/src/commands/view/MoveComponent.js +++ b/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, { diff --git a/src/commands/view/OpenBlocks.js b/src/commands/view/OpenBlocks.js index ba9d88ae1..6691db2d6 100644 --- a/src/commands/view/OpenBlocks.js +++ b/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 = $('
').get(0); + this.blocks = $('
').get(0); this.blocks.appendChild(bm.render()); var panels = editor.Panels; if(!panels.getPanel('views-container')) diff --git a/src/commands/view/OpenLayers.js b/src/commands/view/OpenLayers.js index 4741293db..e51185b5b 100644 --- a/src/commands/view/OpenLayers.js +++ b/src/commands/view/OpenLayers.js @@ -1,4 +1,5 @@ -var Layers = require('navigator'); +const Layers = require('navigator'); +const $ = Backbone.$; module.exports = { diff --git a/src/commands/view/OpenTraitManager.js b/src/commands/view/OpenTraitManager.js index 4e6f8dcc2..3c9a92ab9 100644 --- a/src/commands/view/OpenTraitManager.js +++ b/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 = $('
') + this.obj = $('
') .append('
' + confTm.labelContainer + '
') .get(0); this.obj.appendChild(tmView.render().el); diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js index 1d32db9f0..1c103fb1d 100644 --- a/src/commands/view/SelectPosition.js +++ b/src/commands/view/SelectPosition.js @@ -1,3 +1,5 @@ +const $ = Backbone.$; + module.exports = { /** diff --git a/src/commands/view/ShowOffset.js b/src/commands/view/ShowOffset.js index 2ec5a7c61..d1f5b9849 100644 --- a/src/commands/view/ShowOffset.js +++ b/src/commands/view/ShowOffset.js @@ -1,4 +1,4 @@ -const $ = require('backbone').$; +const $ = Backbone.$; module.exports = { diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 6f1ab7a04..9c721b2e7 100644 --- a/src/editor/model/Editor.js +++ b/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({ diff --git a/src/modal_dialog/view/ModalView.js b/src/modal_dialog/view/ModalView.js index fd4732f11..bc455a03d 100644 --- a/src/modal_dialog/view/ModalView.js +++ b/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); }, /** diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js index 0347a1ff1..f61f4f390 100644 --- a/src/panels/view/ButtonView.js +++ b/src/panels/view/ButtonView.js @@ -1,4 +1,4 @@ -var Backbone = require('backbone'); +const $ = Backbone.$; module.exports = Backbone.View.extend({ diff --git a/src/rich_text_editor/index.js b/src/rich_text_editor/index.js index 002d6a368..e2e39765b 100644 --- a/src/rich_text_editor/index.js +++ b/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'), diff --git a/src/rich_text_editor/view/CommandButtonSelectView.js b/src/rich_text_editor/view/CommandButtonSelectView.js index e049de6ec..04ba419c4 100644 --- a/src/rich_text_editor/view/CommandButtonSelectView.js +++ b/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({ diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js index 8e8f30a43..f41cd4a5d 100644 --- a/src/style_manager/view/PropertyFileView.js +++ b/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({ diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 8681c290b..1c51b0460 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/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); diff --git a/src/trait_manager/view/TraitSelectView.js b/src/trait_manager/view/TraitSelectView.js index d2a52ca8c..494f8238c 100644 --- a/src/trait_manager/view/TraitSelectView.js +++ b/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({ diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index abe8b2c1a..12900e7a4 100644 --- a/src/trait_manager/view/TraitView.js +++ b/src/trait_manager/view/TraitView.js @@ -1,4 +1,4 @@ -var Backbone = require('backbone'); +const $ = Backbone.$; module.exports = Backbone.View.extend({ diff --git a/src/utils/Dragger.js b/src/utils/Dragger.js index 7e5b7f63f..597af1523 100644 --- a/src/utils/Dragger.js +++ b/src/utils/Dragger.js @@ -1,3 +1,5 @@ +const $ = Backbone.$; + var getBoundingRect = (el, win) => { var w = win || window; var rect = el.getBoundingClientRect(); diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index aeef0a327..d02915c54 100644 --- a/src/utils/Resizer.js +++ b/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, diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 72e59396e..d88b1bdf8 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -1,4 +1,3 @@ -const Backbone = require('backbone'); const $ = Backbone.$; module.exports = Backbone.View.extend({ diff --git a/src/utils/cashAdds.js b/src/utils/cashAdds.js deleted file mode 100644 index 02b1337e3..000000000 --- a/src/utils/cashAdds.js +++ /dev/null @@ -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; - } -} diff --git a/src/utils/extender.js b/src/utils/extender.js new file mode 100644 index 000000000..6ec527e7b --- /dev/null +++ b/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); + } + } +} diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js index 5620ac07c..ec0741b82 100644 --- a/test/specs/css_composer/e2e/CssComposer.js +++ b/test/specs/css_composer/e2e/CssComposer.js @@ -1,3 +1,5 @@ +const $ = Backbone.$; + module.exports = { run() { describe('E2E tests', () => { diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js index d7f4b5474..8b8b837f7 100644 --- a/test/specs/dom_components/model/Component.js +++ b/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() {