WIP: selection, highlighting, some styling for visual editor

diff --git a/editor.css b/editor.css
index a1c743d..3691738 100644 (file)
--- a/editor.css
+++ b/editor.css
@@ -19,12 +19,53 @@ body {
     list-style-type: none;\r
 }\r
 \r
-#rng-visualEditor-content {\r
+#rng-visualEditor-contentWrapper {\r
+    border-color: grey;\r
+    border-style: solid;\r
+    border-width: 1px;\r
     float:left;\r
-    width: 540px;\r
+    width: 620px;\r
     height: 500px;\r
+    overflow-y: scroll;\r
+    padding: 5px 10px;\r
+}\r
+\r
+#rng-visualEditor-content {\r
+\r
+    outline: 0px solid transparent;\r
 }\r
 \r
 #rng-visualEditor-meta {\r
     float:right;\r
+}\r
+\r
+.rng {\r
+    float: none !important; /* temporaty workaround for Bootstrap's influence via [class*="span"] { float: left; } */\r
+    border-color: white;\r
+    border-style:solid;\r
+    border-width:1px;\r
+}\r
+\r
+.rng-header {\r
+    font-size: 19px;\r
+    font-style: bold;\r
+    margin-bottom: 10px;\r
+}\r
+\r
+.rng-section {\r
+    margin-top: 10px;\r
+    margin-bottom: 10px;\r
+}\r
+\r
+.rng-hover {\r
+    border-color: red;\r
+    border-style:solid;\r
+    border-width:1px;\r
+}\r
+\r
+.rng-current {\r
+    background: #fffacd;\r
+    border-color: grey;\r
+    border-style:dashed;\r
+    border-width:1px;\r
 }
\ No newline at end of file

diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 08085de..ce62c6a 100644 (file)
--- 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() {\r
                 isDirty = true;\r
             });\r
+
+            this.node.on('mouseover', '.rng', function(e) { $(e.target).addClass('rng-hover')});\r
+            this.node.on('mouseout', '.rng', function(e) { $(e.target).removeClass('rng-hover')});\r
+            this.node.on('click', '.rng', function(e) {\r
+                node.find('.rng').removeClass('rng-current');\r
+                $(e.target).addClass('rng-current');\r
+            });
         },\r
         getMetaData: function() {\r
             var toret = {};\r

diff --git a/modules/visualEditor.transformations.js b/modules/visualEditor.transformations.js
index 22deba5..cfb5877 100644 (file)
--- 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();