From: Aleksander Ɓukasz Date: Sun, 28 Apr 2013 22:10:06 +0000 (+0200) Subject: Visual editor - status bar with breadcrumbs X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/913b71a6ab540b5d588dd93d9256cace73c5dcb3?ds=sidebyside Visual editor - status bar with breadcrumbs --- diff --git a/editor.css b/editor.css index 11cf5bd..4005085 100644 --- a/editor.css +++ b/editor.css @@ -62,7 +62,7 @@ body { border-width: 1px; float:left; width: 600px; - height: 500px; + height: 470px; overflow-y: scroll; padding: 5px 10px; } @@ -104,7 +104,7 @@ body { #rng-visualEditor-sidebar { float:right; width: 266px; - height:500px; + height:470px; position:relative; border-width: 1px 1px 1px 1px; border-style: solid; @@ -197,6 +197,11 @@ appearance: button; float:left; } +#rng-visualEditor-statusbar { + margin: 10px 5px; + font-size:0.9em; +} + .rng-visualEditor-sidebarContentItem fieldset { margin-bottom: 10px; } diff --git a/modules/visualEditor.js b/modules/visualEditor.js index a607d86..17e7f73 100644 --- a/modules/visualEditor.js +++ b/modules/visualEditor.js @@ -326,9 +326,42 @@ rng.modules.visualEditor = function(sandbox) { } } + var statusBarView = { + node: view.node.find('#rng-visualEditor-statusbar'), + setup: function() { + var view = this; + view.node.on('mouseenter', 'a', function(e) { + var target = $(e.target); + mediator.nodeHighlightedById(target.attr('data-id')); + }); + view.node.on('mouseleave', 'a', function(e) { + var target = $(e.target); + mediator.nodeDimmedById(target.attr('data-id')); + }); + view.node.on('click', 'a', function(e) { + e.preventDefault(); + mediator.nodeSelectedById($(e.target).attr('data-id')); + }); + }, + + showNode: function(node) { + this.node.empty(); + this.node.html(sandbox.getTemplate('statusBarNodeDisplay')({node: node, parents: node.parents('[wlxml-tag]')})); + //node.parents('[wlxml-tag]') + }, + + highlightNode: function(id) { + this.node.find('a[data-id="'+id+'"]').addClass('rng-hover'); + }, + dimNode: function(id) { + this.node.find('a[data-id="' +id+'"]').removeClass('rng-hover'); + } + } + view.setup(); sideBarView.setup(); toolbarView.setup(); + statusBarView.setup(); var mediator = { getCurrentNode: function() { @@ -339,6 +372,7 @@ rng.modules.visualEditor = function(sandbox) { }, nodeSelected: function(node) { sideBarView.updateEditPane(node); + statusBarView.showNode(node); }, nodeSelectedById: function(id) { view.selectNodeById(id); @@ -369,10 +403,12 @@ rng.modules.visualEditor = function(sandbox) { nodeHovered: function(node) { view.highlightNode(node); sideBarView.highlightNode(node.attr('id')); + statusBarView.highlightNode(node.attr('id')); }, nodeBlured: function(node) { view.dimNode(node); sideBarView.dimNode(node.attr('id')); + statusBarView.dimNode(node.attr('id')); }, wrapWithNodeRequest: function(wlxmlTag, wlxmlClass) { view.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);