integration wip: listens for text changes in node family tree

diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js
index ed24cee..a4785ad 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/canvas.js
+++ b/src/editor/modules/documentCanvas/canvas/canvas.js
@@ -267,7 +267,7 @@ $.extend(Canvas.prototype, {
             if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element))
                 this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element?
             if(!(textElementToLand.sameNode(currentTextElement)))
             if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element))
                 this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element?
             if(!(textElementToLand.sameNode(currentTextElement)))

-                this.publisher('currentTextElementSet', textElementToLand);
+                this.publisher('currentTextElementSet', textElementToLand.data('wlxmlNode'));

         } else {
             document.getSelection().removeAllRanges();
         }
         } else {
             document.getSelection().removeAllRanges();
         }

diff --git a/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js b/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
index 45f47c0..fde220b 100644 (file)
--- a/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
+++ b/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
@@ -9,10 +9,20 @@ define([
 
 return function(sandbox) {
     
 
 return function(sandbox) {
     

-    var template = _.template(templateSrc);
+    var template = _.template(templateSrc),
+        listens = false;

     
     

+    var startListening = function(document) {
+        listens = true;
+        document.on('change', function(event) {
+            if(event.type === 'nodeTextChange' && event.meta.node.parent().sameNode(view.currentNodeElement)) {
+                view.setElement();
+            }
+        }, this);
+    }
+

     var view = {
     var view = {

-        dom: $('<div>' + template({children: null, parent: null}) + '</div>'),
+        dom: $('<div>' + template({contents: null, parent: null}) + '</div>'),

         setup: function() {
             var view = this;
             this.dom.on('click', 'a', function(e) {
         setup: function() {
             var view = this;
             this.dom.on('click', 'a', function(e) {


@@ -30,6 +40,7 @@ return function(sandbox) {
             });
         },
         setElement: function(element) {
             });
         },
         setElement: function(element) {

+            element = element || this.currentNodeElement;

             console.log('familyTree sets node');
             var textElement = element.getText ? element : null,
                 nodeElement = element.getText ? element.parent() : element, // TODO: better type detection
             console.log('familyTree sets node');
             var textElement = element.getText ? element : null,
                 nodeElement = element.getText ? element.parent() : element, // TODO: better type detection


@@ -40,13 +51,13 @@ return function(sandbox) {
 
             if(nodeElementParent) {
                 parent = {
 
             if(nodeElementParent) {
                 parent = {

-                    repr: wlxmlUtils.wlxmlTagNames[nodeElementParent.getWlxmlTag()] + (nodeElementParent.getWlxmlClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[nodeElementParent.getWlxmlClass()] : '')
+                    repr: wlxmlUtils.wlxmlTagNames[nodeElementParent.getTagName()] + (nodeElementParent.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[nodeElementParent.getClass()] : '')

                 };
             }
         
                 };
             }
         

-            var nodeChildren = nodeElement.children(),
-                children = [];
-            nodeChildren.forEach(function(child) {
+            var nodeContents = nodeElement.contents(),
+                contents = [];
+            nodeContents.forEach(function(child) {

                 if(child.getText) {
                     var text = child.getText();
                     if(!text)
                 if(child.getText) {
                     var text = child.getText();
                     if(!text)


@@ -57,19 +68,19 @@ return function(sandbox) {
                         }
                         text = '"' + text + '"';
                     }
                         }
                         text = '"' + text + '"';
                     }

-                    children.push({repr: _.escape(text), bold: child.sameNode(textElement)});
+                    contents.push({repr: _.escape(text), bold: child.sameNode(textElement)});

                 } else {
                 } else {

-                    children.push({repr: wlxmlUtils.wlxmlTagNames[child.getWlxmlTag()] + (child.getWlxmlClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[child.getWlxmlClass()] : '')});
+                    contents.push({repr: wlxmlUtils.wlxmlTagNames[child.getTagName()] + (child.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[child.getClass()] : '')});

                 }
             });
             this.dom.empty();
                 }
             });
             this.dom.empty();

-            this.dom.append($(template({parent: parent, children: children})));
+            this.dom.append($(template({parent: parent, contents: contents})));

 
             if(parent) {
                 this.dom.find('.rng-module-nodeFamilyTree-parent').data('element', nodeElementParent)
             }
             this.dom.find('li a').each(function(idx, a) {
 
             if(parent) {
                 this.dom.find('.rng-module-nodeFamilyTree-parent').data('element', nodeElementParent)
             }
             this.dom.find('li a').each(function(idx, a) {

-                $(a).data('element', nodeChildren[idx]);
+                $(a).data('element', nodeContents[idx]);

             });
         },
         highlightNode: function(canvasNode) {
             });
         },
         highlightNode: function(canvasNode) {


@@ -87,6 +98,9 @@ return function(sandbox) {
             sandbox.publish('ready');
         },
         setElement: function(element) {
             sandbox.publish('ready');
         },
         setElement: function(element) {

+            if(!listens) {
+                startListening(element.document);
+            }

             if(!(element.sameNode(view.currentNodeElement)))
                 view.setElement(element);
         },
             if(!(element.sameNode(view.currentNodeElement)))
                 view.setElement(element);
         },

diff --git a/src/editor/modules/nodeFamilyTree/template.html b/src/editor/modules/nodeFamilyTree/template.html
index 9bccfc3..886df06 100644 (file)
--- a/src/editor/modules/nodeFamilyTree/template.html
+++ b/src/editor/modules/nodeFamilyTree/template.html
@@ -8,9 +8,9 @@
             <td rowspan="0">poniżej</td>
             <td>
                 <ul>
             <td rowspan="0">poniżej</td>
             <td>
                 <ul>

-                <% if(!children || children.length === 0) { %>-<% } else { %>
-                    <% children.forEach(function(child) { %>
-                        <li><% if(child.bold) { %><strong><% } %><a href="#"><%= child.repr %></a><% if(child.bold) { %></strong><% } %></li>
+                <% if(!contents || contents.length === 0) { %>-<% } else { %>
+                    <% contents.forEach(function(element) { %>
+                        <li><% if(element.bold) { %><strong><% } %><a href="#"><%= element.repr %></a><% if(element.bold) { %></strong><% } %></li>

                     <% }); %>
                 <% } %>
                 </ul>
                     <% }); %>
                 <% } %>
                 </ul>

diff --git a/src/editor/modules/rng/rng.js b/src/editor/modules/rng/rng.js
index a25136a..614fc76 100644 (file)
--- a/src/editor/modules/rng/rng.js
+++ b/src/editor/modules/rng/rng.js
@@ -35,7 +35,7 @@ return function(sandbox) {
         },
         updateCurrentNodeElement: function(nodeElement) {
             sandbox.getModule('nodePane').setNodeElement(nodeElement);
         },
         updateCurrentNodeElement: function(nodeElement) {
             sandbox.getModule('nodePane').setNodeElement(nodeElement);

-            //sandbox.getModule('nodeFamilyTree').setElement(nodeElement);
+            sandbox.getModule('nodeFamilyTree').setElement(nodeElement);

             //sandbox.getModule('nodeBreadCrumbs').setNodeElement(nodeElement);
         },
         updateCurrentTextElement: function(textElement) {
             //sandbox.getModule('nodeBreadCrumbs').setNodeElement(nodeElement);
         },
         updateCurrentTextElement: function(textElement) {