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)
  52                         text = '<pusty tekst>';
  53                     else {
  54                         if(text.length > 13) {
  55                             text = text.substr(0,13) + '...';
  56                         }
  57                         text = '"' + text + '"';
  58                     }
  59                     children.push({repr: _.escape(text), bold: child.sameNode(textElement)});
  60                 } else {
  61                     children.push({repr: child.getWlxmlTag() + (child.getWlxmlClass() ? ' / ' + child.getWlxmlClass() : '')});
  62                 }
  63             });
  64             this.dom.empty();
  65             this.dom.append($(template({parent: parent, children: children})));
  66
  67             if(parent) {
  68                 this.dom.find('.rng-module-nodeFamilyTree-parent').data('element', nodeElementParent)
  69             }
  70             this.dom.find('li a').each(function(idx, a) {
  71                 $(a).data('element', nodeChildren[idx]);
  72             });
  73         },
  74         highlightNode: function(canvasNode) {
  75             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').addClass('rng-common-hoveredNode');
  76         },
  77         dimNode: function(canvasNode) {
  78             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').removeClass('rng-common-hoveredNode');
  79         }
  80     };
  81
  82     view.setup();
  83
  84     return {
  85         start: function() {
  86             sandbox.publish('ready');
  87         },
  88         setElement: function(element) {
  89             if(!(element.sameNode(view.currentNodeElement)))
  90                 view.setElement(element);
  91         },
  92         getView: function() {
  93             return view.dom;
  94         },
  95         highlightNode: function(canvasNode) {
  96             view.highlightNode(canvasNode);
  97         },
  98         dimNode: function(canvasNode) {
  99             view.dimNode(canvasNode);
 100         }
 101     };
 102 };
 103
 104 });