Describing internal HTML represenation of a sample document
[fnpeditor.git] / modules / nodeFamilyTree / nodeFamilyTree.js
1 define([
2 'libs/jquery-1.9.1.min',
3 'libs/underscore-min',
4 'libs/text!./template.html'
5 ], function($, _, templateSrc) {
6
7 'use strict';
8
9 return function(sandbox) {
10     
11     var template = _.template(templateSrc);
12     
13     var view = {
14         dom: $('<div>' + template({children: null, parent: null}) + '</div>'),
15         setup: function() {
16             var view = this;
17             this.dom.on('click', 'a', function(e) {
18                 var target = $(e.target);
19                 sandbox.publish('nodeSelected', view.nodes[target.attr('data-id')]);
20             });
21             
22             this.dom.on('mouseenter', 'a', function(e) {
23                 var target = $(e.target);
24                 sandbox.publish('nodeEntered', view.nodes[target.attr('data-id')]);
25             });
26             this.dom.on('mouseleave', 'a', function(e) {
27                 var target = $(e.target);
28                 sandbox.publish('nodeLeft', view.nodes[target.attr('data-id')]);
29             });
30         },
31         setNode: function(node) {
32             console.log('familyTree sets node');
33             var nodes = this.nodes = {};
34             this.currentNode = node;
35             var parentNode = node.parent();
36             var parent;
37             
38             if(parentNode) {
39                 parent = {
40                     repr: parentNode.getTag() + (parentNode.getClass() ? ' / ' + parentNode.getClass() : ''),
41                     id: parentNode.getId()
42                 };
43                 this.nodes[parentNode.getId()] = parentNode;
44             }
45         
46             var children = [];
47             node.children().each(function() {
48                 var child = this;
49                 children.push({repr: child.getTag() + (child.getClass() ? ' / ' + child.getClass() : ''), id: child.getId()});
50                 nodes[child.getId()] = child;
51             });
52             this.dom.empty();
53             this.dom.append($(template({parent: parent, children: children})));
54         },
55         highlightNode: function(canvasNode) {
56             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').addClass('rng-common-hoveredNode');
57         },
58         dimNode: function(canvasNode) {
59             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').removeClass('rng-common-hoveredNode');
60         }
61     };
62     
63     view.setup();
64     
65     return {
66         start: function() {
67             sandbox.publish('ready');
68         },
69         setNode: function(canvasNode) {
70             if(!canvasNode.isSame(view.currentNode))
71                 view.setNode(canvasNode);
72         },
73         getView: function() {
74             return view.dom;
75         },
76         highlightNode: function(canvasNode) {
77             view.highlightNode(canvasNode);
78         },
79         dimNode: function(canvasNode) {
80             view.dimNode(canvasNode);
81         }
82     };
83 };
84
85 });