From 039fe23f5af741d88a2d65b741183250e0daa99f Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 5 Jul 2016 13:34:28 +0200 Subject: [PATCH] Refactor select command --- src/canvas/main.js | 3 +- src/canvas/view/CanvasView.js | 1 + src/commands/view/SelectComponent.js | 76 +++++++++++++--------------- styles/css/main.css | 4 +- styles/scss/main.scss | 2 + 5 files changed, 42 insertions(+), 44 deletions(-) diff --git a/src/canvas/main.js b/src/canvas/main.js index 1095837b9..14d0debbd 100644 --- a/src/canvas/main.js +++ b/src/canvas/main.js @@ -5,8 +5,7 @@ define(function(require) { * * @return {Object} * */ - var Canvas = function(config) - { + var Canvas = function(config) { var c = config || {}, defaults = require('./config/config'), Canvas = require('./model/Canvas'), diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 0bd021cc0..8a6958574 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -18,6 +18,7 @@ function(Backbone, FrameView) { this.badgeEl = $('
', {class: this.ppfx + 'badge'}).get(0); this.toolsEl.appendChild(this.hlEl); this.toolsEl.appendChild(this.hlSelEl); + this.toolsEl.appendChild(this.badgeEl); }, render: function() { diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 610a87892..27112a838 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -75,7 +75,7 @@ define(function() { return; comp.set('status',''); comp.destroy(); - this.removeBadge(); + this.hideBadge(); this.clean(); this.editorModel.set('selectedComponent',null); } @@ -106,8 +106,7 @@ define(function() { */ onOut: function(e) { e.stopPropagation(); - if(this.badge) - this.badge.css({ left: -10000, top:-10000 }); + this.hideBadge(); if(this.hl) this.hl.css({ left: -10000, top:-10000 }); }, @@ -182,43 +181,56 @@ define(function() { * @private * */ updateBadge: function(el) { - console.log('Hover'); var $el = $(el); this.cacheEl = $el; var model = $el.data("model"); if(!model || !model.get('badgable')) return; - if(!this.badge) - this.createBadge(); - this.updateBadgeLabel(model); - var elPos = this.getElementPos($el); - this.badge.css({ left: elPos.left, top: elPos.top }); + var badge = this.getBadge(); + badge.innerHTML = model.getName(); + var bStyle = badge.style; + var u = 'px'; + bStyle.display = 'block'; + var elP = this.getElementPos($el, badge); + bStyle.left = elP.left + u; + bStyle.top = elP.top + u; + }, + + /** + * Returns badge element + * @return {HTMLElement} + * @private + */ + getBadge: function(){ + return this.canvas.getBadgeEl(); }, /** * On frame scroll callback - * @param {[type]} e [description] - * @return {[type]} [description] + * @private */ onFrameScroll: function(e){ this.canvasTool.style.top = '-' + this.bodyEl.scrollTop + 'px'; - var elPos = this.getElementPos(this.cacheEl); - this.badge.css({ left: elPos.left, top: elPos.top }); + if(this.cacheEl){ + this.updateBadge(this.cacheEl); + } }, /** * Returns element's data info * @param {HTMLElement} el * @return {Object} + * @private */ - getElementPos: function(el){ + getElementPos: function(el, badge){ if(!this.frameOff) 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 bodyEl = this.getCanvasBody(); - var badgeH = this.badge.outerHeight(); + 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 topScroll = this.frameOff.top + bodyEl.scrollTop; @@ -227,36 +239,18 @@ define(function() { top = topScroll; else top -= badgeH; - return {topP: topP, top: top, left: left, height: el.height(), width: el.width() }; - }, - - /** - * Create badge for the component - * @private - * */ - createBadge: function () { - this.badge = $('
', {class: this.badgeClass + " no-dots"}).appendTo(this.getCanvasTools()); - }, - - /** - * Remove badge - * @private - * */ - removeBadge: function () { - if(this.badge){ - this.badge.remove(); - delete this.badge; - } + return {topP: topP, top: top, left: left, height: el.outerHeight(), width: el.outerWidth() }; }, /** - * Updates badge label - * @param {Object} Model + * Hide badge * @private * */ - updateBadgeLabel: function (model) { - if(model) - this.badge.html(model.getName()); + hideBadge: function () { + //var st = this.getBadge().style; + //st.left = -10000; + //st.top = -10000; + this.getBadge().style.display = 'none'; }, /** @@ -289,7 +283,7 @@ define(function() { if(sel) this.cleanPrevious(sel); this.$el.unbind(); //removes all attached events - this.removeBadge(); + this.hideBadge(); this.clean(); this.selEl.unbind('mouseover').unbind('mouseout').unbind('click'); this.editorModel.set('selectedComponent',null); diff --git a/styles/css/main.css b/styles/css/main.css index a959b6717..42b040dc5 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2750,7 +2750,9 @@ ol.example li.placeholder:before { padding: 2px 5px; position: absolute; z-index: 1; - font-size: 12px; } + font-size: 12px; + outline: none; + display: none; } .wte-com-badge-red { background-color: #DD3636; } diff --git a/styles/scss/main.scss b/styles/scss/main.scss index ab7aa0ec6..a4b04a06c 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -228,6 +228,8 @@ ol.example li.placeholder:before {position: absolute;} padding: 2px 5px; position: absolute; z-index: 1; font-size: 12px; + outline: none; + display: none; } .#{$com-prefix}badge-red{ @extend .#{$com-prefix}badge;