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