modules/documentCanvas/canvas.js

   1 define([
   2 'libs/jquery-1.9.1.min',
   3 'libs/underscore-min',
   4 'modules/documentCanvas/transformations',
   5 'modules/documentCanvas/canvasNode',
   6 'libs/text!./template.html'
   7 ], function($, _, transformations, canvasNode, template) {
   8
   9 'use strict';
  10
  11 var Canvas = function(html) {
  12     this.dom = $(template);
  13     this.content = this.dom.find('#rng-module-documentCanvas-content');
  14     this.setHTML(html);
  15 };
  16
  17 Canvas.prototype.setHTML = function(html) {
  18     if(html) {
  19         this.content.html(html);
  20     }
  21 };
  22
  23 Canvas.prototype.getContent = function() {
  24     return this.content.contents();
  25 };
  26
  27 Canvas.prototype.findNodes = function(desc) {
  28     var selector = '';
  29     if(typeof desc === 'string') {
  30         selector = desc;
  31     }
  32     else {
  33         if(desc.klass)
  34             selector += '[wlxml-class=' + desc.klass + ']';
  35         if(desc.tag)
  36             selector += '[wlxml-tag=' + desc.tag + ']';
  37     }
  38     var toret = [];
  39     this.content.find(selector).each(function() {
  40         toret.push(canvasNode.create($(this)));
  41     });
  42     return toret;
  43 };
  44
  45 Canvas.prototype.getNodeById = function(id) {
  46     return canvasNode.create($(this.content.find('#' +id)));
  47 };
  48
  49 Canvas.prototype.nodeAppend = function(options) {
  50     var element; // = $(this.content.find('#' + options.context.id).get(0));
  51     if(options.to === 'root') {
  52         element = this.content;
  53     } else {
  54         element = $(this.content.find('#' + options.to.getId()).get(0));
  55     }
  56     element.append(options.node.dom);
  57 };
  58
  59 Canvas.prototype.nodeInsertAfter = function(options) {
  60     var element = $(this.content.find('#' + options.after.getId()).get(0));
  61     element.after(options.node.dom);
  62 };
  63
  64 Canvas.prototype.nodeWrap = function(options) {
  65     options = _.extend({textNodeIdx: 0}, options);
  66     if(typeof options.textNodeIdx === 'number')
  67         options.textNodeIdx = [options.textNodeIdx];
  68
  69     var container = $(this.content.find('#' + options.inside.getId()).get(0)),
  70         containerContent = container.contents(),
  71         idx1 = Math.min.apply(Math, options.textNodeIdx),
  72         idx2 = Math.max.apply(Math, options.textNodeIdx),
  73         textNode1 = $(containerContent.get(idx1)),
  74         textNode2 = $(containerContent.get(idx2)),
  75         sameNode = textNode1.get(0) === textNode2.get(0),
  76         prefixOutside = textNode1.text().substr(0, options.offsetStart),
  77         prefixInside = textNode1.text().substr(options.offsetStart),
  78         suffixInside = textNode2.text().substr(0, options.offsetEnd),
  79         suffixOutside = textNode2.text().substr(options.offsetEnd)
  80     ;
  81
  82     textNode1.after(options._with.dom);
  83     textNode1.detach();
  84
  85     options._with.dom.before(prefixOutside);
  86     if(sameNode) {
  87         var core = textNode1.text().substr(options.offsetStart, options.offsetEnd - options.offsetStart);
  88         options._with.setContent(core);
  89     } else {
  90         textNode2.detach();
  91         options._with.dom.append(prefixInside);
  92         for(var i = idx1 + 1; i < idx2; i++) {
  93             options._with.dom.append(containerContent[i]);
  94         }
  95         options._with.dom.append(suffixInside);
  96     }
  97     options._with.dom.after(suffixOutside);
  98 };
  99
 100 Canvas.prototype.nodeUnwrap = function(options) {
 101
 102     var removeWithJoin = function(node) {
 103         var contents = node.parent().contents(),
 104             idx = contents.index(node),
 105             prev = idx > 0 ? contents[idx-1] : null,
 106             next = idx + 1 < contents.length ? contents[idx+1] : null;
 107
 108         if(prev && prev.nodeType === 3 && next && next.nodeType === 3) {
 109             prev.data = prev.data + next.data;
 110             $(next).remove();
 111         }
 112         node.remove();
 113     };
 114
 115     var toUnwrap = $(this.content.find('#' + options.node.getId()).get(0));
 116
 117
 118     var parent = toUnwrap.parent();
 119     var parentContents = parent.contents();
 120
 121     if(toUnwrap.contents().length !== 1 || toUnwrap.contents()[0].nodeType !== 3)
 122         return false;
 123
 124     var idx = parentContents.index(toUnwrap);
 125
 126     var combineWith,
 127         action;
 128
 129     if(idx > 0 && parentContents[idx-1].nodeType === 3) {
 130         combineWith = parentContents[idx-1];
 131         action = 'append';
 132     } else if(idx + 1 < parentContents.length && parentContents[idx+1].nodeType === 3) {
 133         combineWith = parentContents[idx+1];
 134         action = 'prepend';
 135     }
 136
 137     if(combineWith) {
 138         var text =
 139                 (action === 'prepend' ? toUnwrap.text() : '') +
 140                 combineWith.data +
 141                 (action === 'append' ? toUnwrap.text() : '')
 142         ;
 143         combineWith.data = text;
 144         removeWithJoin(toUnwrap);
 145     } else {
 146         if(parentContents.length === 1 || idx === 0) {
 147             parent.append(toUnwrap.text());
 148         } else {
 149             toUnwrap.prev().after(toUnwrap.text());
 150         }
 151         toUnwrap.remove();
 152     }
 153 };
 154
 155 Canvas.prototype.nodeSplit = function(options) {
 156     options = _.extend({textNodeIdx: 0}, options);
 157
 158     var nodeToSplit = $(this.content.find('#' + options.node.getId()).get(0));
 159
 160     var nodeContents = nodeToSplit.contents();
 161     if(nodeContents.length === 0 ||
 162        nodeContents.length - 1 < options.textNodeIdx ||
 163        nodeContents.get(options.textNodeIdx).nodeType != 3)
 164         return false;
 165
 166     var textNode = $(nodeContents.get(options.textNodeIdx));
 167
 168     var succeedingNodes = [];
 169     var passed = false;
 170     nodeContents.each(function() {
 171         var node = this;
 172         if(passed)
 173             succeedingNodes.push(node);
 174         if(node === textNode.get(0))
 175             passed = true;
 176     });
 177
 178     var prefix = $.trim(textNode.text().substr(0, options.offset));
 179     var suffix = $.trim(textNode.text().substr(options.offset));
 180
 181     textNode.before(prefix);
 182     textNode.remove();
 183
 184     var newNode = canvasNode.create({tag: nodeToSplit.attr('wlxml-tag'), klass: nodeToSplit.attr('wlxml-class')});
 185     newNode.dom.append(suffix);
 186     succeedingNodes.forEach(function(node) {
 187         newNode.dom.append(node);
 188     });
 189     nodeToSplit.after(newNode.dom);
 190     return newNode;
 191 };
 192
 193 Canvas.prototype.nodeRemove = function(options) {
 194     var toRemove = $(this.content.find('#' + options.node.getId()).get(0));
 195     toRemove.remove();
 196 };
 197
 198 Canvas.prototype.listCreate = function(options) {
 199     var element1 = $(this.content.find('#' + options.start.getId()).get(0));
 200     var element2 = $(this.content.find('#' + options.end.getId()).get(0));
 201     if(element1.parent().get(0) !== element2.parent().get(0))
 202         return false;
 203
 204     var parent = element1.parent();
 205
 206     if(parent.contents().index(element1) > parent.contents().index(element2)) {
 207         var tmp = element1;
 208         element1 = element2;
 209         element2 = tmp;
 210     }
 211
 212     var nodesToWrap = [];
 213
 214     var place = 'before';
 215     var canvas = this;
 216     parent.contents().each(function() {
 217         var node = this;
 218         if(node === element1.get(0))
 219             place = 'inside';
 220         if(place === 'inside') {
 221             var $node;
 222             if(node.nodeType === 3) {
 223                 $node = canvasNode.create({tag: 'div', content: $.trim(node.data)}).dom; //canvas._createNode('div').text(node.data);
 224                 $(node).remove();
 225             }
 226             else {
 227                 $node = $(node);
 228             }
 229             $node.attr('wlxml-class', 'item');
 230             nodesToWrap.push($node);
 231         }
 232         if(node === element2.get(0))
 233             return false;
 234     });
 235
 236     var list = canvasNode.create({tag: 'div', klass: 'list-items' + (options.type === 'enum' ? '-enum' : '')}).dom; //this._createNode('div', 'list-items');
 237
 238     var parentNode = options.start.parent();
 239
 240     var toret;
 241     if(parentNode && parentNode.isOfClass('list-items')) {
 242         list.wrap('<div wlxml-tag="div" wlxml-class="item" class="canvas-silent-item">');
 243         toret = list.parent();
 244     } else {
 245         toret = list;
 246     }
 247
 248
 249     element1.before(toret);
 250
 251     nodesToWrap.forEach(function(node) {
 252         node.remove();
 253         list.append(node);
 254     });
 255 };
 256
 257 Canvas.prototype.listRemove = function(options) {
 258     var pointerElement = $(this.content.find('#' + options.pointer.getId()));
 259     var listElement = options.pointer.isOfClass('list-items') ? pointerElement :
 260         pointerElement.parents('[wlxml-class|="list-items"][wlxml-tag]');
 261
 262     var nested = false,
 263         nestedLists;
 264     if(listElement.length > 1) {
 265         listElement = $(listElement[0]);
 266         nested = true;
 267     }
 268
 269     if(nested) {
 270         // We are only moving one level up
 271         listElement.unwrap();
 272     } else {
 273         // We are removing the whole list
 274         nestedLists = listElement.find('[wlxml-class=item] > [wlxml-class|=list-items]');
 275         nestedLists.unwrap();
 276         listElement.find('[wlxml-class=item]').each(function() {
 277             $(this).removeAttr('wlxml-class');
 278         });
 279     }
 280
 281     listElement.children().unwrap();
 282
 283     var c = this;
 284     if(nestedLists) {
 285         nestedLists.each(function() {
 286             c.listRemove({pointer: canvasNode.create($(this))});
 287         });
 288     }
 289 };
 290
 291 Canvas.prototype.getPrecedingNode = function(options) {
 292     var element = $(this.content.find('#' + options.node.getId()).get(0));
 293     var prev = element.prev();
 294     if(prev.length === 0)
 295         prev = element.parent();
 296     return canvasNode.create(prev);
 297 };
 298
 299 Canvas.prototype.nodeInsideList = function(options) {
 300     if(options.node) {
 301         if(options.node.isOfClass('list-items') || options.node.isOfClass('item'))
 302             return true;
 303         var pointerElement = $(this.content.find('#' + options.node.getId()));
 304         return pointerElement.parents('[wlxml-class=list-items], [wlxml-class=item]').length > 0;
 305     }
 306     return false;
 307 };
 308
 309
 310 return {
 311     create: function(desc) { return new Canvas(desc); }
 312 };
 313
 314 });