0540542681618ac895319a0012dfa2ea233f4e35
[fnpeditor.git] / src / editor / modules / nodeBreadCrumbs / nodeBreadCrumbs.js
1 define([
2 'libs/jquery',
3 'libs/underscore',
4 'utils/wlxml',
5 'libs/text!./template.html'], function($, _, wlxmlUtils, templateSrc) {
6
7 'use strict';
8
9 return function(sandbox) {
10     
11     var template = _.template(templateSrc),
12         listens = false;
13     
14     var view = {
15         dom: $('<div>' + template({node:null, parents: null}) + '</div>'),
16         setup: function() {
17             this.dom.on('mouseenter', 'a', function(e) {
18                 var target = $(e.target);
19                 sandbox.publish('elementEntered', target.data('element'));
20             });
21             this.dom.on('mouseleave', 'a', function(e) {
22                 var target = $(e.target);
23                 sandbox.publish('elementLeft', target.data('element'));
24             });
25             this.dom.on('click', 'a', function(e) {
26                 e.preventDefault();
27                 var target = $(e.target);
28                 sandbox.publish('elementClicked', target.data('element'));
29             });
30         },
31         
32         setNodeElement: function(nodeElement) {
33             this.dom.empty();
34             this.currentNodeElement = nodeElement;
35             var parents;
36             if(nodeElement) {
37                 parents = nodeElement.parents();
38             }
39
40             this.dom.html(template({node: nodeElement, parents: parents, utils: wlxmlUtils}));
41
42             this.dom.find('li > a[href="#"]').each(function(idx, a) {
43                 $(a).data('element', parents[parents.length - 1 - idx]);
44             });
45             this.dom.find('a.active').data('element', nodeElement);
46         },
47         
48         highlightNode: function(node) {
49             this.dom.find('a[data-id="'+node.id+'"]').addClass('rng-common-hoveredNode');
50         },
51         dimNode: function(node) {
52             this.dom.find('a[data-id="'+node.id+'"]').removeClass('rng-common-hoveredNode');
53         }
54     };
55     
56     view.setup();
57     
58     return {
59         start: function() { sandbox.publish('ready'); },
60         getView: function() { return view.dom; },
61         setNodeElement: function(nodeElement) {
62             if(!listens && nodeElement) {
63                 nodeElement.document.on('change', function() {
64                     if(view.currentNodeElement && !view.currentNodeElement.isInDocument()) {
65                         view.setNodeElement(null);
66                     }
67                 });
68                 listens = true;
69             }
70             view.setNodeElement(nodeElement);
71         },
72         highlightNode: function(id) { view.highlightNode(id); },
73         dimNode: function(id) { view.dimNode(id); }
74     };
75 };
76
77 });