Merge branch 'lqc-trunk' of git@stigma:platforma into lqc-trunk

[redakcja.git] / platforma / templates / renderer.html

diff --git a/platforma/templates/renderer.html b/platforma/templates/renderer.html
index dabf338..d251842 100755 (executable)
--- a/platforma/templates/renderer.html
+++ b/platforma/templates/renderer.html
@@ -1,29 +1,81 @@
 {% extends "base.html" %}\r
 \r
 {% block extrahead %}\r
-<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8">\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
-\r
-<p>Source</p>\r
-<textarea id="source" cols="80" rows="10" ></textarea>\r
-\r
-<p>Rendered</p>\r
-<textarea id="dest" cols="80" rows="10" ></textarea>\r
-\r
-<button type="button" id="render">Render</button>\r
-<button type="button" id="unrender">Unrender</button>\r
-\r
-<div style="position: fixed; right: 0px; top: 0px; width: 640px; height: 300px; background: blue;">\r
-<div id="preview" class="htmlview">\r
-</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
+    $('#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
@@ -41,6 +93,7 @@
         }\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
@@ -93,31 +146,43 @@
     }\r
 \r
     // w3c version first\r
-    var xslt = new XSLTProcessor();\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
-            xslt.importStylesheet(data);\r
-            console.log('XSL loaded successfully');\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
-        var src = '<?xml version="1.0"?><chunk>'+$('#source').val()+'</chunk>';\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
-        // var string = (new XMLSerializer()).serializeToString(doc);\r
-        // console.log('rendering', string);\r
-        \r
-        var result = xslt.transformToFragment(doc, document);\r
-        var string =  serializeXML(result);\r
-        var dest = $('#dest');\r
-        dest.val( string );\r
-        $('#preview').html(string);\r
-    });    \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