Annotations.
[redakcja.git] / 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 %}