Visual Editor: Moving wlxml information to its own attribute

diff --git a/editor.css b/editor.css
index 667db19..a6691f2 100644 (file)
--- a/editor.css
+++ b/editor.css
@@ -65,20 +65,20 @@ body {
     height: 500px;\r
 }\r
 \r
     height: 500px;\r
 }\r
 \r

-.rng {\r
+[wlxml-tag] {\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
     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
+[wlxml-tag=header] {\r

     font-size: 19px;\r
     font-style: bold;\r
     margin-bottom: 10px;\r
 }\r
 \r
     font-size: 19px;\r
     font-style: bold;\r
     margin-bottom: 10px;\r
 }\r
 \r

-.rng-section {\r
+[wlxml-tag=section] {\r

     margin-top: 10px;\r
     margin-bottom: 10px;\r
 }\r
     margin-top: 10px;\r
     margin-bottom: 10px;\r
 }\r

diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 38f3302..132c70f 100644 (file)
--- a/modules/visualEditor.js
+++ b/modules/visualEditor.js
@@ -14,9 +14,10 @@ rng.modules.visualEditor = function(sandbox) {
                 isDirty = true;\r
             });\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
+            this.node.on('mouseover', '[wlxml-tag]', function(e) { $(e.target).addClass('rng-hover')});\r
+            this.node.on('mouseout', '[wlxml-tag]', function(e) { $(e.target).removeClass('rng-hover')});\r
+            this.node.on('click', '[wlxml-tag]', function(e) {\r
+                console.log('clicked node type: '+e.target.nodeType);\r

                 view._markSelected($(e.target));\r
             });\r
 \r
                 view._markSelected($(e.target));\r
             });\r
 \r


@@ -24,7 +25,7 @@ rng.modules.visualEditor = function(sandbox) {
                 var anchor = $(window.getSelection().anchorNode);\r
                 if(anchor[0].nodeType === Node.TEXT_NODE)\r
                     anchor = anchor.parent();\r
                 var anchor = $(window.getSelection().anchorNode);\r
                 if(anchor[0].nodeType === Node.TEXT_NODE)\r
                     anchor = anchor.parent();\r

-                if(!anchor.hasClass('rng'))\r
+                if(!anchor.is('[wlxml-tag]'))\r

                     return;\r
                 view._markSelected(anchor);\r
             });
                     return;\r
                 view._markSelected(anchor);\r
             });


@@ -54,7 +55,7 @@ rng.modules.visualEditor = function(sandbox) {
             return this.node.find('#rng-visualEditor-content').html();\r
         }, \r
         _markSelected: function(node) {\r
             return this.node.find('#rng-visualEditor-content').html();\r
         }, \r
         _markSelected: function(node) {\r

-            this.node.find('.rng').removeClass('rng-current');\r
+            this.node.find('.rng-current').removeClass('rng-current');\r

             node.addClass('rng-current');\r
         }\r
     };\r
             node.addClass('rng-current');\r
         }\r
     };\r

diff --git a/modules/visualEditor.transformations.js b/modules/visualEditor.transformations.js
index cfb5877..c2b0d3a 100644 (file)
--- a/modules/visualEditor.transformations.js
+++ b/modules/visualEditor.transformations.js
@@ -21,7 +21,7 @@ if(typeof module !== 'undefined' && module.exports) {
                 console.log('running ' + tagName);
                 toret.find(tagName).replaceWith(function() {
                     var suffix = tagName !== 'div'  ? tagName : 'block';
                 console.log('running ' + tagName);
                 toret.find(tagName).replaceWith(function() {
                     var suffix = tagName !== 'div'  ? tagName : 'block';

-                    return $('<div></div>').addClass('rng rng-' + suffix).append($(this).contents());
+                    return $('<div></div>').attr('wlxml-tag', 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;
                 tagName = tagName.toLowerCase();
                 toret.find(tagName).replaceWith(function() {
                     var node = this;

-                    return $('<span></span>').addClass('rng rng-' + tagName).append($(this).contents());
+                    return $('<span></span>').attr('wlxml-tag', tagName).append($(this).contents());

                 });
             });
             return toret.children();
                 });
             });
             return toret.children();


@@ -59,7 +59,7 @@ if(typeof module !== 'undefined' && module.exports) {
             
             toret.find('div, span').replaceWith(function() {
                 var div = $(this);
             
             toret.find('div, span').replaceWith(function() {
                 var div = $(this);

-                var tagName = div.attr('class').split('rng-')[1];
+                var tagName = div.attr('wlxml-tag');

                 return $('<'+tagName+'>').append(div.contents());
             });
             
                 return $('<'+tagName+'>').append(div.contents());
             });