From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Wed, 24 Apr 2013 14:23:20 +0000 (+0200)
Subject: Visual editor - add new node button at toolbar - inserting new node moved from anon... 
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/1fe8bb015648709853a4e14584ab1b3059b9ba1d

Visual editor - add new node button at toolbar - inserting new node moved from anon handler @ view.setup to view.insertNewNode -- view.insertNewNode still implements only appendingafter current node -- view.insertNewNode TODO: inserting inline - wrapping text in node moved to view.wrapSelectionWithNewNode (from sidebarView) - add button + tag/class selection in the toolbar
---

diff --git a/editor.css b/editor.css
index a0340bf..24d3bc7 100644
--- a/editor.css
+++ b/editor.css
@@ -151,6 +151,29 @@ body {
 
 #rng-visualEditor-toolbar {
     margin: -15px 0 10px 0;
+    white-space:nowrap; 
+    word-spacing:0;
+}
+
+#rng-visualEditor-toolbar select {
+    line-height: 14px;
+    font-size:9px;
+    height: auto;
+    width: 50px;
+    padding: 1px;
+-webkit-appearance: button;
+-moz-appearance: button;
+appearance: button;
+    margin-bottom: 0;
+}
+
+.rng-visualEditor-toolbarGroup {
+    border-width: 0 1px 0 0;
+    border-style: solid;
+    border-color: #ddd;
+    padding: 0 8px 0 0;
+    margin: 0 8px 0 0;
+    float:left;
 }
 
 .rng-visualEditor-sidebarContentItem fieldset {
diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 83bf329..7f7bc2e 100644
--- a/modules/visualEditor.js
+++ b/modules/visualEditor.js
@@ -34,18 +34,7 @@ rng.modules.visualEditor = function(sandbox) {
             this.node.on('keydown', '#rng-visualEditor-contentWrapper', function(e) {
                 if(e.which === 13) { 
                     e.preventDefault();
-                    var anchor = $(window.getSelection().anchorNode);
-                    if(anchor[0].nodeType === Node.TEXT_NODE)
-                        anchor = anchor.parent();
-                    if(anchor.text() === '') {
-                        var todel = anchor;
-                        anchor = anchor.parent();
-                        todel.remove();
-                    }
-                    var newNode = anchor.clone().empty();
-                    newNode.attr('id', '');
-                    anchor.after(newNode);
-                    view.selectNode(newNode);
+                    view.insertNewNode(null, null);
                 }
             });
             
@@ -100,6 +89,54 @@ rng.modules.visualEditor = function(sandbox) {
             
             this.gridToggled = false;
         },
+        _createNode: function(wlxmlTag, wlxmlClass) {
+            var toBlock = ['div', 'document', 'section', 'header'];
+            var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';
+            var toret = $('<' + htmlTag + '>');
+            toret.attr('wlxml-tag', wlxmlTag);
+            if(wlxmlClass)
+                toret.attr('wlxml-class', wlxmlClass);
+            return toret;
+        },
+        insertNewNode: function(wlxmlTag, wlxmlClass) {
+            //TODO: Insert inline
+            var anchor = $(window.getSelection().anchorNode);
+            if(anchor[0].nodeType === Node.TEXT_NODE)
+                anchor = anchor.parent();
+            if(anchor.text() === '') {
+                var todel = anchor;
+                anchor = anchor.parent();
+                todel.remove();
+            }
+            var newNode = this._createNode(wlxmlTag || anchor.attr('wlxml-tag'), wlxmlClass || anchor.attr('wlxml-class'));
+            anchor.after(newNode);
+            mediator.nodeCreated(newNode);
+            isDirty = true;
+        },
+        wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {
+            
+            var selection = window.getSelection();
+            if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
+                var startOffset = selection.anchorOffset;
+                var endOffset = selection.focusOffset;
+                if(startOffset > endOffset) {
+                    var tmp = startOffset;
+                    startOffset = endOffset;
+                    endOffset = tmp;
+                }
+                var node = selection.anchorNode;
+                var prefix = node.data.substr(0, startOffset);
+                var suffix = node.data.substr(endOffset);
+                var core = node.data.substr(startOffset, endOffset - startOffset);
+                var newNode = this._createNode(wlxmlTag, wlxmlClass);
+                newNode.text(core);
+                $(node).replaceWith(newNode);
+                newNode.before(prefix);
+                newNode.after(suffix);
+                mediator.nodeCreated(newNode);
+                isDirty = true;
+            }
+        },
         getMetaData: function() {
             var toret = {};
             this.metaTable.find('tr').each(function() {
@@ -127,8 +164,11 @@ rng.modules.visualEditor = function(sandbox) {
         }, 
         _markSelected: function(node) {
             this.dimNode(node);
+            
             this.node.find('.rng-current').removeClass('rng-current');
+            
             node.addClass('rng-current');
+
             this.currentNode = node;
             mediator.nodeSelected(node);
         },
@@ -222,26 +262,7 @@ rng.modules.visualEditor = function(sandbox) {
             
             view.node.on('change', '.rng-visualEditor-editPaneSelectionForm select', function(e) {
                 var target = $(e.target);
-                var selection = window.getSelection();
-                if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
-                    var startOffset = selection.anchorOffset;
-                    var endOffset = selection.focusOffset;
-                    if(startOffset > endOffset) {
-                        var tmp = startOffset;
-                        startOffset = endOffset;
-                        endOffset = tmp;
-                    }
-                    var node = selection.anchorNode;
-                    var prefix = node.data.substr(0, startOffset);
-                    var suffix = node.data.substr(endOffset);
-                    var core = node.data.substr(startOffset, endOffset - startOffset);
-                    var newNode = $('<span wlxml-tag="' + target.val() + '">' + core + '</span>');
-                    $(node).replaceWith(newNode);
-                    newNode.before(prefix);
-                    newNode.after(suffix);
-                    mediator.nodeCreated(newNode);
-                    isDirty = true;
-                }
+                mediator.wrapWithNodeRequest(target.val(), null);
             });
             
             view.node.on('click', '.rng-visualEditor-editPaneSurrouding a', function(e) {
@@ -303,7 +324,13 @@ rng.modules.visualEditor = function(sandbox) {
                     btn.toggleClass('active')
                     mediator.toolbarButtonToggled(btn.attr('data-btn'), btn.hasClass('active'));
                 }
+                if(btn.attr('data-btn-type') === 'cmd') {
+                    mediator.toolbarButtonCmd(btn.attr('data-btn'));
+                }
             });
+        },
+        getOption: function(option) {
+            return this.node.find('.rng-visualEditor-toolbarOption[data-option=' + option +']').val();
         }
     }
     
@@ -317,7 +344,6 @@ rng.modules.visualEditor = function(sandbox) {
         },
         nodeCreated: function(node) {
             view.selectNode(node);
-            
         },
         nodeSelected: function(node) {
             sideBarView.updateEditPane(node);
@@ -337,6 +363,17 @@ rng.modules.visualEditor = function(sandbox) {
             if(btn === 'tags')
                 view.toggleTags(toggle);
         },
+        toolbarButtonCmd: function(btn) {
+            if(btn === 'new-node') {
+                if(window.getSelection().isCollapsed)
+                    view.insertNewNode(toolbarView.getOption('newTag-tag'), toolbarView.getOption('newTag-class'));
+                else {
+                    this.wrapWithNodeRequest(toolbarView.getOption('newTag-tag'), toolbarView.getOption('newTag-class'));
+                }
+                    
+                    
+            }
+        },
         nodeHovered: function(node) {
             view.highlightNode(node);
             sideBarView.highlightNode(node.attr('id'));
@@ -344,6 +381,9 @@ rng.modules.visualEditor = function(sandbox) {
         nodeBlured: function(node) {
             view.dimNode(node);
             sideBarView.dimNode(node.attr('id'));
+        },
+        wrapWithNodeRequest: function(wlxmlTag, wlxmlClass) {
+            view.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);
         }
         
     }