diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index 6a34a1f0d..f32f231ec 100644 --- a/src/commands/view/MoveComponent.js +++ b/src/commands/view/MoveComponent.js @@ -13,17 +13,27 @@ define(['backbone', './SelectComponent','./SelectPosition'], }, enable: function(){ - _.bindAll(this, 'onFrameScroll'); - this.$el.css('cursor','move'); - this.$el.on('mousedown', this.initSorter); - this.startSelectComponent(); + SelectComponent.enable.apply(this, arguments); + this.getBadgeEl().addClass(this.badgeClass); + this.getHighlighterEl().addClass(this.hoverClass); + var wp = this.$wrapper; + wp.css('cursor','move'); + wp.on('mousedown', this.initSorter); + // Avoid strange moving behavior - this.$el.addClass(this.noSelClass); + wp.addClass(this.noSelClass); }, + /** + * Overwrite for doing nothing + * @private + */ + toggleClipboard: function(){}, + /** * Delegate sorting * @param {Event} e + * @private * */ initSorter: function(e){ var el = $(e.target).data('model'); @@ -33,58 +43,71 @@ define(['backbone', './SelectComponent','./SelectPosition'], this.cacheEl = null; this.startSelectPosition(e.target, this.frameEl.contentDocument); this.sorter.onEndMove = this.onEndMove.bind(this); - this.stopSelectComponent(e); - this.$el.off('mousedown', this.initSorter); + this.stopSelectComponent(); + this.$wrapper.off('mousedown', this.initSorter); + this.getContentWindow().on('keydown', this.rollback); }, /** * Callback after sorting + * @private */ onEndMove: function(){ this.enable(); + this.getContentWindow().off('keydown', this.rollback); }, - /** Say what to do after the component was selected (selectComponent) - * @param Event - * @param Object Selected element + /** + * Say what to do after the component was selected (selectComponent) + * @param {Event} e + * @param {Object} Selected element * @private * */ onSelect: function(e,el){}, - /** Used to bring the previous situation before start moving the component - * @param Event - * @param Bool Indicates if rollback in anycase + /** + * Used to bring the previous situation before start moving the component + * @param {Event} e + * @param {Boolean} Indicates if rollback in anycase * @private * */ rollback: function(e, force){ var key = e.which || e.keyCode; if(key == this.opt.ESCAPE_KEY || force){ - this.moved = false; - this.endMove(); + this.sorter.moved = false; + this.sorter.endMove(); } return; }, - run: function(editor, sender, opts){ - this.editor = editor; - this.$el = this.$wrapper; - this.$badge = $(this.getBadge()); - this.$badge.addClass(this.badgeClass); - this.$hl = $(this.canvas.getHighlighter()); - this.$hl.addClass(this.hoverClass); - this.enable(); + /** + * Returns badge element + * @return {HTMLElement} + * @private + */ + getBadgeEl: function(){ + if(!this.$badge) + this.$badge = $(this.getBadge()); + return this.$badge; + }, + + /** + * Returns highlighter element + * @return {HTMLElement} + * @private + */ + getHighlighterEl: function(){ + if(!this.$hl) + this.$hl = $(this.canvas.getHighlighter()); + return this.$hl; }, stop: function(){ - this.stopSelectComponent(); - this.hideBadge(); - this.$badge = $(this.getBadge()); - this.$badge.removeClass(this.badgeClass); - this.$hl = $(this.canvas.getHighlighter()); - this.$hl.removeClass(this.hoverClass); - this.$el.css('cursor','');//changes back aspect of the cursor - this.$el.unbind();//removes all attached events - this.$el.removeClass(this.noSelClass); + SelectComponent.stop.apply(this, arguments); + this.getBadgeEl().removeClass(this.badgeClass); + this.getHighlighterEl().removeClass(this.hoverClass); + var wp = this.$wrapper; + wp.css('cursor', '').unbind().removeClass(this.noSelClass); } }); }); \ No newline at end of file diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index a199f448d..572611baa 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -7,21 +7,32 @@ define(function() { init: function(o){ _.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress', 'clearOff'); - this.trEvents = 'transitionend oTransitionEnd transitionend webkitTransitionEnd'; }, enable: function() { - _.bindAll(this,'copyComp', 'pasteComp', 'onFrameScroll'); + _.bindAll(this, 'copyComp', 'pasteComp', 'onFrameScroll'); + this.frameOff = this.canvasOff = this.adjScroll = null; var config = this.config.em.get('Config'); this.startSelectComponent(); - // TODO refactor - if(config.copyPaste){ + this.toggleClipboard(config.copyPaste); + }, + + /** + * Toggle clipboard function + * @param {Boolean} active + * @return {this} + * @private + */ + toggleClipboard: function(active){ + var en = active || 0; + if(en){ key('⌘+c, ctrl+c', this.copyComp); key('⌘+v, ctrl+v', this.pasteComp); + }else{ + key.unbind('⌘+c, ctrl+c'); + key.unbind('⌘+v, ctrl+v'); } - this.listenTo(this.em.editor, 'change:device', this.clearOff); - $(this.frameEl).on(this.trEvents, this.clearOff); }, /** @@ -62,12 +73,14 @@ define(function() { * @private * */ startSelectComponent: function() { - this.getContentWindow().on('scroll', this.onFrameScroll); + this.listenTo(this.em, 'change:canvasOffset', this.clearOff); this.selEl = $(this.getCanvasBody()).find('*'); - this.selEl.on('mouseover',this.onHover) + this.selEl.on('mouseover', this.onHover) .on('mouseout', this.onOut) .on('click', this.onClick); - this.getContentWindow().on('keydown', this.onKeyPress); + var cw = this.getContentWindow(); + cw.on('scroll', this.onFrameScroll); + cw.on('keydown', this.onKeyPress); }, /** @@ -75,10 +88,15 @@ define(function() { * @private * */ stopSelectComponent: function() { - this.getContentWindow().off('scroll', this.onFrameScroll); + this.stopListening(this.em, 'change:canvasOffset', this.clearOff); if(this.selEl) - this.selEl.trigger('mouseout').off('mouseover mouseout click'); + this.selEl.trigger('mouseout').off('mouseover', this.onHover) + .off('mouseout', this.onOut) + .off('click', this.onClick); this.selEl = null; + var cw = this.getContentWindow(); + cw.off('scroll', this.onFrameScroll); + cw.off('keydown', this.onKeyPress); }, /** @@ -169,8 +187,7 @@ define(function() { onSelect: function(e, el) { e.stopPropagation(); var md = this.editorModel.get('selectedComponent'); - if(md) - this.cleanPrevious(md); + this.cleanPrevious(md); var $el = $(el); var nMd = $el.data('model'); if(nMd){ @@ -268,10 +285,11 @@ define(function() { * @private */ cleanPrevious: function(model) { - model.set({ - status: '', - state: '', - }); + if(model) + model.set({ + status: '', + state: '', + }); }, /** @@ -285,31 +303,16 @@ define(function() { }, run: function(em, sender) { - this.em = em; this.enable(); }, stop: function() { - this.stopListening(this.em.editor, 'change:device', this.clearOff); - $(this.frameEl).off(this.trEvents, this.clearOff); - if(!this.selEl) - this.selEl = $(this.getCanvasBody()).find('*'); - this.frameOff = this.canvasOff = this.adjScroll = null; - - var frameEl = this.canvas.getFrameEl(); - var sel = this.editorModel.get('selectedComponent'); - if(sel) - this.cleanPrevious(sel); - this.$el.unbind(); //removes all attached events - this.hideBadge(); - this.clean(); - this.selEl.unbind('mouseover').unbind('mouseout').unbind('click'); - this.editorModel.set('selectedComponent',null); - key.unbind('⌘+c, ctrl+c'); - key.unbind('⌘+v, ctrl+v'); - var cw = this.getContentWindow(); - cw.off('keydown', this.onKeyPress); this.stopSelectComponent(); + this.cleanPrevious(this.em.get('selectedComponent')); + this.clean(); + this.em.set('selectedComponent', null); + this.toggleClipboard(); + this.hideBadge(); } }; }); \ No newline at end of file