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 {% endblock %}\r
   6 \r
   7 {% block maincontent %}\r
   8 \r
   9 <p>Source</p>\r
  10 <textarea id="source" cols="80" rows="10" ></textarea>\r
  11 \r
  12 <p>Rendered</p>\r
  13 <textarea id="dest" cols="80" rows="10" ></textarea>\r
  14 \r
  15 <button type="button" id="render">Render</button>\r
  16 <button type="button" id="unrender">Unrender</button>\r
  17 \r
  18 <div style="position: fixed; right: 0px; top: 0px; width: 640px; height: 300px; background: blue;">\r
  19 <div id="preview" class="htmlview">\r
  20 </div>\r
  21 </div>\r
  22 {% endblock %}\r
  23 \r
  24 {% block extrabody %}\r
  25 <script type="text/javascript">\r
  26 \r
  27     function serializeAttribute(attr, acc) {\r
  28         return acc + ' ' + attr.nodeName + '="'+ attr.nodeValue + '"';\r
  29     }\r
  30 \r
  31     function serializeElement(element, acc, level)\r
  32     {\r
  33         var isBlock = false;\r
  34 \r
  35         if(element.nodeName != 'span' && element.nodeName != 'p')\r
  36             isBlock = true;\r
  37 \r
  38         if(isBlock) {\r
  39             for(var i=0; i < level; i++)\r
  40                 acc += '  ';\r
  41         }\r
  42         \r
  43         acc += "<" + element.nodeName;\r
  44         for(var i=0; i < element.attributes.length; i++)\r
  45             acc = serializeAttribute(element.attributes.item(i), acc);\r
  46 \r
  47         if(element.firstChild)\r
  48         {\r
  49             acc += ">\n";\r
  50 \r
  51             if(element.firstChild)\r
  52                 acc = serializeNode(element.firstChild, acc, level+1);\r
  53 \r
  54             acc += "\n";\r
  55             \r
  56             for(var i=0; i < level; i++)\r
  57                 acc += '  ';\r
  58 \r
  59             acc += "</"+element.nodeName + ">";            \r
  60         }\r
  61         else {\r
  62             acc += " />";\r
  63         }\r
  64 \r
  65         if(isBlock) acc += "\n";\r
  66         \r
  67         return acc;\r
  68     }\r
  69 \r
  70 \r
  71     // step-by-step serializer\r
  72     function serializeNode(node, acc, level)\r
  73     {\r
  74         \r
  75 \r
  76         if(node.nodeType == 11)\r
  77             return serializeNode(node.firstChild, acc, level);\r
  78 \r
  79         if(node.nodeType == 1)\r
  80             acc = serializeElement(node, acc, level);\r
  81         \r
  82         else if(node.nodeType == 3)\r
  83             acc += node.nodeValue;\r
  84 \r
  85         if(node.nextSibling)\r
  86             return serializeNode(node.nextSibling, acc, level);\r
  87         else\r
  88             return acc;\r
  89     }\r
  90 \r
  91     function serializeXML(element) {\r
  92         return serializeNode(element, '', 0);\r
  93     }\r
  94 \r
  95     // w3c version first\r
  96     var xslt = new XSLTProcessor();\r
  97 \r
  98     $.ajax({\r
  99         url: "/static/xsl/wl2html_client.xsl",\r
 100         dataType: 'xml',\r
 101         success: function(data) {\r
 102             xslt.importStylesheet(data);\r
 103             console.log('XSL loaded successfully');\r
 104         },\r
 105         async: false\r
 106     });\r
 107     \r
 108     $('#render').click(function() {\r
 109         \r
 110         var src = '<?xml version="1.0"?><chunk>'+$('#source').val()+'</chunk>';\r
 111         src = src.replace(/\/\s+/g, '<br />');\r
 112         var doc = (new DOMParser()).parseFromString(src, "text/xml");\r
 113         // var string = (new XMLSerializer()).serializeToString(doc);\r
 114         // console.log('rendering', string);\r
 115         \r
 116         var result = xslt.transformToFragment(doc, document);\r
 117         var string =  serializeXML(result);\r
 118         var dest = $('#dest');\r
 119         dest.val( string );\r
 120         $('#preview').html(string);\r
 121     });    \r
 122 </script>\r
 123 {% endblock %}