84de36d6b57d32d3e00b682d88c2b51699747d77
[redakcja.git] / platforma / templates / renderer.html
1 {% extends "base.html" %}\r
2 \r
3 {% block extrahead %}\r
4 <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8" />\r
5 <script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>\r
6 {% endblock %}\r
7 \r
8 {% block maincontent %}\r
9 \r
10 <!-- <button type="button" id="render">Render</button>\r
11 \r
12 <table width="100%" align="center">\r
13     <tr>\r
14         <td width="50%">\r
15                 <textarea id="source" cols="70" rows="30" ></textarea>\r
16         </td>\r
17         <td width="50%">\r
18                 <textarea id="dest" cols="70" rows="30" ></textarea>\r
19         </td>\r
20     </tr>\r
21 </table>\r
22 <iframe>\r
23     \r
24 </iframe> -->\r
25 <div id="target"> </div>\r
26 {% endblock %}\r
27 \r
28 {% block extrabody %}\r
29 \r
30 <script type="text/javascript">\r
31 <![CDATA[\r
32     var editor = new CodeMirror(CodeMirror.replace("target"), {\r
33   parserfile: ["tokenizejavascript.js", "parsejavascript.js"],\r
34   path: "{{STATIC_URL}}js/lib/codemirror",\r
35   stylesheet: "{{STATIC_URL}}css/xmlcolors.css",\r
36   content: "Hello world!"\r
37 });\r
38 ]]>\r
39 </script>\r
40 \r
41 {% comment %}\r
42 <script type="text/javascript">\r
43 <![CDATA[\r
44     function serializeAttribute(attr, acc) {\r
45         return acc + ' ' + attr.nodeName + '="'+ attr.nodeValue + '"';\r
46     }\r
47 \r
48     function serializeElement(element, acc, level)\r
49     {\r
50         var isBlock = false;\r
51 \r
52         if(element.nodeName != 'span' && element.nodeName != 'p')\r
53             isBlock = true;\r
54 \r
55         if(isBlock) {\r
56             for(var i=0; i < level; i++)\r
57                 acc += '  ';\r
58         }\r
59         \r
60         acc += "<" + element.nodeName;\r
61         \r
62         for(var i=0; i < element.attributes.length; i++)\r
63             acc = serializeAttribute(element.attributes.item(i), acc);\r
64 \r
65         if(element.firstChild)\r
66         {\r
67             acc += ">\n";\r
68 \r
69             if(element.firstChild)\r
70                 acc = serializeNode(element.firstChild, acc, level+1);\r
71 \r
72             acc += "\n";\r
73             \r
74             for(var i=0; i < level; i++)\r
75                 acc += '  ';\r
76 \r
77             acc += "</"+element.nodeName + ">";            \r
78         }\r
79         else {\r
80             acc += " />";\r
81         }\r
82 \r
83         if(isBlock) acc += "\n";\r
84         \r
85         return acc;\r
86     }\r
87 \r
88 \r
89     // step-by-step serializer\r
90     function serializeNode(node, acc, level)\r
91     {\r
92         \r
93 \r
94         if(node.nodeType == 11)\r
95             return serializeNode(node.firstChild, acc, level);\r
96 \r
97         if(node.nodeType == 1)\r
98             acc = serializeElement(node, acc, level);\r
99         \r
100         else if(node.nodeType == 3)\r
101             acc += node.nodeValue;\r
102 \r
103         if(node.nextSibling)\r
104             return serializeNode(node.nextSibling, acc, level);\r
105         else\r
106             return acc;\r
107     }\r
108 \r
109     function serializeXML(element) {\r
110         return serializeNode(element, '', 0);\r
111     }\r
112 \r
113     // w3c version first\r
114     var there = new XSLTProcessor();\r
115     var here = new XSLTProcessor();\r
116 \r
117     $.ajax({\r
118         url: "/static/xsl/wl2html_client.xsl",\r
119         dataType: 'xml',\r
120         success: function(data) {\r
121             there.importStylesheet(data);\r
122             console.log('There XSL loaded successfully');\r
123         },\r
124         async: false\r
125     });\r
126 \r
127     $.ajax({\r
128         url: "/static/xsl/html2wl_client.xsl",\r
129         dataType: 'xml',\r
130         success: function(data) {\r
131             here.importStylesheet(data);\r
132             console.log('Here XSL loaded successfully');\r
133         },\r
134         async: false\r
135     });\r
136     \r
137     $('#render').click(function()\r
138     {\r
139         src = $('#source').val();\r
140         src = src.replace(/\/\s+/g, '<br />');\r
141         var doc = (new DOMParser()).parseFromString(src, "text/xml");\r
142         // console.log("Parsed", doc);\r
143         var along = there.transformToDocument(doc).documentElement;\r
144         // console.log("HTML", along, serializeXML(along) );\r
145         var xfrm = here.transformToDocument(along).documentElement;\r
146         // console.log("WLML", xfrm, serializeXML(xfrm) );\r
147         var out = (new XMLSerializer()).serializeToString(xfrm);\r
148         $('#dest').val(out);\r
149     });\r
150 ]]>\r
151 </script>\r
152 {% endcomment %}\r
153 {% endblock %}