', { class: this.plhClass + "-int no-dots" } ) );
- this.$plh.appendTo( this.$wrapper );
- return this.$plh;
- },
-
- enable: function()
- {
- this.startSelectPosition();
- },
-
- /**
- * Start select position event
- *
- * @return void
- * */
- startSelectPosition: function()
- {
- this.isPointed = false;
- this.$wrapper.on('mousemove', this.selectingPosition);
- },
-
- /**
- * Stop select position event
- * @return void
- * */
- 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.cDim){
- this.posIsLastEl = this.cDim.length!==0 && this.posMethod=='after' && this.posIndex==this.cDim.length;
- this.posTargetEl = (this.cDim.length===0 ? $(this.outsideElem) :
- (!this.posIsLastEl && this.cDim[this.posIndex] ? $(this.cDim[this.posIndex][5]).parent() : $(this.outsideElem) ));
- this.posTargetModel = this.posTargetEl.data("model");
- this.posTargetCollection = this.posTargetEl.data("model-comp");
- }
- },
-
- /**
- * During event
- * @param {Object} e Event
- * */
- selectingPosition: function(e)
- {
- this.isPointed = true;
-
- if(!this.wp){
- this.$wp = this.$wrapper;
- this.wp = this.$wp[0];
- }
- var wpO = this.$wp.offset();
- this.wpT = wpO.top;
- this.wpL = wpO.left;
- this.wpScT = this.$wp.scrollTop();
- this.wpScL = this.$wp.scrollLeft();
-
- if(!this.$plh)
- this.createPositionPlaceholder();
-
- this.rY = (e.pageY - this.wpT) + this.wpScT;
- this.rX = (e.pageX - this.wpL) + this.wpScL;
-
- this.entered(e);
- this.updatePosition(this.rX, this.rY);
- var actualPos = this.posIndex + ':' + this.posMethod; //save globally the new index
-
- if(!this.lastPos || (this.lastPos != actualPos)){ //If there is a significant changes with mouse
- this.updatePositionPlaceholder(this.posIndex, this.posMethod);
- this.lastPos = actualPos;
- }
- },
-
- /**
- * Search where to put placeholder
- * @param {Integer} posX X position of the mouse
- * @param {Integer} posY 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 = 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 = i;
- if( posY < yCenter ){ //If mouse upper than center
- this.posMethod = "before"; //Should place helper before
- break; //No need to continue under inFlow element
- }else
- this.posMethod = "after";
- }
- }
- if(this.posIndex == (this.cDim.length) && this.posMethod == 'after' ){
- this.posIndex--;
- }
- },
-
- /**
- * Updates the position of the placeholder
- * @param {Integer} index Index of the nearest child
- * @param {String} method Before or after position
- *
- * @return void
- * */
- updatePositionPlaceholder: function(index, method){
- var t = 0, l = 0, w = 0, h = 0,
- marg = 2,
- un = 'px',
- margI = 5,
- plh = this.$plh[0];
- if( this.cDim[index] ){
- var elDim = this.cDim[index];
- if(!elDim[4]){
- w = 'auto';
- t = elDim[0] + marg;
- h = elDim[2] - (marg * 2) + un;
- l = (method == 'before') ? (elDim[1] - marg) : (elDim[1] + elDim[3] - marg);
- }else{
- w = elDim[3] + un;
- t = (method == 'before') ? (elDim[0] - marg) : (elDim[0] + elDim[2] - marg);
- l = elDim[1];
- h = 'auto';
- }
- //t -= this.wpScT;
- //l -= this.wpScL;
- }else{
- if(this.$targetEl){
- var trg = this.$targetEl[0],
- $eO = this.$targetEl.offset();
- t = $eO.top - this.wpT + this.wpScT + margI;
- l = $eO.left - this.wpL + this.wpScL + margI;
- w = (parseInt(trg.offsetWidth) - margI * 2) + un;
- h = 'auto';
- }
- }
-
- plh.style.top = t + un;
- plh.style.left = l + un;
- if(w)
- plh.style.width = w;
- if(h)
- plh.style.height = h;
- },
-
- /**
- * Track inside which element pointer entered
- * @param {Object} e Event
- *
- * @return void
- * */
- entered: function(e){
- if( (!this.outsideElem || this.outsideElem != e.target) ){ //If I'm in the new element
- this.outsideElem = e.target; //Set the element in which it's actually inside
- this.$targetEl = $(e.target);
- $(this.outsideElem).on('mouseleave',this.itemLeft);
- this.cDim = this.getChildrenDim();
- this.dimT = this.getTargetDim(e);
- if( this.nearToBorders(e) && (e.target.parentNode!=this.wp.parentNode) ) //Avoid flickering
- this.cDim = this.getChildrenDim(e.target.parentNode);
- }else if( this.nearToBorders(e) && (e.target.parentNode!=this.wp.parentNode) ){ //Near to borders and parent is not the canvas
- this.cDim = this.getChildrenDim(e.target.parentNode);
- }else if( !(this.nearToBorders(e)) ){
- this.cDim = this.getChildrenDim();
- }
- },
-
- /**
- * Check if pointer is near to the borders of the target
- * @param {Object} e Event
- *
- * @return {Integer}
- * */
- nearToBorders: function(e){
- var m = 7; //Limit in pixels for be near
- if(!this.dimT)
- return;
- var dimT = this.dimT;
- if(dimT[2] < 40)
- m = 5;
- 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)) ) //Check if the pointer is near
- return 1;
- else
- return 0;
- },
-
- /**
- * Check if pointer is near to the float component
- *
- * @return {Integer}
- * */
- nearToFloat: function()
- {
- var index = this.posIndex;
- var isLastEl = this.posIsLastEl;
- if(this.cDim.length !== 0 && (
- (!isLastEl && !this.cDim[index][4]) ||
- (this.cDim[index-1] && !this.cDim[index-1][4]) ||
- (isLastEl && !this.cDim[index-1][4]) ) )
- return 1;
- else
- return 0;
- },
-
- /**
- * Returns dimension of the taget
- * @param {Object} e Event
- *
- * @return {Array}
- * */
- getTargetDim: function(e)
- {
- var elT = e.target,
- $el = $(elT);
- return [ elT.offsetTop, elT.offsetLeft, $el.outerHeight(), $el.outerWidth() ];
- },
-
- /**
- * Returns children and their dimensions of the target element,
- * excluding text nodes and the move placeholder
- * @param {Object} el Element
- *
- * @return {Array}
- * */
- getChildrenDim: function(el)
- {
- var dim = [];
- var elToPars = el || this.outsideElem;
- var isInFlow = this.isInFlow; //Assign method for make it work inside $.each
- var $this = this; //Store context
- $(elToPars.childNodes).each(function(){
- var $el = $(this);
- if(this.nodeName != '#text' && !$el.data('helper') ){ //Ignore text nodes and helpers
- dim.push( [ this.offsetTop, this.offsetLeft, $el.outerHeight(), $el.outerWidth(), isInFlow($this, this), this ] );
- }
- });
- return dim;
- },
-
- /**
- * Track when I go ouside of the element (basically when the target changes)
- * @param {Object} e Event
- *
- * @return void
- * */
- itemLeft: function(e)
- {
- $(this.outsideElem).off('mouseleave',this.itemLeft);
- this.outsideElem = null;
- this.$targetEl = null;
- this.lastPos = null;
- },
-
- /**
- * Returns true if the elements is in flow, or better is not in flow where
- * for example the component is with float:left
- * @param {Object} $this Context
- * @param {Object} elm Element
- *
- * @return {Boolean}
- * */
- isInFlow: function($this, elm)
- {
- var $elm = $(elm), ch = -1;
- if(!$elm.length)
- return false;
- if( ($elm.height() < ch) || !$this.okProps($elm) )
- return false;
- return true;
- },
-
- /**
- * Returns true only if the element follow the standard flow
- * @param {Object} $elm Element
- *
- * @return {Boolean}
- * */
- okProps: function($elm)
- {
- if ($elm.css('float')!=='none')
- return false;
- switch($elm.css('position')) {
- case 'static': case 'relative': break;
- default: return false;
- }
- switch ($elm.css('display')) {
- case 'block': case 'list-item': case 'table': return true;
- }
- return false;
- },
-
- /**
- * Removes position placeholder
- *
- * @param void
- * */
- removePositionPlaceholder: function()
- {
- if(this.$plh && this.$plh.length)
- this.$plh.remove();
- this.$plh = null;
- },
-
- /* Run method */
- run: function(){
- this.enable();
- },
-
- /* Stop method */
- stop: function(){
- this.removePositionPlaceholder();
- this.stopSelectPosition();
- this.$wrapper.css('cursor','');//changes back aspect of the cursor
- this.$wrapper.unbind();//removes all attached events
- }
- };
-});
-define('Commands/view/CreateComponent',['backbone','./SelectPosition'],
- function(Backbone, SelectPosition) {
- /**
- * @class CreateComponent
- * */
- return _.extend({}, SelectPosition, {
-
- newElement : null,
-
- tempComponent: { style:{} },
-
- init: function(opt) {
- SelectPosition.init.apply(this, arguments);
- _.bindAll(this,'startDraw','draw','endDraw','rollback');
- this.config = opt;
- this.heightType = this.config.newFixedH ? 'height' : 'min-height';
- },
-
- /**
- * Returns creation placeholder
- *
- * @return {Object}
- * */
- getCreationPlaceholder: function()
- {
- return this.newElem;
- },
-
- /**
- * Removes creation placeholder
- *
- * @return void
- * */
- removeCreationPlaceholder: function()
- {
- this.newElem.remove();
- },
-
- /**
- * Start with enabling to select position and listening to start drawning
- * @return void
- * */
- enable: function()
- {
- SelectPosition.enable.apply(this, arguments);
- this.$el.css('cursor','crosshair');
- this.enableToDraw();
- },
-
- /**
- * Enable user to draw components
- *
- * @return void
- * */
- enableToDraw: function()
- {
- this.$el.on('mousedown', this.startDraw);
- //Need to disable selection
- },
-
- /**
- * Start drawing component
- * @param {Object} e Event
- *
- * @return void
- * */
- startDraw : function(e)
- {
- e.preventDefault();
- this.stopSelectPosition(); //Interrupt selecting position
- this.tempComponent = { style: {} }; //Reset the helper
- this.isDragged = false;
- this.beforeDraw(this.tempComponent);
- this.getPositionPlaceholder().addClass('change-placeholder'); //Change color of the position placeholder
- this.newElemOrig = { top : e.pageY, left: e.pageX };
- this.newElem = $('
', {class: "tempComp"}).css(this.newElemOrig); //Create helper element with initial position
- this.newElem.data('helper',1);
- $('body').append(this.newElem); //Show helper component
- this.parentElem=this.newElem.parent(); //For percent count
- this.targetC = this.outsideElem;
- $(document).mousemove(this.draw);
- $(document).mouseup(this.endDraw);
- $(document).keypress(this.rollback);
- },
-
- /**
- * While drawing the component
- * @param {Object} e Event
- *
- * @return void
- * */
- draw: function(e)
- {
- this.isDragged = true;
- this.updateComponentSize(e);
- },
-
- /**
- * End drawing component
- * @param {Object} e Event
- *
- * @return void
- * */
- endDraw : function(e)
- {
- $(document).off('mouseup', this.endDraw);
- $(document).off('mousemove', this.draw);
- $(document).off('keypress',this.rollback);
- var model = {};
- if(this.isDragged){ //Only if the mouse was moved
- this.updateComponentSize(e);
- this.setRequirements(this.tempComponent);
- model = this.create(null,this.tempComponent,this.posIndex,this.posMethod);
- }
- if(this.getPositionPlaceholder())
- this.getPositionPlaceholder().removeClass('change-placeholder'); //Turn back the original color of the placeholder
- this.startSelectPosition(); //Return with selecting new position
- this.removeCreationPlaceholder(); //Remove the element used for size indication
- this.afterDraw(model);
- },
-
- /**
- * Create component
- * @param {Object} target DOM of the target element which to push new component
- * @param {Object} component New component to push
- * @param {Integer} posIndex Index inside the collection, 0 if no children inside
- * @param {String} method Before or after of the children
- *
- * @return {Object} Created model
- * */
- create: function(target, component, posIndex, method)
- {
- var index = posIndex || 0;
- if(this.posTargetCollection && this.posTargetModel.get('droppable')){
- //Check config parameters for center in wrapper
- if(this.config.firstCentered && (this.$wrapper.get(0) == this.posTargetEl.get(0)) ){
- component.style.margin = '0 auto';
- }
- if(this.nearToFloat()) //Set not in flow if the nearest is too
- component.style.float = 'left';
- this.beforeCreation(component);
- var model = this.posTargetCollection.add(component, { at: index, silent:false });
- this.afterCreation(model);
- return model;
- }else
- console.warn("Invalid target position");
- },
-
- /**
- * Check and set basic requirements for the component
- * @param {Object} component New component to be created
- * @return {Object} Component updated
- * */
- setRequirements: function(component)
- {
- var c = this.config;
- if(component.style.width.replace(/\D/g,'') < c.minComponentW) //Check min width
- component.style.width = c.minComponentW +'px';
- if(component.style[this.heightType].replace(/\D/g,'') < c.minComponentH) //Check min height
- component.style[this.heightType] = c.minComponentH +'px';
- if(c.newFixedH) //Set overflow in case of fixed height
- component.style.overflow = 'auto';
- if(!this.absoluteMode){
- delete component.style.left;
- delete component.style.top;
- }else
- component.style.position = 'absolute';
- return component;
- },
-
- /**
- * Update new component size while drawing
- * @param {Object} e Event
- *
- * @return void
- * */
- updateComponentSize : function (e)
- {
- var newLeft = e.pageX;
- var newTop = e.pageY;
- var startLeft = this.newElemOrig.left;
- var startTop = this.newElemOrig.top;
- var newWidth = newLeft - startLeft;//$(this.newElem).offset().left
- var newHeight = newTop - startTop;//$(this.newElem).offset().top
- if (newLeft < this.newElemOrig.left) {
- startLeft = newLeft;
- newWidth = this.newElemOrig.left - newLeft;
- }
- if (newTop < this.newElemOrig.top) {
- startTop = newTop;
- newHeight = this.newElemOrig.top - newTop;
- }
- newWidth = this.absoluteMode ? (newWidth/this.parentElem.width()*100+"%") : newWidth+'px';
- this.newElem[0].style.left = startLeft+'px';
- this.newElem[0].style.top = startTop+'px';
- this.newElem[0].style.width = newWidth;
- this.newElem[0].style['min-height'] = newHeight+'px';
- this.tempComponent.style.width = newWidth;
- this.tempComponent.style[this.heightType] = newHeight+"px";
- this.tempComponent.style.left = startLeft + "px";
- this.tempComponent.style.top = startTop + "px";
- },
-
- /**
- * Used to bring the previous situation before event started
- * @param {Object} e Event
- * @param {Boolean} forse Indicates if rollback in anycase
- *
- * @return void
- * */
- rollback: function(e, force)
- {
- var key = e.which || e.keyCode;
- if(key == this.config.ESCAPE_KEY || force){
- this.isDragged = false;
- this.endDraw();
- }
- return;
- },
-
- /**
- * This event is triggered at the beginning of a draw operation
- * @param {Object} component Object component before creation
- *
- * @return void
- * */
- beforeDraw: function(component){
- component.editable = false;//set this component editable
- },
-
- /**
- * This event is triggered at the end of a draw operation
- * @param {Object} model Component model created
- *
- * @return void
- * */
- afterDraw: function(model){},
-
- /**
- * This event is triggered just before a create operation
- * @param {Object} component Object component before creation
- *
- * @return void
- * */
- beforeCreation: function(component){},
-
- /**
- * This event is triggered at the end of a create operation
- * @param {Object} model Component model created
- *
- * @return void
- * */
- afterCreation: function(model){},
-
- /** Run method
- * */
- run: function(em, sender){
- this.sender = sender;
- this.$el = this.$wrapper;
- this.enable();
- },
-
- /** Stop method
- * */
- stop: function(){
- this.removePositionPlaceholder(); //Removes placeholder from eventSelectPosition
- this.stopSelectPosition();
- this.$el.css('cursor',''); //Changes back aspect of the cursor
- this.$el.unbind(); //Removes all attached events
- }
- });
- });
-define('Commands/view/DeleteComponent',['backbone', './SelectComponent'],
- function(Backbone, SelectComponent) {
- /**
- * @class DeleteComponent
- * */
- return _.extend({},SelectComponent,{
-
- init: function(o){
- this.hoverClass = this.pfx + 'hover-delete';
- this.badgeClass = this.pfx + 'badge-red';
- },
-
- enable: function(){
- var that = this;
- this.$el.find('*').mouseover(function (e){
- e.stopPropagation();
- if($(this).data('model').get('removable')){ //Show badge if possible
- $(this).addClass(that.hoverClass);
- that.attachBadge(this);
- }
- }).mouseout(function (e){ //hover out
- e.stopPropagation();
- $(this).removeClass(that.hoverClass);
- if(that.badge) //Hide badge if possible
- that.badge.css({ left: -1000, top:-1000 });
- }).click(function(e){
- that.onSelect(e,this); //Callback on select
- });
- },
-
- /**
- * Say what to do after the component was selected
- * @param Event
- * @param Object Selected element
- * */
- onSelect: function(e, el){
- e.stopPropagation();
- var $selected = $(el);
- if(!$selected.data('model').get('removable')) //Do nothing in case can't remove
- return;
- $selected.data('model').destroy();
- this.removeBadge();
- this.clean();
- },
-
- /**
- * Updates badge label
- * @param Object Model
- * @return void
- * */
- updateBadgeLabel: function (model){
- this.badge.html( 'Remove '+model.getName() );
- },
- });
- });
-define('Commands/view/InsertCustom',['backbone', './SelectPosition'],
- function(Backbone, SelectPosition) {
- /**
- * @class InsertCustom
- * */
- return _.extend({}, SelectPosition, {
-
- /**
- * Run method
- * */
- run: function(em, sender){
- this.enable();
- this.sender = sender;
- this.opt = sender.get('options') || {};
- this.content = this.opt.content;
- },
-
- enable: function(){
- SelectPosition.enable.apply(this, arguments);
- _.bindAll(this,'insertComponent');
- this.$wp = this.$wrapper;
- this.$wp.on('click', this.insertComponent);
- },
-
- /**
- * Start insert event
- *
- * @return void
- * */
- insertComponent: function(){
- this.$wp.off('click', this.insertComponent);
- this.stopSelectPosition();
- this.removePositionPlaceholder();
- var object = this.buildContent();
- this.beforeInsert(object);
- var model = this.posTargetCollection.add(object, { at: this.posIndex, silent:false });
- if(this.opt.terminateAfterInsert && this.sender)
- this.sender.set('active',false);
- else
- this.enable();
- this.afterInsert(model, this);
- },
-
- /**
- * Trigger before insert
- * @param {Object} obj
- *
- * @return void
- * */
- beforeInsert: function(obj){},
-
- /**
- * Trigger after insert
- * @param {Object} model Model created after insert
- *
- * @return void
- * */
- afterInsert: function(model){},
-
- /**
- * Create different object, based on content, to insert inside canvas
- *
- * @return {Object}
- * */
- buildContent: function(){
- var result = {};
- if(typeof this.content === 'string'){
- result = {
- content : this.content,
- tagName : 'span',
- };
- }else if(typeof this.content === 'object'){
- result = this.content;
- }
- return result;
- },
- });
- });
-define('Commands/view/ImageComponent',['backbone', './InsertCustom'],
- function(Backbone, InsertCustom) {
- /**
- * @class ImageComponent
- * */
- return _.extend({}, InsertCustom, {
-
- /**
- * Trigger before insert
- * @param {Object} object
- *
- * */
- beforeInsert: function(object){
- object.type = 'image';
- object.style = {};
- if (!this.nearToFloat()) {
- object.style.display = 'block';
- }
- if (this.config.firstCentered && (this.$wp.get(0) == this.posTargetEl.get(0)) ) {
- object.style.margin = '0 auto';
- }
- },
-
- /**
- * Trigger after insert
- * @param {Object} model Model created after insert
- *
- * */
- afterInsert: function(model){
- model.trigger('dblclick');
- if(this.sender)
- this.sender.set('active', false);
- },
-
-
- });
- });
-define('Commands/view/MoveComponent',['backbone', './SelectComponent','./SelectPosition'],
- function(Backbone, SelectComponent, SelectPosition) {
- /**
- * @class MoveComponent
- * */
- return _.extend({},SelectComponent, SelectPosition,{
-
- init: function(o){
- _.bindAll(this,'startMove','onMove','endMove','rollback','selectingPosition','itemLeft');//to mantein 'this' context
- this.opt = o;
- this.hoverClass = this.pfx + 'hover-move';
- this.badgeClass = this.pfx + 'badge-yellow';
- this.noSelClass = this.pfx + 'no-select';
- },
-
- enable: function(){
- this.canvasTop = this.$canvas.offset().top;
- this.canvasLeft = this.$canvas.offset().left;
- this.$el.css('cursor','move');
- this.$el.on('mousedown', this.startMove);
- this.startSelectComponent();
- //Avoid strange moving behavior
- this.$el.addClass(this.noSelClass);
- },
-
- /** Highlight component when pointer is over it
- * @param Event
- * @param Object Component
- * @return void
- * */
- highlightComponent: function(e, el){
- e.stopPropagation();
- if($(el).data('model').get('movable')){ //Show badge if possible
- $(el).addClass(this.hoverClass);
- this.attachBadge(el);
- }
- },
-
- /** Say what to do after the component was selected
- * - Method from selectComponent
- * @param Event
- * @param Object Selected element
- * */
- onSelect: function(e,el){},
-
- /** Picking component to move
- * @param event
- * */
- startMove: function(e, el){
- this.moved = false;
- if( !$(e.target).data('model').get('movable') ){ return; } //In case the component selected is not movable
- this.$el.off('mousedown', this.startMove);
- this.stopSelectComponent(e);
- this.$selectedEl = $(e.target);
- this.freezeComponent(this.$selectedEl);
- this.helperObj = $('
', {class: "tempComp"}).css({ //HELPER gray box
- top : (e.pageY - this.canvasTop) + this.$canvas.scrollTop(),
- left: (e.pageX - this.canvasLeft) + this.$canvas.scrollLeft(),
- width: $(e.target).width(),
- height: $(e.target).height(),
- position : 'absolute',
- 'pointer-events': 'none', //disable events for the element
- }).data('helper',1).appendTo(this.$el);
-
- this.startSelectPosition();
-
- this.$el.on('mousemove',this.onMove);
- $(document).on('mouseup',this.endMove);
- $(document).on('keypress',this.rollback);
- },
-
- /** During move
- * @param event */
- onMove: function(e){
- this.moved = true;
- var relativeY = (e.pageY - this.canvasTop) + this.$canvas.scrollTop();
- var relativeX = (e.pageX - this.canvasLeft) + this.$canvas.scrollLeft();
- this.helperObj[0].style.top = (relativeY)+'px';
- this.helperObj[0].style.left = (relativeX)+'px';
- },
-
- /** Leave component
- * @param event */
- endMove: function(e){
- this.$el.off('mousemove',this.onMove);
- $(document).off('mouseup', this.endMove);
- $(document).off('keypress', this.rollback);
- this.helperObj.remove();
-
- this.removePositionPlaceholder();
- this.stopSelectPosition();
-
- //this.highlightComponent(e,el) after end of move
- if(this.moved)
- this.move(null, this.$selectedEl, this.posIndex, this.posMethod);
- this.unfreezeComponent(this.$selectedEl);
- this.enable();
- },
-
- /** Move component to new position
- * @param object Component to move
- * @param object Target component
- * @param int Indicates the position inside the collection
- * @param string Before of after component
- *
- * @return void
- * */
- move: function(target, el, posIndex, posMethod){
- var index = posIndex || 0;
- var model = el.data("model");
- var collection = model.collection;
-
- var targetCollection = this.posTargetCollection;
- var targetModel = this.posTargetModel;
-
- if(targetCollection && targetModel.get('droppable')){
- var modelTemp = targetCollection.add({css:{}}, { at: index });
- var modelRemoved = collection.remove(model);
- targetCollection.add(modelRemoved, { at: index });
- targetCollection.remove(modelTemp);//{ avoidStore: 1 }
- }else
- console.warn("Invalid target position");
- },
-
- /** Make component untouchable
- * @param object Component
- * @return void
- * */
- freezeComponent: function($component){
- $component.css({'pointer-events':'none'});
- $component.addClass('freezed');
- },
-
- /** Make component touchable
- * @param object Component
- * @return void
- * */
- unfreezeComponent: function($component){
- $component.css({'pointer-events':'auto'});
- $component.removeClass('freezed');
- },
-
- /** Used to bring the previous situation before start moving the component
- * @param Event
- * @param Bool Indicates if rollback in anycase
- * @return void
- * */
- rollback: function(e, force){
- var key = e.which || e.keyCode;
- if(key == this.opt.ESCAPE_KEY || force){
- this.moved = false;
- this.endMove();
- }
- return;
- },
-
- /** Closing method
- * */
- last: function(){
- this.placeholder.remove();
- this.placeholderStart.remove();
- this.helperObj.remove();
- this.$el.off('mousemove',this.move);
- $(document).off('mouseup', this.endMove);
- $(document).off('keypress', this.rollback);
- },
-
- /* Run method */
- run: function(){
- this.enable();
- },
-
- /* Stop method */
- stop: function(){
- this.stopSelectComponent();
- this.$el.css('cursor','');//changes back aspect of the cursor
- this.$el.unbind();//removes all attached events
- this.$el.removeClass(this.noSelClass);
- }
- });
- });
-define('Commands/view/TextComponent',['backbone', './CreateComponent'],
- function(Backbone, CreateComponent) {
- /**
- * @class TextComponent
- * */
- return _.extend({}, CreateComponent, {
-
- /**
- * This event is triggered at the beginning of a draw operation
- * @param {Object} component Object component before creation
- *
- * */
- beforeDraw: function(component){
- component.type = 'text';
- if(!component.style)
- component.style = {};
- component.style.padding = '10px';
- },
-
- /**
- * This event is triggered at the end of a draw operation
- * @param {Object} model Component model created
- *
- * */
- afterDraw: function(model){
- if(!model || !model.set)
- return;
- model.trigger('focus');
- if(this.sender)
- this.sender.set('active', false);
- },
-
- });
- });
-define('Commands/view/ExportTemplate',[],function() {
- /**
- * @class ExportTemplate
- * */
- return {
-
- run: function(em, sender){
- this.sender = sender;
- this.components = em.get('Canvas').getWrapper().get('components');
- this.modal = em.get('Modal') || null;
- this.cm = em.get('CodeManager') || null;
- this.enable();
- },
-
- /**
- * Build editor
- * @param {String} codeName
- * @param {String} theme
- * @param {String} label
- *
- * @return {Object} Editor
- * */
- buildEditor: function(codeName, theme, label)
- {
- if(!this.codeMirror)
- this.codeMirror = this.cm.getEditor('CodeMirror');
-
- var $input = $('
