', {class: ppfx + 'toolbar'}).get(0);
+ this.placerEl.appendChild(this.placerIntEl);
+ this.toolsEl.appendChild(this.hlEl);
+ this.toolsEl.appendChild(this.badgeEl);
+ this.toolsEl.appendChild(this.placerEl);
+ this.toolsEl.appendChild(this.ghostEl);
+ this.toolsEl.appendChild(this.toolbarEl);
this.$el.append(this.toolsEl);
var rte = this.em.get('rte');
diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js
index 32b482161..d44d10899 100644
--- a/src/commands/view/MoveComponent.js
+++ b/src/commands/view/MoveComponent.js
@@ -12,7 +12,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
this.noSelClass = this.ppfx + 'no-select';
},
- enable: function(){
+ enable: function() {
SelectComponent.enable.apply(this, arguments);
this.getBadgeEl().addClass(this.badgeClass);
this.getHighlighterEl().addClass(this.hoverClass);
@@ -40,6 +40,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
var drag = el.get('draggable');
if(!drag)
return;
+
// Avoid badge showing on move
this.cacheEl = null;
this.startSelectPosition(e.target, this.frameEl.contentDocument);
diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 17be8dda2..f1c9ba03b 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -232,7 +232,7 @@ define(function() {
m.set('open', 0);
}
var parent = nMd.collection ? nMd.collection.parent : null;
- while(parent){
+ while(parent) {
parent.set('open', 1);
opened[parent.cid] = parent;
parent = parent.collection ? parent.collection.parent : null;
@@ -240,9 +240,54 @@ define(function() {
this.editorModel.set('selectedComponent', nMd);
nMd.set('status','selected');
+ this.updateToolbar(nMd);
}
},
+ /**
+ * Update toolbar if the component has one
+ * @param {Object} model
+ */
+ updateToolbar: function(model) {
+ var toolbar = model.get('toolbar');
+ var ppfx = this.ppfx;
+ var showToolbar = this.config.em.get('Config').showToolbar;
+
+ // TODO to refactor
+ if (showToolbar && toolbar && toolbar.length) {
+ var toolbarEl = this.canvas.getToolbarEl();
+ toolbarEl.innerHTML = '';
+ toolbar.forEach(function (item) {
+ var className = ppfx + 'toolbar-item';
+ var addClass = item.className || '';
+ toolbarEl.innerHTML += '
';
+ });
+
+ var view = model.get('view');
+ if(view) {
+ var canvasPos = this.getCanvasPosition();
+ var pos = this.getElementPos(view.el);
+ var toolbarStyle = toolbarEl.style;
+ var unit = 'px';
+ // TODO Fix toolbar over the canvas (the problem is with the fisrt top el)
+ var topPos = (pos.top - toolbarEl.offsetHeight) < canvasPos.top ?
+ canvasPos.top : pos.top - toolbarEl.offsetHeight;
+ //var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left;
+ toolbarStyle.display = 'flex';
+ toolbarStyle.left = (pos.left + pos.width - toolbarEl.offsetWidth) + unit; //
+ toolbarStyle.top = (pos.top - toolbarEl.offsetHeight) + unit;
+ }
+ }
+ },
+
+ /**
+ * Return canvas dimensions and positions
+ * @return {Object}
+ */
+ getCanvasPosition: function () {
+ return this.canvas.getCanvasView().getPosition();
+ },
+
/**
* Removes all highlighting effects on components
* @private
@@ -323,6 +368,7 @@ define(function() {
this.em.set('selectedComponent', null);
this.toggleClipboard();
this.hideBadge();
+ this.canvas.getToolbarEl().style.display = 'none';
}
};
});
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index c61b3ab18..54de29dad 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -41,6 +41,16 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
attributes: {},
classes: '',
traits: ['id', 'title'],
+ toolbar: [{
+ className: 'fa fa-arrows',
+ command: 'tlb-move',
+ },{
+ className: 'fa fa-clone',
+ command: 'tlb-clone',
+ },{
+ className: 'fa fa-trash-o',
+ command: 'tlb-delete',
+ }],
},
initialize: function(o, opt) {
@@ -132,6 +142,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
});
}
attr.status = '';
+ attr.view = '';
return new this.constructor(attr, {sm: this.sm});
},
diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
index faac603e5..d1a3da9c0 100644
--- a/src/dom_components/view/ComponentView.js
+++ b/src/dom_components/view/ComponentView.js
@@ -25,7 +25,8 @@ define(['backbone', './ComponentsView'],
this.listenTo(this.model, 'change:status', this.updateStatus);
this.listenTo(this.model, 'change:state', this.updateState);
this.listenTo(this.model.get('classes'), 'add remove change', this.updateClasses);
- this.$el.data("model", this.model);
+ this.$el.data('model', this.model);
+ this.model.set('view', this);
this.$el.data("collection", this.components);
if(this.model.get('classes').length)
diff --git a/src/editor/config/config.js b/src/editor/config/config.js
index 2d0487aa9..919ae131d 100644
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@@ -26,6 +26,9 @@ define(function () {
// Default command
defaultCommand: 'select-comp',
+ // Show a toolbar when the component is selected
+ showToolbar: 1,
+
// If true render a select of available devices
showDevices: 1,
diff --git a/styles/css/main.css b/styles/css/main.css
index f1356d75a..76c069b5e 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2801,6 +2801,16 @@ div.gjs-select {
.gjs-frame {
transition: width 0.35s ease; }
+.gjs-toolbar {
+ position: absolute;
+ background-color: #3b97e3;
+ color: white; }
+
+.gjs-toolbar-item {
+ padding: 5px 7px;
+ font-size: 0.8rem;
+ cursor: pointer; }
+
.btn-cl, .gjs-mdl-dialog .gjs-mdl-btn-close, .gjs-am-assets-cont #gjs-am-close {
font-size: 25px;
opacity: 0.3;
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index c9aad5339..f6144a539 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -330,6 +330,18 @@ div.#{$app-prefix}select {
transition: width 0.35s ease;
}
+.#{$app-prefix}toolbar {
+ position: absolute;
+ background-color: $colorBlue;
+ color: white;
+}
+
+.#{$app-prefix}toolbar-item {
+ padding: 5px 7px;
+ font-size: 0.8rem;
+ cursor: pointer;
+}
+
.btn-cl {
font-size: 25px;
@include opacity(0.3);