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 <style type="text/css">\r
   6     #target {\r
   7         border: 2px solid red;              \r
   8         background-color: aqua;\r
   9         padding: 10px;\r
  10         \r
  11     }\r
  12 \r
  13     #cursor {\r
  14         background: black;\r
  15         color: white;        \r
  16         margin: 0em;\r
  17         margin-right: -1px;\r
  18         padding: 0em;\r
  19         border-right: 1px solid black;\r
  20     }\r
  21 </style>\r
  22 {% endblock %}\r
  23 \r
  24 {% block maincontent %}\r
  25 <div>\r
  26     <p>\r
  27         Przykładowy tekst, bo ala ma\r
  28         <a href="#" class="button"><span class="button-text">Przycisk</span>\r
  29             <span class="upper-bg"></span><span class="lower-bg"></span></a>\r
  30         ślicznego kotka i burego psa.\r
  31     </p>\r
  32     <p style="border: 1px solid fuchsia; line-height: 20pt; font-size: 12pt;">\r
  33         Ta linijka ma 2pt wysokości, oraz czcionkę 12pt. <button type="button" ><span>Przycisk 2</span></button>  jest super.\r
  34     </p>\r
  35 </div>\r
  36 {% endblock %}\r
  37 \r
  38 {% block extrabody %}\r
  39 \r
  40 <script type="text/javascript">\r
  41 <![CDATA[    \r
  42     $('#target').bind('keydown', function(event) {\r
  43         console.log("Keydown:", String.fromCharCode(event.keyCode), event);\r
  44         console.log("Selection:", window.getSelection() );\r
  45         if(event.keyCode == 37 \r
  46          || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40)\r
  47             return true;\r
  48 \r
  49         if(event.keyCode == 8)\r
  50         {\r
  51             var selection = window.getSelection();\r
  52             if(selection.anchorOffset == 0)\r
  53             {\r
  54                 var r = selection.getRangeAt(0);\r
  55                 r.setStartBefore( $("#elem")[0] );                \r
  56 \r
  57                 return true;\r
  58             }\r
  59             return true;\r
  60         }\r
  61         \r
  62         return true;\r
  63     }).\r
  64         bind('dragstart', function() { console.log('dragstart'); }).\r
  65         bind('dragenter', function() { console.log('dragenter'); }).\r
  66         bind('dragover', function() { console.log('dragover'); }).\r
  67         bind('dragover', function() { console.log('dragend'); }).\r
  68         bind('drag', function() { console.log('drag'); });\r
  69 \r
  70     $('*').bind('drop', function(event) { console.log('drop on:', event.target, 'received on', this); });\r
  71         \r
  72 \r
  73 ]]>\r
  74 </script>\r
  75 \r
  76 {% comment %}\r
  77 <script type="text/javascript">\r
  78 <![CDATA[\r
  79     function serializeAttribute(attr, acc) {\r
  80         return acc + ' ' + attr.nodeName + '="'+ attr.nodeValue + '"';\r
  81     }\r
  82 \r
  83     function serializeElement(element, acc, level)\r
  84     {\r
  85         var isBlock = false;\r
  86 \r
  87         if(element.nodeName != 'span' && element.nodeName != 'p')\r
  88             isBlock = true;\r
  89 \r
  90         if(isBlock) {\r
  91             for(var i=0; i < level; i++)\r
  92                 acc += '  ';\r
  93         }\r
  94         \r
  95         acc += "<" + element.nodeName;\r
  96         \r
  97         for(var i=0; i < element.attributes.length; i++)\r
  98             acc = serializeAttribute(element.attributes.item(i), acc);\r
  99 \r
 100         if(element.firstChild)\r
 101         {\r
 102             acc += ">\n";\r
 103 \r
 104             if(element.firstChild)\r
 105                 acc = serializeNode(element.firstChild, acc, level+1);\r
 106 \r
 107             acc += "\n";\r
 108             \r
 109             for(var i=0; i < level; i++)\r
 110                 acc += '  ';\r
 111 \r
 112             acc += "</"+element.nodeName + ">";            \r
 113         }\r
 114         else {\r
 115             acc += " />";\r
 116         }\r
 117 \r
 118         if(isBlock) acc += "\n";\r
 119         \r
 120         return acc;\r
 121     }\r
 122 \r
 123 \r
 124     // step-by-step serializer\r
 125     function serializeNode(node, acc, level)\r
 126     {\r
 127         \r
 128 \r
 129         if(node.nodeType == 11)\r
 130             return serializeNode(node.firstChild, acc, level);\r
 131 \r
 132         if(node.nodeType == 1)\r
 133             acc = serializeElement(node, acc, level);\r
 134         \r
 135         else if(node.nodeType == 3)\r
 136             acc += node.nodeValue;\r
 137 \r
 138         if(node.nextSibling)\r
 139             return serializeNode(node.nextSibling, acc, level);\r
 140         else\r
 141             return acc;\r
 142     }\r
 143 \r
 144     function serializeXML(element) {\r
 145         return serializeNode(element, '', 0);\r
 146     }\r
 147 \r
 148     // w3c version first\r
 149     var there = new XSLTProcessor();\r
 150     var here = new XSLTProcessor();\r
 151 \r
 152     $.ajax({\r
 153         url: "/static/xsl/wl2html_client.xsl",\r
 154         dataType: 'xml',\r
 155         success: function(data) {\r
 156             there.importStylesheet(data);\r
 157             console.log('There XSL loaded successfully');\r
 158         },\r
 159         async: false\r
 160     });\r
 161 \r
 162     $.ajax({\r
 163         url: "/static/xsl/html2wl_client.xsl",\r
 164         dataType: 'xml',\r
 165         success: function(data) {\r
 166             here.importStylesheet(data);\r
 167             console.log('Here XSL loaded successfully');\r
 168         },\r
 169         async: false\r
 170     });\r
 171     \r
 172     $('#render').click(function()\r
 173     {\r
 174         src = $('#source').val();\r
 175         src = src.replace(/\/\s+/g, '<br />');\r
 176         var doc = (new DOMParser()).parseFromString(src, "text/xml");\r
 177         // console.log("Parsed", doc);\r
 178         var along = there.transformToDocument(doc).documentElement;\r
 179         // console.log("HTML", along, serializeXML(along) );\r
 180         var xfrm = here.transformToDocument(along).documentElement;\r
 181         // console.log("WLML", xfrm, serializeXML(xfrm) );\r
 182         var out = (new XMLSerializer()).serializeToString(xfrm);\r
 183         $('#dest').val(out);\r
 184     });\r
 185 ]]>\r
 186 </script>\r
 187 {% endcomment %}\r
 188 {% endblock %}