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('nodeSelected', view.nodes[target.attr('data-id')]);
  20             });
  21
  22             this.dom.on('mouseenter', 'a', function(e) {
  23                 var target = $(e.target);
  24                 sandbox.publish('nodeEntered', view.nodes[target.attr('data-id')]);
  25             });
  26             this.dom.on('mouseleave', 'a', function(e) {
  27                 var target = $(e.target);
  28                 sandbox.publish('nodeLeft', view.nodes[target.attr('data-id')]);
  29             });
  30         },
  31         setNode: function(node) {
  32             console.log('familyTree sets node');
  33             var nodes = this.nodes = {};
  34             this.currentNode = node;
  35             var parentNode = node.parent();
  36             var parent;
  37
  38             if(parentNode) {
  39                 parent = {
  40                     repr: parentNode.getTag() + (parentNode.getClass() ? ' / ' + parentNode.getClass() : ''),
  41                     id: parentNode.getId()
  42                 };
  43                 this.nodes[parentNode.getId()] = parentNode;
  44             }
  45
  46             var children = [];
  47             node.children().each(function() {
  48                 var child = this;
  49                 children.push({repr: child.getTag() + (child.getClass() ? ' / ' + child.getClass() : ''), id: child.getId()});
  50                 nodes[child.getId()] = child;
  51             });
  52             this.dom.empty();
  53             this.dom.append($(template({parent: parent, children: children})));
  54         },
  55         highlightNode: function(canvasNode) {
  56             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').addClass('rng-common-hoveredNode');
  57         },
  58         dimNode: function(canvasNode) {
  59             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').removeClass('rng-common-hoveredNode');
  60         }
  61     };
  62
  63     view.setup();
  64
  65     return {
  66         start: function() {
  67             sandbox.publish('ready');
  68         },
  69         setNode: function(canvasNode) {
  70             if(!canvasNode.isSame(view.currentNode))
  71                 view.setNode(canvasNode);
  72         },
  73         getView: function() {
  74             return view.dom;
  75         },
  76         highlightNode: function(canvasNode) {
  77             view.highlightNode(canvasNode);
  78         },
  79         dimNode: function(canvasNode) {
  80             view.dimNode(canvasNode);
  81         }
  82     };
  83 };
  84
  85 });