internal container wip: synchronizing main node and container display style (inline...

[fnpeditor.git] / modules / documentCanvas / canvas / canvas.js

diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js
index 0449a9a..6179b83 100644 (file)
--- a/modules/documentCanvas/canvas/canvas.js
+++ b/modules/documentCanvas/canvas/canvas.js
@@ -38,17 +38,22 @@ $.extend(Canvas.prototype, {
                     tag: currentTag.prop('tagName').toLowerCase(),
                     klass: currentTag.attr('class'),
                     meta: meta,
                     tag: currentTag.prop('tagName').toLowerCase(),
                     klass: currentTag.attr('class'),
                     meta: meta,

-                    others: others
+                    others: others,
+                    rawChildren: currentTag.contents()

                 });
 
                 });
 

-                element.dom().append(currentTag.contents());

                 ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) {
                     element.data(attr, '');
                 });
                 return element.dom();
             });
 
                 ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) {
                     element.data(attr, '');
                 });
                 return element.dom();
             });
 

-            var FIRST_CONTENT_INDEX = 1;
+            var FIRST_CONTENT_INDEX = 0;
+
+            // @@ TODO - refactor!
+            var getNode = function(element) {
+                return element.children('[document-element-content]');
+            }

 
             this.wrapper.find(':not(iframe)').addBack().contents()
                 .filter(function() {return this.nodeType === Node.TEXT_NODE})
 
             this.wrapper.find(':not(iframe)').addBack().contents()
                 .filter(function() {return this.nodeType === Node.TEXT_NODE})


@@ -60,8 +65,8 @@ $.extend(Canvas.prototype, {
                         text = {original: el.text(), trimmed: $.trim(el.text())},
                         elParent = el.parent(),
                         hasSpanParent = elParent.attr('wlxml-tag') === 'span',
                         text = {original: el.text(), trimmed: $.trim(el.text())},
                         elParent = el.parent(),
                         hasSpanParent = elParent.attr('wlxml-tag') === 'span',

-                        hasSpanBefore = el.prev().length > 0  && $(el.prev()[0]).attr('wlxml-tag') === 'span',
-                        hasSpanAfter = el.next().length > 0 && $(el.next()[0]).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'))
                         return true; // continue
 
                     if(el.parent().hasClass('canvas-widget'))
                         return true; // continue


@@ -74,10 +79,10 @@ $.extend(Canvas.prototype, {
                             target, key;
 
                         if(where === 'above') {
                             target, key;
 
                         if(where === 'above') {

-                            target = prev ? $(prev) : elParent;
+                            target = prev ? $(prev) : elParent.parent();

                             key = prev ? 'orig-after' : 'orig-begin';
                         } else if(where === 'below') {
                             key = prev ? 'orig-after' : 'orig-begin';
                         } else if(where === 'below') {

-                            target = next ? $(next) : elParent;
+                            target = next ? $(next) : elParent.parent();

                             key = next ? 'orig-before' : 'orig-end';
                         } else { throw new Object;}
 
                             key = next ? 'orig-before' : 'orig-end';
                         } else { throw new Object;}
 


@@ -93,7 +98,7 @@ $.extend(Canvas.prototype, {
                                     + text.trimmed
                                     + (endSpace && (hasSpanParent || hasSpanAfter) ? ' ' : '');
                     } else {
                                     + text.trimmed
                                     + (endSpace && (hasSpanParent || hasSpanAfter) ? ' ' : '');
                     } else {

-                        if(text.trimmed.length === 0 && text.original.length > 0 && elParent.contents().length === 2)
+                        if(text.trimmed.length === 0 && text.original.length > 0 && elParent.contents().length === 1)

                             text.transformed = ' ';
                     }
 
                             text.transformed = ' ';
                     }
 


@@ -164,8 +169,23 @@ $.extend(Canvas.prototype, {
             }
 
             this.wrapper.on('keyup', function(e) {
             }
 
             this.wrapper.on('keyup', function(e) {

-                if(e.which >= 37 && e.which <= 40)
-                    canvas.setCurrentElement(canvas.getCursor().getPosition().element, {caretTo: false})
+                if(e.which >= 37 && e.which <= 40) {
+                    var element = canvas.getCursor().getPosition().element,
+                        caretTo = false;
+                    if(!element) {
+                        // Chrome hack
+                        var direction;
+                        if(e.which === (KEYS.ARROW_LEFT  || KEYS.ARROW_DOWN)) {
+                            direction = 'above';
+                            caretTo = 'end';
+                        } else {
+                            direction = 'below';
+                            caretTo = 'start';
+                        }
+                        element = canvas.getDocumentElement(utils.nearestInDocumentOrder('[document-text-element]', direction, window.getSelection().focusNode));
+                    }
+                    canvas.setCurrentElement(element, {caretTo: caretTo});
+                }

             });
          
             this.wrapper.on('keydown', function(e) {
             });
          
             this.wrapper.on('keydown', function(e) {


@@ -201,9 +221,9 @@ $.extend(Canvas.prototype, {
                 }
             });
 
                 }
             });
 

-            this.wrapper.on('click', '[wlxml-tag], [wlxml-text]', function(e) {
+            this.wrapper.on('click', '[document-node-element], [document-text-element]', function(e) {

                 e.stopPropagation();
                 e.stopPropagation();

-                canvas.setCurrentElement(canvas.getDocumentElement(e.target), {caretTo: false});
+                canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false});

             });
 
             var observer = new MutationObserver(function(mutations) {
             });
 
             var observer = new MutationObserver(function(mutations) {


@@ -215,8 +235,9 @@ $.extend(Canvas.prototype, {
             var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true};
             observer.observe(this.d[0], config);
 
             var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true};
             observer.observe(this.d[0], config);
 

-            this.wrapper.on('mouseover', '[wlxml-tag], [wlxml-text]', function(e) {
-                var el = canvas.getDocumentElement(e.target);
+
+            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)
                     return;
                 e.stopPropagation();


@@ -224,8 +245,8 @@ $.extend(Canvas.prototype, {
                     el = el.parent();
                 el.toggleLabel(true);
             });
                     el = el.parent();
                 el.toggleLabel(true);
             });

-            this.wrapper.on('mouseout', '[wlxml-tag], [wlxml-text]', function(e) {
-                var el = canvas.getDocumentElement(e.target);
+            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)
                     return;
                 e.stopPropagation();