|
|
|
@ -1,25 +1,23 @@ |
|
|
|
define(['backbone', './SelectComponent','./SelectPosition'], |
|
|
|
function(Backbone, SelectComponent, SelectPosition) { |
|
|
|
/** |
|
|
|
* @class MoveComponent |
|
|
|
* @private |
|
|
|
* */ |
|
|
|
return _.extend({},SelectComponent, SelectPosition, { |
|
|
|
|
|
|
|
return _.extend({}, SelectPosition, SelectComponent, { |
|
|
|
|
|
|
|
init: function(o){ |
|
|
|
SelectComponent.init.apply(this, arguments); |
|
|
|
_.bindAll(this,'initSorter','rollback','selectingPosition','itemLeft', 'onEndMove'); |
|
|
|
_.bindAll(this, 'initSorter','rollback', 'onEndMove'); |
|
|
|
this.opt = o; |
|
|
|
this.hoverClass = this.pfx + 'hover-move'; |
|
|
|
this.badgeClass = this.pfx + 'badge-yellow'; |
|
|
|
this.noSelClass = this.pfx + 'no-select'; |
|
|
|
this.hoverClass = this.ppfx + 'highlighter-warning'; |
|
|
|
this.badgeClass = this.ppfx + 'badge-warning'; |
|
|
|
this.noSelClass = this.ppfx + 'no-select'; |
|
|
|
}, |
|
|
|
|
|
|
|
enable: function(){ |
|
|
|
this.frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this); |
|
|
|
this.$el.css('cursor','move'); |
|
|
|
this.$el.on('mousedown', this.initSorter); |
|
|
|
this.startSelectComponent(); |
|
|
|
//Avoid strange moving behavior
|
|
|
|
// Avoid strange moving behavior
|
|
|
|
this.$el.addClass(this.noSelClass); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -31,8 +29,10 @@ define(['backbone', './SelectComponent','./SelectPosition'], |
|
|
|
var el = $(e.target).data('model'); |
|
|
|
if(!el.get('draggable')) |
|
|
|
return; |
|
|
|
if(this.sorter) |
|
|
|
this.sorter.startSort(e.target); |
|
|
|
// Avoid badge showing on move
|
|
|
|
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); |
|
|
|
}, |
|
|
|
@ -44,21 +44,6 @@ define(['backbone', './SelectComponent','./SelectPosition'], |
|
|
|
this.enable(); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* Hover command. Helps to avoid selecting not movable elements, eg. wrapper |
|
|
|
* @param {Object} e |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
onHover: function(e) { |
|
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
var $this = $(e.target); |
|
|
|
if($this.data('model').get('draggable')){ |
|
|
|
$this.addClass(this.hoverClass); |
|
|
|
this.attachBadge(e.target); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** Say what to do after the component was selected (selectComponent) |
|
|
|
* @param Event |
|
|
|
* @param Object Selected element |
|
|
|
@ -82,25 +67,21 @@ define(['backbone', './SelectComponent','./SelectPosition'], |
|
|
|
|
|
|
|
run: function(editor, sender, opts){ |
|
|
|
this.editor = editor; |
|
|
|
|
|
|
|
// Activate sorter, at any run? In layers, is called once at any stack
|
|
|
|
var utils = this.editor.Utils; |
|
|
|
if(utils && utils.Sorter) |
|
|
|
this.sorter = new utils.Sorter({ |
|
|
|
container: this.$el.get(0), |
|
|
|
containerSel: '*', |
|
|
|
itemSel: '*', |
|
|
|
pfx: this.ppfx, |
|
|
|
onEndMove: this.onEndMove, |
|
|
|
direction: 'a', |
|
|
|
nested: 1, |
|
|
|
}); |
|
|
|
|
|
|
|
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(); |
|
|
|
}, |
|
|
|
|
|
|
|
stop: function(){ |
|
|
|
this.stopSelectComponent(); |
|
|
|
this.$badge = $(this.getBadge()); |
|
|
|
this.$badge.removeClass(this.badgeClass); |
|
|
|
this.$hl = $(this.canvas.getHighlighter()); |
|
|
|
this.$hl.removeClass(this.hoverClass); |
|
|
|
this.frameEl.contentWindow.onscroll = null; |
|
|
|
this.$el.css('cursor','');//changes back aspect of the cursor
|
|
|
|
this.$el.unbind();//removes all attached events
|
|
|
|
this.$el.removeClass(this.noSelClass); |
|
|
|
|
Artur Arseniev
10 years ago