Wrapping wlxmlNode

diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js
index f7d7fd0..e666f0d 100644 (file)
--- a/modules/documentCanvas/documentCanvas.js
+++ b/modules/documentCanvas/documentCanvas.js
@@ -3,7 +3,8 @@
 define([\r
 'libs/underscore-min',\r
 './transformations', \r
 define([\r
 'libs/underscore-min',\r
 './transformations', \r

-'libs/text!./template.html'], function(_, transformations, template) {\r
+'./wlxmlNode',\r
+'libs/text!./template.html'], function(_, transformations, wlxmlNode, template) {\r

 \r
 \r
 \r
 \r
 \r
 \r


@@ -22,11 +23,11 @@ return function(sandbox) {
 \r
             this.node.on('mouseover', '[wlxml-tag]', function(e) {\r
                 e.stopPropagation();\r
 \r
             this.node.on('mouseover', '[wlxml-tag]', function(e) {\r
                 e.stopPropagation();\r

-                sandbox.publish('nodeHovered', $(e.target));\r
+                sandbox.publish('nodeHovered', new wlxmlNode.Node($(e.target)));\r

             });\r
             this.node.on('mouseout', '[wlxml-tag]', function(e) {\r
                 e.stopPropagation();\r
             });\r
             this.node.on('mouseout', '[wlxml-tag]', function(e) {\r
                 e.stopPropagation();\r

-                sandbox.publish('nodeBlured', $(e.target));\r
+                sandbox.publish('nodeBlured', new wlxmlNode.Node($(e.target)));\r

             });\r
             this.node.on('click', '[wlxml-tag]', function(e) {\r
                 e.stopPropagation();\r
             });\r
             this.node.on('click', '[wlxml-tag]', function(e) {\r
                 e.stopPropagation();\r


@@ -169,10 +170,11 @@ return function(sandbox) {
             node.addClass('rng-module-documentCanvas-currentNode');\r
 \r
             this.currentNode = node;\r
             node.addClass('rng-module-documentCanvas-currentNode');\r
 \r
             this.currentNode = node;\r

-            sandbox.publish('nodeSelected', node);\r
+            sandbox.publish('nodeSelected', new wlxmlNode.Node(node));\r

             \r
         },\r
         selectNode: function(node) {\r
             \r
         },\r
         selectNode: function(node) {\r

+            node = this.getNodeElement(node);\r

             view._markSelected(node);\r
             var range = document.createRange();\r
             range.selectNodeContents(node[0]);\r
             view._markSelected(node);\r
             var range = document.createRange();\r
             range.selectNodeContents(node[0]);\r


@@ -182,12 +184,8 @@ return function(sandbox) {
             selection.removeAllRanges()\r
             selection.addRange(range);\r
         },\r
             selection.removeAllRanges()\r
             selection.addRange(range);\r
         },\r

-        selectNodeById: function(id) {\r
-            var node = this.node.find('#'+id);\r
-            if(node)\r
-                this.selectNode(node);\r
-        },\r

         highlightNode: function(node) {\r
         highlightNode: function(node) {\r

+            node = this.getNodeElement(node);\r

             if(!this.gridToggled) {\r
                 node.addClass('rng-common-hoveredNode');\r
                 var label = node.attr('wlxml-tag');\r
             if(!this.gridToggled) {\r
                 node.addClass('rng-common-hoveredNode');\r
                 var label = node.attr('wlxml-tag');\r


@@ -198,21 +196,12 @@ return function(sandbox) {
             }\r
         },\r
         dimNode: function(node) {\r
             }\r
         },\r
         dimNode: function(node) {\r

+            node = this.getNodeElement(node);\r

             if(!this.gridToggled) {\r
                 node.removeClass('rng-common-hoveredNode');\r
                 node.find('.rng-module-documentCanvas-hoveredNodeTag').remove();\r
             }\r
         },\r
             if(!this.gridToggled) {\r
                 node.removeClass('rng-common-hoveredNode');\r
                 node.find('.rng-module-documentCanvas-hoveredNodeTag').remove();\r
             }\r
         },\r

-        highlightNodeById: function(id) {\r
-            var node = this.node.find('#'+id);\r
-            if(node)\r
-                this.highlightNode(node);\r
-        },\r
-        dimNodeById: function(id) {\r
-            var node = this.node.find('#'+id);\r
-            if(node)\r
-                this.dimNode(node);\r
-        },\r

         selectFirstNode: function() {\r
             var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {\r
                 return $(this).clone().children().remove().end().text().trim() !== '';\r
         selectFirstNode: function() {\r
             var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {\r
                 return $(this).clone().children().remove().end().text().trim() !== '';\r


@@ -223,11 +212,14 @@ return function(sandbox) {
             else {\r
                 node = this.node.find('[wlxml-class|="p"]')\r
             }\r
             else {\r
                 node = this.node.find('[wlxml-class|="p"]')\r
             }\r

-            this.selectNode(node);\r
+            this.selectNode(new wlxmlNode.Node(node));\r

         },\r
         toggleGrid: function(toggle) {\r
             this.node.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);\r
             this.gridToggled = toggle;\r
         },\r
         toggleGrid: function(toggle) {\r
             this.node.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);\r
             this.gridToggled = toggle;\r

+        },\r
+        getNodeElement: function(wlxmlNode) {\r
+            return this.node.find('#'+wlxmlNode.id);\r

         }\r
     };\r
     \r
         }\r
     };\r
     \r


@@ -247,14 +239,14 @@ return function(sandbox) {
             if(view.currentNode)\r
                 view.currentNode.attr('wlxml-'+attr, value);\r
         },\r
             if(view.currentNode)\r
                 view.currentNode.attr('wlxml-'+attr, value);\r
         },\r

-        highlightNode: function(id) {\r
-            view.highlightNodeById(id);\r
+        highlightNode: function(wlxmlNode) {\r
+            view.highlightNode(wlxmlNode);\r

         },\r
         },\r

-        dimNode: function(id) {\r
-            view.dimNodeById(id);\r
+        dimNode: function(wlxmlNode) {\r
+            view.dimNode(wlxmlNode);\r

         },\r
         },\r

-        selectNode: function(id) {\r
-            view.selectNodeById(id);\r
+        selectNode: function(wlxmlNode) {\r
+            view.selectNode(wlxmlNode);\r

         },\r
         toggleGrid: function(toggle) {\r
             view.toggleGrid(toggle);\r
         },\r
         toggleGrid: function(toggle) {\r
             view.toggleGrid(toggle);\r

diff --git a/modules/documentCanvas/wlxmlNode.js b/modules/documentCanvas/wlxmlNode.js
new file mode 100644 (file)
index 0000000..f5ada52
--- /dev/null
+++ b/modules/documentCanvas/wlxmlNode.js
@@ -0,0 +1,39 @@
+define(['libs/jquery-1.9.1.min'], function($) {\r
+    \r
+'use strict';\r
+\r
+var tagSelector = '[wlxml-tag]';\r
+\r
+var Node = function(domNode) {\r
+       \r
+    return {\r
+        id: domNode.attr('id'),\r
+        tag: domNode.attr('wlxml-tag'),\r
+        klass: domNode.attr('wlxml-class'),\r
+        parent: function() {\r
+            var node = domNode.parent(tagSelector);\r
+            if(node.length)\r
+                return new Node(node);\r
+            return null;\r
+        },\r
+        children: function() {\r
+            var list = [];\r
+            domNode.children(tagSelector).each(function() {\r
+                list.push(new Node($(this)));\r
+            });\r
+            return $(list);\r
+        },\r
+        parents: function() {\r
+            var list = [];\r
+            domNode.parents(tagSelector).each(function() {\r
+                list.push(new Node($(this)));\r
+            });\r
+            return $(list);\r
+        }\r
+    }\r
+\r
+};\r
+\r
+return { Node: Node}\r
+\r
+});
\ No newline at end of file

diff --git a/modules/nodeBreadCrumbs/nodeBreadCrumbs.js b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js
index 4a787f4..cefe7b4 100644 (file)
--- a/modules/nodeBreadCrumbs/nodeBreadCrumbs.js
+++ b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js
@@ -12,31 +12,39 @@ return function(sandbox) {
     var view = {\r
         dom: $('<div>' + template({node:null, parents: null}) + '</div>'),\r
         setup: function() {\r
     var view = {\r
         dom: $('<div>' + template({node:null, parents: null}) + '</div>'),\r
         setup: function() {\r

+            var view = this;\r

             this.dom.on('mouseenter', 'a', function(e) {\r
                 var target = $(e.target);\r
             this.dom.on('mouseenter', 'a', function(e) {\r
                 var target = $(e.target);\r

-                sandbox.publish('nodeHighlighted', target.attr('data-id'));\r
+                sandbox.publish('nodeHighlighted', view.nodes[target.attr('data-id')]);\r

             });\r
             this.dom.on('mouseleave', 'a', function(e) {\r
                 var target = $(e.target);\r
             });\r
             this.dom.on('mouseleave', 'a', function(e) {\r
                 var target = $(e.target);\r

-                sandbox.publish('nodeDimmed', target.attr('data-id'));\r
+                sandbox.publish('nodeDimmed', view.nodes[target.attr('data-id')]);\r

             });\r
             this.dom.on('click', 'a', function(e) {\r
                 e.preventDefault();\r
                 var target = $(e.target);\r
             });\r
             this.dom.on('click', 'a', function(e) {\r
                 e.preventDefault();\r
                 var target = $(e.target);\r

-                sandbox.publish('nodeSelected', target.attr('data-id'));\r
+                sandbox.publish('nodeSelected', view.nodes[target.attr('data-id')]);\r

             });\r
         },\r
         \r
         setNode: function(node) {\r
             this.dom.empty();\r
             });\r
         },\r
         \r
         setNode: function(node) {\r
             this.dom.empty();\r

-            this.dom.html(template({node: node, parents: node.parents('[wlxml-tag]')}));\r
+            var nodes = this.nodes = {};\r
+            this.nodes[node.id] = node;\r
+            var parents = node.parents();\r
+            parents.each(function() {\r
+                var parent = this;\r
+                nodes[parent.id] = parent;\r
+            });\r
+            this.dom.html(template({node: node, parents: parents}));\r

         },\r
         \r
         },\r
         \r

-        highlightNode: function(id) {\r
-            this.dom.find('a[data-id="'+id+'"]').addClass('rng-common-hoveredNode');\r
+        highlightNode: function(node) {\r
+            this.dom.find('a[data-id="'+node.id+'"]').addClass('rng-common-hoveredNode');\r

         },\r
         },\r

-        dimNode: function(id) {\r
-            this.dom.find('a[data-id="' +id+'"]').removeClass('rng-common-hoveredNode');\r
+        dimNode: function(node) {\r
+            this.dom.find('a[data-id="'+node.id+'"]').removeClass('rng-common-hoveredNode');\r

         }\r
     }\r
     \r
         }\r
     }\r
     \r

diff --git a/modules/nodeBreadCrumbs/template.html b/modules/nodeBreadCrumbs/template.html
index 1662fcf..e1e9042 100644 (file)
--- a/modules/nodeBreadCrumbs/template.html
+++ b/modules/nodeBreadCrumbs/template.html
@@ -2,9 +2,9 @@
     <ul class="breadcrumb">
     <% if(node && parents) { %>
         <% for(var i = parents.length - 1; i >= 0; i--) { %>
     <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><a href="#" data-id="<%= parents[i].id %>"> <%= parents[i].tag %><% if(parents[i].klass) { %>.<%= parents[i].klass %> <% } %></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>
+            <li class="active"><span data-id="<%= node.id %>"><%= node.tag %><% if(node.klass) { %>.<%= node.klass %> <% } %></span></li>

     <% } %>
     </ul>
 </div>
\ No newline at end of file
     <% } %>
     </ul>
 </div>
\ No newline at end of file

diff --git a/modules/nodeFamilyTree/nodeFamilyTree.js b/modules/nodeFamilyTree/nodeFamilyTree.js
index e061277..3c78bd1 100644 (file)
--- a/modules/nodeFamilyTree/nodeFamilyTree.js
+++ b/modules/nodeFamilyTree/nodeFamilyTree.js
@@ -13,34 +13,49 @@ return function(sandbox) {
     var view = {\r
         dom: $('<div>' + template({children: null, parent: null}) + '</div>'),\r
         setup: function() {\r
     var view = {\r
         dom: $('<div>' + template({children: null, parent: null}) + '</div>'),\r
         setup: function() {\r

+            var view = this;\r

             this.dom.on('click', 'a', function(e) {\r
                 var target = $(e.target);\r
             this.dom.on('click', 'a', function(e) {\r
                 var target = $(e.target);\r

-                sandbox.publish('nodeSelected', target.attr('data-id'));\r
+                sandbox.publish('nodeSelected', view.nodes[target.attr('data-id')]);\r

             });\r
             \r
             this.dom.on('mouseenter', 'a', function(e) {\r
                 var target = $(e.target);\r
             });\r
             \r
             this.dom.on('mouseenter', 'a', function(e) {\r
                 var target = $(e.target);\r

-                sandbox.publish('nodeEntered', target.attr('data-id'));\r
+                sandbox.publish('nodeEntered', view.nodes[target.attr('data-id')])\r

             });\r
             this.dom.on('mouseleave', 'a', function(e) {\r
                 var target = $(e.target);\r
             });\r
             this.dom.on('mouseleave', 'a', function(e) {\r
                 var target = $(e.target);\r

-                sandbox.publish('nodeLeft', target.attr('data-id'));\r
+                sandbox.publish('nodeLeft', view.nodes[target.attr('data-id')])\r

             });\r
         },\r
         setNode: function(node) {\r
             });\r
         },\r
         setNode: function(node) {\r

-            var parentClass = node.parent().attr('wlxml-class');\r
-            var parent = node.parent('[wlxml-tag]').length ? {\r
-                repr: node.parent().attr('wlxml-tag') + (parentClass ? ' / ' + parentClass : ''),\r
-                id: node.parent().attr('id')\r
-            } : undefined;\r
+            console.log('familyTree sets node');\r
+            var nodes = this.nodes = {};\r
+            var parentNode = node.parent();\r
+            var parent = undefined;\r
+            \r
+            if(parentNode) {\r
+                parent = {\r
+                    repr: parentNode.tag + (parentNode.klass ? ' / ' + parentNode.klass : ''),\r
+                    id: parentNode.id\r
+                };\r
+                this.nodes[parentNode.id] = parentNode;\r
+            }\r
+        \r

             var children = [];\r
             var children = [];\r

-            node.children('[wlxml-tag]').each(function() {\r
-                var child = $(this);\r
-                var childClass = child.attr('wlxml-class');\r
-                children.push({repr: child.attr('wlxml-tag') + (childClass ? ' / ' + childClass : ''), id: child.attr('id')});\r
+            node.children().each(function() {\r
+                var child = this;\r
+                children.push({repr: child.tag + (child.klass ? ' / ' + child.klass : ''), id: child.id});\r
+                nodes[child.id] = child;\r

             });\r
             this.dom.empty();\r
             this.dom.append($(template({parent: parent, children: children})));\r
             });\r
             this.dom.empty();\r
             this.dom.append($(template({parent: parent, children: children})));\r

+        },\r
+        highlightNode: function(wlxmlNode) {\r
+            this.dom.find('a[data-id="'+wlxmlNode.id+'"]').addClass('rng-common-hoveredNode');\r
+        },\r
+        dimNode: function(wlxmlNode) {\r
+            this.dom.find('a[data-id="'+wlxmlNode.id+'"]').removeClass('rng-common-hoveredNode');\r

         }\r
     }\r
     \r
         }\r
     }\r
     \r


@@ -56,11 +71,11 @@ return function(sandbox) {
         getView: function() {\r
             return view.dom;\r
         },\r
         getView: function() {\r
             return view.dom;\r
         },\r

-        highlightNode: function(id) {\r
-            view.dom.find('a[data-id="'+id+'"]').addClass('rng-common-hoveredNode');\r
+        highlightNode: function(wlxmlNode) {\r
+            view.highlightNode(wlxmlNode);\r

         },\r
         },\r

-        dimNode: function(id) {\r
-            view.dom.find('a[data-id="'+id+'"]').removeClass('rng-common-hoveredNode');\r
+        dimNode: function(wlxmlNode) {\r
+            view.dimNode(wlxmlNode);\r

         }\r
     };\r
 };\r
         }\r
     };\r
 };\r

diff --git a/modules/nodePane/nodePane.js b/modules/nodePane/nodePane.js
index fc8284f..037715f 100644 (file)
--- a/modules/nodePane/nodePane.js
+++ b/modules/nodePane/nodePane.js
@@ -23,10 +23,8 @@ return function(sandbox) {
             return view;\r
         },\r
         setNode: function(node) {\r
             return view;\r
         },\r
         setNode: function(node) {\r

-            var tag = node.attr('wlxml-tag');\r
-            var klass = node.attr('wlxml-class');\r
-            view.find('.rng-module-nodePane-tagSelect').val(tag);\r
-            view.find('.rng-module-nodePane-classSelect').val(klass);\r
+            view.find('.rng-module-nodePane-tagSelect').val(node.tag);\r
+            view.find('.rng-module-nodePane-classSelect').val(node.klass);\r

         }\r
     }\r
     \r
         }\r
     }\r
     \r

diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index 308549c..5edc7ac 100644 (file)
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -13,6 +13,22 @@ return function(sandbox) {
         views.mainTabs.addTab(title, slug, view);\r
     }\r
     \r
         views.mainTabs.addTab(title, slug, view);\r
     }\r
     \r

+    var commands = {\r
+        highlightDocumentNode: function(wlxmlNode, origin) {\r
+            ['documentCanvas', 'nodeBreadCrumbs', 'nodeFamilyTree'].forEach(function(moduleName) {\r
+                if(!origin || moduleName != origin)\r
+                    sandbox.getModule(moduleName).highlightNode(wlxmlNode)\r
+            });\r
+        },\r
+        dimDocumentNode: function(wlxmlNode, origin) {\r
+            ['documentCanvas', 'nodeBreadCrumbs', 'nodeFamilyTree'].forEach(function(moduleName) {\r
+                if(!origin || moduleName != origin)\r
+                    sandbox.getModule(moduleName).dimNode(wlxmlNode)\r
+            });\r
+        }\r
+    }\r
+    \r
+\r

     var views = {\r
         mainLayout: new layout.Layout(mainLayoutTemplate),\r
         mainTabs: (new tabs.View()).render(),\r
     var views = {\r
         mainLayout: new layout.Layout(mainLayoutTemplate),\r
         mainTabs: (new tabs.View()).render(),\r


@@ -27,8 +43,6 @@ return function(sandbox) {
     sandbox.getDOM().append(views.mainLayout.getAsView());\r
     \r
     views.visualEditingSidebar.addTab({icon: 'pencil'}, 'edit', views.currentNodePaneLayout.getAsView());\r
     sandbox.getDOM().append(views.mainLayout.getAsView());\r
     \r
     views.visualEditingSidebar.addTab({icon: 'pencil'}, 'edit', views.currentNodePaneLayout.getAsView());\r

-    \r
-    \r

 \r
     \r
     /* Events handling */\r
 \r
     \r
     /* Events handling */\r


@@ -97,17 +111,12 @@ return function(sandbox) {
         \r
         },\r
         \r
         \r
         },\r
         \r

-        nodeHovered: function(node) {\r
-            sandbox.getModule('documentCanvas').highlightNode(node.attr('id'));\r
-            sandbox.getModule('nodeFamilyTree').highlightNode(node.attr('id'));\r
-            sandbox.getModule('nodeBreadCrumbs').highlightNode(node.attr('id'));\r
-            \r
+        nodeHovered: function(wlxmlNode) {\r
+            commands.highlightDocumentNode(wlxmlNode);\r

         },\r
         \r
         },\r
         \r

-        nodeBlured: function(node) {\r
-            sandbox.getModule('documentCanvas').dimNode(node.attr('id'));\r
-            sandbox.getModule('nodeFamilyTree').dimNode(node.attr('id'));\r
-            sandbox.getModule('nodeBreadCrumbs').dimNode(node.attr('id'));\r
+        nodeBlured: function(wlxmlNode) {\r
+            commands.dimDocumentNode(wlxmlNode);\r

         }\r
     };\r
 \r
         }\r
     };\r
 \r


@@ -132,14 +141,14 @@ return function(sandbox) {
         ready: function() {\r
             views.currentNodePaneLayout.appendView(sandbox.getModule('nodeFamilyTree').getView());\r
         },\r
         ready: function() {\r
             views.currentNodePaneLayout.appendView(sandbox.getModule('nodeFamilyTree').getView());\r
         },\r

-        nodeEntered: function(id) {\r
-            sandbox.getModule('documentCanvas').highlightNode(id);\r
+        nodeEntered: function(wlxmlNode) {\r
+            commands.highlightDocumentNode(wlxmlNode, 'nodeFamilyTree');\r

         },\r
         },\r

-        nodeLeft: function(id) {\r
-            sandbox.getModule('documentCanvas').dimNode(id);\r
+        nodeLeft: function(wlxmlNode) {\r
+            commands.dimDocumentNode(wlxmlNode, 'nodeFamilyTree');\r

         },\r
         },\r

-        nodeSelected: function(id) {\r
-            sandbox.getModule('documentCanvas').selectNode(id);\r
+        nodeSelected: function(wlxmlNode) {\r
+            sandbox.getModule('documentCanvas').selectNode(wlxmlNode);\r

         }\r
     };\r
     \r
         }\r
     };\r
     \r


@@ -163,14 +172,14 @@ return function(sandbox) {
         ready: function() {\r
             views.visualEditing.setView('statusBar', sandbox.getModule('nodeBreadCrumbs').getView());\r
         },\r
         ready: function() {\r
             views.visualEditing.setView('statusBar', sandbox.getModule('nodeBreadCrumbs').getView());\r
         },\r

-        nodeHighlighted: function(id) {\r
-            sandbox.getModule('documentCanvas').highlightNode(id);\r
+        nodeHighlighted: function(wlxmlNode) {\r
+            commands.highlightDocumentNode(wlxmlNode, 'nodeBreadCrumbs');\r

         },\r
         },\r

-        nodeDimmed: function(id) {\r
-            sandbox.getModule('documentCanvas').dimNode(id);\r
+        nodeDimmed: function(wlxmlNode) {\r
+            commands.dimDocumentNode(wlxmlNode, 'nodeBreadCrumbs');\r

         },\r
         },\r

-        nodeSelected: function(id) {\r
-            sandbox.getModule('documentCanvas').selectNode(id);\r
+        nodeSelected: function(wlxmlNode) {\r
+            sandbox.getModule('documentCanvas').selectNode(wlxmlNode);\r

         }        \r
     }\r
     \r
         }        \r
     }\r
     \r