src/editor/modules/nodeFamilyTree/nodeFamilyTree.js

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