From: Aleksander Łukasz Date: Tue, 11 Jun 2013 08:04:28 +0000 (+0200) Subject: Wrapping wlxmlNode X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/5be499ab63f91b65065fe34f3a6d645efc9ae7b6?hp=64bdf1aaa07bd683a71241e18e6e26200a481bab Wrapping wlxmlNode --- diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js index f7d7fd0..e666f0d 100644 --- a/modules/documentCanvas/documentCanvas.js +++ b/modules/documentCanvas/documentCanvas.js @@ -3,7 +3,8 @@ define([ 'libs/underscore-min', './transformations', -'libs/text!./template.html'], function(_, transformations, template) { +'./wlxmlNode', +'libs/text!./template.html'], function(_, transformations, wlxmlNode, template) { @@ -22,11 +23,11 @@ return function(sandbox) { this.node.on('mouseover', '[wlxml-tag]', function(e) { e.stopPropagation(); - sandbox.publish('nodeHovered', $(e.target)); + sandbox.publish('nodeHovered', new wlxmlNode.Node($(e.target))); }); this.node.on('mouseout', '[wlxml-tag]', function(e) { e.stopPropagation(); - sandbox.publish('nodeBlured', $(e.target)); + sandbox.publish('nodeBlured', new wlxmlNode.Node($(e.target))); }); this.node.on('click', '[wlxml-tag]', function(e) { e.stopPropagation(); @@ -169,10 +170,11 @@ return function(sandbox) { node.addClass('rng-module-documentCanvas-currentNode'); this.currentNode = node; - sandbox.publish('nodeSelected', node); + sandbox.publish('nodeSelected', new wlxmlNode.Node(node)); }, selectNode: function(node) { + node = this.getNodeElement(node); view._markSelected(node); var range = document.createRange(); range.selectNodeContents(node[0]); @@ -182,12 +184,8 @@ return function(sandbox) { selection.removeAllRanges() selection.addRange(range); }, - selectNodeById: function(id) { - var node = this.node.find('#'+id); - if(node) - this.selectNode(node); - }, highlightNode: function(node) { + node = this.getNodeElement(node); if(!this.gridToggled) { node.addClass('rng-common-hoveredNode'); var label = node.attr('wlxml-tag'); @@ -198,21 +196,12 @@ return function(sandbox) { } }, dimNode: function(node) { + node = this.getNodeElement(node); if(!this.gridToggled) { node.removeClass('rng-common-hoveredNode'); node.find('.rng-module-documentCanvas-hoveredNodeTag').remove(); } }, - highlightNodeById: function(id) { - var node = this.node.find('#'+id); - if(node) - this.highlightNode(node); - }, - dimNodeById: function(id) { - var node = this.node.find('#'+id); - if(node) - this.dimNode(node); - }, selectFirstNode: function() { var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() { return $(this).clone().children().remove().end().text().trim() !== ''; @@ -223,11 +212,14 @@ return function(sandbox) { else { node = this.node.find('[wlxml-class|="p"]') } - this.selectNode(node); + this.selectNode(new wlxmlNode.Node(node)); }, toggleGrid: function(toggle) { this.node.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle); this.gridToggled = toggle; + }, + getNodeElement: function(wlxmlNode) { + return this.node.find('#'+wlxmlNode.id); } }; @@ -247,14 +239,14 @@ return function(sandbox) { if(view.currentNode) view.currentNode.attr('wlxml-'+attr, value); }, - highlightNode: function(id) { - view.highlightNodeById(id); + highlightNode: function(wlxmlNode) { + view.highlightNode(wlxmlNode); }, - dimNode: function(id) { - view.dimNodeById(id); + dimNode: function(wlxmlNode) { + view.dimNode(wlxmlNode); }, - selectNode: function(id) { - view.selectNodeById(id); + selectNode: function(wlxmlNode) { + view.selectNode(wlxmlNode); }, toggleGrid: function(toggle) { view.toggleGrid(toggle); diff --git a/modules/documentCanvas/wlxmlNode.js b/modules/documentCanvas/wlxmlNode.js new file mode 100644 index 0000000..f5ada52 --- /dev/null +++ b/modules/documentCanvas/wlxmlNode.js @@ -0,0 +1,39 @@ +define(['libs/jquery-1.9.1.min'], function($) { + +'use strict'; + +var tagSelector = '[wlxml-tag]'; + +var Node = function(domNode) { + + return { + id: domNode.attr('id'), + tag: domNode.attr('wlxml-tag'), + klass: domNode.attr('wlxml-class'), + parent: function() { + var node = domNode.parent(tagSelector); + if(node.length) + return new Node(node); + return null; + }, + children: function() { + var list = []; + domNode.children(tagSelector).each(function() { + list.push(new Node($(this))); + }); + return $(list); + }, + parents: function() { + var list = []; + domNode.parents(tagSelector).each(function() { + list.push(new Node($(this))); + }); + return $(list); + } + } + +}; + +return { Node: Node} + +}); \ No newline at end of file diff --git a/modules/nodeBreadCrumbs/nodeBreadCrumbs.js b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js index 4a787f4..cefe7b4 100644 --- a/modules/nodeBreadCrumbs/nodeBreadCrumbs.js +++ b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js @@ -12,31 +12,39 @@ return function(sandbox) { var view = { dom: $('
' + template({node:null, parents: null}) + '
'), setup: function() { + var view = this; this.dom.on('mouseenter', 'a', function(e) { var target = $(e.target); - sandbox.publish('nodeHighlighted', target.attr('data-id')); + sandbox.publish('nodeHighlighted', view.nodes[target.attr('data-id')]); }); this.dom.on('mouseleave', 'a', function(e) { var target = $(e.target); - sandbox.publish('nodeDimmed', target.attr('data-id')); + sandbox.publish('nodeDimmed', view.nodes[target.attr('data-id')]); }); this.dom.on('click', 'a', function(e) { e.preventDefault(); var target = $(e.target); - sandbox.publish('nodeSelected', target.attr('data-id')); + sandbox.publish('nodeSelected', view.nodes[target.attr('data-id')]); }); }, setNode: function(node) { this.dom.empty(); - this.dom.html(template({node: node, parents: node.parents('[wlxml-tag]')})); + var nodes = this.nodes = {}; + this.nodes[node.id] = node; + var parents = node.parents(); + parents.each(function() { + var parent = this; + nodes[parent.id] = parent; + }); + this.dom.html(template({node: node, parents: parents})); }, - highlightNode: function(id) { - this.dom.find('a[data-id="'+id+'"]').addClass('rng-common-hoveredNode'); + highlightNode: function(node) { + this.dom.find('a[data-id="'+node.id+'"]').addClass('rng-common-hoveredNode'); }, - dimNode: function(id) { - this.dom.find('a[data-id="' +id+'"]').removeClass('rng-common-hoveredNode'); + dimNode: function(node) { + this.dom.find('a[data-id="'+node.id+'"]').removeClass('rng-common-hoveredNode'); } } diff --git a/modules/nodeBreadCrumbs/template.html b/modules/nodeBreadCrumbs/template.html index 1662fcf..e1e9042 100644 --- a/modules/nodeBreadCrumbs/template.html +++ b/modules/nodeBreadCrumbs/template.html @@ -2,9 +2,9 @@ \ No newline at end of file diff --git a/modules/nodeFamilyTree/nodeFamilyTree.js b/modules/nodeFamilyTree/nodeFamilyTree.js index e061277..3c78bd1 100644 --- a/modules/nodeFamilyTree/nodeFamilyTree.js +++ b/modules/nodeFamilyTree/nodeFamilyTree.js @@ -13,34 +13,49 @@ return function(sandbox) { var view = { dom: $('
' + template({children: null, parent: null}) + '
'), setup: function() { + var view = this; this.dom.on('click', 'a', function(e) { var target = $(e.target); - sandbox.publish('nodeSelected', target.attr('data-id')); + sandbox.publish('nodeSelected', view.nodes[target.attr('data-id')]); }); this.dom.on('mouseenter', 'a', function(e) { var target = $(e.target); - sandbox.publish('nodeEntered', target.attr('data-id')); + sandbox.publish('nodeEntered', view.nodes[target.attr('data-id')]) }); this.dom.on('mouseleave', 'a', function(e) { var target = $(e.target); - sandbox.publish('nodeLeft', target.attr('data-id')); + sandbox.publish('nodeLeft', view.nodes[target.attr('data-id')]) }); }, setNode: function(node) { - var parentClass = node.parent().attr('wlxml-class'); - var parent = node.parent('[wlxml-tag]').length ? { - repr: node.parent().attr('wlxml-tag') + (parentClass ? ' / ' + parentClass : ''), - id: node.parent().attr('id') - } : undefined; + console.log('familyTree sets node'); + var nodes = this.nodes = {}; + var parentNode = node.parent(); + var parent = undefined; + + if(parentNode) { + parent = { + repr: parentNode.tag + (parentNode.klass ? ' / ' + parentNode.klass : ''), + id: parentNode.id + }; + this.nodes[parentNode.id] = parentNode; + } + var children = []; - node.children('[wlxml-tag]').each(function() { - var child = $(this); - var childClass = child.attr('wlxml-class'); - children.push({repr: child.attr('wlxml-tag') + (childClass ? ' / ' + childClass : ''), id: child.attr('id')}); + node.children().each(function() { + var child = this; + children.push({repr: child.tag + (child.klass ? ' / ' + child.klass : ''), id: child.id}); + nodes[child.id] = child; }); this.dom.empty(); this.dom.append($(template({parent: parent, children: children}))); + }, + highlightNode: function(wlxmlNode) { + this.dom.find('a[data-id="'+wlxmlNode.id+'"]').addClass('rng-common-hoveredNode'); + }, + dimNode: function(wlxmlNode) { + this.dom.find('a[data-id="'+wlxmlNode.id+'"]').removeClass('rng-common-hoveredNode'); } } @@ -56,11 +71,11 @@ return function(sandbox) { getView: function() { return view.dom; }, - highlightNode: function(id) { - view.dom.find('a[data-id="'+id+'"]').addClass('rng-common-hoveredNode'); + highlightNode: function(wlxmlNode) { + view.highlightNode(wlxmlNode); }, - dimNode: function(id) { - view.dom.find('a[data-id="'+id+'"]').removeClass('rng-common-hoveredNode'); + dimNode: function(wlxmlNode) { + view.dimNode(wlxmlNode); } }; }; diff --git a/modules/nodePane/nodePane.js b/modules/nodePane/nodePane.js index fc8284f..037715f 100644 --- a/modules/nodePane/nodePane.js +++ b/modules/nodePane/nodePane.js @@ -23,10 +23,8 @@ return function(sandbox) { return view; }, setNode: function(node) { - var tag = node.attr('wlxml-tag'); - var klass = node.attr('wlxml-class'); - view.find('.rng-module-nodePane-tagSelect').val(tag); - view.find('.rng-module-nodePane-classSelect').val(klass); + view.find('.rng-module-nodePane-tagSelect').val(node.tag); + view.find('.rng-module-nodePane-classSelect').val(node.klass); } } diff --git a/modules/rng/rng.js b/modules/rng/rng.js index 308549c..5edc7ac 100644 --- a/modules/rng/rng.js +++ b/modules/rng/rng.js @@ -13,6 +13,22 @@ return function(sandbox) { views.mainTabs.addTab(title, slug, view); } + var commands = { + highlightDocumentNode: function(wlxmlNode, origin) { + ['documentCanvas', 'nodeBreadCrumbs', 'nodeFamilyTree'].forEach(function(moduleName) { + if(!origin || moduleName != origin) + sandbox.getModule(moduleName).highlightNode(wlxmlNode) + }); + }, + dimDocumentNode: function(wlxmlNode, origin) { + ['documentCanvas', 'nodeBreadCrumbs', 'nodeFamilyTree'].forEach(function(moduleName) { + if(!origin || moduleName != origin) + sandbox.getModule(moduleName).dimNode(wlxmlNode) + }); + } + } + + var views = { mainLayout: new layout.Layout(mainLayoutTemplate), mainTabs: (new tabs.View()).render(), @@ -27,8 +43,6 @@ return function(sandbox) { sandbox.getDOM().append(views.mainLayout.getAsView()); views.visualEditingSidebar.addTab({icon: 'pencil'}, 'edit', views.currentNodePaneLayout.getAsView()); - - /* Events handling */ @@ -97,17 +111,12 @@ return function(sandbox) { }, - nodeHovered: function(node) { - sandbox.getModule('documentCanvas').highlightNode(node.attr('id')); - sandbox.getModule('nodeFamilyTree').highlightNode(node.attr('id')); - sandbox.getModule('nodeBreadCrumbs').highlightNode(node.attr('id')); - + nodeHovered: function(wlxmlNode) { + commands.highlightDocumentNode(wlxmlNode); }, - nodeBlured: function(node) { - sandbox.getModule('documentCanvas').dimNode(node.attr('id')); - sandbox.getModule('nodeFamilyTree').dimNode(node.attr('id')); - sandbox.getModule('nodeBreadCrumbs').dimNode(node.attr('id')); + nodeBlured: function(wlxmlNode) { + commands.dimDocumentNode(wlxmlNode); } }; @@ -132,14 +141,14 @@ return function(sandbox) { ready: function() { views.currentNodePaneLayout.appendView(sandbox.getModule('nodeFamilyTree').getView()); }, - nodeEntered: function(id) { - sandbox.getModule('documentCanvas').highlightNode(id); + nodeEntered: function(wlxmlNode) { + commands.highlightDocumentNode(wlxmlNode, 'nodeFamilyTree'); }, - nodeLeft: function(id) { - sandbox.getModule('documentCanvas').dimNode(id); + nodeLeft: function(wlxmlNode) { + commands.dimDocumentNode(wlxmlNode, 'nodeFamilyTree'); }, - nodeSelected: function(id) { - sandbox.getModule('documentCanvas').selectNode(id); + nodeSelected: function(wlxmlNode) { + sandbox.getModule('documentCanvas').selectNode(wlxmlNode); } }; @@ -163,14 +172,14 @@ return function(sandbox) { ready: function() { views.visualEditing.setView('statusBar', sandbox.getModule('nodeBreadCrumbs').getView()); }, - nodeHighlighted: function(id) { - sandbox.getModule('documentCanvas').highlightNode(id); + nodeHighlighted: function(wlxmlNode) { + commands.highlightDocumentNode(wlxmlNode, 'nodeBreadCrumbs'); }, - nodeDimmed: function(id) { - sandbox.getModule('documentCanvas').dimNode(id); + nodeDimmed: function(wlxmlNode) { + commands.dimDocumentNode(wlxmlNode, 'nodeBreadCrumbs'); }, - nodeSelected: function(id) { - sandbox.getModule('documentCanvas').selectNode(id); + nodeSelected: function(wlxmlNode) { + sandbox.getModule('documentCanvas').selectNode(wlxmlNode); } }