From 0f2c47c0ac58d2ee6b7ce7981a8f277a6b237051 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Aleksander=20=C5=81ukasz?=
 <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Thu, 11 Jul 2013 16:05:25 +0200
Subject: [PATCH] integration wip: togglegrid, newnode

---
 modules/documentCanvas/canvasManager.js    | 105 +++++++++------------
 modules/documentCanvas/documentCanvas.js   |  13 +--
 modules/documentToolbar/documentToolbar.js |  45 +++++----
 modules/documentToolbar/template.html      |  22 ++---
 modules/rng/rng.js                         |  13 +--
 5 files changed, 82 insertions(+), 116 deletions(-)

diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js
index 235c97b..3618e11 100644
--- a/modules/documentCanvas/canvasManager.js
+++ b/modules/documentCanvas/canvasManager.js
@@ -96,47 +96,6 @@ Manager.prototype.selectNode = function(cnode, options) {
     this.sandbox.publish('nodeSelected', cnode);
 };
 
-Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) {
-    var selection = window.getSelection(),
-        $anchorNode = $(selection.anchorNode),
-        $focusNode = $(selection.focusNode);
-        
-        
-    if(!selection.isCollapsed && $anchorNode.parent()[0] === $focusNode.parent()[0]) {
-        var textNodeIdx,
-            parent = $anchorNode.parent(),
-            parentContents = parent.contents(),
-            offsetStart = selection.anchorOffset,
-            offsetEnd = selection.focusOffset;
-        
-        if(selection.anchorNode === selection.focusNode) {
-            if(offsetStart > offsetEnd) {
-                var tmp = offsetStart;
-                offsetStart = offsetEnd;
-                offsetEnd = tmp;
-            }
-            textNodeIdx = parentContents.index($anchorNode);
-        } else {
-            if(parentContents.index($anchorNode) > parentContents.index($focusNode)) {
-                offsetStart = selection.focusOffset;
-                offsetEnd = selection.anchorOffset;
-            }
-            textNodeIdx = [parentContents.index($anchorNode), parentContents.index($focusNode)];
-        }
-        
-        var wrapper = canvasNode.create({tag: wlxmlTag, klass: wlxmlClass});
-        this.canvas.nodeWrap({inside: canvasNode.create(parent),
-                              _with: wrapper,
-                              offsetStart: offsetStart,
-                              offsetEnd: offsetEnd,
-                              textNodeIdx: textNodeIdx
-                            });
-        this.selectNode(wrapper, {movecaret: 'end'});
-    }
-    
-    
-};
-
 Manager.prototype.getNodeElement = function(cnode) {
     return this.canvas.doc().dom().find('#'+cnode.getId());
 };
@@ -189,11 +148,6 @@ Manager.prototype.movecaretToNode = function(nodeElement, where) {
     selection.addRange(range);
 };
 
