Visual editor - node hover tag

diff --git a/editor.css b/editor.css
index 4194718..f3f0260 100644 (file)
--- a/editor.css
+++ b/editor.css
@@ -19,6 +19,20 @@ body {
     list-style-type: none;\r
 }\r
 \r
     list-style-type: none;\r
 }\r
 \r

+.rng-visualEditor-nodeHoverTag {\r
+    position:absolute;\r
+    width:100px;\r
+    height:20px;\r
+    top:-20px;\r
+    background: #bd362f;\r
+    color: white;\r
+    font-size:9px;\r
+    font-weight: normal;\r
+    font-style: normal;\r
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r
+    padding: 0 5px;\r
+}\r
+\r

 #rng-visualEditor-contentWrapper {\r
     border-color: #ddd;\r
     border-style: solid;\r
 #rng-visualEditor-contentWrapper {\r
     border-color: #ddd;\r
     border-style: solid;\r


@@ -209,6 +223,7 @@ body {
     border-style:solid;\r
     border-width:1px;\r
     min-height:20px;\r
     border-style:solid;\r
     border-width:1px;\r
     min-height:20px;\r

+    position:relative;\r

 }\r
 \r
 span[wlxml-tag] {\r
 }\r
 \r
 span[wlxml-tag] {\r

diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 82ee13e..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