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 });