modules/nodeBreadCrumbs/nodeBreadCrumbs.js

   1 define([\r
   2 'libs/jquery-1.9.1.min',\r
   3 'libs/underscore-min',\r
   4 'libs/text!./template.html'], function($, _, templateSrc) {\r
   5 \r
   6 'use strict';\r
   7 \r
   8 return function(sandbox) {\r
   9     \r
  10     var template = _.template(templateSrc);\r
  11     \r
  12     var view = {\r
  13         dom: $('<div>' + template({node:null, parents: null}) + '</div>'),\r
  14         setup: function() {\r
  15             this.dom.on('mouseenter', 'a', function(e) {\r
  16                 var target = $(e.target);\r
  17                 sandbox.publish('nodeHighlighted', target.attr('data-id'));\r
  18             });\r
  19             this.dom.on('mouseleave', 'a', function(e) {\r
  20                 var target = $(e.target);\r
  21                 sandbox.publish('nodeDimmed', target.attr('data-id'));\r
  22             });\r
  23             this.dom.on('click', 'a', function(e) {\r
  24                 e.preventDefault();\r
  25                 sandbox.publish('nodeSelected', target.attr('data-id'));\r
  26             });\r
  27         },\r
  28         \r
  29         setNode: function(node) {\r
  30             this.dom.empty();\r
  31             this.dom.html(template({node: node, parents: node.parents('[wlxml-tag]')}));\r
  32         },\r
  33         \r
  34         highlightNode: function(id) {\r
  35             this.dom.find('a[data-id="'+id+'"]').addClass('rng-common-hoveredNode');\r
  36         },\r
  37         dimNode: function(id) {\r
  38             this.dom.find('a[data-id="' +id+'"]').removeClass('rng-common-hoveredNode');\r
  39         }\r
  40     }\r
  41     \r
  42     view.setup();\r
  43     \r
  44     return {\r
  45         start: function() { sandbox.publish('ready'); },\r
  46         getView: function() { return view.dom; },\r
  47         setNode: function(node) { view.setNode(node); },\r
  48         highlightNode: function(id) { view.highlightNode(id); },\r
  49         dimNode: function(id) { view.dimNode(id); }\r
  50     }\r
  51 }\r
  52 \r
  53 });