X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/0214643f72c6aaa8e85eaba2ad27f2ca03ca6401..b554451bd332b417a9304fd60fafe116220a9ca4:/modules/documentCanvas/documentCanvas.js?ds=inline
diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js
index 7e7fdf0..6030703 100644
--- a/modules/documentCanvas/documentCanvas.js
+++ b/modules/documentCanvas/documentCanvas.js
@@ -3,85 +3,37 @@
define([
'libs/underscore-min',
'./transformations',
-'libs/text!./template.html'], function(_, transformations, template) {
-
+'./wlxmlNode',
+'./canvas',
+'./canvasManager',
+'libs/text!./template.html'], function(_, transformations, wlxmlNode, Canvas, CanvasManager, template) {
+'use strict';
return function(sandbox) {
- var view = {
- node: $(_.template(template)()),
- currentNode: null,
- setup: function() {
- var view = this;
-
- this.node.find('#rng-module-documentCanvas-content').on('keyup', function() {
- //isDirty = true;
- sandbox.publish('contentChanged');
- });
+ var canvas = new Canvas.Canvas();
+
+ var manager = new CanvasManager(canvas, sandbox);
+
- this.node.on('mouseover', '[wlxml-tag]', function(e) { sandbox.publish('nodeHovered', $(e.target)); });
- this.node.on('mouseout', '[wlxml-tag]', function(e) { sandbox.publish('nodeBlured', $(e.target)); });
- this.node.on('click', '[wlxml-tag]', function(e) {
- console.log('clicked node type: '+e.target.nodeType);
- view._markSelected($(e.target));
- });
+ var view = {
- this.node.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {
- var anchor = $(window.getSelection().anchorNode);
- if(anchor[0].nodeType === Node.TEXT_NODE)
- anchor = anchor.parent();
- if(!anchor.is('[wlxml-tag]'))
- return;
- view._markSelected(anchor);
- });
-
- this.node.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {
- if(e.which === 13) {
- e.preventDefault();
- view.insertNewNode(null, null);
- }
- });
-
-
- var observer = new MutationObserver(function(mutations) {
- mutations.forEach(function(mutation) {
- _.each(mutation.addedNodes, function(node) {
- node = $(node);
- node.parent().find('[wlxml-tag]').each(function() {
- tag = $(this);
- if(!tag.attr('id'))
- tag.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));
- });
- });
- });
- });
- var config = { attributes: true, childList: true, characterData: true, subtree: true };
- observer.observe(this.node.find('#rng-module-documentCanvas-contentWrapper')[0], config);
-
- this.gridToggled = false;
- },
- _createNode: function(wlxmlTag, wlxmlClass) {
- var toBlock = ['div', 'document', 'section', 'header'];
- var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';
- var toret = $('<' + htmlTag + '>');
- toret.attr('wlxml-tag', wlxmlTag);
- if(wlxmlClass)
- toret.attr('wlxml-class', wlxmlClass);
- return toret;
- },
insertNewNode: function(wlxmlTag, wlxmlClass) {
//TODO: Insert inline
var anchor = $(window.getSelection().anchorNode);
var anchorOffset = window.getSelection().anchorOffset;
- if(anchor[0].nodeType === Node.TEXT_NODE)
+ var textLen;
+ if(anchor[0].nodeType === Node.TEXT_NODE) {
+ textLen = anchor.text().length;
anchor = anchor.parent();
+ }
if(anchor.text() === '') {
var todel = anchor;
anchor = anchor.parent();
todel.remove();
}
- if(anchorOffset > 0 && anchorOffset < anchor.text().length) {
+ if(anchorOffset > 0 && anchorOffset < textLen) {
if(wlxmlTag === null && wlxmlClass === null) {
return this.splitWithNewNode(anchor);
}
@@ -92,7 +44,7 @@ return function(sandbox) {
anchor.before(newNode)
else
anchor.after(newNode);
- mediator.nodeCreated(newNode);
+ this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true});
//isDirty = true;
sandbox.publish('contentChanged');
},
@@ -115,7 +67,8 @@ return function(sandbox) {
$(node).replaceWith(newNode);
newNode.before(prefix);
newNode.after(suffix);
- mediator.nodeCreated(newNode);
+
+ this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true});
//isDirty = true;
sandbox.publish('contentChanged');
}
@@ -141,113 +94,54 @@ return function(sandbox) {
node.replaceWith(newNode);
newNode.before(prefixNode);
newNode.after(suffixNode);
- mediator.nodeCreated(newNode);
+
+ this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true});
//isDirty = true;
sandbox.publish('contentChanged');
}
- },
- setBody: function(HTMLTree) {
- this.node.find('#rng-module-documentCanvas-content').html(HTMLTree);
- },
- getBody: function() {
- return this.node.find('#rng-module-documentCanvas-content').html();
- },
- _markSelected: function(node) {
- this.dimNode(node);
-
- this.node.find('.rng-current').removeClass('rng-current');
-
- node.addClass('rng-current');
-
- this.currentNode = node;
- sandbox.publish('nodeSelected', node);
-
- },
- selectNode: function(node) {
- view._markSelected(node);
- var range = document.createRange();
- range.selectNodeContents(node[0]);
- range.collapse(false);
-
- var selection = document.getSelection();
- selection.removeAllRanges()
- selection.addRange(range);
- },
- selectNodeById: function(id) {
- var node = this.node.find('#'+id);
- if(node)
- this.selectNode(node);
- },
- highlightNode: function(node) {
- if(!this.gridToggled) {
- node.addClass('rng-hover');
- var label = node.attr('wlxml-tag');
- if(node.attr('wlxml-class'))
- label += ' / ' + node.attr('wlxml-class');
- var tag = $('<div>').addClass('rng-visualEditor-nodeHoverTag').text(label);
- node.append(tag);
- }
- },
- dimNode: function(node) {
- if(!this.gridToggled) {
- node.removeClass('rng-hover');
- node.find('.rng-visualEditor-nodeHoverTag').remove();
- }
- },
- highlightNodeById: function(id) {
- var node = this.node.find('#'+id);
- if(node)
- this.highlightNode(node);
- },
- dimNodeById: function(id) {
- var node = this.node.find('#'+id);
- if(node)
- this.dimNode(node);
- },
- selectFirstNode: function() {
- var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {
- return $(this).clone().children().remove().end().text().trim() !== '';
- }).first();
- var node;
- if(firstNodeWithText.length)
- node = $(firstNodeWithText[0])
- else {
- node = this.node.find('[wlxml-class|="p"]')
- }
- this.selectNode(node);
- },
- toggleGrid: function(toggle) {
- this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle);
- this.gridToggled = toggle;
}
+
};
- view.setup();
/* public api */
return {
start: function() { sandbox.publish('ready'); },
- getView: function() { return view.node; },
+ getView: function() {
+ return canvas.dom;
+ },
setDocument: function(xml) {
- var transformed = transformations.fromXML.getDocumentDescription(xml);
- view.setBody(transformed.HTMLTree);
- view.selectFirstNode();
- //isDirty = false;
+ canvas.setXML(xml);
+ sandbox.publish('documentSet');
+ },
+ getDocument: function() {
+ return canvas.toXML();
},
modifyCurrentNode: function(attr, value) {
- if(view.currentNode)
- view.currentNode.attr('wlxml-'+attr, value);
+ if(manager.currentNode) {
+ manager.getNodeElement(manager.currentNode).attr('wlxml-'+attr, value);
+ sandbox.publish('contentChanged');
+ }
},
- highlightNode: function(id) {
- view.highlightNodeById(id);
+ highlightNode: function(wlxmlNode) {
+ manager.highlightNode(wlxmlNode);
},
- dimNode: function(id) {
- view.dimNodeById(id);
+ dimNode: function(wlxmlNode) {
+ manager.dimNode(wlxmlNode);
},
- selectNode: function(id) {
- view.selectNodeById(id);
+ selectNode: function(wlxmlNode) {
+ if(!wlxmlNode.is(manager.currentNode))
+ manager.selectNode(wlxmlNode, {movecaret: true});
+ },
+ toggleGrid: function(toggle) {
+ manager.toggleGrid(toggle);
+ },
+ insertNewNode: function(wlxmlTag, wlxmlClass) {
+ manager.insertNewNode(wlxmlTag, wlxmlClass);
+ },
+ wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {
+ manager.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);
}
-
}
};