|
|
|
@ -1,10 +1,10 @@ |
|
|
|
define(['backbone'], |
|
|
|
function(Backbone) { |
|
|
|
/** |
|
|
|
/** |
|
|
|
* @class ItemSort |
|
|
|
* */ |
|
|
|
return Backbone.View.extend({ |
|
|
|
|
|
|
|
|
|
|
|
initialize: function(o) { |
|
|
|
_.bindAll(this,'startMove','onMove','endMove','rollback', 'itemLeft'); |
|
|
|
this.config = o.config || {}; |
|
|
|
@ -13,12 +13,12 @@ define(['backbone'], |
|
|
|
this.itemsClass = '.' + this.pfx + this.config.itemsClass; |
|
|
|
this.setElement('.'+this.pfx+this.config.containerId); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Picking component to move |
|
|
|
* @param {Object} Element view |
|
|
|
* @param {Object} Event |
|
|
|
* |
|
|
|
* |
|
|
|
* @return void |
|
|
|
* */ |
|
|
|
startMove: function(eV, e){ |
|
|
|
@ -26,20 +26,20 @@ define(['backbone'], |
|
|
|
this.eV = eV; |
|
|
|
this.$sel = this.eV.$el; |
|
|
|
this.$selParent = this.$sel.closest(this.itemsClass); |
|
|
|
|
|
|
|
// In case the component selected is not movable
|
|
|
|
if( !eV.model.get('movable') ) |
|
|
|
|
|
|
|
// In case the component selected is not draggable
|
|
|
|
if( !eV.model.get('draggable') ) |
|
|
|
return; |
|
|
|
|
|
|
|
|
|
|
|
// Create placeholder if not exists
|
|
|
|
if(!this.$plh){ |
|
|
|
var pfx = this.pfx; |
|
|
|
this.$plh = $('<div>', {id: pfx + 'placeholder'}).css({'pointer-events':'none'}).hide(); |
|
|
|
this.$plh.append( $('<div>', {id: pfx + "plh-int", class: pfx + 'insert'} ) ); |
|
|
|
|
|
|
|
|
|
|
|
if(!this.$el.length) |
|
|
|
this.$el = $('.'+this.pfx+this.config.containerId); |
|
|
|
|
|
|
|
|
|
|
|
this.$plh.appendTo(this.$el); |
|
|
|
} |
|
|
|
this.$plh.data('hide',1); |
|
|
|
@ -48,11 +48,11 @@ define(['backbone'], |
|
|
|
$(document).on('mouseup',this.endMove); |
|
|
|
$(document).on('keypress',this.rollback); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* Get children dimensions |
|
|
|
* @param {Object} Parent element |
|
|
|
* |
|
|
|
* |
|
|
|
* @retun {Array} |
|
|
|
* */ |
|
|
|
getChildrenDim: function(el){ |
|
|
|
@ -68,16 +68,16 @@ define(['backbone'], |
|
|
|
}); |
|
|
|
return dim; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* During move |
|
|
|
* @param {Object} Event |
|
|
|
* |
|
|
|
* @param {Object} Event |
|
|
|
* |
|
|
|
* @return void |
|
|
|
* */ |
|
|
|
onMove: function(e){ |
|
|
|
this.moved = true; |
|
|
|
|
|
|
|
|
|
|
|
if(this.$plh.data('hide')){ |
|
|
|
this.$plh.show(); |
|
|
|
this.$plh.data('hide',0); |
|
|
|
@ -90,17 +90,17 @@ define(['backbone'], |
|
|
|
this.inspect(e); |
|
|
|
this.updatePosition(this.rX, this.rY); |
|
|
|
var actualPos = this.posIndex+':'+this.posMethod; |
|
|
|
|
|
|
|
|
|
|
|
//If there is a significant changes with the pointer
|
|
|
|
if(!this.lastPos || (this.lastPos != actualPos)){ |
|
|
|
if(!this.lastPos || (this.lastPos != actualPos)){ |
|
|
|
this.updatePlaceholderPos(this.posIndex, this.posMethod); |
|
|
|
this.lastPos = this.posIndex+':'+this.posMethod; |
|
|
|
} |
|
|
|
//Working alternative for find taget element
|
|
|
|
//var $targetEl = this.$selParent.children('.'+this.pfx+this.config.itemClass).eq(this.aIndex);
|
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Search where to put placeholder |
|
|
|
* @param int X position of the mouse |
|
|
|
* @param int Y position of the mouse |
|
|
|
@ -108,7 +108,7 @@ define(['backbone'], |
|
|
|
* */ |
|
|
|
updatePosition: function( posX, posY ){ |
|
|
|
this.posMethod = "before"; |
|
|
|
this.posIndex = 0; |
|
|
|
this.posIndex = 0; |
|
|
|
var leftLimit = 0, xLimit = 0, dimRight = 0, yLimit = 0, xCenter = 0, yCenter = 0, dimDown = 0, dim = 0; |
|
|
|
for(var i = 0; i < this.cDim.length; i++){ //Dim => t,l,h,w
|
|
|
|
dim = this.cDim[i]; |
|
|
|
@ -120,7 +120,7 @@ define(['backbone'], |
|
|
|
(leftLimit && dimRight < leftLimit)) //No need with this one if over the limit
|
|
|
|
continue; |
|
|
|
if(!dim[4]){ //If it's not inFlow (like float element)
|
|
|
|
if( posY < dimDown) |
|
|
|
if( posY < dimDown) |
|
|
|
yLimit = dimDown; |
|
|
|
if( posX < xCenter){ //If mouse lefter than center
|
|
|
|
xLimit = xCenter; |
|
|
|
@ -142,8 +142,8 @@ define(['backbone'], |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Updates the position of the placeholder |
|
|
|
* @param int Index of the nearest child |
|
|
|
* @param str Before or after position |
|
|
|
@ -157,7 +157,7 @@ define(['backbone'], |
|
|
|
if( this.cDim[index] ){ |
|
|
|
var elDim = this.cDim[index]; |
|
|
|
//If it's like with 'float' style
|
|
|
|
if(!elDim[4]){ |
|
|
|
if(!elDim[4]){ |
|
|
|
w = 'auto'; |
|
|
|
h = elDim[2] - (marg * 2) + un; |
|
|
|
t = elDim[0] + marg; |
|
|
|
@ -185,11 +185,11 @@ define(['backbone'], |
|
|
|
if(h) |
|
|
|
plh.style.height = h; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Leave item |
|
|
|
* @param event |
|
|
|
* |
|
|
|
* |
|
|
|
* @return void |
|
|
|
* */ |
|
|
|
endMove: function(e){ |
|
|
|
@ -202,14 +202,14 @@ define(['backbone'], |
|
|
|
this.move(this.$targetEl, this.$sel, this.posIndex, this.posMethod); |
|
|
|
this.itemLeft(); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Move component to new position |
|
|
|
* @param {Object} Component to move |
|
|
|
* @param {Object} Target component |
|
|
|
* @param {Integer} Indicates the position inside the collection |
|
|
|
* @param {String} Before of after component |
|
|
|
* |
|
|
|
* |
|
|
|
* @return void |
|
|
|
* */ |
|
|
|
move: function(target, el, posIndex, method){ |
|
|
|
@ -222,10 +222,10 @@ define(['backbone'], |
|
|
|
var collection = model.collection; |
|
|
|
var targetModel = trg.data('model'); |
|
|
|
var targetCollection = targetModel.collection; |
|
|
|
|
|
|
|
|
|
|
|
if(!this.cDim.length) |
|
|
|
targetCollection = targetModel.get('components'); |
|
|
|
|
|
|
|
|
|
|
|
if(targetCollection && targetModel.get('droppable')){ |
|
|
|
index = method == 'after' ? index + 1 : index; |
|
|
|
var modelTemp = targetCollection.add({style:{}}, { at: index}); |
|
|
|
@ -235,11 +235,11 @@ define(['backbone'], |
|
|
|
}else |
|
|
|
console.warn("Invalid target position"); |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Track inside which element pointer entered |
|
|
|
* @param event |
|
|
|
* |
|
|
|
* |
|
|
|
* @return void |
|
|
|
* */ |
|
|
|
inspect: function(e){ |
|
|
|
@ -269,11 +269,11 @@ define(['backbone'], |
|
|
|
this.cDim = []; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Triggered when pointer leaves item |
|
|
|
* @param event |
|
|
|
* |
|
|
|
* @param event |
|
|
|
* |
|
|
|
* @return void |
|
|
|
* */ |
|
|
|
itemLeft: function(e){ |
|
|
|
@ -282,11 +282,11 @@ define(['backbone'], |
|
|
|
this.$targetEl = null; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* Returns dimension of the target |
|
|
|
* @param Event |
|
|
|
* |
|
|
|
* |
|
|
|
* @return Array |
|
|
|
* */ |
|
|
|
getTargetDim: function(e){ |
|
|
|
@ -294,25 +294,25 @@ define(['backbone'], |
|
|
|
$elO = $el.offset(); |
|
|
|
return [ $elO.top - this.elT, $elO.left - this.elL, $el.outerHeight(), $el.outerWidth() ]; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Check if pointer is near to the borders of the target |
|
|
|
* @param event |
|
|
|
* @param event |
|
|
|
* @return Bool |
|
|
|
* */ |
|
|
|
nearToBorders: function(e){ |
|
|
|
var m = 10; //Limit in pixels for be near
|
|
|
|
if(!this.dimT) |
|
|
|
return; |
|
|
|
return; |
|
|
|
var dimT = this.dimT; |
|
|
|
if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) || |
|
|
|
if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) || |
|
|
|
((dimT[1] + m) > this.rX) || (this.rX > (dimT[1] + dimT[3] - m)) ) |
|
|
|
return 1; |
|
|
|
else |
|
|
|
return 0; |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
/** |
|
|
|
* Rollback to previous situation |
|
|
|
* @param Event |
|
|
|
* @param Bool Indicates if rollback in anycase |
|
|
|
|
Artur Arseniev
10 years ago