From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Thu, 6 Jun 2013 13:43:58 +0000 (+0200)
Subject: nodeBreadCrumbs module
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/b5a1f98a2118706355925314bfe3027ba45464e8?ds=sidebyside

nodeBreadCrumbs module
---

diff --git a/modules.js b/modules.js
index 4cd572c..1727e00 100644
--- a/modules.js
+++ b/modules.js
@@ -17,6 +17,7 @@ define(function(require) {
         nodePane: require('modules/nodePane/nodePane'),
         metadataEditor: require('modules/metadataEditor/metadataEditor'),
         nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'),
+        nodeBreadCrumbs: require('modules/nodeBreadCrumbs/nodeBreadCrumbs'),
         
     }
 });
\ No newline at end of file
diff --git a/modules/nodeBreadCrumbs/nodeBreadCrumbs.js b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js
new file mode 100644
index 0000000..99143bc
--- /dev/null
+++ b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js
@@ -0,0 +1,51 @@
+define([
+'libs/jquery-1.9.1.min',
+'libs/underscore-min',
+'libs/text!./template.html'], function($, _, templateSrc) {
+
+'use strict';
+
+return function(sandbox) {
+    
+    var template = _.template(templateSrc);
+    
+    var view = {
+        dom: $('<div>' + template({node:null, parents: null}) + '</div>'),
+        setup: function() {
+            this.dom.on('mouseenter', 'a', function(e) {
+                var target = $(e.target);
+                sandbox.publish('nodeHighlighted', target.attr('data-id'));
+            });
+            this.dom.on('mouseleave', 'a', function(e) {
+                var target = $(e.target);
+                sandbox.publish('nodeDimmed', target.attr('data-id'));
+            });
+            this.dom.on('click', 'a', function(e) {
+                e.preventDefault();
+                sandbox.publish('nodeSelected', target.attr('data-id'));
+            });
+        },
+        
+        setNode: function(node) {
+            this.dom.empty();
+            this.dom.html(template({node: node, parents: node.parents('[wlxml-tag]')}));
+        },
+        
+        highlightNode: function(id) {
+            this.dom.find('a[data-id="'+id+'"]').addClass('rng-common-hoveredNode');
+        },
+        dimNode: function(id) {
+            this.dom.find('a[data-id="' +id+'"]').removeClass('rng-common-hoveredNode');
+        }
+    }
+    
+    view.setup();
+    
+    return {
+        start: function() { sandbox.publish('ready'); },
+        getView: function() { return view.dom; },
+        setNode: function(node) { view.setNode(node); }
+    }
+}
+
+});
\ No newline at end of file
diff --git a/modules/nodeBreadCrumbs/template.html b/modules/nodeBreadCrumbs/template.html
new file mode 100644
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
--- a/modules/rng/editingLayout.less
+++ b/modules/rng/editingLayout.less
@@ -49,4 +49,9 @@
         top: 5px;
     }
 
+}
+
+.rng-module-rng2-statusBar {
+    margin: 10px 5px;
+    font-size:0.9em;
 }
\ No newline at end of file
diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index a48535c..a42632d 100644
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -54,7 +54,7 @@ return function(sandbox) {
         ready: function() {
             views.mainLayout.setView('mainView', views.mainTabs.getAsView());
             
-            _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'mainBar', 'indicator'], function(moduleName) {
+            _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator'], function(moduleName) {
                 sandbox.getModule(moduleName).start();
             });
         },
@@ -105,6 +105,7 @@ return function(sandbox) {
         nodeSelected: function(node) {
             sandbox.getModule('nodePane').setNode(node);
             sandbox.getModule('nodeFamilyTree').setNode(node);
+            sandbox.getModule('nodeBreadCrumbs').setNode(node);
         },
         
         contentChanged: function() {
@@ -166,6 +167,21 @@ return function(sandbox) {
                 sandbox.getModule('documentCanvas').wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);
             }
         }
+    };
+    
+    eventHandlers.nodeBreadCrumbs = {
+        ready: function() {
+            views.visualEditing.setView('statusBar', sandbox.getModule('nodeBreadCrumbs').getView());
+        },
+        nodeHighlighted: function(id) {
+            sandbox.getModule('documentCanvas').highlightNode(id);
+        },
+        nodeDimmed: function(id) {
+            sandbox.getModule('documentCanvas').dimNode(id);
+        },
+        nodeSelected: function(id) {
+            sandbox.getModule('documentCanvas').selectNode(id);
+        }        
     }
     
     /* api */