X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/efe36f4f1b5df351eeb4d40a54c3900cf9a7079b..eb86c626833db66e9ac6dc29d14f291c10ec981e:/src/editor/modules/documentCanvas/canvas/canvas.js?ds=inline diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index d8db2bc..ebede40 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -2,354 +2,439 @@ define([ 'libs/jquery', 'libs/underscore', 'libs/backbone', +'fnpjs/logging/logging', +'views/menu/menu', 'modules/documentCanvas/canvas/documentElement', 'modules/documentCanvas/canvas/keyboard', -'modules/documentCanvas/canvas/utils' -], function($, _, Backbone, documentElement, keyboard, utils) { - +'modules/documentCanvas/canvas/utils', +'modules/documentCanvas/canvas/wlxmlListener', +'modules/documentCanvas/canvas/elementsRegister', +'modules/documentCanvas/canvas/genericElement', +'modules/documentCanvas/canvas/nullElement', +'modules/documentCanvas/canvas/gutter', +'modules/documentCanvas/canvas/selection', +'modules/documentCanvas/canvas/keyEvent', +'libs/text!./canvas.html' +], function($, _, Backbone, logging, Menu, documentElement, keyboard, utils, wlxmlListener, ElementsRegister, genericElement, nullElement, gutter, selection, keyEvent, canvasTemplate) { + 'use strict'; +/* global document:false, window:false, Node:false, gettext */ + +var logger = logging.getLogger('canvas'); + +var TextHandler = function(canvas) {this.canvas = canvas; this.buffer = null;}; +$.extend(TextHandler.prototype, { + handle: function(node, 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); + // } + }, + _ping: _.throttle(function(text) { + this.buffer = text; + this.flush(); + }, 1000), + flush: function() { + if(this.buffer !== null) { + this.setText(this.buffer, this.node); + this.buffer = null; + } + }, + setText: function(text, node) { + //this.canvas.wlxmlDocument.transform('setText', {node:node, text: text}); + node.document.transaction(function() { + node.setText(text); + }, { + metadata:{ + description: gettext('Changing text') + } + }); + + } + +}); + -var Canvas = function(wlxml, publisher) { +var Canvas = function(wlxmlDocument, elements, metadata, sandbox) { + this.metadata = metadata || {}; + this.sandbox = sandbox; + this.elementsRegister = this.createElementsRegister(); + + elements = [ + {tag: 'section', klass: null, prototype: genericElement}, + {tag: 'div', klass: null, prototype: genericElement}, + {tag: 'header', klass: null, prototype: genericElement}, + {tag: 'span', klass: null, prototype: genericElement}, + {tag: 'aside', klass: null, prototype: genericElement} + ].concat(elements || []); + + (elements).forEach(function(elementDesc) { + this.elementsRegister.register(elementDesc); + }.bind(this)); this.eventBus = _.extend({}, Backbone.Events); - this.loadWlxml(wlxml); - this.publisher = publisher ? publisher : function() {}; + + this.dom = $(canvasTemplate); + this.rootWrapper = this.dom.find('.root-wrapper'); + + + this.gutter = gutter.create(); + this.gutterView = new gutter.GutterView(this.gutter); + this.dom.find('.view-row').append(this.gutterView.dom); + + this.wlxmlListener = wlxmlListener.create(this); + this.loadWlxmlDocument(wlxmlDocument); + this.setupEventHandling(); + this.textHandler = new TextHandler(this); }; -$.extend(Canvas.prototype, { - - loadWlxml: function(wlxml) { - var d = wlxml ? $($.trim(wlxml)) : null; - if(d) { - this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); - this.wrapper.append(d); - var canvas = this; - - this.wrapper.find('*').replaceWith(function() { - var currentTag = $(this); - if(currentTag.attr('wlxml-tag')) - return; - - var meta = {}, others = {}; - for(var i = 0; i < this.attributes.length; i++) { - var attr = this.attributes[i]; - if(attr.name.substr(0, 5) === 'meta-') - meta[attr.name.substr(5)] = attr.value; - else if(attr.name !== 'class') - others[attr.name] = attr.value; - } +$.extend(Canvas.prototype, Backbone.Events, { - var element = canvas.createNodeElement({ - tag: currentTag.prop('tagName').toLowerCase(), - klass: currentTag.attr('class'), - meta: meta, - others: others, - rawChildren: currentTag.contents(), - prepopulateOnEmpty: true - }); - - ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) { - element.data(attr, ''); - }); - return element.dom(); - }); + createElementType: function(elementPrototype) { + /* TODO: reconcile this with ElementsRegister behavior */ + var Constructor = function() { + documentElement.DocumentNodeElement.apply(this, Array.prototype.slice.call(arguments, 0)); + }; + Constructor.prototype = elementPrototype; + return Constructor; + }, + + getElementOffset: function(element) { + return element.dom.offset().top - this.dom.offset().top; + }, + + loadWlxmlDocument: function(wlxmlDocument) { + if(!wlxmlDocument) { + return false; + } - var FIRST_CONTENT_INDEX = 0; + this.wlxmlListener.listenTo(wlxmlDocument); + this.wlxmlDocument = wlxmlDocument; + this.reloadRoot(); + }, - // @@ TODO - refactor! - var getNode = function(element) { - return element.children('[document-element-content]'); + createElement: function(wlxmlNode, register, useRoot) { + var Factory; + register = register || this.elementsRegister; + if(wlxmlNode.nodeType === Node.TEXT_NODE) { + Factory = documentElement.DocumentTextElement; + } else { + Factory = register.getElement({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()}); + } + if(!Factory && useRoot) { + Factory = this.elementsRegister.getElement({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()}); + if(!Factory) { + Factory = documentElement.DocumentNodeElement; } + } - this.wrapper.find(':not(iframe)').addBack().contents() - .filter(function() {return this.nodeType === Node.TEXT_NODE}) - .each(function() { - - // TODO: use DocumentElement API - - var el = $(this), - text = {original: el.text(), trimmed: $.trim(el.text())}, - elParent = el.parent(), - hasSpanParent = elParent.attr('wlxml-tag') === 'span', - hasSpanBefore = el.prev().length > 0 && getNode($(el.prev()[0])).attr('wlxml-tag') === 'span', - hasSpanAfter = el.next().length > 0 && getNode($(el.next()[0])).attr('wlxml-tag') === 'span'; - - if(el.parent().hasClass('canvas-widget') || elParent.attr('document-text-element') !== undefined) - return true; // continue - - var addInfo = function(toAdd, where) { - var parentContents = elParent.contents(), - idx = parentContents.index(el[0]), - prev = idx > FIRST_CONTENT_INDEX ? parentContents[idx-1] : null, - next = idx < parentContents.length - 1 ? parentContents[idx+1] : null, - target, key; - - if(where === 'above') { - target = prev ? $(prev) : elParent.parent(); - key = prev ? 'orig-after' : 'orig-begin'; - } else if(where === 'below') { - target = next ? $(next) : elParent.parent(); - key = next ? 'orig-before' : 'orig-end'; - } else { throw new Object;} - - target.data(key, toAdd); - } + if(Factory) { + return new Factory(wlxmlNode, this); + } + }, - text.transformed = text.trimmed; - - if(hasSpanParent || hasSpanBefore || hasSpanAfter) { - var startSpace = /\s/g.test(text.original.substr(0,1)), - endSpace = /\s/g.test(text.original.substr(-1)) && text.original.length > 1; - text.transformed = (startSpace && (hasSpanParent || hasSpanBefore) ? ' ' : '') - + text.trimmed - + (endSpace && (hasSpanParent || hasSpanAfter) ? ' ' : ''); - } else { - if(text.trimmed.length === 0 && text.original.length > 0 && elParent.contents().length === 1) - text.transformed = ' '; - } + createElementsRegister: function() { + return new ElementsRegister(documentElement.DocumentNodeElement, nullElement); + }, - if(!text.transformed) { - addInfo(text.original, 'below'); - el.remove(); - return true; // continue - } + getDocumentElement: function(htmlElement) { + /* globals HTMLElement, Text */ + if(!htmlElement || !(htmlElement instanceof HTMLElement || htmlElement instanceof Text)) { + return null; + } + var $element = $(htmlElement); + if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined) { + return $element.data('canvas-element'); + } + + if(htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined) { + $element = $element.parent(); + } + + if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined)) { + //return DocumentTextElement.fromHTMLElement(htmlElement, canvas); + return $element.data('canvas-element'); + } + }, + + reloadRoot: function() { + if(this.rootElement) { + this.rootElement.detach(); + } + this.rootElement = this.createElement(this.wlxmlDocument.root); + this.rootWrapper.append(this.rootElement.dom); + }, - if(text.transformed !== text.original) { - if(!text.trimmed) { - addInfo(text.original, 'below'); - } else { - var startingMatch = text.original.match(/^\s+/g), - endingMatch = text.original.match(/\s+$/g), - startingWhiteSpace = startingMatch ? startingMatch[0] : null, - endingWhiteSpace = endingMatch ? endingMatch[0] : null; - - if(endingWhiteSpace) { - if(text.transformed[text.transformed.length - 1] === ' ' && endingWhiteSpace[0] === ' ') - endingWhiteSpace = endingWhiteSpace.substr(1); - addInfo(endingWhiteSpace, 'below'); - } - - if(startingWhiteSpace) { - if(text.transformed[0] === ' ' && startingWhiteSpace[startingWhiteSpace.length-1] === ' ') - startingWhiteSpace = startingWhiteSpace.substr(0, startingWhiteSpace.length -1); - addInfo(startingWhiteSpace, 'above'); - } + triggerKeyEvent: function(keyEvent, selection) { + selection = selection || this.getSelection(); + if(selection && (selection.type === 'caret' || selection.type === 'textSelection') && selection.toDocumentFragment().isValid()) { + keyboard.handleKeyEvent(keyEvent, selection); + } + }, + + createAction: function(fqName, config) { + return this.sandbox.createAction(fqName, config); + }, + + setupEventHandling: function() { + var canvas = this; + + /* globals document */ + $(document.body).on('keydown', function(e) { + canvas.triggerKeyEvent(keyEvent.fromNativeEvent(e)); + }); + + this.rootWrapper.on('mouseup', function() { + canvas.triggerSelectionChanged(); + }); + + var mouseDown; + this.rootWrapper.on('mousedown', '[document-node-element], [document-text-element]', function(e) { + mouseDown = e.target; + canvas.rootWrapper.find('[contenteditable]').attr('contenteditable', null); + }); + + this.rootWrapper.on('click', '[document-node-element], [document-text-element]', function(e) { + var position, element; + e.stopPropagation(); + if(e.originalEvent.detail === 3) { + e.preventDefault(); + canvas._moveCaretToTextElement(canvas.getDocumentElement(e.currentTarget), 'whole'); + } else { + if(mouseDown === e.target) { + element = canvas.getDocumentElement(e.target); + if(element && element.wlxmlNode.nodeType === Node.ELEMENT_NODE) { + if(element.getVerticallyFirstTextElement && !element.getVerticallyFirstTextElement({considerChildren: false})) { + canvas.setCurrentElement(element); + return; } } + if(window.getSelection().isCollapsed) { + position = utils.caretPositionFromPoint(e.clientX, e.clientY); + canvas.setCurrentElement(canvas.getDocumentElement(position.textNode), {caretTo: position.offset}); + } + } + } + }); - var element = documentElement.DocumentTextElement.create({text: text.transformed}); - el.replaceWith(element.dom()); - }); + this.rootWrapper.on('contextmenu', function(e) { + var el = canvas.getDocumentElement(e.target); - this.d = this.wrapper.children(0); + if(!el) { + return; + } - this.wrapper.on('keyup keydown keypress', function(e) { - keyboard.handleKey(e, this); - }.bind(this)); + e.preventDefault(); + this.showContextMenu(el, {x: e.clientX, y: e.clientY}); + }.bind(this)); - this.wrapper.on('click', '[document-node-element], [document-text-element]', function(e) { - e.stopPropagation(); - canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false}); - }); + this.rootWrapper.on('paste', function(e) { + e.preventDefault(); - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) { - observer.disconnect(); - 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'); - } - observer.observe(canvas.d[0], config); - canvas.publisher('contentChanged'); + 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(canvas.dom[0].contains(mutation.target) && documentElement.DocumentTextElement.isContentContainer(mutation.target)) { + observer.disconnect(); + if(mutation.target.data === '') { + mutation.target.data = utils.unicode.ZWS; } - }); - }); - var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true}; - observer.observe(this.d[0], config); - - - this.wrapper.on('mouseover', '[document-node-element], [document-text-element]', function(e) { - var el = canvas.getDocumentElement(e.currentTarget); - if(!el) - return; - e.stopPropagation(); - 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) - return; - e.stopPropagation(); - if(el instanceof documentElement.DocumentTextElement) - el = el.parent(); - el.toggleLabel(false); - }); + else if(mutation.oldValue === utils.unicode.ZWS) { + mutation.target.data = mutation.target.data.replace(utils.unicode.ZWS, ''); + canvas._moveCaretToTextElement(canvas.getDocumentElement(mutation.target), 'end'); + } + observer.observe(canvas.dom[0], config); - this.eventBus.on('elementToggled', function(toggle, element) { - if(!toggle) { - canvas.setCurrentElement(element.getPreviousTextElement()); + var textElement = canvas.getDocumentElement(mutation.target), + toSet = mutation.target.data !== utils.unicode.ZWS ? mutation.target.data : ''; + + //textElement.data('wlxmlNode').setText(toSet); + //textElement.data('wlxmlNode').document.transform('setText', {node: textElement.data('wlxmlNode'), text: toSet}); + if(textElement.wlxmlNode.getText() !== toSet) { + canvas.textHandler.handle(textElement.wlxmlNode, toSet); + } } - }) + }); + }); + var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true}; + observer.observe(this.rootWrapper[0], config); + + + var hoverHandler = function(e) { + var el = canvas.getDocumentElement(e.currentTarget), + expose = { + mouseover: true, + mouseout: false + }; + if(!el) { + return; + } + e.stopPropagation(); + if(el instanceof documentElement.DocumentTextElement) { + el = el.parent(); + } + el.updateState({exposed:expose[e.type]}); + }; - } else { - this.d = null; - } + this.rootWrapper.on('mouseover', '[document-node-element], [document-text-element]', hoverHandler); + this.rootWrapper.on('mouseout', '[document-node-element], [document-text-element]', hoverHandler); + + this.eventBus.on('elementToggled', function(toggle, element) { + if(!toggle) { + canvas.setCurrentElement(canvas.getPreviousTextElement(element)); + } + }); }, view: function() { - return this.wrapper; + return this.dom; }, doc: function() { - if(this.d === null) - return null; - return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')}; + return this.rootElement; }, - createNodeElement: function(params) { - return documentElement.DocumentNodeElement.create(params, this); + toggleElementHighlight: function(node, toggle) { + var element = utils.getElementForNode(node); + element.updateState({exposed: toggle}); }, - wrapText: function(params) { - params = _.extend({textNodeIdx: 0}, params); - if(typeof params.textNodeIdx === 'number') - params.textNodeIdx = [params.textNodeIdx]; - - var childrenInside = params.inside.children(), - idx1 = Math.min.apply(Math, params.textNodeIdx), - idx2 = Math.max.apply(Math, params.textNodeIdx), - textNode1 = childrenInside[idx1], - textNode2 = childrenInside[idx2], - sameNode = textNode1.sameNode(textNode2), - prefixOutside = textNode1.getText().substr(0, params.offsetStart), - prefixInside = textNode1.getText().substr(params.offsetStart), - suffixInside = textNode2.getText().substr(0, params.offsetEnd), - suffixOutside = textNode2.getText().substr(params.offsetEnd) - ; - - var wrapperElement = this.createNodeElement({tag: params._with.tag, klass: params._with.klass}); - textNode1.after(wrapperElement); - textNode1.detach(); - - if(prefixOutside.length > 0) - wrapperElement.before({text:prefixOutside}); - if(sameNode) { - var core = textNode1.getText().substr(params.offsetStart, params.offsetEnd - params.offsetStart); - wrapperElement.append({text: core}); - } else { - textNode2.detach(); - if(prefixInside.length > 0) - wrapperElement.append({text: prefixInside}); - for(var i = idx1 + 1; i < idx2; i++) { - wrapperElement.append(childrenInside[i]); - } - if(suffixInside.length > 0) - wrapperElement.append({text: suffixInside}); - } - if(suffixOutside.length > 0) - wrapperElement.after({text: suffixOutside}); - return wrapperElement; + getCursor: function() { + return new Cursor(this); }, - wrapElements: function(params) { - if(!(params.element1.parent().sameNode(params.element2.parent()))) - return; - - var parent = params.element1.parent(), - parentChildren = parent.children(), - wrapper = this.createNodeElement({ - tag: params._with.tag, - klass: params._with.klass}), - idx1 = parent.childIndex(params.element1), - idx2 = parent.childIndex(params.element2); - - if(idx1 > idx2) { - var tmp = idx1; - idx1 = idx2; - idx2 = tmp; - } + + getCurrentNodeElement: function() { + return this.currentNodeElement; + }, - var insertingMethod, insertingTarget; - if(idx1 === 0) { - insertingMethod = 'prepend'; - insertingTarget = parent; - } else { - insertingMethod = 'after'; - insertingTarget = parentChildren[idx1-1]; + getCurrentTextElement: function() { + var htmlElement = this.rootWrapper.find('.current-text-element')[0]; + if(htmlElement) { + return this.getDocumentElement(htmlElement); } + }, - for(var i = idx1; i <= idx2; i++) { - wrapper.append(parentChildren[i].detach()); - } + getPreviousTextElement: function(relativeToElement, includeInvisible) { + return this.getNearestTextElement('above', relativeToElement, includeInvisible); + }, - insertingTarget[insertingMethod](wrapper); - return wrapper; + getNextTextElement: function(relativeToElement, includeInvisible) { + return this.getNearestTextElement('below', relativeToElement, includeInvisible); }, - getSiblingParents: function(params) { - var parents1 = [params.element1].concat(params.element1.parents()).reverse(), - parents2 = [params.element2].concat(params.element2.parents()).reverse(), - noSiblingParents = null; + getNearestTextElement: function(direction, relativeToElement, includeInvisible) { + includeInvisible = includeInvisible !== undefined ? includeInvisible : false; + var selector = '[document-text-element]' + (includeInvisible ? '' : ':visible'); + return this.getDocumentElement(utils.nearestInDocumentOrder(selector, direction, relativeToElement.dom[0])); + }, - if(parents1.length === 0 || parents2.length === 0 || !(parents1[0].sameNode(parents2[0]))) - return noSiblingParents; + contains: function(element) { + return element && element.dom && element.dom.parents().index(this.rootWrapper) !== -1; + }, - var i; - for(i = 0; i < Math.min(parents1.length, parents2.length); i++) { - if(parents1[i].sameNode(parents2[i])) - continue; - break; + triggerSelectionChanged: function() { + var s = this.getSelection(), + f; + if(!s) { + return; } - return {element1: parents1[i], element2: parents2[i]}; - }, + this.trigger('selectionChanged', s); + f = s.toDocumentFragment(); - getDocumentElement: function(from) { - if(from instanceof HTMLElement || from instanceof Text) { - return documentElement.DocumentElement.fromHTMLElement(from, this); + if(f && f instanceof f.RangeFragment) { + if(this.currentNodeElement) { + this.currentNodeElement.updateState({active: false}); + this.currentNodeElement = null; + } } }, - getCursor: function() { - return new Cursor(this); + + getSelection: function() { + return selection.fromNativeSelection(this); }, - list: {}, + select: function(fragment) { + if(fragment instanceof this.wlxmlDocument.RangeFragment) { + this.setCurrentElement(fragment.endNode, {caretTo: fragment.endOffset}); + } else if(fragment instanceof this.wlxmlDocument.NodeFragment) { + var params = { + caretTo: fragment instanceof this.wlxmlDocument.CaretFragment ? fragment.offset : 'start' + }; + this.setCurrentElement(fragment.node, params); + } else { + logger.debug('Fragment not supported'); + } + }, - - getCurrentNodeElement: function() { - return this.getDocumentElement(this.wrapper.find('.current-node-element').parent()[0]); + setSelection: function(selection) { + this.select(this, selection.toDocumentFragment()); }, - getCurrentTextElement: function() { - return this.getDocumentElement(this.wrapper.find('.current-text-element')[0]); + createSelection: function(params) { + return selection.fromParams(this, params); }, + setCurrentElement: function(element, params) { + if(!element) { + logger.debug('Invalid element passed to setCurrentElement: ' + element); + return; + } + if(!(element instanceof documentElement.DocumentElement)) { + element = utils.getElementForNode(element); + } + if(!element || !this.contains(element)) { + logger.warning('Cannot set current element: element doesn\'t exist on canvas'); + return; + } - setCurrentElement: function(element, params) { 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) - return children[i]; } - return null; + return _.isFunction(e.getVerticallyFirstTextElement) ? e.getVerticallyFirstTextElement({considerChildren: false}) : null; }.bind(this); var _markAsCurrent = function(element) { if(element instanceof documentElement.DocumentTextElement) { - this.wrapper.find('.current-text-element').removeClass('current-text-element'); - element.dom().addClass('current-text-element'); + this.rootWrapper.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') - element._container().addClass('current-node-element'); - this.publisher('currentElementChanged', element); + if(this.currentNodeElement) { + this.currentNodeElement.updateState({active: false}); + } + element.updateState({active: true}); + this.currentNodeElement = element; } }.bind(this); @@ -360,198 +445,91 @@ $.extend(Canvas.prototype, { currentTextElement = this.getCurrentTextElement(), currentNodeElement = this.getCurrentNodeElement(); - if(currentTextElement && !(currentTextElement.sameNode(textElementToLand))) - this.wrapper.find('.current-text-element').removeClass('current-text-element'); + if(currentTextElement && !(currentTextElement.sameNode(textElementToLand))) { + this.rootWrapper.find('.current-text-element').removeClass('current-text-element'); + } if(textElementToLand) { _markAsCurrent(textElementToLand); - if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element)) + if((params.caretTo || params.caretTo === 0) || !textElementToLand.sameNode(this.getCursor().getPosition().element)) { this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element? - if(!(textElementToLand.sameNode(currentTextElement))) - this.publisher('currentTextElementSet', textElementToLand); + } } else { document.getSelection().removeAllRanges(); } if(!(currentNodeElement && currentNodeElement.sameNode(nodeElementToLand))) { _markAsCurrent(nodeElementToLand); - - this.publisher('currentNodeElementSet', nodeElementToLand); } + this.triggerSelectionChanged(); }, _moveCaretToTextElement: function(element, where) { var range = document.createRange(), - node = element.dom().contents()[0]; + node = element.dom.contents()[0]; if(typeof where !== 'number') { range.selectNodeContents(node); } else { - range.setStart(node, where); + range.setStart(node, Math.min(node.data.length, where)); } - var collapseArg = true; - if(where === 'end') - collapseArg = false; - range.collapse(collapseArg); - + if(where !== 'whole') { + var collapseArg = true; + if(where === 'end') { + collapseArg = false; + } + range.collapse(collapseArg); + } var selection = document.getSelection(); + $(node).parent().attr('contenteditable', true); selection.removeAllRanges(); selection.addRange(range); - this.wrapper.focus(); // FF requires this for caret to be put where range colllapses, Chrome doesn't. + $(node).parent().focus(); // FF requires this for caret to be put where range colllapses, Chrome doesn't. }, setCursorPosition: function(position) { - if(position.element) + if(position.element) { this._moveCaretToTextElement(position.element, position.offset); - }, - - toXML: function() { - var parent = $('
'), - parts = this.doc().toXML(0); - parent.append(parts); - return parent.html(); - } -}); - -$.extend(Canvas.prototype.list, { - create: function(params) { - if(!(params.element1.parent().sameNode(params.element2.parent()))) - return false; - - var parent = params.element1.parent(), - canvas = params.element1.canvas; - - if(parent.childIndex(params.element1) > parent.childIndex(params.element2)) { - var tmp = params.element1; - params.element1 = params.element2; - params.element2 = tmp; } - - var elementsToWrap = []; - - var place = 'before'; - parent.children().some(function(element) { - var _e = element; - if(element.sameNode(params.element1)) - place = 'inside'; - if(place === 'inside') { - if(element instanceof documentElement.DocumentTextElement) { - element = element.wrapWithNodeElement({tag: 'div', klass: 'list.item'}); - if(element.children()[0].sameNode(params.element1)) - params.element1 = element; - } - element.setWlxmlClass('item'); - elementsToWrap.push(element); - } - if(_e.sameNode(params.element2)) - return true; - }); - - var listElement = canvas.createNodeElement({tag: 'div', klass: 'list-items' + (params.type === 'enum' ? '-enum' : '')}); - var toret; - if(parent.is('list')) { - var item = listElement.wrapWithNodeElement({tag: 'div', klass: 'item'}); - item.exec('toggleBullet', false); - toret = listElement.parent(); - } else { - toret = listElement; - } - - params.element1.before(toret); - - elementsToWrap.forEach(function(element) { - element.detach(); - listElement.append(element); - }); }, - extractItems: function(params) { - params = _.extend({merge: true}, params); - var list = params.element1.parent(); - if(!list.is('list') || !(list.sameNode(params.element2.parent()))) - return false; + showContextMenu: function(element, coors) { + var menu = new Menu(); - var idx1 = list.childIndex(params.element1), - idx2 = list.childIndex(params.element2), - precedingItems = [], - extractedItems = [], - succeedingItems = [], - items = list.children(), - listIsNested = list.parent().getWlxmlClass() === 'item', - canvas = params.element1.canvas, - i; - - if(idx1 > idx2) { - var tmp = idx1; idx1 = idx2; idx2 = tmp; + while(element) { + (element.contextMenuActions || []).forEach(menu.addAction.bind(menu)); + element = element.parent(); } - - items.forEach(function(item, idx) { - if(idx < idx1) - precedingItems.push(item); - else if(idx >= idx1 && idx <= idx2) { - extractedItems.push(item); - } - else { - succeedingItems.push(item); - } - }); - - var reference = listIsNested ? list.parent() : list; - if(succeedingItems.length === 0) { - var reference_orig = reference; - extractedItems.forEach(function(item) { - reference.after(item); - reference = item; - if(!listIsNested) - item.setWlxmlClass(null); - }); - if(precedingItems.length === 0) - reference_orig.detach(); - } else if(precedingItems.length === 0) { - extractedItems.forEach(function(item) { - reference.before(item); - if(!listIsNested) - item.setWlxmlClass(null); - }); - } else { - extractedItems.forEach(function(item) { - reference.after(item); - if(!listIsNested) - item.setWlxmlClass(null); - reference = item; - }); - var secondList = canvas.createNodeElement({tag: 'div', klass:'list-items'}), - toAdd = secondList; - - if(listIsNested) { - toAdd = secondList.wrapWithNodeElement({tag: 'div', klass:'item'}); - } - succeedingItems.forEach(function(item) { - secondList.append(item); - }); - - reference.after(toAdd); - } - if(!params.merge && listIsNested) { - return this.extractItems({element1: extractedItems[0], element2: extractedItems[extractedItems.length-1]}); + if(menu.actions.length) { + menu.updateContextParam('fragment', this.getSelection().toDocumentFragment()); + this.sandbox.showContextMenu(menu, {x: coors.x, y: coors.y}); } - return true; - }, - areItemsOfTheSameList: function(params) { - var e1 = params.element1, - e2 = params.element2; - return e1.parent().sameNode(e2.parent()) - && e1.parent().is('list'); } }); var Cursor = function(canvas) { this.canvas = canvas; + this.selection = window.getSelection(); }; $.extend(Cursor.prototype, { + sameAs: function(other) { + var same = true; + if(!other) { + return false; + } + + ['focusNode', 'focusOffset', 'anchorNode', 'anchorOffset'].some(function(prop) { + same = same && this.selection[prop] === other.selection[prop]; + if(!same) { + return true; // break + } + }.bind(this)); + + return same; + }, isSelecting: function() { var selection = window.getSelection(); return !selection.isCollapsed; @@ -559,6 +537,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()); }, @@ -578,79 +559,85 @@ $.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 { element: anchorElement, offset: selection.anchorOffset, - offsetAtBeginning: selection.anchorOffset === 0, - offsetAtEnd: selection.anchorNode.data.length === selection.anchorOffset + offsetAtBeginning: selection.anchorOffset === 0 || anchorElement.getText() === '', + offsetAtEnd: selection.anchorNode.data.length === selection.anchorOffset || anchorElement.getText() === '' }; } if(which === 'focus') { return { element: focusElement, offset: selection.focusOffset, - offsetAtBeginning: selection.focusOffset === 0, - offsetAtEnd: selection.focusNode.data.length === selection.focusOffset + offsetAtBeginning: selection.focusOffset === 0 || focusElement.getText() === '', + offsetAtEnd: selection.focusNode.data.length === selection.focusOffset || focusElement.getText() === '', }; } - 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.getFirst(anchorElement, focusElement) === anchorElement); } + 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 || focusElement.getText() === '', + offsetAtEnd: nodeLen === placeData.offset || focusElement.getText() === '' + }; } -}) +}); return { - fromXML: function(xml, publisher) { - return new Canvas(xml, publisher); + fromXMLDocument: function(wlxmlDocument, elements, metadata, sandbox) { + return new Canvas(wlxmlDocument, elements, metadata, sandbox); } };