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 (file)
--- 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: $('<div>').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 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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 (file)
--- 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"] {