editor: canvas - move arrow navigation handling to selection api

[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / genericElement.js

diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js
index f115bd4..a769240 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/genericElement.js
+++ b/src/editor/modules/documentCanvas/canvas/genericElement.js
@@ -3,16 +3,11 @@ define(function(require) {
 'use strict';
 
 var $ = require('libs/jquery'),
 'use strict';
 
 var $ = require('libs/jquery'),

+    _ = require('libs/underscore'),

     documentElement = require('./documentElement'),
     utils = require('./utils'),
     documentElement = require('./documentElement'),
     utils = require('./utils'),

-    wlxmlUtils = require('utils/wlxml');
+    CommentsView = require('./comments/comments');

 
 

-var labelWidget = function(tag, klass) {
-    return $('<span>')
-        .addClass('canvas-widget canvas-widget-label')
-        .text(wlxmlUtils.getTagLabel(tag) + (klass ? ' / ' + wlxmlUtils.getClassLabel(klass) : ''));
-};
-void(labelWidget); // for linters; labelWidget is unused on purpose for now

 
 var DocumentNodeElement = documentElement.DocumentNodeElement;
 
 
 var DocumentNodeElement = documentElement.DocumentNodeElement;
 


@@ -22,11 +17,25 @@ $.extend(generic, {
     init: function() {
         DocumentNodeElement.prototype.init.call(this);
         this._container()
     init: function() {
         DocumentNodeElement.prototype.init.call(this);
         this._container()

-            .attr('wlxml-tag', this.wlxmlNode.getTagName());
-        this.setWlxmlClass(this.wlxmlNode.getClass());
+            .attr('wlxml-tag', this.wlxmlNode.getTagName())
+            .attr('wlxml-class', this.wlxmlNode.getClass().replace(/\./g, '-'));
+

         this.wlxmlNode.contents().forEach(function(node) {
         this.wlxmlNode.contents().forEach(function(node) {

-            this._container().append(this.canvas.createElement(node).dom);
+            var el = this.canvas.createElement(node);
+            if(el.dom) {
+                this._container().append(el.dom);
+            }

         }.bind(this));
         }.bind(this));

+
+        this.commentsView = new CommentsView(this.wlxmlNode, this.canvas.metadata.user);
+        this.addToGutter(this.commentsView);
+        this.commentTip = $('<div class="comment-tip"><i class="icon-comment"></i></div>');
+        this.addWidget(this.commentTip);
+
+        if(!this.wlxmlNode.hasChild({klass: 'comment'})) {
+            this.commentTip.hide();
+        }
+

         this.refresh();
     },
     
         this.refresh();
     },
     


@@ -65,13 +74,18 @@ $.extend(generic, {
         return toret;
     },
 
         return toret;
     },
 

-    getVerticallyFirstTextElement: function() {
+    getVerticallyFirstTextElement: function(params) {

         var toret;
         var toret;

+        
+        params = _.extend({
+            considerChildren: true
+        }, params);
+        

         this.children().some(function(child) {
             if(child instanceof documentElement.DocumentTextElement) {
                 toret = child;
                 return true; // break
         this.children().some(function(child) {
             if(child instanceof documentElement.DocumentTextElement) {
                 toret = child;
                 return true; // break

-            } else {
+            } else if(params.considerChildren) {

                 toret = child.getVerticallyFirstTextElement();
                 if(toret) {
                     return true; // break
                 toret = child.getVerticallyFirstTextElement();
                 if(toret) {
                     return true; // break


@@ -81,45 +95,43 @@ $.extend(generic, {
         return toret;
     },
 
         return toret;
     },
 

-    onNodeAttrChange: function(event) {
-        if(event.meta.attr === 'class') {
-            this.setWlxmlClass(event.meta.newVal); //
-        }
-    },

     onNodeAdded: function(event) {
         if(event.meta.node.isRoot()) {
             this.canvas.reloadRoot();
             return;
         }
 
     onNodeAdded: function(event) {
         if(event.meta.node.isRoot()) {
             this.canvas.reloadRoot();
             return;
         }
 

-        var nodeIndex = event.meta.node.getIndex(),
+        var ptr = event.meta.node.prev(),

             referenceElement, referenceAction, actionArg;
             referenceElement, referenceAction, actionArg;

+            
+        while(ptr && !(referenceElement = utils.getElementForElementRootNode(ptr))) {
+            ptr = ptr.prev();
+        }

 
 

-        if(nodeIndex === 0) {
+        if(referenceElement) {
+            referenceAction = 'after';
+        } else {

             referenceElement = this;
             referenceAction = 'prepend';
             referenceElement = this;
             referenceAction = 'prepend';

-        } else {
-            referenceElement = this.children()[nodeIndex-1];
-            referenceAction = 'after';

         }
       
         }
       

-        if(event.type === 'nodeMoved') {
-            /* globals Node */
-            if(event.meta.node.nodeType === Node.TEXT_NODE) {
-                actionArg = utils.getElementForTextNode(event.meta.node);
-            } else {
-                actionArg = utils.getElementForNode(event.meta.node);
-            }
-        } else {
+        if(event.meta.move) {
+            /* Let's check if this node had its own canvas element and it's accessible. */
+            actionArg = utils.getElementForElementRootNode(event.meta.node);
+        }
+        if(!actionArg) {

             actionArg = event.meta.node;
         }
 
         referenceElement[referenceAction](actionArg);
             actionArg = event.meta.node;
         }
 
         referenceElement[referenceAction](actionArg);

-    },
-    onNodeMoved: function(event) {
-        return this.onNodeAdded.call(this, event);
+
+        if(event.meta.node.is('comment')) {
+            this.commentTip.show();
+            this.commentsView.render();
+        }

     },
     onNodeDetached: function(event) {
     },
     onNodeDetached: function(event) {

+        var isComment = event.meta.node.is('comment');

         if(event.meta.node.sameNode(this)) {
             this.detach();
         } else {
         if(event.meta.node.sameNode(this)) {
             this.detach();
         } else {


@@ -129,25 +141,36 @@ $.extend(generic, {
                     return true;
                 }
             });
                     return true;
                 }
             });

+            if(isComment && !this.wlxmlNode.hasChild({klass: 'comment'})) {
+                this.commentTip.hide();
+            }
+            this.commentsView.render();

         }
     },
     onNodeTextChange: function(event) {
         }
     },
     onNodeTextChange: function(event) {

-        var toSet = event.meta.node.getText();
-        this.children().some(function(child) {
-            if(child.wlxmlNode.sameNode(event.meta.node)) {
-                if(toSet === '') {
-                    toSet = utils.unicode.ZWS;
-                }
-                if(toSet !== child.getText()) {
-                    child.setText(toSet);
-                }
-                return true;
-            }
-        });
+        var node = event.meta.node;
+
+        /* TODO: This handling of changes to the comments should probably be implemented via separate,
+        non-rendering comments element */
+        if(node.parent() && node.parent().is('comment') && this.wlxmlNode.sameNode(node.parent().parent())) {
+            this.commentsView.render();
+        }

     },
 
     },
 

+    onStateChange: function(changes) {
+        if(_.isBoolean(changes.exposed) && !this.isSpan()) {
+            this._container().toggleClass('highlighted-element', changes.exposed);
+        }
+        if(_.isBoolean(changes.active) && !this.isSpan()) {
+            this._container().toggleClass('current-node-element', changes.active);
+        }
+    },

 
     ///
 
     ///

+
+    isSpan: function() {
+        return this.wlxmlNode.getTagName() === 'span';
+    },

     
     containsBlock: function() {
         return this.children()
     
     containsBlock: function() {
         return this.children()


@@ -170,8 +193,10 @@ $.extend(generic, {
         } else {
             element = this.canvas.createElement(param);
         }
         } else {
             element = this.canvas.createElement(param);
         }

-        this._container().prepend(element.dom);
-        this.refreshPath();
+        if(element.dom) {
+            this._container().prepend(element.dom);
+            this.refreshPath();
+        }

         return element;
     },
 
         return element;
     },
 


@@ -185,26 +210,6 @@ $.extend(generic, {
             }
         });
         return toret;
             }
         });
         return toret;

-    },
-
-    getWlxmlClass: function() {
-        var klass = this._container().attr('wlxml-class');
-        if(klass) {
-            return klass.replace(/-/g, '.');
-        }
-        return undefined;
-    },
-    setWlxmlClass: function(klass) {
-        if(klass === this.getWlxmlClass()) {
-            return;
-        }
-        if(klass) {
-            this._container().attr('wlxml-class', klass.replace(/\./g, '-'));
-        }
-        else {
-            this._container().removeAttr('wlxml-class');
-        }
-        this.refreshPath();

     }
 });
 
     }
 });