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('click', 'a', function(e) {
  18                 e.preventDefault();
  19                 var target = $(e.target);
  20                 sandbox.publish('elementClicked', target.data('element'));
  21             });
  22         },
  23
  24         setNodeElement: function(nodeElement) {
  25             this.dom.empty();
  26             this.currentNodeElement = nodeElement;
  27             var parents;
  28             if(nodeElement) {
  29                 parents = nodeElement.parents();
  30             }
  31
  32             this.dom.html(template({node: nodeElement, parents: parents, utils: wlxmlUtils}));
  33
  34             this.dom.find('li > a[href="#"]').each(function(idx, a) {
  35                 $(a).data('element', parents[parents.length - 1 - idx]);
  36             });
  37             this.dom.find('a.active').data('element', nodeElement);
  38         },
  39
  40         highlightNode: function(node) {
  41             this.dom.find('a[data-id="'+node.id+'"]').addClass('rng-common-hoveredNode');
  42         },
  43         dimNode: function(node) {
  44             this.dom.find('a[data-id="'+node.id+'"]').removeClass('rng-common-hoveredNode');
  45         }
  46     };
  47
  48     view.setup();
  49
  50     return {
  51         start: function() { sandbox.publish('ready'); },
  52         getView: function() { return view.dom; },
  53         setNodeElement: function(nodeElement) {
  54             if(!listens && nodeElement) {
  55                 nodeElement.document.on('change', function() {
  56                     if(view.currentNodeElement && !view.currentNodeElement.isInDocument()) {
  57                         view.setNodeElement(null);
  58                     }
  59                 });
  60                 listens = true;
  61             }
  62             view.setNodeElement(nodeElement);
  63         },
  64         highlightNode: function(id) { view.highlightNode(id); },
  65         dimNode: function(id) { view.dimNode(id); }
  66     };
  67 };
  68
  69 });