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