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             var view = this;
  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 = nodeElement.parents();
  36             this.dom.html(template({node: nodeElement, parents: parents, tagNames: wlxmlUtils.wlxmlTagNames, classNames: wlxmlUtils.wlxmlClassNames}));
  37
  38             this.dom.find('li > a[href="#"]').each(function(idx, a) {
  39                 $(a).data('element', parents[parents.length - 1 - idx]);
  40             });
  41             this.dom.find('a.active').data('element', nodeElement);
  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         setNodeElement: function(nodeElement) {
  58             view.setNodeElement(nodeElement);
  59         },
  60         highlightNode: function(id) { view.highlightNode(id); },
  61         dimNode: function(id) { view.dimNode(id); }
  62     };
  63 };
  64
  65 });