diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index daea5d8e9..e176c851d 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -38,7 +38,8 @@ function(Backbone, FrameView) { var frameCss = '.' + this.ppfx + 'dashed *{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' + '.' + this.ppfx + 'comp-selected{outline: 3px solid #3b97e3 !important}' + '.' + this.ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+ - '.' + this.ppfx + 'freezed{opacity: 0.5; pointer-events: none}'; + '.' + this.ppfx + 'freezed{opacity: 0.5; pointer-events: none}' + + '.' + this.ppfx + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}'; if(protCss) body.append(''); } diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index 4a22e02f4..c5a5c6e2c 100644 --- a/src/commands/view/CommandAbstract.js +++ b/src/commands/view/CommandAbstract.js @@ -29,7 +29,6 @@ define(['backbone'], this.setElement(this.getCanvas()); this.$canvas = this.$el; - //this.$wrapper = this.$canvas.find('#'+this.wrapperId); this.$wrapper = $(this.getCanvasWrapper()); this.init(this.config); @@ -37,8 +36,6 @@ define(['backbone'], this.frameEl = this.canvas.getFrameEl(); this.canvasTool = this.getCanvasTools(); this.bodyEl = this.getCanvasBody(); - - //frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this); }, /** diff --git a/src/commands/view/CreateComponent.js b/src/commands/view/CreateComponent.js index a002be89d..fb2fa1236 100644 --- a/src/commands/view/CreateComponent.js +++ b/src/commands/view/CreateComponent.js @@ -7,6 +7,7 @@ define(['backbone','./SelectPosition'], _.bindAll(this,'startDraw','draw','endDraw','rollback'); this.config = opt || {}; this.hType = this.config.newFixedH ? 'height' : 'min-height'; + this.allowDraw = 1; }, /** @@ -16,7 +17,8 @@ define(['backbone','./SelectPosition'], enable: function() { SelectPosition.enable.apply(this, arguments); this.$wr.css('cursor','crosshair'); - this.$wr.on('mousedown', this.startDraw); + if(this.allowDraw) + this.$wr.on('mousedown', this.startDraw); this.ghost = this.canvas.getGhostEl(); }, @@ -45,7 +47,7 @@ define(['backbone','./SelectPosition'], * Enable/Disable events * @param {Boolean} enable */ - toggleEvents: function(enable){ + toggleEvents: function(enable) { var method = enable ? 'on' : 'off'; this.$wr[method]('mousemove', this.draw); this.$wr[method]('mouseup', this.endDraw); @@ -91,16 +93,19 @@ define(['backbone','./SelectPosition'], * @param {Object} component New component to create * @param {number} index Index inside the collection, 0 if no children inside * @param {string} method Before or after of the children + * @param {Object} opts Options */ - create: function(target, component, index, method) { + create: function(target, component, index, method, opts) { index = method === 'after' ? index + 1 : index; + var opt = opts || {}; var $trg = $(target); var trgModel = $trg.data('model'); var trgCollection = $trg.data('collection'); var droppable = trgModel ? trgModel.get('droppable') : 1; - if(trgCollection && droppable){ - return trgCollection.add(component, {at: index}); - }else + opt.at = index; + if(trgCollection && droppable) + return trgCollection.add(component, opt); + else console.warn("Invalid target position"); }, @@ -110,8 +115,7 @@ define(['backbone','./SelectPosition'], * @return {Object} Component updated * @private * */ - setRequirements: function(component) - { + 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'; diff --git a/src/commands/view/ImageComponent.js b/src/commands/view/ImageComponent.js index 2b83f6121..862dad5c9 100644 --- a/src/commands/view/ImageComponent.js +++ b/src/commands/view/ImageComponent.js @@ -16,33 +16,13 @@ define(['backbone', './InsertCustom'], object.type = 'image'; object.style = {}; object.attributes = {}; - if (!this.nearToFloat()) { - object.style.display = 'block'; - } - // This allow to avoid 'ghosts' on drag object.attributes.onmousedown = 'return false'; - if (this.config.firstCentered && (this.$wp.get(0) == this.posTargetEl.get(0)) ) { - object.style.margin = '0 auto'; + if (this.config.firstCentered && + (this.$wrapper.get(0) == this.sorter.target) ) { + object.style.margin = '0 auto'; } }, - /** - * Check if pointer is near to the float component - * @return {Integer} - * @private - * */ - 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; - }, - /** * Trigger after insert * @param {Object} model Model created after insert diff --git a/src/commands/view/InsertCustom.js b/src/commands/view/InsertCustom.js index 850c68b6d..8a504b8fe 100644 --- a/src/commands/view/InsertCustom.js +++ b/src/commands/view/InsertCustom.js @@ -1,27 +1,31 @@ -define(['backbone', './SelectPosition'], - function(Backbone, SelectPosition) { +define(['backbone', './CreateComponent'], + function(Backbone, CreateComponent) { /** * @class InsertCustom * @private * */ - return _.extend({}, SelectPosition, { + return _.extend({}, CreateComponent, { + + init: function(){ + CreateComponent.init.apply(this, arguments); + this.allowDraw = 0; + }, /** * Run method * @private * */ - run: function(em, sender, options){ - this.enable(); + run: function(em, sender, options) { this.em = em; this.sender = sender; this.opt = options || {}; + this.$wr = this.$wrapper; + this.enable(); }, enable: function(){ - SelectPosition.enable.apply(this, arguments); - _.bindAll(this,'insertComponent'); - this.$wp = this.$wrapper; - this.$wp.on('click', this.insertComponent); + CreateComponent.enable.apply(this, arguments); + this.$wr.on('click', this.insertComponent.bind(this)); }, /** @@ -29,13 +33,13 @@ define(['backbone', './SelectPosition'], * @private * */ insertComponent: function(){ - this.$wp.off('click', this.insertComponent); + this.$wr.off('click', this.insertComponent); this.stopSelectPosition(); - //this.removePositionPlaceholder(); - var object = this.buildContent(); + var object = this.buildContent(); this.beforeInsert(object); + var index = this.sorter.lastPos.index; // By default, collections do not trigger add event, so silent is used - var model = this.posTargetCollection.add(object, { at: this.posIndex, silent:false }); + var model = this.create(this.sorter.target, object, index, null, {silent: false}); if(this.opt.terminateAfterInsert && this.sender) this.sender.set('active',false); diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index 64a53606c..c7d6a5a72 100644 --- a/src/commands/view/MoveComponent.js +++ b/src/commands/view/MoveComponent.js @@ -6,7 +6,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], init: function(o){ SelectComponent.init.apply(this, arguments); _.bindAll(this, 'initSorter','rollback', 'onEndMove'); - this.opt = o; + this.opt = o; this.hoverClass = this.ppfx + 'highlighter-warning'; this.badgeClass = this.ppfx + 'badge-warning'; this.noSelClass = this.ppfx + 'no-select'; diff --git a/src/dom_components/view/ComponentImageView.js b/src/dom_components/view/ComponentImageView.js index d63a545d5..34d471a88 100644 --- a/src/dom_components/view/ComponentImageView.js +++ b/src/dom_components/view/ComponentImageView.js @@ -13,8 +13,7 @@ define(['backbone', './ComponentView'], ComponentView.prototype.initialize.apply(this, arguments); this.listenTo( this.model, 'change:src', this.updateSrc); this.listenTo( this.model, 'dblclick', this.openModal); - var compCls = this.config.imageCompClass || ''; - this.classEmpty = this.pfx + 'image-placeholder' + (compCls ? ' ' + compCls : ''); + this.classEmpty = this.ppfx + 'plh-image'; if(this.config.modal) this.modal = this.config.modal; diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 98d5e36ed..da7e8cad9 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -14,6 +14,7 @@ define(['backbone', './ComponentsView'], initialize: function(opt){ this.config = opt.config || {}; this.pfx = this.config.stylePrefix || ''; + this.ppfx = this.config.pStylePrefix || ''; this.components = this.model.get('components'); this.attr = this.model.get("attributes"); this.classe = this.attr.class || []; diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 379cbadd5..4cb87c7b1 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -214,7 +214,7 @@ define([ if(this.StorageManager.getConfig().autoload) comp = this.loadComponents(); - + cfg.pStylePrefix = this.config.stylePrefix; cfg.stylePrefix = this.config.stylePrefix + cmpStylePfx; if(comp) diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 32b693430..8e464918b 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -483,15 +483,15 @@ $leftWidth: 16.5%; .#{$comp-prefix}image-placeholder { display: block; - background-color: #f5f5f5; - color: $fontColorDk; - height: $imageCompDim; width: $imageCompDim; - line-height: $imageCompDim; - outline: 3px solid $colorYell; - outline-offset: -3px; - text-align: center; - font-size: $imageCompDim/3; - cursor: pointer; + background-color: #f5f5f5; + color: $fontColorDk; + height: $imageCompDim; width: $imageCompDim; + line-height: $imageCompDim; + outline: 3px solid $colorYell; + outline-offset: -3px; + text-align: center; + font-size: $imageCompDim/3; + cursor: pointer; &.fa-picture-o::after{ content: "\f03e";