From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Wed, 20 Nov 2013 11:57:40 +0000 (+0100)
Subject: integration wip: highlight/dim/select node via breadcrumbs
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/b2afd91d9ec91ebcf2779b6cbd36f62eba871d69
integration wip: highlight/dim/select node via breadcrumbs
+ syncing with family tree
---
diff --git a/src/editor/modules/nodeBreadCrumbs/template.html b/src/editor/modules/nodeBreadCrumbs/template.html
index afe44de..781ef5c 100644
--- a/src/editor/modules/nodeBreadCrumbs/template.html
+++ b/src/editor/modules/nodeBreadCrumbs/template.html
@@ -2,9 +2,9 @@
<ul class="breadcrumb">
<% if(node && parents) { %>
<% for(var i = parents.length - 1; i >= 0; i--) { %>
- <li><a href="#"> <%= tagNames[parents[i].getWlxmlTag()] %><% if(parents[i].getWlxmlClass()) { %>.<%= classNames[parents[i].getWlxmlClass()] %> <% } %></a><span class="divider">/</span></li>
+ <li><a href="#"> <%= tagNames[parents[i].getTagName()] %><% if(parents[i].getClass()) { %>.<%= classNames[parents[i].getClass()] %> <% } %></a><span class="divider">/</span></li>
<% } %>
- <li class="active"><%= tagNames[node.getWlxmlTag()] %><% if(node.getWlxmlClass()) { %>.<%= classNames[node.getWlxmlClass()] %> <% } %></span></li>
+ <li class="active"><%= tagNames[node.getTagName()] %><% if(node.getClass()) { %>.<%= classNames[node.getClass()] %> <% } %></span></li>
<% } %>
</ul>
</div>
\ No newline at end of file
diff --git a/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js b/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
index 610901a..cb7b57a 100644
--- a/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
+++ b/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
@@ -10,7 +10,20 @@ define([
return function(sandbox) {
var template = _.template(templateSrc),
- listens = false;
+ listens = false,
+ items = [];
+
+ var getItemId = function(item) {
+ var idx = -1;
+ var found = _.find(items, function(i) {
+ idx += 1;
+ return item.sameNode(i);
+ });
+ if(found) {
+ return idx;
+ }
+ return -1;
+ }
var startListening = function(document) {
listens = true;
@@ -48,11 +61,15 @@ return function(sandbox) {
parent;
this.currentNodeElement = nodeElement;
+ items = [];
if(nodeElementParent) {
+ items.push(nodeElementParent);
parent = {
+ id: items.length - 1,
repr: wlxmlUtils.wlxmlTagNames[nodeElementParent.getTagName()] + (nodeElementParent.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[nodeElementParent.getClass()] : '')
};
+
}
var nodeContents = nodeElement.contents(),
@@ -68,10 +85,17 @@ return function(sandbox) {
}
text = '"' + text + '"';
}
- contents.push({repr: _.escape(text), bold: child.sameNode(textElement)});
+ contents.push({
+ id: items.length,
+ repr: _.escape(text), bold: child.sameNode(textElement)
+ });
} else {
- contents.push({repr: wlxmlUtils.wlxmlTagNames[child.getTagName()] + (child.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[child.getClass()] : '')});
+ contents.push({
+ id: items.length,
+ repr: wlxmlUtils.wlxmlTagNames[child.getTagName()] + (child.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[child.getClass()] : '')
+ });
}
+ items.push(child);
});
this.dom.empty();
this.dom.append($(template({parent: parent, contents: contents})));
@@ -84,10 +108,12 @@ return function(sandbox) {
});
},
highlightNode: function(canvasNode) {
- this.dom.find('a[data-id="'+canvasNode.getId()+'"]').addClass('rng-common-hoveredNode');
+ var id = getItemId(canvasNode);
+ this.dom.find('a[rng-module-nodeFamilyTree-item-id="'+id+'"]').addClass('rng-common-hoveredNode');
},
dimNode: function(canvasNode) {
- this.dom.find('a[data-id="'+canvasNode.getId()+'"]').removeClass('rng-common-hoveredNode');
+ var id = getItemId(canvasNode);
+ this.dom.find('a[rng-module-nodeFamilyTree-item-id="'+id+'"]').removeClass('rng-common-hoveredNode');
}
};
@@ -107,10 +133,10 @@ return function(sandbox) {
getView: function() {
return view.dom;
},
- highlightNode: function(canvasNode) {
+ highlightElement: function(canvasNode) {
view.highlightNode(canvasNode);
},
- dimNode: function(canvasNode) {
+ dimElement: function(canvasNode) {
view.dimNode(canvasNode);
}
};
diff --git a/src/editor/modules/nodeFamilyTree/template.html b/src/editor/modules/nodeFamilyTree/template.html
index 886df06..77e5366 100644
--- a/src/editor/modules/nodeFamilyTree/template.html
+++ b/src/editor/modules/nodeFamilyTree/template.html
@@ -2,7 +2,7 @@
<table class="table table-bordered">
<tr>
<td>powyżej</td>
- <td><% if(parent) { %><a href="#" class="rng-module-nodeFamilyTree-parent"><%= parent.repr %></a><% } else { %>-<% } %></td>
+ <td><% if(parent) { %><a href="#" class="rng-module-nodeFamilyTree-parent" rng-module-nodeFamilyTree-item-id="<%= parent.id %>"><%= parent.repr %></a><% } else { %>-<% } %></td>
</tr>
<tr>
<td rowspan="0">poniżej</td>
@@ -10,7 +10,7 @@
<ul>
<% 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>
+ <li><% if(element.bold) { %><strong><% } %><a rng-module-nodeFamilyTree-item-id="<%= element.id %>" href="#"><%= element.repr %></a><% if(element.bold) { %></strong><% } %></li>
<% }); %>
<% } %>
</ul>
diff --git a/src/editor/modules/rng/rng.js b/src/editor/modules/rng/rng.js
index 58f4dee..52aaa51 100644
--- a/src/editor/modules/rng/rng.js
+++ b/src/editor/modules/rng/rng.js
@@ -18,14 +18,14 @@ return function(sandbox) {
var commands = {
highlightDocumentElement: function(element, origin) {
///'nodeBreadCrumbs', 'nodeFamilyTree'
- ['documentCanvas', ].forEach(function(moduleName) {
+ ['documentCanvas', 'nodeFamilyTree'].forEach(function(moduleName) {
if(!origin || moduleName != origin)
sandbox.getModule(moduleName).highlightElement(element);
});
},
dimDocumentElement: function(element, origin) {
//'nodeBreadCrumbs', 'nodeFamilyTree'
- ['documentCanvas'].forEach(function(moduleName) {
+ ['documentCanvas', 'nodeFamilyTree'].forEach(function(moduleName) {
if(!origin || moduleName != origin)
sandbox.getModule(moduleName).dimElement(element);
});
@@ -36,7 +36,7 @@ return function(sandbox) {
updateCurrentNodeElement: function(nodeElement) {
sandbox.getModule('nodePane').setNodeElement(nodeElement);
sandbox.getModule('nodeFamilyTree').setElement(nodeElement);
- //sandbox.getModule('nodeBreadCrumbs').setNodeElement(nodeElement);
+ sandbox.getModule('nodeBreadCrumbs').setNodeElement(nodeElement);
},
updateCurrentTextElement: function(textElement) {
sandbox.getModule('nodeFamilyTree').setElement(textElement);