From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Mon, 22 Apr 2013 09:23:33 +0000 (+0200)
Subject: Visual editor: simple parent/children navigation in edit pane
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/9487a7485a9fa56d55a46b36fbc73d8e02eaa412?hp=b8a6d80a6573772f180b39aaeaf6c3ef48f2c021

Visual editor: simple parent/children navigation in edit pane
---

diff --git a/editor.css b/editor.css
index 5d3eae2..175f35f 100644
--- a/editor.css
+++ b/editor.css
@@ -30,23 +30,31 @@ body {
     padding: 5px 10px;
 }
 
-#rng-visualEditor-contentWrapper::-webkit-scrollbar {
+#rng-visualEditor-contentWrapper::-webkit-scrollbar,
+#rng-visualEditor-editPaneNavigation::-webkit-scrollbar
+{
     width: 9px;
 }
  
-#rng-visualEditor-contentWrapper::-webkit-scrollbar-track {
+#rng-visualEditor-contentWrapper::-webkit-scrollbar-track,
+#rng-visualEditor-editPaneNavigation::-webkit-scrollbar-track
+ {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
     -webkit-border-radius: 10px;
     border-radius: 10px;
 }
 
-#rng-visualEditor-contentWrapper::-webkit-scrollbar-thumb {
+#rng-visualEditor-contentWrapper::-webkit-scrollbar-thumb,
+#rng-visualEditor-editPaneNavigation::-webkit-scrollbar-thumb
+{
     -webkit-border-radius: 10px;
     border-radius: 10px;
     background: rgba(73,175,205,0.8); 
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 }
-#rng-visualEditor-contentWrapper::-webkit-scrollbar-thumb:window-inactive {
+#rng-visualEditor-contentWrapper::-webkit-scrollbar-thumb:window-inactive,
+#rng-visualEditor-editPaneNavigation::-webkit-scrollbar-thumb:window-inactive
+ {
     background: rgba(73,175,205,0.4); 
 }
 
@@ -164,6 +172,27 @@ body {
     line-height:10px;
 }
 
+#rng-visualEditor-editPaneNavigation {
+    overflow-y: scroll;
+    max-height: 150px;
+    width:100%;
+    margin-top:10px;
+}
+#rng-visualEditor-editPaneNavigation table {
+    width: 90%;
+    margin: 0;
+}
+#rng-visualEditor-editPaneNavigation table tr td:nth-child(1) {
+    width: 30%;
+}
+#rng-visualEditor-editPaneNavigation table tr td:nth-child(2) {
+    width: 70%;
+}
+
+#rng-visualEditor-editPaneNavigation table tr td ul {
+    list-style-type: none;
+    margin-left:0px;
+}
 #rng-sourceEditor-editor {
     width: 940px;
     height: 500px;
diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 702c812..f7ae32c 100644
--- a/modules/visualEditor.js
+++ b/modules/visualEditor.js
@@ -38,6 +38,7 @@ rng.modules.visualEditor = function(sandbox) {
                     if(anchor[0].nodeType === Node.TEXT_NODE)
                         anchor = anchor.parent();
                     var newNode = anchor.clone().empty();
+                    newNode.attr('id', '');
                     anchor.after(newNode);
                     view.selectNode(newNode);
                 }
@@ -72,7 +73,25 @@ rng.modules.visualEditor = function(sandbox) {
                 }
                 
             });
-
+            
+            
+            var observer = new MutationObserver(function(mutations) {
+              mutations.forEach(function(mutation) {
+                if(mutation.addedNodes.length > 0) {
+                    console.log(mutation.addedNodes);
+                }
+                _.each(mutation.addedNodes, function(node) {
+                    node = $(node);
+                    node.parent().find('[wlxml-tag]').each(function() {
+                        tag = $(this);
+                        if(!tag.attr('id'))
+                            tag.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));
+                    });
+                });
+              });    
+            });
+            var config = { attributes: true, childList: true, characterData: true, subtree: true };
+            observer.observe(this.node.find('#rng-visualEditor-contentWrapper')[0], config);
         },
         getMetaData: function() {
             var toret = {};
@@ -115,6 +134,11 @@ rng.modules.visualEditor = function(sandbox) {
             selection.removeAllRanges()
             selection.addRange(range);
         },
+        selectNodeById: function(id) {
+            var node = this.node.find('#'+id);
+            if(node)
+                this.selectNode(node);
+        },
         selectFirstNode: function() {
             var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {
                 return $(this).clone().children().remove().end().text().trim() !== '';
@@ -178,6 +202,11 @@ rng.modules.visualEditor = function(sandbox) {
                     isDirty = true;
                 }
             });
+            
+            view.node.on('click', '.rng-visualEditor-editPaneSurrouding a', function(e) {
+                var target = $(e.target);
+                mediator.nodeSelectedById(target.attr('data-id'));
+            });
         },
         selectTab: function(id) {
            this.node.find('.rng-visualEditor-sidebarContentItem').hide();
@@ -189,6 +218,18 @@ rng.modules.visualEditor = function(sandbox) {
         updateEditPane: function(node) {
             var pane = this.node.find('#rng-visualEditor-edit');
             pane.html( $(sandbox.getTemplate('editPane')({tag: node.attr('wlxml-tag'), klass: node.attr('wlxml-class')})));
+            
+            var parent = {
+                repr: node.parent().attr('wlxml-tag') + ' / ' + (node.parent().attr('wlxml-class') || '[[no class]]'),
+                id: node.parent().attr('id')
+            }
+            var children = [];
+            node.children().each(function() {
+                var child = $(this);
+                children.push({repr: child.attr('wlxml-tag') + ' / ' + (child.attr('wlxml-class') || '[[no class]]'), id: child.attr('id')});
+            });
+            var naviTemplate = sandbox.getTemplate('editPaneNavigation')({parent: parent, children: children});
+            pane.find('.rng-visualEditor-editPaneSurrouding > div').html($(naviTemplate));
         }
     }
     
@@ -205,6 +246,9 @@ rng.modules.visualEditor = function(sandbox) {
         },
         nodeSelected: function(node) {
             sideBarView.updateEditPane(node);
+        },
+        nodeSelectedById: function(id) {
+            view.selectNodeById(id);
         }
     }