Visual editor: changing tag/class via edit pane
[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             toret.find('metadata').remove();
15             
16             var toBlock = ['div', 'document', 'section', 'header'];
17             var toInline = ['aside', 'span'];
18             
19             toBlock.forEach(function(tagName) {
20                 tagName = tagName.toLowerCase();
21                 console.log('running ' + tagName);
22                 toret.find(tagName).replaceWith(function() {
23                     var toret = $('<div></div>').attr('wlxml-tag', tagName);
24                     var currentTag = $(this);
25                     if(currentTag.attr('class'))
26                         toret.attr('wlxml-class', currentTag.attr('class'));
27                     toret.append(currentTag.contents());
28                     return toret;
29                 });
30             });
31             
32             toInline.forEach(function(tagName) {
33                 tagName = tagName.toLowerCase();
34                 toret.find(tagName).replaceWith(function() {
35                     var currentTag = $(this);
36                     var toret = $('<span></span>').attr('wlxml-tag', tagName);
37                     if(currentTag.attr('class'))
38                         toret.attr('wlxml-class', currentTag.attr('class'));
39                     toret.append(currentTag.contents());
40                     return toret;
41                 });
42             });
43             return toret.children();
44         },
45         getMetaData: function(xml) {
46             var toret = {};
47             $(xml).find('metadata').children().each(function() {
48                 var node = $(this);
49                 toret[this.nodeName.split(':')[1].toLowerCase()] = node.text();
50             })
51             return toret;
52         },
53         getDocumentDescription: function(xml) {
54             return {
55                 HTMLTree: this.getHTMLTree(xml),
56                 metadata: this.getMetaData(xml)
57             }
58         }
59     }
60
61     transformations.toXML = {
62         getXML: function(documentDescription) {
63             
64             var inner = $(documentDescription.HTMLTree);
65             var toret = $('<div></div>');
66             toret.append(inner);
67             
68             toret.find('div, span').replaceWith(function() {
69                 var div = $(this);
70                 var tagName = div.attr('wlxml-tag');
71                 var toret = $('<'+tagName+'>');
72                 if(div.attr('wlxml-class'))
73                     toret.attr('class', div.attr('wlxml-class'))
74                 toret.append(div.contents());
75                 return toret;
76             });
77             
78             var meta = $('<metadata>');
79             _.each(_.keys(documentDescription.metadata), function(key) {
80                 meta.append($('<dc:'+key+'>' + documentDescription.metadata[key] + '</dc:'+key+'>'));
81             });
82             
83             toret.find('document').prepend(meta);
84             
85             return toret.html();
86             
87         }
88     }
89
90
91     if(typeof module !== 'undefined' && module.exports) {
92         module.exports = transformations;
93     } else {
94         rng.modules.visualEditor.transformations = transformations;
95     }
96
97 })($);