nodeBreadCrumbs module

diff --git a/modules.js b/modules.js
index 4cd572c..1727e00 100644 (file)
--- a/modules.js
+++ b/modules.js
@@ -17,6 +17,7 @@ define(function(require) {
         nodePane: require('modules/nodePane/nodePane'),\r
         metadataEditor: require('modules/metadataEditor/metadataEditor'),\r
         nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'),\r
+        nodeBreadCrumbs: require('modules/nodeBreadCrumbs/nodeBreadCrumbs'),\r
         \r
     }\r
 });
\ No newline at end of file

diff --git a/modules/nodeBreadCrumbs/nodeBreadCrumbs.js b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js
new file mode 100644 (file)
index 0000000..99143bc
--- /dev/null
+++ b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js
@@ -0,0 +1,51 @@
+define([\r
+'libs/jquery-1.9.1.min',\r
+'libs/underscore-min',\r
+'libs/text!./template.html'], function($, _, templateSrc) {\r
+\r
+'use strict';\r
+\r
+return function(sandbox) {\r
+    \r
+    var template = _.template(templateSrc);\r
+    \r
+    var view = {\r
+        dom: $('<div>' + template({node:null, parents: null}) + '</div>'),\r
+        setup: function() {\r
+            this.dom.on('mouseenter', 'a', function(e) {\r
+                var target = $(e.target);\r
+                sandbox.publish('nodeHighlighted', target.attr('data-id'));\r
+            });\r
+            this.dom.on('mouseleave', 'a', function(e) {\r
+                var target = $(e.target);\r
+                sandbox.publish('nodeDimmed', target.attr('data-id'));\r
+            });\r
+            this.dom.on('click', 'a', function(e) {\r
+                e.preventDefault();\r
+                sandbox.publish('nodeSelected', target.attr('data-id'));\r
+            });\r
+        },\r
+        \r
+        setNode: function(node) {\r
+            this.dom.empty();\r
+            this.dom.html(template({node: node, parents: node.parents('[wlxml-tag]')}));\r
+        },\r
+        \r
+        highlightNode: function(id) {\r
+            this.dom.find('a[data-id="'+id+'"]').addClass('rng-common-hoveredNode');\r
+        },\r
+        dimNode: function(id) {\r
+            this.dom.find('a[data-id="' +id+'"]').removeClass('rng-common-hoveredNode');\r
+        }\r
+    }\r
+    \r
+    view.setup();\r
+    \r
+    return {\r
+        start: function() { sandbox.publish('ready'); },\r
+        getView: function() { return view.dom; },\r
+        setNode: function(node) { view.setNode(node); }\r
+    }\r
+}\r
+\r
+});
\ No newline at end of file

diff --git a/modules/nodeBreadCrumbs/template.html b/modules/nodeBreadCrumbs/template.html
new file mode 100644 (file)
index 0000000..1662fcf
--- /dev/null
+++ b/modules/nodeBreadCrumbs/template.html
@@ -0,0 +1,10 @@
+<div class="rng-module-nodeBreadCrumbs">
+    <ul class="breadcrumb">
+    <% if(node && parents) { %>
+        <% for(var i = parents.length - 1; i >= 0; i--) { %>
+            <li><a href="#" data-id="<%= parents[i].getAttribute('id') %>"> <%= parents[i].getAttribute('wlxml-tag') %><% if(parents[i].getAttribute('wlxml-class')) { %>.<%= parents[i].getAttribute('wlxml-class') %> <% } %></a><span class="divider">/</span></li>
+        <% } %>
+            <li class="active"><span data-id="<%= node.attr('id') %>"><%= node.attr('wlxml-tag') %><% if(node.attr('wlxml-class')) { %>.<%= node.attr('wlxml-class') %> <% } %></span></li>
+    <% } %>
+    </ul>
+</div>
\ No newline at end of file

diff --git a/modules/rng/editingLayout.less b/modules/rng/editingLayout.less
index 219497c..9f583c5 100644 (file)
--- a/modules/rng/editingLayout.less
+++ b/modules/rng/editingLayout.less
@@ -49,4 +49,9 @@
         top: 5px;\r
     }\r
 \r
+}\r
+\r
+.rng-module-rng2-statusBar {\r
+    margin: 10px 5px;\r
+    font-size:0.9em;\r
 }
\ No newline at end of file

diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index a48535c..a42632d 100644 (file)
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -54,7 +54,7 @@ return function(sandbox) {
         ready: function() {\r
             views.mainLayout.setView('mainView', views.mainTabs.getAsView());\r
             \r
-            _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'mainBar', 'indicator'], function(moduleName) {\r
+            _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator'], function(moduleName) {\r
                 sandbox.getModule(moduleName).start();\r
             });\r
         },\r
@@ -105,6 +105,7 @@ return function(sandbox) {
         nodeSelected: function(node) {\r
             sandbox.getModule('nodePane').setNode(node);\r
             sandbox.getModule('nodeFamilyTree').setNode(node);\r
+            sandbox.getModule('nodeBreadCrumbs').setNode(node);\r
         },\r
         \r
         contentChanged: function() {\r
@@ -166,6 +167,21 @@ return function(sandbox) {
                 sandbox.getModule('documentCanvas').wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);\r
             }\r
         }\r
+    };\r
+    \r
+    eventHandlers.nodeBreadCrumbs = {\r
+        ready: function() {\r
+            views.visualEditing.setView('statusBar', sandbox.getModule('nodeBreadCrumbs').getView());\r
+        },\r
+        nodeHighlighted: function(id) {\r
+            sandbox.getModule('documentCanvas').highlightNode(id);\r
+        },\r
+        nodeDimmed: function(id) {\r
+            sandbox.getModule('documentCanvas').dimNode(id);\r
+        },\r
+        nodeSelected: function(id) {\r
+            sandbox.getModule('documentCanvas').selectNode(id);\r
+        }        \r
     }\r
     \r
     /* api */\r