Annotations.
[redakcja.git] / platforma / templates / renderer.html
index 84de36d..d251842 100755 (executable)
@@ -2,39 +2,74 @@
 \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