Add Toolbar Model and View

src/commands/view/MoveComponent.js

@@ -51,6 +51,29 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 				this.getContentWindow().on('keydown', this.rollback);
 			},
 
+			/**
+			 * Init sorter from model
+			 * @param  {Object} model
+			 * @private
+			 */
+			initSorterFromModel: function(model) {
+				var drag = model.get('draggable');
+				if(!drag)
+					return;
+				// Avoid badge showing on move
+				this.cacheEl = null;
+				var el = model.get('view').el;
+				this.startSelectPosition(el, this.frameEl.contentDocument);
+				this.sorter.draggable = drag;
+				this.sorter.onEndMove = this.onEndMoveFromModel.bind(this);
+				this.stopSelectComponent();
+				this.getContentWindow().on('keydown', this.rollback);
+			},
+
+			onEndMoveFromModel: function() {
+				this.getContentWindow().off('keydown', this.rollback);
+			},
+
 			/**
 			 * Callback after sorting
 			 * @private

src/commands/view/SelectComponent.js

@@ -1,8 +1,11 @@
-define(function() {
+define(function(require) {
 		/**
 		 * @class SelectComponent
 		 * @private
 		 * */
+		 var ToolbarView = require('DomComponents/view/ToolbarView');
+		 var Toolbar = require('DomComponents/model/Toolbar');
+
 		return {
 
 			init: function(o){
@@ -16,6 +19,7 @@ define(function() {
 				var config	= this.config.em.get('Config');
 				this.startSelectComponent();
 				this.toggleClipboard(config.copyPaste);
+				this.config.em.on('change:canvasOffset', this.onFrameScroll);
 			},
 
 			/**
@@ -253,15 +257,20 @@ define(function() {
 				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 += '<div class="' + ppfx + 'toolbar-item ' + addClass + '" onClick="alert(\'TODO\')"></div>';
-					});
+
+					if(!this.toolbar) {
+						var toolbarEl = this.canvas.getToolbarEl();
+						toolbarEl.innerHTML = '';
+						this.toolbar = new Toolbar(toolbar);
+						var toolbarView = new ToolbarView({
+							collection: this.toolbar,
+							editor: this.editor
+						});
+						toolbarEl.appendChild(toolbarView.render().el);
+					}
+
+					this.toolbar.reset(toolbar);
 
 					var view = model.get('view');
 					if(view) {
@@ -281,6 +290,7 @@ define(function() {
 				var pos = elPos || this.getElementPos(el);
 				var toolbarStyle = toolbarEl.style;
 				var unit = 'px';
+				toolbarStyle.display = 'flex';
 				var elTop = pos.top - toolbarEl.offsetHeight;
 				var elLeft = pos.left + pos.width - toolbarEl.offsetWidth;
 				var leftPos = elLeft < canvasPos.left ? canvasPos.left : elLeft;
@@ -290,8 +300,6 @@ define(function() {
 				var topPos = elTop < canvasPos.top ? canvasPos.top : elTop;
 				// This will stop the toolbar when the end of the element is reached
 				topPos = topPos > (pos.top + pos.height) ? (pos.top + pos.height) : topPos;
-
-				toolbarStyle.display = 'flex';
 				toolbarStyle.left = elLeft + unit;
 				toolbarStyle.top = topPos + unit;
 			},
@@ -381,7 +389,9 @@ define(function() {
 				return this.contWindow;
 			},
 
-			run: function(em, sender) {
+			run: function(em) {
+				if(em && em.get)
+					this.editor = em.get('Editor');
 				this.enable();
 			},
 
@@ -393,6 +403,7 @@ define(function() {
 				this.toggleClipboard();
 				this.hideBadge();
 				this.canvas.getToolbarEl().style.display = 'none';
+				this.config.em.off('change:canvasOffset', this.onFrameScroll);
 			}
 		};
 });

src/demo.js

@@ -329,5 +329,40 @@ require(['config/require-config'], function() {
 
     window.editor = editor;
 
+		/*
+		// Test toolbar commands
+		var cmd = editor.Commands;
+		cmd.add('tlb-delete', {
+			run: function(ed){
+				var sel = ed.getSelected();
+				if(!sel)
+					return;
+				sel.destroy();
+				ed.Canvas.getToolbarEl().style.display = 'none';
+			},
+		});
+
+		cmd.add('tlb-clone', {
+			run: function(ed){
+				var sel = ed.getSelected();
+				var collection = sel.collection;
+				var index = collection.indexOf(sel);
+				collection.add(sel.clone(), {at: index + 1});
+			},
+		});
+
+		cmd.add('tlb-move', {
+			run: function(ed){
+				var sel = ed.getSelected();
+				ed.editor.stopDefault();
+				var cmdMove = cmd.get('move-comp');
+				cmdMove.onEndMoveFromModel = function() {
+					ed.editor.runDefault();
+				};
+				cmdMove.initSorterFromModel(sel);
+				ed.Canvas.getToolbarEl().style.display = 'none';
+			},
+		});
+		*/
 	});
 });

