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('nodeHighlighted', view.nodes[target.attr('data-id')]);
  19             });
  20             this.dom.on('mouseleave', 'a', function(e) {
  21                 var target = $(e.target);
  22                 sandbox.publish('nodeDimmed', view.nodes[target.attr('data-id')]);
  23             });
  24             this.dom.on('click', 'a', function(e) {
  25                 e.preventDefault();
  26                 var target = $(e.target);
  27                 sandbox.publish('nodeSelected', view.nodes[target.attr('data-id')]);
  28             });
  29         },
  30
  31         setNode: function(node) {
  32             this.dom.empty();
  33             var nodes = this.nodes = {};
  34             this.currentNode = node;
  35             this.nodes[node.getId()] = node;
  36             var parents = node.parents();
  37             parents.each(function() {
  38                 var parent = this;
  39                 nodes[parent.getId()] = parent;
  40             });
  41             this.dom.html(template({node: node, parents: parents}));
  42         },
  43
  44         highlightNode: function(node) {
  45             this.dom.find('a[data-id="'+node.id+'"]').addClass('rng-common-hoveredNode');
  46         },
  47         dimNode: function(node) {
  48             this.dom.find('a[data-id="'+node.id+'"]').removeClass('rng-common-hoveredNode');
  49         }
  50     };
  51
  52     view.setup();
  53
  54     return {
  55         start: function() { sandbox.publish('ready'); },
  56         getView: function() { return view.dom; },
  57         setNode: function(canvasNode) {
  58             if(!canvasNode.isSame(view.currentNode)) {
  59                 view.setNode(canvasNode);
  60             }
  61         },
  62         highlightNode: function(id) { view.highlightNode(id); },
  63         dimNode: function(id) { view.dimNode(id); }
  64     };
  65 };
  66
  67 });