From: Aleksander Ɓukasz 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 = $('
').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);