modules/nodeFamilyTree/nodeFamilyTree.js

   1 define([
   2 'libs/jquery-1.9.1.min',
   3 'libs/underscore-min',
   4 'libs/text!./template.html'
   5 ], function($, _, templateSrc) {
   6
   7 'use strict';
   8
   9 return function(sandbox) {
  10
  11     var template = _.template(templateSrc);
  12
  13     var view = {
  14         dom: $('<div>' + template({children: null, parent: null}) + '</div>'),
  15         setup: function() {
  16             var view = this;
  17             this.dom.on('click', 'a', function(e) {
  18                 var target = $(e.target);
  19                 sandbox.publish('elementClicked', target.data('element'));
  20             });
  21
  22             this.dom.on('mouseenter', 'a', function(e) {
  23                 var target = $(e.target);
  24                 sandbox.publish('elementEntered', target.data('element'));
  25             });
  26             this.dom.on('mouseleave', 'a', function(e) {
  27                 var target = $(e.target);
  28                 sandbox.publish('elementLeft', target.data('element'));
  29             });
  30         },
  31         setElement: function(element) {
  32             console.log('familyTree sets node');
  33             var textElement = element.getText ? element : null,
  34                 nodeElement = element.getText ? element.parent() : element, // TODO: better type detection
  35                 nodeElementParent = nodeElement.parent(),
  36                 parent;
  37
  38             this.currentNodeElement = nodeElement;
  39
  40             if(nodeElementParent) {
  41                 parent = {
  42                     repr: nodeElementParent.getWlxmlTag() + (nodeElementParent.getWlxmlClass() ? ' / ' + nodeElementParent.getWlxmlClass() : '')
  43                 };
  44             }
  45
  46             var nodeChildren = nodeElement.children(),
  47                 children = [];
  48             nodeChildren.forEach(function(child) {
  49                 if(child.getText) {
  50                     var text = child.getText();
  51                     if(text.length > 13)
  52                         text = text.substr(0,13) + '...';
  53                     children.push({repr: '"' + text + '"', bold: child.sameNode(textElement)});
  54                 } else {
  55                     children.push({repr: child.getWlxmlTag() + (child.getWlxmlClass() ? ' / ' + child.getWlxmlClass() : '')});
  56                 }
  57             });
  58             this.dom.empty();
  59             this.dom.append($(template({parent: parent, children: children})));
  60
  61             if(parent) {
  62                 this.dom.find('.rng-module-nodeFamilyTree-parent').data('element', nodeElementParent)
  63             }
  64             this.dom.find('li a').each(function(idx, a) {
  65                 $(a).data('element', nodeChildren[idx]);
  66             });
  67         },
  68         highlightNode: function(canvasNode) {
  69             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').addClass('rng-common-hoveredNode');
  70         },
  71         dimNode: function(canvasNode) {
  72             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').removeClass('rng-common-hoveredNode');
  73         }
  74     };
  75
  76     view.setup();
  77
  78     return {
  79         start: function() {
  80             sandbox.publish('ready');
  81         },
  82         setElement: function(element) {
  83             if(!(element.sameNode(view.currentNodeElement)))
  84                 view.setElement(element);
  85         },
  86         getView: function() {
  87             return view.dom;
  88         },
  89         highlightNode: function(canvasNode) {
  90             view.highlightNode(canvasNode);
  91         },
  92         dimNode: function(canvasNode) {
  93             view.dimNode(canvasNode);
  94         }
  95     };
  96 };
  97
  98 });