-Manager.prototype.toggleGrid =  function(toggle) {
-    this.canvas.doc().dom().find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);
-    this.gridToggled = toggle;
-};
-
 Manager.prototype.onEnterKey = function(e) {
     e.preventDefault();
     var pos = getCursorPosition();
@@ -234,33 +188,66 @@ Manager.prototype.toggleList = function(toggle) {
         node2 = $(selection.focusNode).parent()[0],
         element1 = this.canvas.getDocumentElement(node1),
         element2 = this.canvas.getDocumentElement(node2);
-    if(toggle) {
-        this.canvas.list.create({element1: element1, element2: element2});
-    } else {
-        if(this.canvas.list.areItemsOfTheSameList({element1: element1, element2: element2})) {
-            this.canvas.list.extractItems({element1: element1, element2: element2, merge: false});
-        } 
-    }
+
 };
 
-Manager.prototype.command = function(command, meta) {
+Manager.prototype.command = function(command, params) {
     var selection  = window.getSelection(),
-        node1 = $(selection.anchorNode).parent()[0],
-        node2 = $(selection.focusNode).parent()[0],
-        element1 = this.canvas.getDocumentElement(node1),
-        element2 = this.canvas.getDocumentElement(node2);
+        element1 = this.canvas.getDocumentElement(selection.anchorNode),
+        element2 = this.canvas.getDocumentElement(selection.focusNode);
+
     if(command === 'unwrap-node') {
         // this.canvas.nodeUnwrap({node: canvasNode.create(pos.parentNode)});
         // this.sandbox.publish('contentChanged');
+        element1 = element1.parent();
+        element2 = element2.parent();
         if(this.canvas.list.areItemsOfTheSameList({element1: element1, element2: element2})) {
             this.canvas.list.extractItems({element1: element1, element2: element2});
         }
     } else if(command === 'wrap-node') {
+        element1 = element1.parent();
+        element2 = element2.parent();
         if(this.canvas.list.areItemsOfTheSameList({element1: element1, element2: element2})) {
             this.canvas.list.create({element1: element1, element2: element2});
         }
-    }
+    } else if(command === 'toggle-list') {
+        element1 = element1.parent();
+        element2 = element2.parent();
+        if(params.toggle) {
+            this.canvas.list.create({element1: element1, element2: element2});
+        } else {
+            if(this.canvas.list.areItemsOfTheSameList({element1: element1, element2: element2})) {
+                this.canvas.list.extractItems({element1: element1, element2: element2, merge: false});
+            } 
+        }
+    } else if(command == 'toggle-grid') {
+        this.canvas.doc().dom().find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', params.toggle);
+        this.gridToggled = params.toggle;
+    } else if(command == 'newNodeRequested') {
+        if(!selection.isCollapsed && element1.parent().sameNode(element2.parent())) {
+            var parent = element1.parent(),
+                offsetStart = selection.anchorOffset,
+                offsetEnd = selection.focusOffset;
 
+            if(element1.sameNode(element2)) {
+                element1.wrapWithNodeElement({tag: params.wlxmlTag, klass: params.wlxmlClass, start: offsetStart, end: offsetEnd});
+            }
+            else {
+                if(parent.childIndex(element1) > parent.childIndex(element2)) {
+                    var tmp = offsetStart;
+                    offsetStart = offsetEnd;
+                    offsetEnd = tmp;
+                }
+                this.canvas.wrapText({
+                    inside: parent,
+                    _with: {tag: params.wlxmlTag, klass: params.wlxmlClass},
+                    offsetStart: offsetStart,
+                    offsetEnd: offsetEnd,
+                    textNodeIdx: [parent.childIndex(element1), parent.childIndex(element2)]
+                });
+            }
+        }
+    }
 };
 
 
diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js
index 2085155..39b2610 100644
--- a/modules/documentCanvas/documentCanvas.js
+++ b/modules/documentCanvas/documentCanvas.js
@@ -56,17 +56,8 @@ return function(sandbox) {
             if(!canvasNode.isSame(manager.currentNode))
                 manager.selectNode(canvasNode, {movecaret: true});
         },
-        toggleGrid: function(toggle) {
-            manager.toggleGrid(toggle);
-        },
-        toggleList: function(toggle) {
-            manager.toggleList(toggle);
-        },
-        insertNewNode: function(wlxmlTag, wlxmlClass) {
-            manager.insertNewNode(wlxmlTag, wlxmlClass);
-        },
-        command: function(command, meta) {
-            manager.command(command, meta);
+        command: function(command, params) {
+            manager.command(command, params);
         }
     };
     
diff --git a/modules/documentToolbar/documentToolbar.js b/modules/documentToolbar/documentToolbar.js
index 0e17fa3..e4d5039 100644
--- a/modules/documentToolbar/documentToolbar.js
+++ b/modules/documentToolbar/documentToolbar.js
@@ -11,35 +11,32 @@ return function(sandbox) {
             
             this.node.find('button').click(function(e) {
                 e.stopPropagation();
-                var btn = $(e.currentTarget);
+                var btn = $(e.currentTarget),
+                    btnName = btn.attr('data-name'),
+                    meta = btn.attr('data-meta'),
+                    params = {},
+                    command = btnName;
+
                 if(btn.attr('data-btn-type') === 'toggle') {
+                    command = 'toggle-' + command;
                     btn.toggleClass('active');
-                    var event;
-                    var btnId = btn.attr('data-btn');
-                    if(btnId === 'grid')
-                        event = 'toggleGrid';
-                    if(btnId === 'tags')
-                        event = 'toggleTags';
-                    if(btnId === 'list')
-                        event = 'toggleList'
-                    sandbox.publish(event, btn.hasClass('active'));
+                    params.toggle = btn.hasClass('active');
                 }
-                if(btn.attr('data-btn-type') === 'cmd') {
-                    var command = btn.attr('data-btn');
-                    var meta = btn.attr('data-meta');
-                    if(command === 'new-node') {
-                        var wlxmlTag = view.getOption('newTag-tag');
-                        var wlxmlClass = view.getOption('newTag-class');
-                        if(meta) {
-                            var split = meta.split('/');
-                            wlxmlTag = split[0];
-                            wlxmlClass = split[1];
-                        }
-                        sandbox.publish('newNodeRequested', wlxmlTag, wlxmlClass);
-                    } else {
-                        sandbox.publish('command', btn.attr('data-btn'), btn.attr('data-meta'));
+
+                if(btnName === 'new-node') {
+                    command = 'newNodeRequested';
+                    params.wlxmlTag = view.getOption('newTag-tag');
+                    params.wlxmlClass = view.getOption('newTag-class');
+                    if(meta) {
+                        var split = meta.split('/');
+                        params.wlxmlTag = split[0];
+                        params.wlxmlClass = split[1];
                     }
+                } else {
+                    params.meta = meta;
                 }
+
+                sandbox.publish('command', command, params);
             });
         },
         getOption: function(option) {
diff --git a/modules/documentToolbar/template.html b/modules/documentToolbar/template.html
index f639c43..96d645a 100644
--- a/modules/documentToolbar/template.html
+++ b/modules/documentToolbar/template.html
@@ -1,9 +1,9 @@
 <div class="rng-module-documentToolbar">
     <div class="rng-module-documentToolbar-toolbarGroup">
-        <button data-btn="new-node" data-meta="header/" data-btn-type="cmd" class="btn btn-mini">header</button>
-        <button data-btn="new-node" data-meta="div/p" data-btn-type="cmd" class="btn btn-mini">div/p</button>
-        <button data-btn="new-node" data-meta="span/cite" data-btn-type="cmd" class="btn btn-mini">span/cite</i></button>
-        <button data-btn="new-node" data-meta="span/uri" data-btn-type="cmd" class="btn btn-mini">span/uri</i></button>
+        <button data-name="new-node" data-meta="header/" data-btn-type="cmd" class="btn btn-mini">header</button>
+        <button data-name="new-node" data-meta="div/p" data-btn-type="cmd" class="btn btn-mini">div/p</button>
+        <button data-name="new-node" data-meta="span/cite" data-btn-type="cmd" class="btn btn-mini">span/cite</i></button>
+        <button data-name="new-node" data-meta="span/uri" data-btn-type="cmd" class="btn btn-mini">span/uri</i></button>
         <select class="rng-module-documentToolbar-toolbarOption" data-option="newTag-tag">
             <% var options = ['', 'section', 'header', 'div', 'span', 'aside']; %>
             <% options.forEach(function(option) { %>
@@ -16,19 +16,19 @@
                 <option value="<%= option.replace(/\./g, '-') %>" <% if(option==='cite') { %>selected<% } %>><%= option %></option>
             <% }); %>
         </select>
-        <button data-btn="new-node" data-btn-type="cmd" class="btn btn-mini"><i class="icon-plus"></i></button>
+        <button data-name="new-node" data-btn-type="cmd" class="btn btn-mini"><i class="icon-plus"></i></button>
     </div>
     <div class="rng-module-documentToolbar-toolbarGroup">
-        <button data-btn="unwrap-node" data-btn-type="cmd" class="btn btn-mini"><i class="icon-arrow-up"></i></button>
-        <button data-btn="wrap-node" data-btn-type="cmd" class="btn btn-mini"><i class="icon-arrow-down"></i></button>
+        <button data-name="unwrap-node" data-btn-type="cmd" class="btn btn-mini"><i class="icon-arrow-up"></i></button>
+        <button data-name="wrap-node" data-btn-type="cmd" class="btn btn-mini"><i class="icon-arrow-down"></i></button>
     </div>    
     <div class="rng-module-documentToolbar-toolbarGroup">
-        <button data-btn="grid" data-btn-type="toggle" class="btn btn-mini"><i class="icon-th-large"></i></button>
-        <button data-btn="tags" data-btn-type="toggle" class="btn btn-mini"><i class="icon-tag"></i></button>
+        <button data-name="grid" data-btn-type="toggle" class="btn btn-mini"><i class="icon-th-large"></i></button>
+        <button data-name="tags" data-btn-type="toggle" class="btn btn-mini"><i class="icon-tag"></i></button>
     </div>
     <div class="rng-module-documentToolbar-toolbarGroup">
-        <button data-btn="list" data-btn-type="toggle" data-meta="bullets" class="btn btn-mini"><i class="icon-list"></i></button>
-        <button data-btn="createList" data-btn-type="cmd" data-meta="enum" class="btn btn-mini"><i class="icon-th-list"></i></button>
+        <button data-name="list" data-btn-type="toggle" data-meta="bullets" class="btn btn-mini"><i class="icon-list"></i></button>
+        <<button data-name="createList" data-btn-type="cmd" data-meta="enum" class="btn btn-mini"><i class="icon-th-list"></i></button>
     </div>
     <div style="clear: both;"></div>
 </div>
\ No newline at end of file
diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index 42c71ec..d773c30 100644
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -256,17 +256,8 @@ return function(sandbox) {
         ready: function() {
             views.visualEditing.setView('toolbar', sandbox.getModule('documentToolbar').getView());
         },
-        toggleGrid: function(toggle) {
-            sandbox.getModule('documentCanvas').toggleGrid(toggle);
-        },
-        toggleList: function(toggle) {
-            sandbox.getModule('documentCanvas').toggleList(toggle);
-        },
-        newNodeRequested: function(wlxmlTag, wlxmlClass) {
-                sandbox.getModule('documentCanvas').insertNewNode(wlxmlTag, wlxmlClass);
-        },
-        command: function(cmd, meta) {
-            sandbox.getModule('documentCanvas').command(cmd, meta);
+        command: function(cmd, params) {
+            sandbox.getModule('documentCanvas').command(cmd, params);
         }
     };
     
-- 
2.20.1