src/editor/modules/documentCanvas/canvas/genericElement.js

   1 define(function(require) {
   2
   3 'use strict';
   4
   5 var $ = require('libs/jquery'),
   6     _ = require('libs/underscore'),
   7     documentElement = require('./documentElement'),
   8     utils = require('./utils'),
   9     CommentsView = require('./comments/comments');
  10
  11
  12 var DocumentNodeElement = documentElement.DocumentNodeElement;
  13
  14 var generic = Object.create(DocumentNodeElement.prototype);
  15
  16 $.extend(generic, {
  17     init: function() {
  18         DocumentNodeElement.prototype.init.call(this);
  19         this._container()
  20             .attr('wlxml-tag', this.wlxmlNode.getTagName())
  21             .attr('wlxml-class', this.wlxmlNode.getClass().replace(/\./g, '-'));
  22
  23         this.wlxmlNode.contents().forEach(function(node) {
  24             var el = this.canvas.createElement(node);
  25             if(el.dom) {
  26                 this._container().append(el.dom);
  27             }
  28         }.bind(this));
  29
  30         this.commentsView = new CommentsView(this.wlxmlNode, this.canvas.metadata.user);
  31         this.addToGutter(this.commentsView);
  32         this.commentTip = $('<div class="comment-tip"><i class="icon-comment"></i></div>');
  33         this.addWidget(this.commentTip);
  34
  35         if(!this.wlxmlNode.hasChild({klass: 'comment'})) {
  36             this.commentTip.hide();
  37         }
  38
  39         this.refresh();
  40     },
  41
  42     refresh: function() {
  43         if(this.wlxmlNode.getTagName() === 'span') {
  44             if(this.containsBlock()) {
  45                 this.displayAsBlock();
  46             } else {
  47                 this.displayInline();
  48             }
  49         } else {
  50             this.displayAsBlock();
  51         }
  52     },
  53
  54     getFirst: function(e1, e2) {
  55         var idx1 = this.childIndex(e1),
  56             idx2 = this.childIndex(e2);
  57         if(e1 === null || e2 === null) {
  58             return undefined;
  59         }
  60         return idx1 <= idx2 ? e1: e2;
  61     },
  62
  63     children: function() {
  64         var element = this,
  65             toret = [];
  66         this._container().contents().each(function() {
  67             var childElement = element.canvas.getDocumentElement(this);
  68             if(childElement === undefined) {
  69                 return true;
  70             }
  71
  72             toret.push(childElement);
  73         });
  74         return toret;
  75     },
  76
  77     getVerticallyFirstTextElement: function(params) {
  78         var toret;
  79
  80         params = _.extend({
  81             considerChildren: true
  82         }, params);
  83
  84         this.children().some(function(child) {
  85             if(child instanceof documentElement.DocumentTextElement) {
  86                 toret = child;
  87                 return true; // break
  88             } else if(params.considerChildren) {
  89                 toret = child.getVerticallyFirstTextElement();
  90                 if(toret) {
  91                     return true; // break
  92                 }
  93             }
  94         });
  95         return toret;
  96     },
  97
  98     onNodeAdded: function(event) {
  99         if(event.meta.node.isRoot()) {
 100             this.canvas.reloadRoot();
 101             return;
 102         }
 103
 104         var ptr = event.meta.node.prev(),
 105             referenceElement, referenceAction, actionArg;
 106
 107         while(ptr && !(referenceElement = utils.getElementForElementRootNode(ptr))) {
 108             ptr = ptr.prev();
 109         }
 110
 111         if(referenceElement) {
 112             referenceAction = 'after';
 113         } else {
 114             referenceElement = this;
 115             referenceAction = 'prepend';
 116         }
 117
 118         if(event.meta.move) {
 119             /* Let's check if this node had its own canvas element and it's accessible. */
 120             actionArg = utils.getElementForElementRootNode(event.meta.node);
 121         }
 122         if(!actionArg) {
 123             actionArg = event.meta.node;
 124         }
 125
 126         referenceElement[referenceAction](actionArg);
 127
 128         if(event.meta.node.is('comment')) {
 129             this.commentTip.show();
 130             this.commentsView.render();
 131         }
 132     },
 133     onNodeDetached: function(event) {
 134         var isComment = event.meta.node.is('comment');
 135         if(event.meta.node.sameNode(this)) {
 136             this.detach();
 137         } else {
 138             this.children().some(function(child) {
 139                 if(child.wlxmlNode.sameNode(event.meta.node)) {
 140                     child.detach();
 141                     return true;
 142                 }
 143             });
 144             if(isComment && !this.wlxmlNode.hasChild({klass: 'comment'})) {
 145                 this.commentTip.hide();
 146             }
 147             this.commentsView.render();
 148         }
 149     },
 150     onNodeTextChange: function(event) {
 151         var node = event.meta.node;
 152
 153         /* TODO: This handling of changes to the comments should probably be implemented via separate,
 154         non-rendering comments element */
 155         if(node.parent() && node.parent().is('comment') && this.wlxmlNode.sameNode(node.parent().parent())) {
 156             this.commentsView.render();
 157         }
 158     },
 159
 160     onStateChange: function(changes) {
 161         if(_.isBoolean(changes.exposed) && !this.isSpan()) {
 162             this._container().toggleClass('highlighted-element', changes.exposed);
 163         }
 164         if(_.isBoolean(changes.active) && !this.isSpan()) {
 165             this._container().toggleClass('current-node-element', changes.active);
 166         }
 167     },
 168
 169     ///
 170
 171     isSpan: function() {
 172         return this.wlxmlNode.getTagName() === 'span';
 173     },
 174
 175     containsBlock: function() {
 176         return this.children()
 177             .filter(function(child) {
 178                 return child instanceof documentElement.DocumentNodeElement;
 179             })
 180             .some(function(child) {
 181                 if(child.isBlock()) {
 182                     return true;
 183                 } else {
 184                     return child.containsBlock();
 185                 }
 186             });
 187     },
 188
 189     prepend: function(param) {
 190         var element;
 191         if(param instanceof documentElement.DocumentElement) {
 192             element = param;
 193         } else {
 194             element = this.canvas.createElement(param);
 195         }
 196         if(element.dom) {
 197             this._container().prepend(element.dom);
 198             this.refreshPath();
 199         }
 200         return element;
 201     },
 202
 203     childIndex: function(child) {
 204         var children = this.children(),
 205             toret = null;
 206         children.forEach(function(c, idx) {
 207             if(c.sameNode(child)) {
 208                 toret = idx;
 209                 return false;
 210             }
 211         });
 212         return toret;
 213     }
 214 });
 215
 216
 217 return generic;
 218
 219
 220
 221 });