From: Aleksander Łukasz <aleksander.lukasz@nowoczesnapolska.org.pl>
Date: Tue, 16 Apr 2013 08:51:16 +0000 (+0200)
Subject: WIP: selection, highlighting, some styling for visual editor
X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/3185249361cacf28b88b00093f8b262795c8fa3c?ds=sidebyside

WIP: selection, highlighting, some styling for visual editor
---

diff --git a/editor.css b/editor.css
index a1c743d..3691738 100644
--- a/editor.css
+++ b/editor.css
@@ -19,12 +19,53 @@ body {
     list-style-type: none;
 }
 
-#rng-visualEditor-content {
+#rng-visualEditor-contentWrapper {
+    border-color: grey;
+    border-style: solid;
+    border-width: 1px;
     float:left;
-    width: 540px;
+    width: 620px;
     height: 500px;
+    overflow-y: scroll;
+    padding: 5px 10px;
+}
+
+#rng-visualEditor-content {
+
+    outline: 0px solid transparent;
 }
 
 #rng-visualEditor-meta {
     float:right;
+}
+
+.rng {
+    float: none !important; /* temporaty workaround for Bootstrap's influence via [class*="span"] { float: left; } */
+    border-color: white;
+    border-style:solid;
+    border-width:1px;
+}
+
+.rng-header {
+    font-size: 19px;
+    font-style: bold;
+    margin-bottom: 10px;
+}
+
+.rng-section {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.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/visualEditor.js b/modules/visualEditor.js
index 08085de..ce62c6a 100644
--- a/modules/visualEditor.js
+++ b/modules/visualEditor.js
@@ -12,6 +12,13 @@ rng.modules.visualEditor = function(sandbox) {
             node.find('#rng-visualEditor-meta').on('keyup', function() {
                 isDirty = true;
             });
+
+            this.node.on('mouseover', '.rng', function(e) { $(e.target).addClass('rng-hover')});
+            this.node.on('mouseout', '.rng', function(e) { $(e.target).removeClass('rng-hover')});
+            this.node.on('click', '.rng', function(e) {
+                node.find('.rng').removeClass('rng-current');
+                $(e.target).addClass('rng-current');
+            });
         },
         getMetaData: function() {
             var toret = {};
diff --git a/modules/visualEditor.transformations.js b/modules/visualEditor.transformations.js
index 22deba5..cfb5877 100644
--- a/modules/visualEditor.transformations.js
+++ b/modules/visualEditor.transformations.js
@@ -14,14 +14,14 @@ if(typeof module !== 'undefined' && module.exports) {
             toret.find('metadata').remove();
             
             var toBlock = ['div', 'document', 'section', 'header'];
-            var toInline = ['aside'];
+            var toInline = ['aside', 'span'];
             
             toBlock.forEach(function(tagName) {
                 tagName = tagName.toLowerCase();
                 console.log('running ' + tagName);
                 toret.find(tagName).replaceWith(function() {
                     var suffix = tagName !== 'div'  ? tagName : 'block';
-                    return $('<div></div>').addClass('rng-' + suffix).append($(this).contents());
+                    return $('<div></div>').addClass('rng rng-' + suffix).append($(this).contents());
                 });
             });
             
@@ -29,7 +29,7 @@ if(typeof module !== 'undefined' && module.exports) {
                 tagName = tagName.toLowerCase();
                 toret.find(tagName).replaceWith(function() {
                     var node = this;
-                    return $('<span></span>').addClass('rng-' + tagName).append($(this).contents());
+                    return $('<span></span>').addClass('rng rng-' + tagName).append($(this).contents());
                 });
             });
             return toret.children();