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
  13     var view = {
  14         dom: $('<div>' + template({node:null, parents: null}) + '</div>'),
  15         setup: function() {
  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, tagNames: wlxmlUtils.wlxmlTagNames, classNames: wlxmlUtils.wlxmlClassNames}));
  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 });