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         listens = false;
  14
  15     var startListening = function(document) {
  16         listens = true;
  17         document.on('change', function(event) {
  18             if(event.type === 'nodeTextChange' && event.meta.node.parent().sameNode(view.currentNodeElement)) {
  19                 view.setElement();
  20             }
  21         }, this);
  22     }
  23
  24     var view = {
  25         dom: $('<div>' + template({contents: null, parent: null}) + '</div>'),
  26         setup: function() {
  27             var view = this;
  28             this.dom.on('click', 'a', function(e) {
  29                 var target = $(e.target);
  30                 sandbox.publish('elementClicked', target.data('element'));
  31             });
  32
  33             this.dom.on('mouseenter', 'a', function(e) {
  34                 var target = $(e.target);
  35                 sandbox.publish('elementEntered', target.data('element'));
  36             });
  37             this.dom.on('mouseleave', 'a', function(e) {
  38                 var target = $(e.target);
  39                 sandbox.publish('elementLeft', target.data('element'));
  40             });
  41         },
  42         setElement: function(element) {
  43             element = element || this.currentNodeElement;
  44             console.log('familyTree sets node');
  45             var textElement = element.getText ? element : null,
  46                 nodeElement = element.getText ? element.parent() : element, // TODO: better type detection
  47                 nodeElementParent = nodeElement.parent(),
  48                 parent;
  49
  50             this.currentNodeElement = nodeElement;
  51
  52             if(nodeElementParent) {
  53                 parent = {
  54                     repr: wlxmlUtils.wlxmlTagNames[nodeElementParent.getTagName()] + (nodeElementParent.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[nodeElementParent.getClass()] : '')
  55                 };
  56             }
  57
  58             var nodeContents = nodeElement.contents(),
  59                 contents = [];
  60             nodeContents.forEach(function(child) {
  61                 if(child.getText) {
  62                     var text = child.getText();
  63                     if(!text)
  64                         text = '<pusty tekst>';
  65                     else {
  66                         if(text.length > 13) {
  67                             text = text.substr(0,13) + '...';
  68                         }
  69                         text = '"' + text + '"';
  70                     }
  71                     contents.push({repr: _.escape(text), bold: child.sameNode(textElement)});
  72                 } else {
  73                     contents.push({repr: wlxmlUtils.wlxmlTagNames[child.getTagName()] + (child.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[child.getClass()] : '')});
  74                 }
  75             });
  76             this.dom.empty();
  77             this.dom.append($(template({parent: parent, contents: contents})));
  78
  79             if(parent) {
  80                 this.dom.find('.rng-module-nodeFamilyTree-parent').data('element', nodeElementParent)
  81             }
  82             this.dom.find('li a').each(function(idx, a) {
  83                 $(a).data('element', nodeContents[idx]);
  84             });
  85         },
  86         highlightNode: function(canvasNode) {
  87             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').addClass('rng-common-hoveredNode');
  88         },
  89         dimNode: function(canvasNode) {
  90             this.dom.find('a[data-id="'+canvasNode.getId()+'"]').removeClass('rng-common-hoveredNode');
  91         }
  92     };
  93
  94     view.setup();
  95
  96     return {
  97         start: function() {
  98             sandbox.publish('ready');
  99         },
 100         setElement: function(element) {
 101             if(!listens) {
 102                 startListening(element.document);
 103             }
 104             if(!(element.sameNode(view.currentNodeElement)))
 105                 view.setElement(element);
 106         },
 107         getView: function() {
 108             return view.dom;
 109         },
 110         highlightNode: function(canvasNode) {
 111             view.highlightNode(canvasNode);
 112         },
 113         dimNode: function(canvasNode) {
 114             view.dimNode(canvasNode);
 115         }
 116     };
 117 };
 118
 119 });