From: Aleksander Łukasz Date: Tue, 21 Jan 2014 10:03:28 +0000 (+0100) Subject: editor: first approach to supplementing comments with user and date metadata X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/d1effc78cd6e71573f29f7901c598cabc3c2aaf8?ds=sidebyside editor: first approach to supplementing comments with user and date metadata --- diff --git a/src/editor/modules/documentCanvas/canvas/widgets.js b/src/editor/modules/documentCanvas/canvas/widgets.js index 77dd0fd..aecb199 100644 --- a/src/editor/modules/documentCanvas/canvas/widgets.js +++ b/src/editor/modules/documentCanvas/canvas/widgets.js @@ -34,6 +34,30 @@ return { clickHandler(); }); return mydom; + }, + + commentAdnotation: function(node) { + var widget = { + DOM: $('
').addClass('canvas-widget canvas-widget-comment-adnotation'), + update: function(node) { + var parts = [], + metadata = node.getMetadata(), + dt; + metadata.forEach(function(row) { + parts.push(row.getValue()); + }, 'creator'); + metadata.some(function(row) { + dt = row.getValue(); + return true; // break + }, 'date'); + if(dt) { + parts.push(dt); + } + this.DOM.text(parts.join(', ')); + } + }; + widget.update(node); + return widget; } }; diff --git a/src/editor/modules/documentCanvas/canvas/widgets.less b/src/editor/modules/documentCanvas/canvas/widgets.less index 0f43c89..442af99 100644 --- a/src/editor/modules/documentCanvas/canvas/widgets.less +++ b/src/editor/modules/documentCanvas/canvas/widgets.less @@ -57,4 +57,13 @@ border-radius: 1px; cursor: pointer; } + + .canvas-widget-comment-adnotation { + position:absolute; + top: 10px; + right:10px; + font-size: 10px; + color: lighten(@black, 10%); + z-index:1000; + } } \ No newline at end of file diff --git a/src/editor/modules/documentCanvas/canvas/wlxmlListener.js b/src/editor/modules/documentCanvas/canvas/wlxmlListener.js index ae1cee1..0b23021 100644 --- a/src/editor/modules/documentCanvas/canvas/wlxmlListener.js +++ b/src/editor/modules/documentCanvas/canvas/wlxmlListener.js @@ -29,6 +29,12 @@ $.extend(Listener.prototype, { } }); + +var _metadataEventHandler = function(event) { + var canvasNode = utils.findCanvasElement(event.meta.node); + canvasNode.exec('updateMetadata'); +}; + var handlers = { nodeAttrChange: function(event) { if(event.meta.attr === 'class') { @@ -78,7 +84,11 @@ var handlers = { if(toSet !== canvasElement.getText()) { canvasElement.setText(toSet); } - } + }, + + metadataChanged: _metadataEventHandler, + metadataAdded: _metadataEventHandler, + metadataRemoved: _metadataEventHandler }; return { diff --git a/src/editor/modules/documentCanvas/canvas/wlxmlManagers.js b/src/editor/modules/documentCanvas/canvas/wlxmlManagers.js index 27b4605..1078218 100644 --- a/src/editor/modules/documentCanvas/canvas/wlxmlManagers.js +++ b/src/editor/modules/documentCanvas/canvas/wlxmlManagers.js @@ -11,7 +11,7 @@ var DocumentElementWrapper = function(documentElement) { this.documentElement = documentElement; this.addWidget = function(widget) { - documentElement.dom().children('.canvas-widgets').append(widget); + documentElement.dom().children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget); }; this.clearWidgets = function() { @@ -41,6 +41,8 @@ var DocumentElementWrapper = function(documentElement) { eventBus.trigger.apply(eventBus, arguments); }; + this.node = documentElement.data('wlxmlNode'); + }; var getDisplayStyle = function(tag, klass) { @@ -142,6 +144,31 @@ $.extend(ListItemManager.prototype, { }); managers.set('div', 'item', ListItemManager); + +var CommentManager = function(wlxmlElement) { + this.el = wlxmlElement; +}; + +$.extend(CommentManager.prototype, { + setup: function() { + this.el.clearWidgets(); + this.el.addWidget(widgets.labelWidget(this.el.tag(), this.el.klass())); + + this.widget = widgets.commentAdnotation(this.el.node); + this.el.addWidget(this.widget); + this.widget.DOM.show(); + }, + updateMetadata: function() { + // var parts = []; + // this.el.node.getMetadata().forEach(function(row) { + // parts.push(row.getValue()); + // }, 'creator'); + // this.widget.text(parts.join(', ')); + this.widget.update(this.el.node); + } +}); +managers.set('aside', 'comment', CommentManager); + return { getFor: function(documentElement) { var wlxmlElement = new DocumentElementWrapper(documentElement); diff --git a/src/editor/modules/documentCanvas/commands.js b/src/editor/modules/documentCanvas/commands.js index 2bd77c0..8ceba63 100644 --- a/src/editor/modules/documentCanvas/commands.js +++ b/src/editor/modules/documentCanvas/commands.js @@ -14,8 +14,8 @@ var commands = { this._cmds[name] = command; }, - run: function(name, params, canvas) { - return this._cmds[name](canvas, params); + run: function(name, params, canvas, user) { + return this._cmds[name](canvas, params, user); } }; @@ -101,19 +101,61 @@ commands.register('toggle-grid', function(canvas, params) { gridToggled = params.toggle; }); -commands.register('newNodeRequested', function(canvas, params) { +commands.register('newNodeRequested', function(canvas, params, user) { var cursor = canvas.getCursor(), selectionStart = cursor.getSelectionStart(), selectionEnd = cursor.getSelectionEnd(), wlxmlNode, caretTo, wrapper, wrapperCanvasElement; + var insertNode = function(insertion) { + var doc = canvas.wlxmlDocument, + node, metadata, creator, currentDate, dt; + + var pad = function(number) { + if(number < 10) { + number = '0' + number; + } + return number; + }; + + doc.startTransaction(); + node = insertion(); + if(node.getTagName() === 'aside' && node.getClass() === 'comment') { + if(user) { + creator = user.name; + if(user.email) { + creator += ' (' + user.email + ')'; + } + } else { + creator = 'anonymous'; + } + + currentDate = new Date(); + dt = pad(currentDate.getDate()) + '-' + + pad((currentDate.getMonth() + 1)) + '-' + + pad(currentDate.getFullYear()) + ' ' + + pad(currentDate.getHours()) + ':' + + pad(currentDate.getMinutes()) + ':' + + pad(currentDate.getSeconds()); + + metadata = node.getMetadata(); + metadata.add({key: 'creator', value: creator}); + metadata.add({key: 'date', value: dt}); + } + doc.endTransaction(); + return node; + }; + + if(cursor.isSelecting()) { if(cursor.isSelectingSiblings()) { if(cursor.isSelectingWithinElement()) { wlxmlNode = selectionStart.element.data('wlxmlNode'); caretTo = selectionStart.offset < selectionEnd.offset ? 'start' : 'end'; - wrapper = wlxmlNode.wrapWith({tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}, start: selectionStart.offset, end: selectionEnd.offset}); + wrapper = insertNode(function() { + return wlxmlNode.wrapWith({tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}, start: selectionStart.offset, end: selectionEnd.offset}); + }); wrapperCanvasElement = utils.findCanvasElement(wrapper); canvas.setCurrentElement(wrapperCanvasElement.children()[0], {caretTo: caretTo}); } @@ -121,11 +163,13 @@ commands.register('newNodeRequested', function(canvas, params) { wlxmlNode = selectionStart.element.data('wlxmlNode').parent(); caretTo = selectionStart.element.sameNode(cursor.getSelectionAnchor().element) ? 'end' : 'start'; - wrapper = wlxmlNode.wrapText({ - _with: {tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}}, - offsetStart: selectionStart.offset, - offsetEnd: selectionEnd.offset, - textNodeIdx: [wlxmlNode.indexOf(selectionStart.element.data('wlxmlNode')), wlxmlNode.indexOf(selectionEnd.element.data('wlxmlNode'))] //parent.childIndex(selectionEnd.element)] + wrapper = insertNode(function() { + return wlxmlNode.wrapText({ + _with: {tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}}, + offsetStart: selectionStart.offset, + offsetEnd: selectionEnd.offset, + textNodeIdx: [wlxmlNode.indexOf(selectionStart.element.data('wlxmlNode')), wlxmlNode.indexOf(selectionEnd.element.data('wlxmlNode'))] //parent.childIndex(selectionEnd.element)] + }); }); wrapperCanvasElement = utils.findCanvasElement(wrapper); canvas.setCurrentElement(wrapperCanvasElement.children()[caretTo === 0 ? 0 : wrapperCanvasElement.children().length - 1], {caretTo: caretTo}); @@ -136,17 +180,22 @@ commands.register('newNodeRequested', function(canvas, params) { siblingParents = canvas.wlxmlDocument.getSiblingParents({node1: node1, node2: node2}); if(siblingParents) { - canvas.wlxmlDocument.wrapNodes({ - node1: siblingParents.node1, - node2: siblingParents.node2, - _with: {tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}} + insertNode(function() { + return canvas.wlxmlDocument.wrapNodes({ + node1: siblingParents.node1, + node2: siblingParents.node2, + _with: {tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}} + }); }); } } } else if(canvas.getCurrentNodeElement()) { wlxmlNode = canvas.getCurrentNodeElement().data('wlxmlNode'); - wrapper = wlxmlNode.wrapWith({tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}}); + wrapper = insertNode(function() { + return wlxmlNode.wrapWith({tagName: params.wlxmlTag, attrs: {'class': params.wlxmlClass}}); + }); canvas.setCurrentElement(utils.findCanvasElement(wrapper)); + } @@ -201,8 +250,8 @@ commands.register('take-away-node', function(canvas) { return { - run: function(name, params, canvas) { - return commands.run(name, params, canvas); + run: function(name, params, canvas, user) { + return commands.run(name, params, canvas, user); } }; diff --git a/src/editor/modules/documentCanvas/documentCanvas.js b/src/editor/modules/documentCanvas/documentCanvas.js index aa38e79..fff7996 100644 --- a/src/editor/modules/documentCanvas/documentCanvas.js +++ b/src/editor/modules/documentCanvas/documentCanvas.js @@ -61,7 +61,7 @@ return function(sandbox) { canvas.setCurrentElement(node); }, command: function(command, params) { - commands.run(command, params, canvas); + commands.run(command, params, canvas, sandbox.getConfig().user); sandbox.publish('contentChanged'); } }; diff --git a/src/editor/modules/documentCanvas/nodes.less b/src/editor/modules/documentCanvas/nodes.less index b6335a8..7bae063 100644 --- a/src/editor/modules/documentCanvas/nodes.less +++ b/src/editor/modules/documentCanvas/nodes.less @@ -60,7 +60,7 @@ background-color: #96e0e4; border: 1px solid black; border-radius: 10px; - padding: 10px; + padding: 20px 10px 10px 10px; } [wlxml-class|="link"] {