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 %}