From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Thu, 6 Jun 2013 14:30:30 +0000 (+0200)
Subject: Removing old visualEditor module
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/601fd5decd2c36c4612487b8bfeb6df7d94a4ac2?ds=sidebyside

Removing old visualEditor module
---

diff --git a/editor.css b/editor.css
deleted file mode 100644
index 5944312..0000000
--- a/editor.css
+++ /dev/null
@@ -1,322 +0,0 @@
-body {
-    padding-top: 5px;
-}
-
-#publication_content {
-    height: 300px;
-    overflow-y: scroll;
-}
-
-.rng-tab-content {
-    display: none;
-}
-
-.rng-visualEditor-nodeHoverTag {
-    position:absolute;
-    height:20px;
-    top:-20px;
-    left:0;
-    background: #bd362f;
-    color: white;
-    font-size:9px;
-    font-weight: normal;
-    font-style: normal;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    padding: 0 5px;
-    text-indent: 0;
-}
-
-#rng-visualEditor-mainArea {
-    margin-top:10px;
-}
-
-#rng-visualEditor-contentWrapper {
-    border-color: #ddd;
-    border-style: solid;
-    border-width: 1px;
-    float:left;
-    width: 600px;
-    height: 450px;
-    overflow-y: scroll;
-    padding: 5px 10px;
-}
-
-#rng-visualEditor-contentWrapper::-webkit-scrollbar,
-#rng-visualEditor-editPaneNavigation::-webkit-scrollbar
-{
-    width: 9px;
-}
- 
-#rng-visualEditor-contentWrapper::-webkit-scrollbar-track,
-#rng-visualEditor-editPaneNavigation::-webkit-scrollbar-track
- {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-}
-
-#rng-visualEditor-contentWrapper::-webkit-scrollbar-thumb,
-#rng-visualEditor-editPaneNavigation::-webkit-scrollbar-thumb
-{
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-    background: rgba(73,175,205,0.8); 
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
-}
-#rng-visualEditor-contentWrapper::-webkit-scrollbar-thumb:window-inactive,
-#rng-visualEditor-editPaneNavigation::-webkit-scrollbar-thumb:window-inactive
- {
-    background: rgba(73,175,205,0.4); 
-}
-
-
-#rng-visualEditor-content {
-
-    outline: 0px solid transparent;
-}
-
-#rng-visualEditor-sidebar {
-    float:right;
-    width: 266px;
-    height:450px;
-    position:relative;
-    border-width: 1px 1px 1px 1px;
-    border-style: solid;
-    border-color: #ddd;
-    padding: 5px 15px;
-
-}
-
-#rng-visualEditor-sidebar,
-#rng-visualEditor-sidebar p,
-#rng-visualEditor-sidebar td,
-#rng-visualEditor-sidebar label,
-#rng-visualEditor-sidebar input,
-#rng-visualEditor-sidebar select {
-    font-size: 11px;
-    line-height:13px;
-}
-
-#rng-visualEditor-sidebar select {
-    -webkit-appearance: button;
-    -moz-appearance: button;
-    appearance: button;
-    height: auto;
-    line-height: 14px;
-}
-
-#rng-visualEditor-sidebar label + select {
-    position:relative;
-    top: 5px;
-}
-
-#rng-visualEditor-sidebarButtons {
-            /*-webkit-transform: rotate(90deg);
-            -moz-transform: rotate(90deg);
-            -ms-transform: rotate(90deg); */
-            
-            position:absolute;
-            top:-1px;
-            right:-50px;
-            border-width: 1px 1px 1px 0px;
-            border-style: solid;
-            border-color: #ddd;
-            padding: 5px;
-            background: #ededed;
-}
-
-#rng-visualEditor-sidebarButtons  ul {
-    margin-bottom: 0px;
-}
-
-.rng-visualEditor-editPaneNodeForm  label ,
-.rng-visualEditor-editPaneSelectionForm  label
-{
-    width: 50px;
-    display: inline-block;
-}
-
-.rng-visualEditor-editPaneNodeForm  select,
-.rng-visualEditor-editPaneSelectionForm  select
- {
-    width: 100px;
-}
-
-
-
-#rng-visualEditor-toolbar {
-    margin: -15px 0 10px 0;
-    white-space:nowrap; 
-    word-spacing:0;
-}
-
-#rng-visualEditor-toolbar select {
-    line-height: 14px;
-    font-size:9px;
-    height: auto;
-    width: 50px;
-    padding: 1px;
--webkit-appearance: button;
--moz-appearance: button;
-appearance: button;
-    margin-bottom: 0;
-}
-
-.rng-visualEditor-toolbarGroup {
-    border-width: 0 1px 0 0;
-    border-style: solid;
-    border-color: #ddd;
-    padding: 0 8px 0 0;
-    margin: 0 8px 0 0;
-    float:left;
-}
-
-#rng-visualEditor-statusbar {
-    margin: 10px 5px;
-    font-size:0.9em;
-}
-
-.rng-visualEditor-sidebarContentItem fieldset {
-    margin-bottom: 10px;
-}
-
-.rng-visualEditor-sidebarContentItem  legend {
-    font-size:11px;
-    height:30px;
-}
-
-#rng-visualEditor-meta table {
-    margin-bottom:10px;
-}
-
-#rng-visualEditor-meta table [contenteditable] {
-    cursor: pointer;
-}
-
-#rng-visualEditor-meta table li:last-child {
-    border-bottom: none !important;
-}
-
-#rng-visualEditor-meta table tr td:nth-child(1){
-    width: 20%;
-}
-
-#rng-visualEditor-meta table tr td:nth-child(2)  {
-    width:80%;
-}
-
-#rng-visualEditor-meta .rng-visualEditor-metaAddBtn {
-    float:right;
-    margin-right:6px;
-}
-
-#rng-visualEditor-meta .btn{
-    padding:3px;
-    line-height:10px;
-}
-
-#rng-visualEditor-editPaneNavigation {
-    overflow-y: scroll;
-    max-height: 150px;
-    width:100%;
-    margin-top:10px;
-}
-#rng-visualEditor-editPaneNavigation table {
-    width: 90%;
-    margin: 0;
-}
-#rng-visualEditor-editPaneNavigation table tr td:nth-child(1) {
-    width: 30%;
-}
-#rng-visualEditor-editPaneNavigation table tr td:nth-child(2) {
-    width: 70%;
-}
-
-#rng-visualEditor-editPaneNavigation table tr td ul {
-    list-style-type: none;
-    margin: 0;
-}
-#rng-sourceEditor-editor {
-    width: 940px;
-    height: 500px;
-}
-
-[wlxml-tag] {
-    float: none !important; /* temporaty workaround for Bootstrap's influence via [class*="span"] { float: left; } */
-    border-color: white;
-    border-style:solid;
-    border-width:1px;
-    min-height:20px;
-    position:relative;
-    text-indent: 0;
-}
-
-span[wlxml-tag] {
-    display:inline-block;
-    min-width: 10px;
-}
-
-[wlxml-tag=header] {
-    font-size: 13px;
-    font-weight: bold;
-    margin: 10px 0;
-}
-
-[wlxml-tag=section] {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-[wlxml-tag=section] [wlxml-tag=section] {
-    margin-left:10px;
-}
-
-[wlxml-class|="cite"] {
-    font-style: italic;
-}
-
-[wlxml-class|="cite-code"] {
-    font-family: monospace;
-}
-
-[wlxml-class|="cite-code-xml"] {
-    color: blue;
-}
-
-[wlxml-tag=header] > [wlxml-class=author] {
-    font-size: 14px;
-}
-
-[wlxml-tag=header] > [wlxml-class=title] {
-    font-size:18px;
-}
-
-[wlxml-class|="uri"] {
-    color: blue;
-    text-decoration: underline;
-}
-
-[wlxml-class|="p"] {
-    text-indent: 1.5em;
-}
-
-[wlxml-class|="emph-tech"] {
-    font-style: italic;
-}
-
-[wlxml-tag]  metadata {
-    display:none;
-}
-
-.rng-hover {
-    border-color: red;
-    border-style:solid;
-    border-width:1px;
-}
-
-.rng-current {
-    background: #fffacd;
-    border-color: grey;
-    border-style:dashed;
-    border-width:1px;
-}
\ No newline at end of file
diff --git a/modules.js b/modules.js
index d8e32f5..ebee292 100644
--- a/modules.js
+++ b/modules.js
@@ -10,7 +10,6 @@ define(function(require) {
         indicator: require('modules/indicator/indicator'),
         
         sourceEditor: require('modules/sourceEditor/sourceEditor'),
-        visualEditor: require('modules/visualEditor'),
         
         documentCanvas: require('modules/documentCanvas/documentCanvas'),
         documentToolbar: require('modules/documentToolbar/documentToolbar'),
diff --git a/modules/rng/rng.js b/modules/rng/rng.js
index 0322ca2..c42b985 100644
--- a/modules/rng/rng.js
+++ b/modules/rng/rng.js
@@ -22,7 +22,7 @@ return function(sandbox) {
     }
     
     views.visualEditing.setView('rightColumn', views.visualEditingSidebar.getAsView());
-    addMainTab('rng2 test', 'rng2test', views.visualEditing.getAsView());
+    addMainTab('Edytor', 'editor', views.visualEditing.getAsView());
     
     sandbox.getDOM().append(views.mainLayout.getAsView());
     
@@ -42,19 +42,11 @@ return function(sandbox) {
         }
     };
     
-    eventHandlers.visualEditor = {
-        ready: function() {
-            sandbox.getModule('visualEditor').setDocument(sandbox.getModule('data').getDocument());
-            addMainTab(gettext('Visual'), 'visual', sandbox.getModule('visualEditor').getView());
-            
-        }
-    };
-    
     eventHandlers.data = {
         ready: function() {
             views.mainLayout.setView('mainView', views.mainTabs.getAsView());
             
-            _.each(['visualEditor', 'sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator'], function(moduleName) {
+            _.each(['sourceEditor', 'documentCanvas', 'documentToolbar', 'nodePane', 'metadataEditor', 'nodeFamilyTree', 'nodeBreadCrumbs', 'mainBar', 'indicator'], function(moduleName) {
                 sandbox.getModule(moduleName).start();
             });
         },
diff --git a/modules/visualEditor.js b/modules/visualEditor.js
deleted file mode 100644
index 65de452..0000000
--- a/modules/visualEditor.js
+++ /dev/null
@@ -1,500 +0,0 @@
-define(['./visualEditor.transformations'], function(transformations) {
-
-return function(sandbox) {
-
-    var view = {
-        node: $(sandbox.getTemplate('main')()),
-        currentNode: null,
-        setup: function() {
-            var view = this;
-
-            this.node.find('#rng-visualEditor-content').on('keyup', function() {
-                isDirty = true;
-            });
-            
-            this.node.find('#rng-visualEditor-meta').on('keyup', function() {
-                isDirty = true;
-            });
-
-            this.node.on('mouseover', '[wlxml-tag]', function(e) { mediator.nodeHovered($(e.target));});
-            this.node.on('mouseout', '[wlxml-tag]', function(e) { mediator.nodeBlured($(e.target));});
-            this.node.on('click', '[wlxml-tag]', function(e) {
-                console.log('clicked node type: '+e.target.nodeType);
-                view._markSelected($(e.target));
-            });
-
-            this.node.on('keyup', '#rng-visualEditor-contentWrapper', function(e) {
-                var anchor = $(window.getSelection().anchorNode);
-                if(anchor[0].nodeType === Node.TEXT_NODE)
-                    anchor = anchor.parent();
-                if(!anchor.is('[wlxml-tag]'))
-                    return;
-                view._markSelected(anchor);
-            });
-            
-            this.node.on('keydown', '#rng-visualEditor-contentWrapper', function(e) {
-                if(e.which === 13) { 
-                    e.preventDefault();
-                    view.insertNewNode(null, null);
-                }
-            });
-            
-            
-            var metaTable = this.metaTable = this.node.find('#rng-visualEditor-meta table');
-            
-            this.node.find('.rng-visualEditor-metaAddBtn').click(function() {
-                var newRow = view._addMetaRow('', '');
-                $(newRow.find('td div')[0]).focus();
-                isDirty = true;
-            });
-            
-            this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
-                $(e.target).closest('tr').remove();
-                isDirty = true;
-            });
-            
-            this.metaTable.on('keydown', '[contenteditable]', function(e) {
-                console.log(e.which);
-                if(e.which === 13) { 
-                    if($(document.activeElement).hasClass('rng-visualEditor-metaItemKey')) {
-                        metaTable.find('.rng-visualEditor-metaItemValue').focus();
-                    } else {
-                        var input = $('<input>');
-                        input.appendTo('body').focus()
-                        view.node.find('.rng-visualEditor-metaAddBtn').focus();
-                        input.remove();
-                    }
-                    e.preventDefault();
-                }
-                
-            });
-            
-            
-            var observer = new MutationObserver(function(mutations) {
-              mutations.forEach(function(mutation) {
-                _.each(mutation.addedNodes, function(node) {
-                    node = $(node);
-                    node.parent().find('[wlxml-tag]').each(function() {
-                        tag = $(this);
-                        if(!tag.attr('id'))
-                            tag.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));
-                    });
-                });
-              });    
-            });
-            var config = { attributes: true, childList: true, characterData: true, subtree: true };
-            observer.observe(this.node.find('#rng-visualEditor-contentWrapper')[0], config);
-            
-            this.gridToggled = false;
-        },
-        _createNode: function(wlxmlTag, wlxmlClass) {
-            var toBlock = ['div', 'document', 'section', 'header'];
-            var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';
-            var toret = $('<' + htmlTag + '>');
-            toret.attr('wlxml-tag', wlxmlTag);
-            if(wlxmlClass)
-                toret.attr('wlxml-class', wlxmlClass);
-            return toret;
-        },
-        insertNewNode: function(wlxmlTag, wlxmlClass) {
-            //TODO: Insert inline
-            var anchor = $(window.getSelection().anchorNode);
-            var anchorOffset = window.getSelection().anchorOffset;
-            if(anchor[0].nodeType === Node.TEXT_NODE)
-                anchor = anchor.parent();
-            if(anchor.text() === '') {
-                var todel = anchor;
-                anchor = anchor.parent();
-                todel.remove();
-            }
-            if(anchorOffset > 0 && anchorOffset < anchor.text().length) {
-                if(wlxmlTag === null && wlxmlClass === null) {
-                    return this.splitWithNewNode(anchor);
-                }
-                return this.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass);
-            }
-            var newNode = this._createNode(wlxmlTag || anchor.attr('wlxml-tag'), wlxmlClass || anchor.attr('wlxml-class'));
-            if(anchorOffset === 0)
-                anchor.before(newNode)
-            else
-                anchor.after(newNode);
-            mediator.nodeCreated(newNode);
-            isDirty = true;
-        },
-        wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) {
-            var selection = window.getSelection();
-            if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
-                var startOffset = selection.anchorOffset;
-                var endOffset = selection.focusOffset;
-                if(startOffset > endOffset) {
-                    var tmp = startOffset;
-                    startOffset = endOffset;
-                    endOffset = tmp;
-                }
-                var node = selection.anchorNode;
-                var prefix = node.data.substr(0, startOffset);
-                var suffix = node.data.substr(endOffset);
-                var core = node.data.substr(startOffset, endOffset - startOffset);
-                var newNode = this._createNode(wlxmlTag, wlxmlClass);
-                newNode.text(core || 'test');
-                $(node).replaceWith(newNode);
-                newNode.before(prefix);
-                newNode.after(suffix);
-                mediator.nodeCreated(newNode);
-                isDirty = true;
-            }
-        },
-        splitWithNewNode: function(node) {
-            var selection = window.getSelection();
-            if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
-                var startOffset = selection.anchorOffset;
-                var endOffset = selection.focusOffset;
-                if(startOffset > endOffset) {
-                    var tmp = startOffset;
-                    startOffset = endOffset;
-                    endOffset = tmp;
-                }
-                var anchor = selection.anchorNode;
-                var prefix = anchor.data.substr(0, startOffset);
-                var suffix = anchor.data.substr(endOffset);
-                var prefixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
-                var newNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
-                var suffixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class'));
-                prefixNode.text(prefix);
-                suffixNode.text(suffix);
-                node.replaceWith(newNode);
-                newNode.before(prefixNode);
-                newNode.after(suffixNode);
-                mediator.nodeCreated(newNode);
-                isDirty = true;
-            }
-        },
-        getMetaData: function() {
-            var toret = {};
-            this.metaTable.find('tr').each(function() {
-                var tr = $(this);
-                var inputs = $(this).find('td [contenteditable]');
-                var key = $(inputs[0]).text();
-                var value = $(inputs[1]).text();
-                toret[key] = value;
-            });
-            console.log(toret);
-            return toret;
-        },
-        setMetaData: function(metadata) {
-            var view = this;
-            this.metaTable.find('tr').remove();
-            _.each(_.keys(metadata), function(key) {    
-                view._addMetaRow(key, metadata[key]);
-            });
-        },
-        setBody: function(HTMLTree) {
-            this.node.find('#rng-visualEditor-content').html(HTMLTree);
-        },
-        getBody: function() {
-            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;
-            mediator.nodeSelected(node);
-        },
-        selectNode: function(node) {
-            view._markSelected(node);
-            var range = document.createRange();
-            range.selectNodeContents(node[0]);
-            range.collapse(false);
-
-            var selection = document.getSelection();
-            selection.removeAllRanges()
-            selection.addRange(range);
-        },
-        selectNodeById: function(id) {
-            var node = this.node.find('#'+id);
-            if(node)
-                this.selectNode(node);
-        },
-        highlightNode: function(node) {
-            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) {
-                node.removeClass('rng-hover');
-                node.find('.rng-visualEditor-nodeHoverTag').remove();
-            }
-        },
-        highlightNodeById: function(id) {
-            var node = this.node.find('#'+id);
-            if(node)
-                this.highlightNode(node);
-        },
-        dimNodeById: function(id) {
-            var node = this.node.find('#'+id);
-            if(node)
-                this.dimNode(node);
-        },
-        selectFirstNode: function() {
-            var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() {
-                return $(this).clone().children().remove().end().text().trim() !== '';
-            }).first();
-            var node;
-            if(firstNodeWithText.length)
-                node = $(firstNodeWithText[0])
-            else {
-                node = this.node.find('[wlxml-class|="p"]')
-            }
-            this.selectNode(node);
-        },
-        _addMetaRow: function(key, value) {
-            var newRow = $(sandbox.getTemplate('metaItem')({key: key || '', value: value || ''}));
-            newRow.appendTo(this.metaTable);
-            return newRow;
-        },
-        toggleGrid: function(toggle) {
-            this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle);
-            this.gridToggled = toggle;
-        },
-        toggleTags: function(toggle) {
-        
-        }
-    };
-    
-    
-    var sideBarView = {
-        node: view.node.find('#rng-visualEditor-sidebar'),
-        setup: function() {
-            var view = this;
-            this.node.find('#rng-visualEditor-sidebarButtons a').click(function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-                var target = $(e.currentTarget);
-                if(!target.attr('data-content-id'))
-                    return;
-                view.selectTab(target.attr('data-content-id'));
-            });
-            view.selectTab('rng-visualEditor-edit');
-            
-            view.node.on('change', '.rng-visualEditor-editPaneNodeForm select', function(e) {
-                var target = $(e.target);
-                var attr = target.attr('id').split('-')[2].split('editPane')[1].substr(0,3) === 'Tag' ? 'tag' : 'class';
-                mediator.getCurrentNode().attr('wlxml-'+attr, target.val());
-                isDirty = true;
-            });
-                       
-            view.node.on('click', '.rng-visualEditor-editPaneSurrouding a', function(e) {
-                var target = $(e.target);
-                mediator.nodeDimmedById(target.attr('data-id'));
-                mediator.nodeSelectedById(target.attr('data-id'));
-            });
-            
-            view.node.on('mouseenter', '.rng-visualEditor-editPaneSurrouding a', function(e) {
-                var target = $(e.target);
-                mediator.nodeHighlightedById(target.attr('data-id')); 
-            });
-            view.node.on('mouseleave', '.rng-visualEditor-editPaneSurrouding a', function(e) {
-                var target = $(e.target);
-                mediator.nodeDimmedById(target.attr('data-id')); 
-            });
-        },
-        selectTab: function(id) {
-           this.node.find('.rng-visualEditor-sidebarContentItem').hide();
-           this.node.find('#'+id).show();
-           this.node.find('#rng-visualEditor-sidebarButtons li').removeClass('active');
-           this.node.find('#rng-visualEditor-sidebarButtons li a[data-content-id=' + id + ']').parent().addClass('active');
-        
-        },
-        updateEditPane: function(node) {
-            var pane = this.node.find('#rng-visualEditor-edit');
-            var parentClass = node.parent().attr('wlxml-class');
-            pane.html( $(sandbox.getTemplate('editPane')({tag: node.attr('wlxml-tag'), klass: node.attr('wlxml-class')})));
-            
-            var parent = node.parent('[wlxml-tag]').length ? {
-                repr: node.parent().attr('wlxml-tag') + (parentClass ? ' / ' + parentClass : ''),
-                id: node.parent().attr('id')
-            } : undefined;
-            var children = [];
-            node.children('[wlxml-tag]').each(function() {
-                var child = $(this);
-                var childClass = child.attr('wlxml-class');
-                children.push({repr: child.attr('wlxml-tag') + (childClass ? ' / ' + childClass : ''), id: child.attr('id')});
-            });
-            var naviTemplate = sandbox.getTemplate('editPaneNavigation')({parent: parent, children: children});
-            pane.find('.rng-visualEditor-editPaneSurrouding > div').html($(naviTemplate));
-        },
-        highlightNode: function(id) {
-            var pane = this.node.find('#rng-visualEditor-edit');
-            pane.find('a[data-id="'+id+'"]').addClass('rng-hover');
-        },
-        dimNode: function(id) {
-            var pane = this.node.find('#rng-visualEditor-edit');
-            pane.find('a[data-id="' +id+'"]').removeClass('rng-hover');
-        }
-    }
-    
-    var toolbarView = {
-        node: view.node.find('#rng-visualEditor-toolbar'),
-        setup: function() {
-            var view = this;
-            
-            view.node.find('button').click(function(e) {
-                var btn = $(e.currentTarget);
-                if(btn.attr('data-btn-type') === 'toggle') {
-                    btn.toggleClass('active')
-                    mediator.toolbarButtonToggled(btn.attr('data-btn'), btn.hasClass('active'));
-                }
-                if(btn.attr('data-btn-type') === 'cmd') {
-                    mediator.toolbarButtonCmd(btn.attr('data-btn'), btn.attr('data-meta'));
-                }
-            });
-        },
-        getOption: function(option) {
-            return this.node.find('.rng-visualEditor-toolbarOption[data-option=' + option +']').val();
-        }
-    }
-    
-    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() {
-            return view.currentNode;
-        },
-        nodeCreated: function(node) {
-            view.selectNode(node);
-        },
-        nodeSelected: function(node) {
-            sideBarView.updateEditPane(node);
-            statusBarView.showNode(node);
-        },
-        nodeSelectedById: function(id) {
-            view.selectNodeById(id);
-        },
-        nodeHighlightedById: function(id) {
-            view.highlightNodeById(id);
-        },
-        nodeDimmedById: function(id) {
-            view.dimNodeById(id);
-        },
-        toolbarButtonToggled: function(btn, toggle) {
-            if(btn === 'grid')
-                view.toggleGrid(toggle);
-            if(btn === 'tags')
-                view.toggleTags(toggle);
-        },
-        toolbarButtonCmd: function(btn, meta) {
-            if(btn === 'new-node') {
-                var wlxmlTag = toolbarView.getOption('newTag-tag');
-                var wlxmlClass = toolbarView.getOption('newTag-class');
-                if(meta) {
-                    var split = meta.split('/');
-                    wlxmlTag = split[0];
-                    wlxmlClass = split[1];
-                }
-                if(window.getSelection().isCollapsed)
-                    view.insertNewNode(wlxmlTag, wlxmlClass);
-                else {
-                    this.wrapWithNodeRequest(wlxmlTag, wlxmlClass);
-                }
-                    
-                    
-            }
-        },
-        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);
-        }
-        
-    }
-    
-    var isDirty = false;
-    var wasShownAlready = false;
-    
-    
-    return {
-        start: function() {
-            sandbox.publish('ready');
-        },
-        getView: function() {
-            return view.node;
-        },
-        setDocument: function(xml) {
-            var transformed = transformations.fromXML.getDocumentDescription(xml);
-            view.setBody(transformed.HTMLTree);
-            view.setMetaData(transformed.metadata);
-            isDirty = false;
-        },
-        getDocument: function() {
-            return transformations.toXML.getXML({HTMLTree: view.getBody(), metadata: view.getMetaData()});
-        },
-        isDirty: function() {
-            return isDirty;
-        },
-        setDirty: function(dirty) {
-            isDirty = dirty;
-        },
-        onShowed: function() {
-            if(!wasShownAlready) {
-                wasShownAlready = true;
-                view.selectFirstNode();
-            }
-        }
-    
-    }
-};
-
-});
\ No newline at end of file
diff --git a/styles/common.less b/styles/common.less
index 901e006..e7767a3 100644
--- a/styles/common.less
+++ b/styles/common.less
@@ -1,3 +1,7 @@
+body {
+    padding-top: 5px;
+}
+
 .rng-common-hoveredNode {
     border-color: red !important;
     border-style:solid;