From 3b4335067c51a329c20d150b4b8ef67613e9e772 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 28 Jun 2016 22:57:24 +0200 Subject: [PATCH] Fix move command --- src/commands/view/MoveComponent.js | 5 +- src/demo.js | 2 +- src/dom_components/config/config.js | 2 +- src/dom_components/main.js | 4 +- src/dom_components/model/Component.js | 2 +- src/navigator/view/ItemSort.js | 102 +++++++++++++------------- src/navigator/view/ItemView.js | 2 +- 7 files changed, 61 insertions(+), 58 deletions(-) diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index 4fa343b92..e7f25b443 100644 --- a/src/commands/view/MoveComponent.js +++ b/src/commands/view/MoveComponent.js @@ -28,6 +28,9 @@ define(['backbone', './SelectComponent','./SelectPosition'], * @param {Event} e * */ initSorter: function(e){ + var el = $(e.target).get('model'); + if(!el.get('draggable')) + return; if(this.sorter) this.sorter.startSort(e.target); this.stopSelectComponent(e); @@ -50,7 +53,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], e.stopPropagation(); var $this = $(e.target); - if($this.data('model').get('movable')){ + if($this.data('model').get('draggable')){ $this.addClass(this.hoverClass); this.attachBadge(e.target); } diff --git a/src/demo.js b/src/demo.js index 75d68a348..6bbba5076 100644 --- a/src/demo.js +++ b/src/demo.js @@ -9,7 +9,7 @@ require(['config/require-config'], function() { container : '#gjs', height: '100%', fromElement: true, - storage:{ autoload: 0 }, + //storage:{ autoload: 0 }, commands: { defaults : [{ diff --git a/src/dom_components/config/config.js b/src/dom_components/config/config.js index 5b30d2d74..3f2c34831 100644 --- a/src/dom_components/config/config.js +++ b/src/dom_components/config/config.js @@ -9,7 +9,7 @@ define(function () { removable : false, copyable : false, stylable : ['background','background-color','background-image', 'background-repeat','background-attachment','background-position'], - movable : false, + draggable : false, badgable : false, components: [], }, diff --git a/src/dom_components/main.js b/src/dom_components/main.js index 77c66f865..d8be5834c 100644 --- a/src/dom_components/main.js +++ b/src/dom_components/main.js @@ -132,7 +132,7 @@ define(function(require) { * @param {string} [component.tagName='div'] Tag name * @param {string} [component.type=''] Type of the component. Available: ''(default), 'text', 'image' * @param {boolean} [component.removable=true] If component is removable - * @param {boolean} [component.movable=true] If is possible to move the component around the structure + * @param {boolean} [component.draggable=true] If is possible to move the component around the structure * @param {boolean} [component.droppable=true] If is possible to drop inside other components * @param {boolean} [component.badgable=true] If the badge is visible when the component is selected * @param {boolean} [component.stylable=true] If is possible to style component @@ -146,7 +146,7 @@ define(function(require) { * var comp1 = ComponentsService.addComponent({ * tagName: 'div', * removable: true, // Can't remove it - * movable: true, // Can't move it + * draggable: true, // Can't move it * copyable: true, // Disable copy/past * content: 'Content text', // Text inside component * style: { color: 'red'}, diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 5351f8edd..fa19fd34e 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -8,7 +8,7 @@ define(['backbone','./Components', 'ClassManager/model/ClassTags'], type: '', editable: false, removable: true, - movable: true, + draggable: true, droppable: true, badgable: true, stylable: true, diff --git a/src/navigator/view/ItemSort.js b/src/navigator/view/ItemSort.js index 2630841ef..cb0c7e525 100644 --- a/src/navigator/view/ItemSort.js +++ b/src/navigator/view/ItemSort.js @@ -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 = $('
', {id: pfx + 'placeholder'}).css({'pointer-events':'none'}).hide(); this.$plh.append( $('
', {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 diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js index eddd64ab1..1c70ec6fa 100644 --- a/src/navigator/view/ItemView.js +++ b/src/navigator/view/ItemView.js @@ -196,7 +196,7 @@ define(['backbone', 'text!./../template/item.html','require'], }).render().$el; this.$el.find('.'+ pfx +'children').html(this.$components); this.$caret = this.$el.find('> .' + pfx + 'title > #' + pfx + 'caret'); - if(!this.model.get('movable') || !this.config.sortable){ + if(!this.model.get('draggable') || !this.config.sortable){ this.$el.find('> #' + pfx + 'move').detach(); } if(!vis)