editor: menu view

diff --git a/src/editor/styles/main.less b/src/editor/styles/main.less
index e1e08a3..6322459 100644 (file)
--- a/src/editor/styles/main.less
+++ b/src/editor/styles/main.less
@@ -5,6 +5,7 @@
 @import '../plugins/plugins.less';
 @import '../views/openSelect/openSelect.less';
 @import '../views/dialog/dialog.less';
+@import '../views/menu/menu.less';
 @import '../modules/rng/rng.less';
 @import '../modules/documentCanvas/documentCanvas.less';
 @import '../modules/sourceEditor/sourceEditor.less';

diff --git a/src/editor/views/menu/menu.html b/src/editor/views/menu/menu.html
new file mode 100644 (file)
index 0000000..bfb61fe
--- /dev/null
+++ b/src/editor/views/menu/menu.html
@@ -0,0 +1,7 @@
+<div class="rng-menu">
+    <div class="dropdown">
+        <ul class="dropdown-menu">
+        </ul>
+    </div>
+</div>
+

diff --git a/src/editor/views/menu/menu.js b/src/editor/views/menu/menu.js
new file mode 100644 (file)
index 0000000..dd8d01a
--- /dev/null
+++ b/src/editor/views/menu/menu.js
@@ -0,0 +1,66 @@
+define(function(require) {
+    
+'use strict';
+
+var $ = require('libs/jquery'),
+    Backbone = require('libs/backbone'),
+    template = require('libs/text!./menu.html'),
+    itemTemplate = require('libs/text!./menuitem.html');
+
+
+var Menu = function() {
+    this.dom = $(template);
+    this.actions = [];
+};
+$.extend(Menu.prototype, {
+    addAction: function(action) {
+        var item = new MenuItem(action);
+        item.on('execute', function() {
+            this.close();
+            action.execute();
+        }.bind(this));
+
+        this.actions.push(action);
+        this.dom.find('ul').append(item.dom);
+    },
+    close: function() {
+        this.dom.remove();
+    },
+    show: function() {
+        this.dom.find('.dropdown-menu').dropdown('toggle');
+    },
+    updateContextParam: function(k, v) {
+        this.actions.forEach(function(action) {
+            action.updateContextParam(k, v);
+        });
+    }
+});
+
+var MenuItem = function(action) {
+    this.action = action;
+    this.dom = $(itemTemplate);
+    
+    action.on('paramsChanged', function() {
+        this.render();
+    }.bind(this));
+
+    this.dom.on('click', function() {
+        if(this.action.getState().allowed) {
+            this.trigger('execute');
+        }
+    }.bind(this));
+
+    this.render();
+};
+$.extend(MenuItem.prototype, Backbone.Events, {
+    render: function() {
+        var state = this.action.getState();
+        this.dom.find('a').text(state.label || '?');
+        this.dom.toggleClass('disabled', !state.allowed);
+    }
+});
+
+
+return Menu;
+
+});

diff --git a/src/editor/views/menu/menu.less b/src/editor/views/menu/menu.less
new file mode 100644 (file)
index 0000000..ca9300d
--- /dev/null
+++ b/src/editor/views/menu/menu.less
@@ -0,0 +1,3 @@
+.rng-menu {
+    position: absolute;
+}
\ No newline at end of file

diff --git a/src/editor/views/menu/menuitem.html b/src/editor/views/menu/menuitem.html
new file mode 100644 (file)
index 0000000..a1085b9
--- /dev/null
+++ b/src/editor/views/menu/menuitem.html
@@ -0,0 +1 @@
+<li><a href="#"></li>
\ No newline at end of file