X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/542ac5b2a68670e2c48bb1695a7eb52333ce5d20..88a280279a6df31138dd0ffa397ef7fe953b051d:/modules/documentCanvas/documentCanvas.js?ds=sidebyside
diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js
index 1b919ee..2fa8722 100644
--- a/modules/documentCanvas/documentCanvas.js
+++ b/modules/documentCanvas/documentCanvas.js
@@ -1,262 +1,68 @@
-// Module that implements main WYSIWIG edit area
-
-define([
-'libs/underscore-min',
-'./transformations',
-'./wlxmlNode',
-'libs/text!./template.html'], function(_, transformations, wlxmlNode, template) {
-
-
-
-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');
- });
-
- this.node.on('mouseover', '[wlxml-tag]', function(e) {
- e.stopPropagation();
- sandbox.publish('nodeHovered', new wlxmlNode.Node($(e.target)));
- });
- this.node.on('mouseout', '[wlxml-tag]', function(e) {
- e.stopPropagation();
- sandbox.publish('nodeBlured', new wlxmlNode.Node($(e.target)));
- });
- this.node.on('click', '[wlxml-tag]', function(e) {
- e.stopPropagation();
- console.log('clicked node type: '+e.target.nodeType);
- view.selectNode(new wlxmlNode.Node($(e.target)));
- });
-
- 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.selectNode(new wlxmlNode.Node(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)
- anchor = anchor.parent();
- if(anchor.text() === '') {
- var todel = anchor;
- anchor = anchor.parent();
- todel.remove();
- }
- if(anchorOffset > 0 && anchorOffset < anchor.text().length) {
- if(wlxmlTag === null && wlxmlClass === null) {
- return this.splitWithNewNode(anchor);
- }
- return this.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);
- }
- var newNode = this._createNode(wlxmlTag || anchor.attr('wlxml-tag'), wlxmlClass || anchor.attr('wlxml-class'));
- if(anchorOffset === 0)
- anchor.before(newNode)
- else
- anchor.after(newNode);
- this.selectNode(newNode);
- //isDirty = true;
- sandbox.publish('contentChanged');
- },
- wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {
- var selection = window.getSelection();
- if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
- var startOffset = selection.anchorOffset;
- var endOffset = selection.focusOffset;
- if(startOffset > endOffset) {
- var tmp = startOffset;
- startOffset = endOffset;
- endOffset = tmp;
- }
- var node = selection.anchorNode;
- var prefix = node.data.substr(0, startOffset);
- var suffix = node.data.substr(endOffset);
- var core = node.data.substr(startOffset, endOffset - startOffset);
- var newNode = this._createNode(wlxmlTag, wlxmlClass);
- newNode.text(core || 'test');
- $(node).replaceWith(newNode);
- newNode.before(prefix);
- newNode.after(suffix);
-
- this.selectNode(newNode);
- //isDirty = true;
- sandbox.publish('contentChanged');
- }
- },
- splitWithNewNode: function(node) {
- var selection = window.getSelection();
- if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
- var startOffset = selection.anchorOffset;
- var endOffset = selection.focusOffset;
- if(startOffset > endOffset) {
- var tmp = startOffset;
- startOffset = endOffset;
- endOffset = tmp;
- }
- var anchor = selection.anchorNode;
- var prefix = anchor.data.substr(0, startOffset);
- var suffix = anchor.data.substr(endOffset);
- var prefixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
- var newNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
- var suffixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
- prefixNode.text(prefix);
- suffixNode.text(suffix);
- node.replaceWith(newNode);
- newNode.before(prefixNode);
- newNode.after(suffixNode);
-
- this.selectNode(newNode);
- //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();
- },
- selectNode: function(node, options) {
- options = options || {};
- this.dimNode(node);
-
- this.node.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode');
- this.getNodeElement(node).addClass('rng-module-documentCanvas-currentNode');
- this.currentNode = node;
-
- if(options.doFocus) {
- var range = document.createRange();
- range.selectNodeContents(this.getNodeElement(node)[0]);
- range.collapse(false);
-
- var selection = document.getSelection();
- selection.removeAllRanges()
- selection.addRange(range);
- }
-
- sandbox.publish('nodeSelected', node);
- },
- highlightNode: function(node) {
- node = this.getNodeElement(node);
- if(!this.gridToggled) {
- node.addClass('rng-common-hoveredNode');
- var label = node.attr('wlxml-tag');
- if(node.attr('wlxml-class'))
- label += ' / ' + node.attr('wlxml-class');
- var tag = $('<div>').addClass('rng-module-documentCanvas-hoveredNodeTag').text(label);
- node.append(tag);
- }
- },
- dimNode: function(node) {
- node = this.getNodeElement(node);
- if(!this.gridToggled) {
- node.removeClass('rng-common-hoveredNode');
- node.find('.rng-module-documentCanvas-hoveredNodeTag').remove();
- }
- },
- 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(new wlxmlNode.Node(node));
- },
- toggleGrid: function(toggle) {
- this.node.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);
- this.gridToggled = toggle;
- },
- getNodeElement: function(wlxmlNode) {
- return this.node.find('#'+wlxmlNode.id);
- }
- };
-
- view.setup();
-
- /* public api */
- return {
- start: function() { sandbox.publish('ready'); },
- getView: function() { return view.node; },
- setDocument: function(xml) {
- var transformed = transformations.fromXML.getDocumentDescription(xml);
- view.setBody(transformed.HTMLTree);
- view.selectFirstNode();
- //isDirty = false;
- },
- modifyCurrentNode: function(attr, value) {
- if(view.currentNode)
- view.currentNode.attr('wlxml-'+attr, value);
- },
- highlightNode: function(wlxmlNode) {
- view.highlightNode(wlxmlNode);
- },
- dimNode: function(wlxmlNode) {
- view.dimNode(wlxmlNode);
- },
- selectNode: function(wlxmlNode) {
- view.selectNode(wlxmlNode, {doFocus: true});
- },
- toggleGrid: function(toggle) {
- view.toggleGrid(toggle);
- },
- insertNewNode: function(wlxmlTag, wlxmlClass) {
- view.insertNewNode(wlxmlTag, wlxmlClass);
- },
- wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {
- view.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);
- }
- }
-
-};
-
+// Module that implements main WYSIWIG edit area
+
+define([
+'libs/underscore-min',
+'./transformations',
+'./canvas',
+'./canvasManager',
+'libs/text!./template.html'], function(_, transformations, Canvas, CanvasManager, template) {
+
+'use strict';
+
+return function(sandbox) {
+
+ var canvas = Canvas.create();
+ var manager = new CanvasManager(canvas, sandbox);
+
+ /* public api */
+ return {
+ start: function() { sandbox.publish('ready'); },
+ getView: function() {
+ return canvas.dom;
+ },
+ setDocument: function(xml) {
+ canvas.setHTML(transformations.fromXML.getHTMLTree(xml));
+ sandbox.publish('documentSet');
+ },
+ getDocument: function() {
+ return transformations.toXML.getXML(canvas.getContent());
+ },
+ modifyCurrentNode: function(attr, value) {
+ if(manager.currentNode) {
+ if(attr === 'tag') {
+ manager.getNodeElement(manager.currentNode).attr('wlxml-'+attr, value);
+ }
+ else if(attr === 'class') {
+ manager.currentNode.setClass(value);
+ } else {
+ // changing node meta attr
+ manager.currentNode.setMetaAttr(attr, value);
+ }
+ sandbox.publish('contentChanged');
+ sandbox.publish('currentNodeChanged', manager.currentNode);
+ }
+ },
+ highlightNode: function(canvasNode) {
+ manager.highlightNode(canvasNode);
+ },
+ dimNode: function(canvasNode) {
+ manager.dimNode(canvasNode);
+ },
+ selectNode: function(canvasNode) {
+ if(!canvasNode.isSame(manager.currentNode))
+ manager.selectNode(canvasNode, {movecaret: true});
+ },
+ toggleGrid: function(toggle) {
+ manager.toggleGrid(toggle);
+ },
+ insertNewNode: function(wlxmlTag, wlxmlClass) {
+ manager.insertNewNode(wlxmlTag, wlxmlClass);
+ },
+ command: function(command, meta) {
+ manager.command(command, meta);
+ }
+ };
+
+};
+
});
\ No newline at end of file