Visual editor - styling node hover tag
[fnpeditor.git] / modules / visualEditor.transformations.js
1 if(typeof module !== 'undefined' && module.exports) {
2     var $ = require('jquery');
3 }
4
5 (function($) {
6
7     var transformations = {};
8
9     transformations.fromXML = {
10         getHTMLTree: function(xml) {
11             var inner = $(xml).clone();
12             var toret = $('<div></div>');
13             toret.append(inner);
14             
15             var toBlock = ['div', 'document', 'section', 'header'];
16             var toInline = ['aside', 'span'];
17             
18             var transform = function(tags, replacingTagName) {
19                 tags.forEach(function(tagName) {
20                     tagName = tagName.toLowerCase();
21                     console.log('running ' + tagName);
22                     toret.find(tagName).replaceWith(function() {
23                         var currentTag = $(this);
24                         if(currentTag.attr('wlxml-tag'))
25                             return;
26                         var toret = $('<' + replacingTagName + '>').attr('wlxml-tag', tagName);
27                         for(var i = 0; i < this.attributes.length; i++) {
28                             var attr = this.attributes.item(i);
29                             var value = attr.name === 'class' ? attr.value.replace(/\./g, '-') : attr.value;
30                             toret.attr('wlxml-' + attr.name, value)
31                         }
32                         toret.append(currentTag.contents());
33                         return toret;
34                     });
35                 });
36             }
37             
38             transform(toBlock, 'div');
39             transform(toInline, 'span');
40
41             return toret.children();
42         },
43         getMetaData: function(xml) {
44             var toret = {};
45             $(xml).find('metadata').children().each(function() {
46                 var node = $(this);
47                 toret[this.nodeName.split(':')[1].toLowerCase()] = node.text();
48             })
49             return toret;
50         },
51         getDocumentDescription: function(xml) {
52             return {
53                 HTMLTree: this.getHTMLTree(xml),
54                 metadata: this.getMetaData(xml)
55             }
56         }
57     }
58
59     transformations.toXML = {
60         getXML: function(documentDescription) {
61             
62             var inner = $(documentDescription.HTMLTree);
63             var toret = $('<div></div>');
64             toret.append(inner);
65             
66             toret.find('div, span').replaceWith(function() {
67                 var div = $(this);
68                 var tagName = div.attr('wlxml-tag');
69                 var toret = $('<'+tagName+'>');
70                                    
71                 for(var i = 0; i < this.attributes.length; i++) {
72                     var attr = this.attributes.item(i);
73                     var split = attr.name.split('-')
74                     console.log(split);
75                     if(split[0] !== 'wlxml' || (split.length > 1 && split[1] === 'tag')) 
76                         continue;
77                     var wlxmlName = split.splice(1).join('-');
78                     var value = wlxmlName === 'class' ? attr.value.replace(/-/g, '.') : attr.value;
79                     console.log(name + ': ' + value);
80                     toret.attr(wlxmlName, value);
81                 }
82                     
83                 toret.append(div.contents());
84                 return toret;
85             });
86             
87             var meta = $('<metadata></metadata>\n');
88             _.each(_.keys(documentDescription.metadata), function(key) {
89                 meta.append('\n\t<dc:'+key+'>' + documentDescription.metadata[key] + '</dc:'+key+'>');
90             });
91             meta.append('\n');
92             
93             toret.find('metadata').replaceWith(meta);
94             
95             return toret.html();
96             
97         }
98     }
99
100
101     if(typeof module !== 'undefined' && module.exports) {
102         module.exports = transformations;
103     } else {
104         rng.modules.visualEditor.transformations = transformations;
105     }
106
107 })($);