{% extends "base.html" %}\r
\r
{% block extrahead %}\r
-<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8">\r
+<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8" />\r
+<script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>\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
+<!-- <button type="button" id="render">Render</button>\r
+\r
+<table width="100%" align="center">\r
+ <tr>\r
+ <td width="50%">\r
+ <textarea id="source" cols="70" rows="30" ></textarea>\r
+ </td>\r
+ <td width="50%">\r
+ <textarea id="dest" cols="70" rows="30" ></textarea>\r
+ </td>\r
+ </tr>\r
+</table>\r
+<iframe>\r
+ \r
+</iframe> -->\r
+<div id="target"> </div>\r
{% endblock %}\r
\r
{% block extrabody %}\r
+\r
<script type="text/javascript">\r
+<![CDATA[\r
+ var editor = new CodeMirror(CodeMirror.replace("target"), {\r
+ parserfile: ["tokenizejavascript.js", "parsejavascript.js"],\r
+ path: "{{STATIC_URL}}js/lib/codemirror",\r
+ stylesheet: "{{STATIC_URL}}css/xmlcolors.css",\r
+ content: "Hello world!"\r
+});\r
+]]>\r
+</script>\r
\r
+{% comment %}\r
+<script type="text/javascript">\r
+<![CDATA[\r
function serializeAttribute(attr, acc) {\r
return acc + ' ' + attr.nodeName + '="'+ attr.nodeValue + '"';\r
}\r
}\r
\r
acc += "<" + element.nodeName;\r
+ \r
for(var i=0; i < element.attributes.length; i++)\r
acc = serializeAttribute(element.attributes.item(i), acc);\r
\r
}\r
\r
// w3c version first\r
- var xslt = new XSLTProcessor();\r
+ var there = new XSLTProcessor();\r
+ var here = 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
+ there.importStylesheet(data);\r
+ console.log('There XSL loaded successfully');\r
+ },\r
+ async: false\r
+ });\r
+\r
+ $.ajax({\r
+ url: "/static/xsl/html2wl_client.xsl",\r
+ dataType: 'xml',\r
+ success: function(data) {\r
+ here.importStylesheet(data);\r
+ console.log('Here 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
+ $('#render').click(function()\r
+ {\r
+ src = $('#source').val();\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
+ // console.log("Parsed", doc);\r
+ var along = there.transformToDocument(doc).documentElement;\r
+ // console.log("HTML", along, serializeXML(along) );\r
+ var xfrm = here.transformToDocument(along).documentElement;\r
+ // console.log("WLML", xfrm, serializeXML(xfrm) );\r
+ var out = (new XMLSerializer()).serializeToString(xfrm);\r
+ $('#dest').val(out);\r
+ });\r
+]]>\r
</script>\r
+{% endcomment %}\r
{% endblock %}
\ No newline at end of file