Client-side XSLT renderer prototype.

[redakcja.git] / platforma / templates / renderer.html

diff --git a/platforma/templates/renderer.html b/platforma/templates/renderer.html
new file mode 100755 (executable)
index 0000000..dabf338
--- /dev/null
+++ b/platforma/templates/renderer.html
@@ -0,0 +1,123 @@
+{% extends "base.html" %}\r
+\r
+{% block extrahead %}\r
+<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8">\r
+{% endblock %}\r
+\r
+{% block maincontent %}\r
+\r
+<p>Source</p>\r
+<textarea id="source" cols="80" rows="10" ></textarea>\r
+\r
+<p>Rendered</p>\r
+<textarea id="dest" cols="80" rows="10" ></textarea>\r
+\r
+<button type="button" id="render">Render</button>\r
+<button type="button" id="unrender">Unrender</button>\r
+\r
+<div style="position: fixed; right: 0px; top: 0px; width: 640px; height: 300px; background: blue;">\r
+<div id="preview" class="htmlview">\r
+</div>\r
+</div>\r
+{% endblock %}\r
+\r
+{% block extrabody %}\r
+<script type="text/javascript">\r
+\r
+    function serializeAttribute(attr, acc) {\r
+        return acc + ' ' + attr.nodeName + '="'+ attr.nodeValue + '"';\r
+    }\r
+\r
+    function serializeElement(element, acc, level)\r
+    {\r
+        var isBlock = false;\r
+\r
+        if(element.nodeName != 'span' && element.nodeName != 'p')\r
+            isBlock = true;\r
+\r
+        if(isBlock) {\r
+            for(var i=0; i < level; i++)\r
+                acc += '  ';\r
+        }\r
+        \r
+        acc += "<" + element.nodeName;\r
+        for(var i=0; i < element.attributes.length; i++)\r
+            acc = serializeAttribute(element.attributes.item(i), acc);\r
+\r
+        if(element.firstChild)\r
+        {\r
+            acc += ">\n";\r
+\r
+            if(element.firstChild)\r
+                acc = serializeNode(element.firstChild, acc, level+1);\r
+\r
+            acc += "\n";\r
+            \r
+            for(var i=0; i < level; i++)\r
+                acc += '  ';\r
+\r
+            acc += "</"+element.nodeName + ">";            \r
+        }\r
+        else {\r
+            acc += " />";\r
+        }\r
+\r
+        if(isBlock) acc += "\n";\r
+        \r
+        return acc;\r
+    }\r
+\r
+\r
+    // step-by-step serializer\r
+    function serializeNode(node, acc, level)\r
+    {\r
+        \r
+\r
+        if(node.nodeType == 11)\r
+            return serializeNode(node.firstChild, acc, level);\r
+\r
+        if(node.nodeType == 1)\r
+            acc = serializeElement(node, acc, level);\r
+        \r
+        else if(node.nodeType == 3)\r
+            acc += node.nodeValue;\r
+\r
+        if(node.nextSibling)\r
+            return serializeNode(node.nextSibling, acc, level);\r
+        else\r
+            return acc;\r
+    }\r
+\r
+    function serializeXML(element) {\r
+        return serializeNode(element, '', 0);\r
+    }\r
+\r
+    // w3c version first\r
+    var xslt = new XSLTProcessor();\r
+\r
+    $.ajax({\r
+        url: "/static/xsl/wl2html_client.xsl",\r
+        dataType: 'xml',\r
+        success: function(data) {\r
+            xslt.importStylesheet(data);\r
+            console.log('XSL loaded successfully');\r
+        },\r
+        async: false\r
+    });\r
+    \r
+    $('#render').click(function() {\r
+        \r
+        var src = '<?xml version="1.0"?><chunk>'+$('#source').val()+'</chunk>';\r
+        src = src.replace(/\/\s+/g, '<br />');\r
+        var doc = (new DOMParser()).parseFromString(src, "text/xml");\r
+        // var string = (new XMLSerializer()).serializeToString(doc);\r
+        // console.log('rendering', string);\r
+        \r
+        var result = xslt.transformToFragment(doc, document);\r
+        var string =  serializeXML(result);\r
+        var dest = $('#dest');\r
+        dest.val( string );\r
+        $('#preview').html(string);\r
+    });    \r
+</script>\r
+{% endblock %}
\ No newline at end of file