From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Wed, 24 Apr 2013 08:34:59 +0000 (+0200)
Subject: Visual editor - node hover tag
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/73bf2a4f0496bb60e08c0d37fdf33170e9e536cf

Visual editor - node hover tag
---

diff --git a/editor.css b/editor.css
index 4194718..f3f0260 100644
--- a/editor.css
+++ b/editor.css
@@ -19,6 +19,20 @@ body {
     list-style-type: none;
 }
 
+.rng-visualEditor-nodeHoverTag {
+    position:absolute;
+    width:100px;
+    height:20px;
+    top:-20px;
+    background: #bd362f;
+    color: white;
+    font-size:9px;
+    font-weight: normal;
+    font-style: normal;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    padding: 0 5px;
+}
+
 #rng-visualEditor-contentWrapper {
     border-color: #ddd;
     border-style: solid;
@@ -209,6 +223,7 @@ body {
     border-style:solid;
     border-width:1px;
     min-height:20px;
+    position:relative;
 }
 
 span[wlxml-tag] {
diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 82ee13e..77ed078 100644
--- 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();
         }, 
         _markSelected: function(node) {
+            this.dimNode(node);
             this.node.find('.rng-current').removeClass('rng-current');
             node.addClass('rng-current');
             this.currentNode = node;
@@ -142,12 +143,20 @@ rng.modules.visualEditor = function(sandbox) {
                 this.selectNode(node);
         },
         highlightNode: function(node) {
-            if(!this.gridToggled)
+            if(!this.gridToggled) {
                 node.addClass('rng-hover');
+                var label = node.attr('wlxml-tag');
+                if(node.attr('wlxml-class'))
+                    label += ' / ' + node.attr('wlxml-class');
+                var tag = $('<div>').addClass('rng-visualEditor-nodeHoverTag').text(label);
+                node.append(tag);
+            }
         },
         dimNode: function(node) {
-            if(!this.gridToggled)
+            if(!this.gridToggled) {
                 node.removeClass('rng-hover');
+                node.find('.rng-visualEditor-nodeHoverTag').remove();
+            }
         },
         highlightNodeById: function(id) {
             var node = this.node.find('#'+id);