Visual editor - node hover tag

[fnpeditor.git] / modules / visualEditor.js

diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 39859a8..77ed078 100644 (file)
--- a/modules/visualEditor.js
+++ b/modules/visualEditor.js
@@ -121,6 +121,7 @@ rng.modules.visualEditor = function(sandbox) {
             return this.node.find('#rng-visualEditor-content').html();\r
         }, \r
         _markSelected: function(node) {\r
             return this.node.find('#rng-visualEditor-content').html();\r
         }, \r
         _markSelected: function(node) {\r

+            this.dimNode(node);\r

             this.node.find('.rng-current').removeClass('rng-current');\r
             node.addClass('rng-current');\r
             this.currentNode = node;\r
             this.node.find('.rng-current').removeClass('rng-current');\r
             node.addClass('rng-current');\r
             this.currentNode = node;\r


@@ -142,12 +143,20 @@ rng.modules.visualEditor = function(sandbox) {
                 this.selectNode(node);\r
         },\r
         highlightNode: function(node) {\r
                 this.selectNode(node);\r
         },\r
         highlightNode: function(node) {\r

-            if(!this.gridToggled)\r
+            if(!this.gridToggled) {\r

                 node.addClass('rng-hover');\r
                 node.addClass('rng-hover');\r

+                var label = node.attr('wlxml-tag');\r
+                if(node.attr('wlxml-class'))\r
+                    label += ' / ' + node.attr('wlxml-class');\r
+                var tag = $('<div>').addClass('rng-visualEditor-nodeHoverTag').text(label);\r
+                node.append(tag);\r
+            }\r

         },\r
         dimNode: function(node) {\r
         },\r
         dimNode: function(node) {\r

-            if(!this.gridToggled)\r
+            if(!this.gridToggled) {\r

                 node.removeClass('rng-hover');\r
                 node.removeClass('rng-hover');\r

+                node.find('.rng-visualEditor-nodeHoverTag').remove();\r
+            }\r

         },\r
         highlightNodeById: function(id) {\r
             var node = this.node.find('#'+id);\r
         },\r
         highlightNodeById: function(id) {\r
             var node = this.node.find('#'+id);\r


@@ -179,6 +188,9 @@ rng.modules.visualEditor = function(sandbox) {
         toggleGrid: function(toggle) {\r
             this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle);\r
             this.gridToggled = toggle;\r
         toggleGrid: function(toggle) {\r
             this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle);\r
             this.gridToggled = toggle;\r

+        },\r
+        toggleTags: function(toggle) {\r
+        \r

         }\r
     };\r
     \r
         }\r
     };\r
     \r


@@ -258,7 +270,7 @@ rng.modules.visualEditor = function(sandbox) {
                 id: node.parent().attr('id')\r
             }\r
             var children = [];\r
                 id: node.parent().attr('id')\r
             }\r
             var children = [];\r

-            node.children().each(function() {\r
+            node.children('[wlxml-tag]').each(function() {\r

                 var child = $(this);\r
                 children.push({repr: child.attr('wlxml-tag') + ' / ' + (child.attr('wlxml-class') || '[[no class]]'), id: child.attr('id')});\r
             });\r
                 var child = $(this);\r
                 children.push({repr: child.attr('wlxml-tag') + ' / ' + (child.attr('wlxml-class') || '[[no class]]'), id: child.attr('id')});\r
             });\r


@@ -317,6 +329,8 @@ rng.modules.visualEditor = function(sandbox) {
         toolbarButtonToggled: function(btn, toggle) {\r
             if(btn === 'grid')\r
                 view.toggleGrid(toggle);\r
         toolbarButtonToggled: function(btn, toggle) {\r
             if(btn === 'grid')\r
                 view.toggleGrid(toggle);\r

+            if(btn === 'tags')\r
+                view.toggleTags(toggle);\r

         },\r
         nodeHovered: function(node) {\r
             view.highlightNode(node);\r
         },\r
         nodeHovered: function(node) {\r
             view.highlightNode(node);\r