X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/252d70d691c5e524dd13bdc1060395bafcde07cc..67d116b3f6f2b4a62f31433bd7b3cb85ecc0c171:/src/editor/modules/documentCanvas/canvas/canvas.js diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index 752b947..70c0f49 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -9,30 +9,31 @@ define([ ], function($, _, Backbone, documentElement, keyboard, utils, wlxmlListener) { 'use strict'; +/* global document:false, window:false, Node:false */ -var TextHandler = function(canvas) {this.canvas = canvas; this.buffer = null}; + +var TextHandler = function(canvas) {this.canvas = canvas; this.buffer = null;}; $.extend(TextHandler.prototype, { handle: function(node, text) { - //console.log('canvas text handler: ' + text); this.setText(text, node); - return; - if(!this.node) { - this.node = node; - } - if(this.node.sameNode(node)) { - this._ping(text); - } else { - this.flush(); - this.node = node; - this._ping(text); - } + // return; + // if(!this.node) { + // this.node = node; + // } + // if(this.node.sameNode(node)) { + // this._ping(text); + // } else { + // this.flush(); + // this.node = node; + // this._ping(text); + // } }, _ping: _.throttle(function(text) { this.buffer = text; this.flush(); }, 1000), flush: function() { - if(this.buffer != null) { + if(this.buffer !== null) { this.setText(this.buffer, this.node); this.buffer = null; } @@ -51,6 +52,7 @@ var Canvas = function(wlxmlDocument, publisher) { this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); this.wlxmlListener = wlxmlListener.create(this); this.loadWlxmlDocument(wlxmlDocument); + this.setupEventHandling(); this.publisher = publisher ? publisher : function() {}; this.textHandler = new TextHandler(this); }; @@ -65,7 +67,6 @@ $.extend(Canvas.prototype, { this.wlxmlListener.listenTo(wlxmlDocument); this.wlxmlDocument = wlxmlDocument; this.reloadRoot(); - this.setupEventHandling(); }, reloadRoot: function() { @@ -93,14 +94,38 @@ $.extend(Canvas.prototype, { canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false}); }); + this.wrapper.on('paste', function(e) { + e.preventDefault(); + var clipboardData = e.originalEvent.clipboardData; + if(!clipboardData || !clipboardData.getData) { + return; // TODO: alert + } + + var text = clipboardData.getData('text/plain').replace(/\r?\n|\r/g, ' '), + cursor = canvas.getCursor(), + element = cursor.getPosition().element, + lhs, rhs; + + if(element && cursor.isWithinElement()) { + lhs = element.getText().substr(0, cursor.getSelectionStart().offset); + rhs = element.getText().substr(cursor.getSelectionEnd().offset); + element.setText(lhs+text+rhs); + canvas.setCurrentElement(element, {caretTo: lhs.length + text.length}); + } else { + /* jshint noempty:false */ + // TODO: alert + } + }); + /* globals MutationObserver */ var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) { observer.disconnect(); - if(mutation.target.data === '') + if(mutation.target.data === '') { mutation.target.data = utils.unicode.ZWS; + } else if(mutation.oldValue === utils.unicode.ZWS) { mutation.target.data = mutation.target.data.replace(utils.unicode.ZWS, ''); canvas._moveCaretToTextElement(canvas.getDocumentElement(mutation.target), 'end'); @@ -113,7 +138,7 @@ $.extend(Canvas.prototype, { //textElement.data('wlxmlNode').setText(toSet); //textElement.data('wlxmlNode').document.transform('setText', {node: textElement.data('wlxmlNode'), text: toSet}); - if(textElement.data('wlxmlNode').getText() != toSet) { + if(textElement.data('wlxmlNode').getText() !== toSet) { canvas.textHandler.handle(textElement.data('wlxmlNode'), toSet); } } @@ -125,20 +150,24 @@ $.extend(Canvas.prototype, { this.wrapper.on('mouseover', '[document-node-element], [document-text-element]', function(e) { var el = canvas.getDocumentElement(e.currentTarget); - if(!el) + if(!el) { return; + } e.stopPropagation(); - if(el instanceof documentElement.DocumentTextElement) + if(el instanceof documentElement.DocumentTextElement) { el = el.parent(); + } el.toggleLabel(true); }); this.wrapper.on('mouseout', '[document-node-element], [document-text-element]', function(e) { var el = canvas.getDocumentElement(e.currentTarget); - if(!el) + if(!el) { return; + } e.stopPropagation(); - if(el instanceof documentElement.DocumentTextElement) + if(el instanceof documentElement.DocumentTextElement) { el = el.parent(); + } el.toggleLabel(false); }); @@ -154,8 +183,9 @@ $.extend(Canvas.prototype, { }, doc: function() { - if(this.d === null) + if(this.d === null) { return null; + } return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')}; }, @@ -169,6 +199,7 @@ $.extend(Canvas.prototype, { }, getDocumentElement: function(from) { + /* globals HTMLElement, Text */ if(from instanceof HTMLElement || from instanceof Text) { return documentElement.DocumentElement.fromHTMLElement(from, this); } @@ -196,12 +227,14 @@ $.extend(Canvas.prototype, { params = _.extend({caretTo: 'end'}, params); var findFirstDirectTextChild = function(e, nodeToLand) { var byBrowser = this.getCursor().getPosition().element; - if(byBrowser && byBrowser.parent().sameNode(nodeToLand)) + if(byBrowser && byBrowser.parent().sameNode(nodeToLand)) { return byBrowser; + } var children = e.children(); for(var i = 0; i < children.length; i++) { - if(children[i] instanceof documentElement.DocumentTextElement) + if(children[i] instanceof documentElement.DocumentTextElement) { return children[i]; + } } return null; }.bind(this); @@ -210,7 +243,7 @@ $.extend(Canvas.prototype, { this.wrapper.find('.current-text-element').removeClass('current-text-element'); element.dom().addClass('current-text-element'); } else { - this.wrapper.find('.current-node-element').removeClass('current-node-element') + this.wrapper.find('.current-node-element').removeClass('current-node-element'); element._container().addClass('current-node-element'); this.publisher('currentElementChanged', element); } @@ -223,15 +256,18 @@ $.extend(Canvas.prototype, { currentTextElement = this.getCurrentTextElement(), currentNodeElement = this.getCurrentNodeElement(); - if(currentTextElement && !(currentTextElement.sameNode(textElementToLand))) + if(currentTextElement && !(currentTextElement.sameNode(textElementToLand))) { this.wrapper.find('.current-text-element').removeClass('current-text-element'); + } if(textElementToLand) { _markAsCurrent(textElementToLand); - if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element)) + if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element)) { this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element? - if(!(textElementToLand.sameNode(currentTextElement))) + } + if(!(textElementToLand.sameNode(currentTextElement))) { this.publisher('currentTextElementSet', textElementToLand.data('wlxmlNode')); + } } else { document.getSelection().removeAllRanges(); } @@ -254,8 +290,9 @@ $.extend(Canvas.prototype, { } var collapseArg = true; - if(where === 'end') + if(where === 'end') { collapseArg = false; + } range.collapse(collapseArg); var selection = document.getSelection(); @@ -266,8 +303,9 @@ $.extend(Canvas.prototype, { }, setCursorPosition: function(position) { - if(position.element) + if(position.element) { this._moveCaretToTextElement(position.element, position.offset); + } } }); @@ -284,6 +322,9 @@ $.extend(Cursor.prototype, { isSelectingWithinElement: function() { return this.isSelecting() && this.getSelectionStart().element.sameNode(this.getSelectionEnd().element); }, + isWithinElement: function() { + return !this.isSelecting() || this.isSelectingWithinElement(); + }, isSelectingSiblings: function() { return this.isSelecting() && this.getSelectionStart().element.parent().sameNode(this.getSelectionEnd().element.parent()); }, @@ -303,12 +344,14 @@ $.extend(Cursor.prototype, { return this.getSelectionBoundry('focus'); }, getSelectionBoundry: function(which) { + /* globals window */ var selection = window.getSelection(), anchorElement = this.canvas.getDocumentElement(selection.anchorNode), focusElement = this.canvas.getDocumentElement(selection.focusNode); - if((!anchorElement) || (anchorElement instanceof documentElement.DocumentNodeElement) || (!focusElement) || focusElement instanceof documentElement.DocumentNodeElement) + if((!anchorElement) || (anchorElement instanceof documentElement.DocumentNodeElement) || (!focusElement) || focusElement instanceof documentElement.DocumentNodeElement) { return {}; + } if(which === 'anchor') { return { @@ -327,51 +370,55 @@ $.extend(Cursor.prototype, { }; } - var element, - offset; - - if(anchorElement.parent().sameNode(focusElement.parent())) { - var parent = anchorElement.parent(), - anchorFirst = parent.childIndex(anchorElement) < parent.childIndex(focusElement); + var getPlaceData = function(anchorFirst) { + var element, offset; if(anchorFirst) { if(which === 'start') { element = anchorElement; - offset = selection.anchorOffset + offset = selection.anchorOffset; } else if(which === 'end') { - element = focusElement, - offset = selection.focusOffset + element = focusElement; + offset = selection.focusOffset; } } else { if(which === 'start') { - element = focusElement, - offset = selection.focusOffset + element = focusElement; + offset = selection.focusOffset; } else if(which === 'end') { element = anchorElement; - offset = selection.anchorOffset + offset = selection.anchorOffset; } } - } else { - // TODO: Handle order via https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition - if(which === 'start') { - element = anchorElement; - offset = selection.anchorOffset + return {element: element, offset: offset}; + }; + + var anchorFirst, placeData, parent; + + if(anchorElement.parent().sameNode(focusElement.parent())) { + parent = anchorElement.parent(); + if(selection.anchorNode === selection.focusNode) { + anchorFirst = selection.anchorOffset <= selection.focusOffset; } else { - element = focusElement; - offset = selection.focusOffset + anchorFirst = parent.childIndex(anchorElement) < parent.childIndex(focusElement); } + placeData = getPlaceData(anchorFirst); + } else { + /*jshint bitwise: false*/ + anchorFirst = selection.anchorNode.compareDocumentPosition(selection.focusNode) & Node.DOCUMENT_POSITION_FOLLOWING; + placeData = getPlaceData(anchorFirst); } - var nodeLen = (element.sameNode(focusElement) ? selection.focusNode : selection.anchorNode).length; + var nodeLen = (placeData.element.sameNode(focusElement) ? selection.focusNode : selection.anchorNode).length; return { - element: element, - offset: offset, - offsetAtBeginning: offset === 0, - offsetAtEnd: nodeLen === offset - } + element: placeData.element, + offset: placeData.offset, + offsetAtBeginning: placeData.offset === 0, + offsetAtEnd: nodeLen === placeData.offset + }; } -}) +}); return { fromXMLDocument: function(wlxmlDocument, publisher) {