mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
7 changed files with 58 additions and 351 deletions
@ -1,330 +0,0 @@ |
|||||
define(['backbone'], |
|
||||
function(Backbone) { |
|
||||
/** |
|
||||
* @class ItemSort |
|
||||
* */ |
|
||||
return Backbone.View.extend({ |
|
||||
|
|
||||
initialize: function(o) { |
|
||||
_.bindAll(this,'startMove','onMove','endMove','rollback', 'itemLeft'); |
|
||||
this.config = o.config || {}; |
|
||||
this.pfx = o.config.stylePrefix; |
|
||||
this.itemClass = '.' + this.pfx + this.config.itemClass; |
|
||||
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){ |
|
||||
this.moved = false; |
|
||||
this.eV = eV; |
|
||||
this.$sel = this.eV.$el; |
|
||||
this.$selParent = this.$sel.closest(this.itemsClass); |
|
||||
|
|
||||
// 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); |
|
||||
eV.freeze(); |
|
||||
this.$el.on('mousemove',this.onMove); |
|
||||
$(document).on('mouseup',this.endMove); |
|
||||
$(document).on('keypress',this.rollback); |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* Get children dimensions |
|
||||
* @param {Object} Parent element |
|
||||
* |
|
||||
* @retun {Array} |
|
||||
* */ |
|
||||
getChildrenDim: function(el){ |
|
||||
var dim = [], |
|
||||
p = el || this.$targetEl.parent(), |
|
||||
oT = this.elT, |
|
||||
oL = this.elL, |
|
||||
ch = p.children('.' + this.pfx + this.config.itemClass); |
|
||||
ch.each(function(){ |
|
||||
var $el = $(this), |
|
||||
$elO = $el.offset(); |
|
||||
dim.push( [ $elO.top - oT, $elO.left - oL, $el.outerHeight(), $el.outerWidth(), true, this]); |
|
||||
}); |
|
||||
return dim; |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* During move |
|
||||
* @param {Object} Event |
|
||||
* |
|
||||
* @return void |
|
||||
* */ |
|
||||
onMove: function(e){ |
|
||||
this.moved = true; |
|
||||
|
|
||||
if(this.$plh.data('hide')){ |
|
||||
this.$plh.show(); |
|
||||
this.$plh.data('hide',0); |
|
||||
} |
|
||||
var eO = this.$el.offset(); |
|
||||
this.elT = eO.top; |
|
||||
this.elL = eO.left; |
|
||||
this.rY = (e.pageY - this.elT) + this.$el.scrollTop(); |
|
||||
this.rX = (e.pageX - this.elL) + this.$el.scrollLeft(); |
|
||||
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)){ |
|
||||
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 |
|
||||
* @retun void |
|
||||
* */ |
|
||||
updatePosition: function( posX, posY ){ |
|
||||
this.posMethod = "before"; |
|
||||
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]; |
|
||||
dimDown = dim[0] + dim[2]; |
|
||||
yCenter = dim[0] + (dim[2] / 2); //Horizontal center
|
|
||||
xCenter = dim[1] + (dim[3] / 2); //Vertical center
|
|
||||
dimRight = dim[1] + dim[3]; |
|
||||
if( (xLimit && dim[1] > xLimit) || (yLimit && yCenter > yLimit) || |
|
||||
(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) |
|
||||
yLimit = dimDown; |
|
||||
if( posX < xCenter){ //If mouse lefter than center
|
|
||||
xLimit = xCenter; |
|
||||
this.posMethod = "before"; |
|
||||
}else{ |
|
||||
leftLimit = xCenter; |
|
||||
this.posMethod = "after"; |
|
||||
} |
|
||||
this.posIndex = i; |
|
||||
}else{ |
|
||||
this.posIndex = this.aIndex = i; |
|
||||
if( posY < yCenter ){ //If mouse upper than center
|
|
||||
this.posMethod = "before"; //Should place helper before
|
|
||||
if(posY < dim[0]) |
|
||||
this.aIndex = i - 1; |
|
||||
break; //No need to continue under inFlow element
|
|
||||
}else |
|
||||
this.posMethod = "after"; |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* Updates the position of the placeholder |
|
||||
* @param int Index of the nearest child |
|
||||
* @param str Before or after position |
|
||||
* @return void |
|
||||
* */ |
|
||||
updatePlaceholderPos: function(index, method){ |
|
||||
var marg = 0, t = 0, l = 0, w = 0, h = 0, |
|
||||
un = 'px', |
|
||||
margI = 5, |
|
||||
plh = this.$plh[0]; |
|
||||
if( this.cDim[index] ){ |
|
||||
var elDim = this.cDim[index]; |
|
||||
//If it's like with 'float' style
|
|
||||
if(!elDim[4]){ |
|
||||
w = 'auto'; |
|
||||
h = elDim[2] - (marg * 2) + un; |
|
||||
t = elDim[0] + marg; |
|
||||
l = (method == 'before') ? (elDim[1] - marg) : (elDim[1] + elDim[3] - marg); |
|
||||
}else{ |
|
||||
//w = '100%';
|
|
||||
w = elDim[3] + un; |
|
||||
//h = elDim[3] + un;
|
|
||||
t = (method == 'before') ? (elDim[0] - marg) : (elDim[0] + elDim[2] - marg); |
|
||||
l = elDim[1]; |
|
||||
} |
|
||||
}else{ |
|
||||
if(this.$targetEl){ |
|
||||
var trg = this.$targetEl[0], |
|
||||
$elO = this.$targetEl.offset(); |
|
||||
t = $elO.top - this.elT + margI + 17; |
|
||||
l = $elO.left - this.elL + margI * 7; |
|
||||
w = (parseInt(trg.offsetWidth) - margI * 14) + un; |
|
||||
} |
|
||||
} |
|
||||
plh.style.top = t + un; |
|
||||
plh.style.left = l + un; |
|
||||
if(w) |
|
||||
plh.style.width = w; |
|
||||
if(h) |
|
||||
plh.style.height = h; |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* Leave item |
|
||||
* @param event |
|
||||
* |
|
||||
* @return void |
|
||||
* */ |
|
||||
endMove: function(e){ |
|
||||
this.$el.off('mousemove',this.onMove); |
|
||||
$(document).off('mouseup', this.endMove); |
|
||||
$(document).off('keypress', this.rollback); |
|
||||
this.eV.unfreeze(); |
|
||||
this.$plh.hide(); |
|
||||
if(this.moved) |
|
||||
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){ |
|
||||
var trg = target|| this.$targetEl; |
|
||||
trg = trg || this.$backupEl; |
|
||||
if(!trg) |
|
||||
return; |
|
||||
var index = posIndex || 0; |
|
||||
var model = el.data("model"); |
|
||||
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}); |
|
||||
var modelRemoved = collection.remove(model, { silent:false }); |
|
||||
targetCollection.add(modelRemoved, { at: index, silent:false }); |
|
||||
targetCollection.remove(modelTemp); |
|
||||
}else |
|
||||
console.warn("Invalid target position"); |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* Track inside which element pointer entered |
|
||||
* @param event |
|
||||
* |
|
||||
* @return void |
|
||||
* */ |
|
||||
inspect: function(e){ |
|
||||
var item = $(e.target).closest(this.itemClass); |
|
||||
if(!this.$targetEl || (item.length && item[0] != this.$targetEl[0]) ){ |
|
||||
this.status = 1; |
|
||||
if(item.length){ |
|
||||
this.$targetEl = this.$backupEl = item; |
|
||||
this.$targetElP = this.$targetEl.parent(); |
|
||||
this.$targetsEl = this.$targetEl.find(this.itemsClass + ':first'); |
|
||||
this.$targetEl.on('mouseleave', this.itemLeft); |
|
||||
this.targetM = this.$targetEl.data('model'); |
|
||||
this.dimT = this.getTargetDim(this.$targetEl[0]); |
|
||||
this.cDim = this.getChildrenDim(); |
|
||||
} |
|
||||
}else if( this.nearToBorders(this.$targetEl[0]) || this.$targetEl[0] == this.$sel[0] ){ |
|
||||
if(this.status == 1){ |
|
||||
this.status = 2; |
|
||||
this.lastPos = null; |
|
||||
this.cDim = this.getChildrenDim(this.$targetElP); |
|
||||
} |
|
||||
}else if( !this.nearToBorders(this.$targetEl[0]) ){ |
|
||||
if(this.status == 2){ |
|
||||
this.status = 1; |
|
||||
this.lastPos = null; |
|
||||
} |
|
||||
this.cDim = []; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* Triggered when pointer leaves item |
|
||||
* @param event |
|
||||
* |
|
||||
* @return void |
|
||||
* */ |
|
||||
itemLeft: function(e){ |
|
||||
if(this.$targetEl){ |
|
||||
this.$targetEl.off('mouseleave',this.itemLeft); |
|
||||
this.$targetEl = null; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* Returns dimension of the target |
|
||||
* @param Event |
|
||||
* |
|
||||
* @return Array |
|
||||
* */ |
|
||||
getTargetDim: function(e){ |
|
||||
var $el = $(e), |
|
||||
$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 |
|
||||
* @return Bool |
|
||||
* */ |
|
||||
nearToBorders: function(e){ |
|
||||
var m = 10; //Limit in pixels for be near
|
|
||||
if(!this.dimT) |
|
||||
return; |
|
||||
var dimT = this.dimT; |
|
||||
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 |
|
||||
* @return void |
|
||||
* */ |
|
||||
rollback: function(e, force){ |
|
||||
var key = e.which || e.keyCode; |
|
||||
if(key == 27 || force){ |
|
||||
this.moved = false; |
|
||||
this.endMove(); |
|
||||
} |
|
||||
return; |
|
||||
}, |
|
||||
}); |
|
||||
}); |
|
||||
Loading…
Reference in new issue