src/dom_components/model/Component.js

@@ -42,13 +42,13 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				classes: '',
 				traits: ['id', 'title'],
 				toolbar: [{
-					className: 'fa fa-arrows',
+					attributes: {class: 'fa fa-arrows'},
 					command: 'tlb-move',
 				},{
-					className: 'fa fa-clone',
+					attributes: {class: 'fa fa-clone'},
 					command: 'tlb-clone',
 				},{
-					className: 'fa fa-trash-o',
+					attributes: {class: 'fa fa-trash-o'},
 					command: 'tlb-delete',
 				}],
 			},

src/dom_components/model/ComponentImage.js

@@ -11,16 +11,16 @@ define(['./Component'],
 				droppable: false,
 				traits: ['alt'],
 				toolbar: [{
-					className: 'fa fa-arrows',
+					attributes: {class: 'fa fa-arrows'},
 					command: 'tlb-move',
 				},{
-					className: 'fa fa-clone',
+					attributes: {class: 'fa fa-clone'},
 					command: 'tlb-clone',
 				},{
-					className: 'fa fa-pencil',
+					attributes: {class: 'fa fa-pencil'},
 					command: 'tlb-edit',
 				},{
-					className: 'fa fa-trash-o',
+					attributes: {class: 'fa fa-trash-o'},
 					command: 'tlb-delete',
 				}],
 			}),

src/dom_components/model/Toolbar.js

@@ -0,0 +1,6 @@
+define(['backbone','./ToolbarButton'],
+  function (Backbone, ToolbarButton) {
+
+    return Backbone.Collection.extend({model: ToolbarButton});
+
+});

src/dom_components/model/ToolbarButton.js

@@ -0,0 +1,13 @@
+define(['backbone'],
+  function(Backbone) {
+
+    return Backbone.Model.extend({
+
+      defaults: {
+	       command: '',
+         attributes: {},
+      },
+
+
+    });
+  });

src/dom_components/view/ToolbarButtonView.js

@@ -0,0 +1,37 @@
+define(['backbone'],
+	function (Backbone) {
+
+		return Backbone.View.extend({
+
+      events: {
+        'mousedown': 'handleClick',
+      },
+
+      attributes: function () {
+        return this.model.get('attributes');
+      },
+
+      initialize: function(opts) {
+        this.editor = opts.config.editor;
+			},
+
+      handleClick: function() {
+        var command = this.model.get('command');
+
+        if (typeof command === 'function') {
+          command(this.editor);
+        }
+
+        if (typeof command === 'string') {
+          this.editor.runCommand(command);
+        }
+      },
+
+      render: function () {
+        var config = this.editor.getConfig();
+        this.el.className += ' ' + config.stylePrefix + 'toolbar-item';
+        return this;
+      },
+
+		});
+});

src/dom_components/view/ToolbarView.js

@@ -0,0 +1,15 @@
+define(['backbone', 'Abstract/view/DomainViews', './ToolbarButtonView'],
+	function (Backbone, DomainViews, ToolbarButtonView) {
+
+		return DomainViews.extend({
+
+			itemView: ToolbarButtonView,
+
+			initialize: function(opts) {
+				this.config = {editor: opts.editor || ''};
+				this.listenTo(this.collection, 'reset', this.render);
+			},
+
+		});
+
+});