', {class: this.ppfx + 'placeholder-int'}).get(0);
+ this.placerEl.appendChild(this.placerIntEl);
this.toolsEl.appendChild(this.hlEl);
this.toolsEl.appendChild(this.hlSelEl);
this.toolsEl.appendChild(this.badgeEl);
+ this.toolsEl.appendChild(this.placerEl);
},
/**
diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js
index 420f7e53f..00a49d473 100644
--- a/src/canvas/view/FrameView.js
+++ b/src/canvas/view/FrameView.js
@@ -16,12 +16,11 @@ function(Backbone) {
},
getWrapper: function(){
- return this.$el.contents().find('body div');
+ return this.$el.contents().find('body > div');
},
render: function() {
this.$el.attr({
- class: 'testframe',
style: 'width: 50%; display: block; height: 80%; border: medium none; margin: 50px auto 0; background-color: white',
});
return this;
diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js
index 18c69346d..4a22e02f4 100644
--- a/src/commands/view/CommandAbstract.js
+++ b/src/commands/view/CommandAbstract.js
@@ -26,7 +26,6 @@ define(['backbone'],
this.canvas = this.editorModel.Canvas;
if(this.editorModel.get)
- //this.setElement(this.editorModel.get('$editor').find('#'+this.canvasId));
this.setElement(this.getCanvas());
this.$canvas = this.$el;
diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 10c555163..ce27f60ed 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -193,7 +193,7 @@ define(function() {
var u = 'px';
bStyle.display = 'block';
var elP = this.getElementPos($el, badge);
- bStyle.left = elP.left + u;
+ bStyle.left = elP.leftP + u;
bStyle.top = elP.top + u;
},
@@ -212,6 +212,7 @@ define(function() {
*/
onFrameScroll: function(e){
this.canvasTool.style.top = '-' + this.bodyEl.scrollTop + 'px';
+ this.canvasTool.style.left = '-' + this.bodyEl.scrollLeft + 'px';
if(this.cacheEl)
this.updateBadge(this.cacheEl);
},
@@ -227,16 +228,19 @@ define(function() {
this.frameOff = this.offset(this.canvas.getFrameEl());
if(!this.canvasOff)
this.canvasOff = this.offset(this.canvas.getElement());
- var eo = el.offset();//this.offset(el);
+ var eo = el.offset();
var bodyEl = this.getCanvasBody();
var bdg = badge ? badge : null;
var badgeH = bdg ? bdg.offsetHeight : 0;
- var top = eo.top + this.frameOff.top - this.canvasOff.top;// - bodyEl.scrollTop
- var left = eo.left + this.frameOff.left - bodyEl.scrollLeft - this.canvasOff.left;
+ var badgeW = bdg ? bdg.offsetWidth : 0;
+ var top = eo.top + this.frameOff.top - this.canvasOff.top;
+ var left = eo.left + this.frameOff.left - this.canvasOff.left;
var topScroll = this.frameOff.top + bodyEl.scrollTop;
+ var leftScroll = this.frameOff.left + bodyEl.scrollLeft;
var topP = top;
top = (top - badgeH) < topScroll ? topScroll : top - badgeH;
- return {topP: topP, top: top, left: left, height: el.outerHeight(), width: el.outerWidth() };
+ var leftP = (left + badgeW) < leftScroll ? leftScroll - badgeW : left;
+ return {topP: topP, leftP: leftP, top: top, left: left, height: el.outerHeight(), width: el.outerWidth() };
},
/**
diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js
index 2e9ef6ee2..7f014c4da 100644
--- a/src/commands/view/SelectPosition.js
+++ b/src/commands/view/SelectPosition.js
@@ -25,8 +25,7 @@ define(function() {
* @return {Object} Placeholder
* @private
* */
- createPositionPlaceholder: function()
- {
+ createPositionPlaceholder: function() {
this.$plh = $('
', { class: this.plhClass + " no-dots" })
.css({'pointer-events':'none'}).data('helper',1);
this.$plh.append( $('
', { class: this.plhClass + "-int no-dots" } ) );
@@ -34,30 +33,52 @@ define(function() {
return this.$plh;
},
- enable: function()
- {
- this.startSelectPosition();
- },
-
/**
* Start select position event
* @private
* */
- startSelectPosition: function()
- {
+ startSelectPosition: function() {
this.isPointed = false;
+ var utils = this.editorModel.Utils;
+ if(utils && !this.sorter)
+ this.sorter = new utils.Sorter({
+ container: this.getCanvasBody(),
+ placer: this.canvas.getPlacerEl(),
+ containerSel: '*',
+ itemSel: '*',
+ pfx: this.ppfx,
+ direction: 'a',
+ nested: 1,
+ //onEndMove: this.onEndMove,
+ });
+ var offDim = this.getOffsetDim();
+ this.sorter.offTop = offDim.top;
+ this.sorter.offLeft = offDim.left;
+ console.log(offDim);
this.$wrapper.on('mousemove', this.selectingPosition);
},
+ getOffsetDim: function(){
+ var frameOff = this.offset(this.canvas.getFrameEl());
+ var canvasOff = this.offset(this.canvas.getElement());
+ var bodyEl = this.getCanvasBody();
+ var top = frameOff.top - canvasOff.top; //- bodyEl.scrollTop
+ var left = frameOff.left - canvasOff.left;// - bodyEl.scrollLeft
+ return { top: top, left: left };
+ },
+
/**
* Stop select position event
* @private
* */
- stopSelectPosition: function()
- {
+ stopSelectPosition: function() {
this.$wrapper.off('mousemove',this.selectingPosition);
this.posTargetCollection = null;
this.posIndex = this.posMethod=='after' && this.cDim.length!==0 ? this.posIndex + 1 : this.posIndex; //Normalize
+ if(this.sorter){
+ this.sorter.moved = 0;
+ this.sorter.endMove();
+ }
if(this.cDim){
this.posIsLastEl = this.cDim.length!==0 && this.posMethod=='after' && this.posIndex==this.cDim.length;
this.posTargetEl = (this.cDim.length===0 ? $(this.outsideElem) :
@@ -72,8 +93,7 @@ define(function() {
* @param {Object} e Event
* @private
* */
- selectingPosition: function(e)
- {
+ selectingPosition: function(e) {
this.isPointed = true;
if(!this.wp){
@@ -238,8 +258,7 @@ define(function() {
* @return {Integer}
* @private
* */
- nearToFloat: function()
- {
+ nearToFloat: function() {
var index = this.posIndex;
var isLastEl = this.posIsLastEl;
if(this.cDim.length !== 0 && (
@@ -257,8 +276,7 @@ define(function() {
* @return {Array}
* @private
* */
- getTargetDim: function(e)
- {
+ getTargetDim: function(e) {
var elT = e.target,
$el = $(elT);
return [ elT.offsetTop, elT.offsetLeft, $el.outerHeight(), $el.outerWidth() ];
@@ -271,8 +289,7 @@ define(function() {
* @return {Array}
* @private
* */
- getChildrenDim: function(el)
- {
+ getChildrenDim: function(el) {
var dim = [];
var elToPars = el || this.outsideElem;
var isInFlow = this.isInFlow; //Assign method for make it work inside $.each
@@ -291,8 +308,7 @@ define(function() {
* @param {Object} e Event
* @private
* */
- itemLeft: function(e)
- {
+ itemLeft: function(e) {
$(this.outsideElem).off('mouseleave',this.itemLeft);
this.outsideElem = null;
this.$targetEl = null;
@@ -307,8 +323,7 @@ define(function() {
* @return {Boolean}
* @private
* */
- isInFlow: function($this, elm)
- {
+ isInFlow: function($this, elm) {
var $elm = $(elm), ch = -1;
if(!$elm.length)
return false;
@@ -323,8 +338,7 @@ define(function() {
* @return {Boolean}
* @private
* */
- okProps: function($elm)
- {
+ okProps: function($elm) {
if ($elm.css('float')!=='none')
return false;
switch($elm.css('position')) {
@@ -342,18 +356,33 @@ define(function() {
* @param void
* @private
* */
- removePositionPlaceholder: function()
- {
+ removePositionPlaceholder: function() {
if(this.$plh && this.$plh.length)
this.$plh.remove();
this.$plh = null;
},
+ enable: function(){
+ this.frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this);
+ this.startSelectPosition();
+ },
+
+ /**
+ * On frame scroll callback
+ * @private
+ */
+ onFrameScroll: function(e){
+ this.canvasTool.style.top = '-' + this.bodyEl.scrollTop + 'px';
+ this.canvasTool.style.left = '-' + this.bodyEl.scrollLeft + 'px';
+ },
+
+
run: function(){
this.enable();
},
stop: function(){
+ this.frameEl.contentWindow.onscroll = null;
this.removePositionPlaceholder();
this.stopSelectPosition();
this.$wrapper.css('cursor','');//changes back aspect of the cursor
diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
index 2bf838c17..45f606eaf 100644
--- a/src/utils/Sorter.js
+++ b/src/utils/Sorter.js
@@ -22,6 +22,10 @@ define(['backbone'],
this.direction = o.direction || 'v'; // v (vertical), h (horizontal), a (auto)
this.onMoveClb = o.onMove || '';
this.relative = o.relative || 0;
+ this.plh = o.placer || '';
+ // Frame offset
+ this.offTop = o.offsetTop || 0;
+ this.offleft = o.offsetLeft || 0;
this.dropContent = '';
},
@@ -129,73 +133,56 @@ define(['backbone'],
// Turn placeholder visibile
var plh = this.plh;
- if(plh.style.display === 'none'){
+ var dsp = plh.style.display;
+ if(!dsp || dsp === 'none')
plh.style.display = 'block';
- }
// Cache all necessary positions
var eO = this.offset(this.el);
- this.elT = eO.top;
- this.elL = eO.left;
- this.rX = (e.pageX - this.elL) + this.el.scrollLeft;
+ this.elT = Math.abs(eO.top);
+ this.elL = Math.abs(eO.left);
+ //var top = eo.top + this.frameOff.top - this.canvasOff.top;
+ // this.el.scrollTop = - this.elT
this.rY = (e.pageY - this.elT) + this.el.scrollTop;
-
+ this.rX = (e.pageX - this.elL) + this.el.scrollLeft;
var dims = this.dimsFromTarget(e.target, this.rX, this.rY);
- var pos = this.findPosition(dims, this.rX, this.rY);
+
+ //var dimsT = dims;
+
+ var dimsT = [];
+ for(var i = 0, len = dims.length; i < len; i++){
+ var dimT = [];
+ var dm = dims[i];
+ dimT[0] = dm[0];// - this.el.scrollTop;
+ dimT[1] = dm[1];// - this.el.scrollLeft;
+ dimT[2] = dm[2];
+ dimT[3] = dm[3];
+ dimT[4] = dm[4];
+ dimT[5] = dm[5];
+ dimsT.push(dimT);
+ }
+
+ var pos = this.findPosition(dimsT, this.rX, this.rY);
// If there is a significant changes with the pointer
if( !this.lastPos ||
(this.lastPos.index != pos.index || this.lastPos.method != pos.method)){
- this.movePlaceholder(this.plh, dims, pos, this.prevTargetDim);
+ this.movePlaceholder(this.plh, dimsT, pos, this.prevTargetDim);
+ if(!this.$plh)
+ this.$plh = $(this.plh);
+ if(this.offTop)
+ this.$plh.css('top', '+=' + this.offTop + 'px');
+ if(this.offLeft)
+ this.$plh.css('left', '+=' + this.offLeft + 'px');
this.lastPos = pos;
}
+ console.log('pageY: '+e.pageY+' elT: '+this.elT+' scrollT: '+this.el.scrollTop+' offTop: '+this.offTop+' rY: '+
+ this.rY + ' plhT: '+ plh.style.top, dimsT);
+
if(typeof this.onMoveClb === 'function')
this.onMoveClb(e);
},
- /**
- * Get children dimensions
- * @param {HTMLELement} el Element root
- * @retun {Array}
- * */
- getChildrenDim: function(elem){
- var dims = [];
- if(!elem)
- return dims;
- var ch = elem.children; //TODO filter match
- for (var i = 0, len = ch.length; i < len; i++) {
- var el = ch[i];
- if(!this.matches(el, this.itemSel))
- continue;
- var dim = this.getDim(el);
- var dir = this.direction;
-
- if(dir == 'v')
- dir = true;
- else if(dir == 'h')
- dir = false;
- else
- dir = this.isInFlow(el, elem);
-
- dim.push(dir);
- dim.push(el);
- dims.push(dim);
- }
- return dims;
- },
-
- /**
- * Returns dimensions and positions about the element
- * @param {HTMLElement} el
- * @return {Array}
- */
- getDim: function(el){
- var o = this.offset(el);
- var top = this.relative ? el.offsetTop : o.top - this.elT;
- var left = this.relative ? el.offsetLeft : o.left - this.elL;
- return [top, left, el.offsetHeight, el.offsetWidth];
- },
-
/**
* Returns true if the elements is in flow, so is not in flow where
* for example the component is with float:left
@@ -295,7 +282,51 @@ define(['backbone'],
dims = this.cacheDimsP;
this.target = this.targetP;
}
+ this.lastPos = null;
+ return dims;
+ },
+
+ /**
+ * Returns dimensions and positions about the element
+ * @param {HTMLElement} el
+ * @return {Array}
+ */
+ getDim: function(el){
+ var o = this.offset(el);
+ var top = this.relative ? el.offsetTop : o.top + this.elT;
+ var left = this.relative ? el.offsetLeft : o.left + this.elL;
+ console.log(o.top+' - '+ this.elT);
+ return [top, left, el.offsetHeight, el.offsetWidth];
+ },
+
+ /**
+ * Get children dimensions
+ * @param {HTMLELement} el Element root
+ * @retun {Array}
+ * */
+ getChildrenDim: function(elem){
+ var dims = [];
+ if(!elem)
+ return dims;
+ var ch = elem.children; //TODO filter match
+ for (var i = 0, len = ch.length; i < len; i++) {
+ var el = ch[i];
+ if(!this.matches(el, this.itemSel))
+ continue;
+ var dim = this.getDim(el);
+ var dir = this.direction;
+ if(dir == 'v')
+ dir = true;
+ else if(dir == 'h')
+ dir = false;
+ else
+ dir = this.isInFlow(el, elem);
+
+ dim.push(dir);
+ dim.push(el);
+ dims.push(dim);
+ }
return dims;
},
@@ -385,7 +416,7 @@ define(['backbone'],
var marg = 0, t = 0, l = 0, w = 0, h = 0,
un = 'px', margI = 5, brdCol = '#62c462', brd = 3,
method = pos.method;
- var elDim = dims[pos.index];//#62c462
+ var elDim = dims[pos.index];
plh.style.borderColor = 'transparent ' + brdCol;
plh.style.borderWidth = brd + ' ' + (brd + 2);
plh.style.margin = '-' + brd + 'px 0 0';
@@ -437,10 +468,12 @@ define(['backbone'],
$(document).off('keypress', this.rollback);
this.plh.style.display = 'none';
var clsReg = new RegExp('(?:^|\\s)'+this.freezeClass+'(?!\\S)', 'gi');
- this.eV.className = this.eV.className.replace(clsReg, '');
+ if(this.eV)
+ this.eV.className = this.eV.className.replace(clsReg, '');
if(this.moved)
this.move(this.target, this.eV, this.lastPos);
-
+ if(this.plh)
+ this.plh.style.display = 'none';
if(typeof this.onEndMove === 'function')
this.onEndMove();
},
diff --git a/styles/css/main.css b/styles/css/main.css
index f15b82fd7..e0cee4780 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2768,7 +2768,9 @@ ol.example li.placeholder:before {
.wte-placeholder, .wte-com-placeholder {
position: absolute;
- z-index: 10; }
+ z-index: 10;
+ pointer-events: none;
+ display: none; }
.wte-placeholder {
/*border-width: 3px !important;*/
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index 98fb9ba9c..03a0a9827 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -250,6 +250,8 @@ ol.example li.placeholder:before {position: absolute;}
.#{$app-prefix}placeholder, .#{$com-prefix}placeholder{
position: absolute;
z-index: 10;
+ pointer-events: none;
+ display: none;
}
.#{$app-prefix}placeholder{
/*border-width: 3px !important;*/