\r
{% block extrahead %}\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
+<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
-\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
+<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
- 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
+<![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