-{% extends "base.html" %}\r
-\r
-{% block extrahead %}\r
-<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8" />\r
-<style type="text/css">\r
- #target {\r
- border: 2px solid red; \r
- background-color: aqua;\r
- padding: 10px;\r
- \r
- }\r
-\r
- #cursor {\r
- background: black;\r
- color: white; \r
- margin: 0em;\r
- margin-right: -1px;\r
- padding: 0em;\r
- border-right: 1px solid black;\r
- }\r
-</style>\r
-{% endblock %}\r
-\r
-{% block maincontent %}\r
-<div>\r
- <p>\r
- Przykładowy tekst, bo ala ma\r
- <a href="#" class="button"><span class="button-text">Przycisk</span>\r
- <span class="upper-bg"></span><span class="lower-bg"></span></a>\r
- ślicznego kotka i burego psa.\r
- </p>\r
- <p style="border: 1px solid fuchsia; line-height: 20pt; font-size: 12pt;">\r
- Ta linijka ma 2pt wysokości, oraz czcionkę 12pt. <button type="button" ><span>Przycisk 2</span></button> jest super.\r
- </p>\r
-</div>\r
-{% endblock %}\r
-\r
-{% block extrabody %}\r
-\r
-<script type="text/javascript">\r
-<![CDATA[ \r
- $('#target').bind('keydown', function(event) {\r
- console.log("Keydown:", String.fromCharCode(event.keyCode), event);\r
- console.log("Selection:", window.getSelection() );\r
- if(event.keyCode == 37 \r
- || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40)\r
- return true;\r
-\r
- if(event.keyCode == 8)\r
- {\r
- var selection = window.getSelection();\r
- if(selection.anchorOffset == 0)\r
- {\r
- var r = selection.getRangeAt(0);\r
- r.setStartBefore( $("#elem")[0] ); \r
-\r
- return true;\r
- }\r
- return true;\r
- }\r
- \r
- return true;\r
- }).\r
- bind('dragstart', function() { console.log('dragstart'); }).\r
- bind('dragenter', function() { console.log('dragenter'); }).\r
- bind('dragover', function() { console.log('dragover'); }).\r
- bind('dragover', function() { console.log('dragend'); }).\r
- bind('drag', function() { console.log('drag'); });\r
-\r
- $('*').bind('drop', function(event) { console.log('drop on:', event.target, 'received on', this); });\r
- \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
- 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
- \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 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
- 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
- src = $('#source').val();\r
- src = src.replace(/\/\s+/g, '<br />');\r
- var doc = (new DOMParser()).parseFromString(src, "text/xml");\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