X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/8705c980a8a35af6c4fc6e309f389bc1aae0b6d7..563c8930b3b5643399dc409f6ed139f7289b6ea7:/platforma/templates/renderer.html?ds=sidebyside

diff --git a/platforma/templates/renderer.html b/platforma/templates/renderer.html
index dabf3381..d2518427 100755
--- a/platforma/templates/renderer.html
+++ b/platforma/templates/renderer.html
@@ -1,29 +1,81 @@
 {% extends "base.html" %}
 
 {% block extrahead %}
-<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8">
+<link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8" />
+<style type="text/css">
+    #target {
+        border: 2px solid red;              
+        background-color: aqua;
+        padding: 10px;
+        
+    }
+
+    #cursor {
+        background: black;
+        color: white;        
+        margin: 0em;
+        margin-right: -1px;
+        padding: 0em;
+        border-right: 1px solid black;
+    }
+</style>
 {% endblock %}
 
 {% block maincontent %}
-
-<p>Source</p>
-<textarea id="source" cols="80" rows="10" ></textarea>
-
-<p>Rendered</p>
-<textarea id="dest" cols="80" rows="10" ></textarea>
-
-<button type="button" id="render">Render</button>
-<button type="button" id="unrender">Unrender</button>
-
-<div style="position: fixed; right: 0px; top: 0px; width: 640px; height: 300px; background: blue;">
-<div id="preview" class="htmlview">
-</div>
+<div>
+    <p>
+        Przykładowy tekst, bo ala ma
+        <a href="#" class="button"><span class="button-text">Przycisk</span>
+            <span class="upper-bg"></span><span class="lower-bg"></span></a>
+        ślicznego kotka i burego psa.
+    </p>
+    <p style="border: 1px solid fuchsia; line-height: 20pt; font-size: 12pt;">
+        Ta linijka ma 2pt wysokości, oraz czcionkę 12pt. <button type="button" ><span>Przycisk 2</span></button>  jest super.
+    </p>
 </div>
 {% endblock %}
 
 {% block extrabody %}
+
 <script type="text/javascript">
+<![CDATA[    
+    $('#target').bind('keydown', function(event) {
+        console.log("Keydown:", String.fromCharCode(event.keyCode), event);
+        console.log("Selection:", window.getSelection() );
+        if(event.keyCode == 37 
+         || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40)
+            return true;
+
+        if(event.keyCode == 8)
+        {
+            var selection = window.getSelection();
+            if(selection.anchorOffset == 0)
+            {
+                var r = selection.getRangeAt(0);
+                r.setStartBefore( $("#elem")[0] );                
+
+                return true;
+            }
+            return true;
+        }
+        
+        return true;
+    }).
+        bind('dragstart', function() { console.log('dragstart'); }).
+        bind('dragenter', function() { console.log('dragenter'); }).
+        bind('dragover', function() { console.log('dragover'); }).
+        bind('dragover', function() { console.log('dragend'); }).
+        bind('drag', function() { console.log('drag'); });
+
+    $('*').bind('drop', function(event) { console.log('drop on:', event.target, 'received on', this); });
+        
 
+]]>
+</script>
+
+{% comment %}
+<script type="text/javascript">
+<![CDATA[
     function serializeAttribute(attr, acc) {
         return acc + ' ' + attr.nodeName + '="'+ attr.nodeValue + '"';
     }
@@ -41,6 +93,7 @@
         }
         
         acc += "<" + element.nodeName;
+        
         for(var i=0; i < element.attributes.length; i++)
             acc = serializeAttribute(element.attributes.item(i), acc);
 
@@ -93,31 +146,43 @@
     }
 
     // w3c version first
-    var xslt = new XSLTProcessor();
+    var there = new XSLTProcessor();
+    var here = new XSLTProcessor();
 
     $.ajax({
         url: "/static/xsl/wl2html_client.xsl",
         dataType: 'xml',
         success: function(data) {
-            xslt.importStylesheet(data);
-            console.log('XSL loaded successfully');
+            there.importStylesheet(data);
+            console.log('There XSL loaded successfully');
+        },
+        async: false
+    });
+
+    $.ajax({
+        url: "/static/xsl/html2wl_client.xsl",
+        dataType: 'xml',
+        success: function(data) {
+            here.importStylesheet(data);
+            console.log('Here XSL loaded successfully');
         },
         async: false
     });
     
-    $('#render').click(function() {
-        
-        var src = '<?xml version="1.0"?><chunk>'+$('#source').val()+'</chunk>';
+    $('#render').click(function()
+    {
+        src = $('#source').val();
         src = src.replace(/\/\s+/g, '<br />');
         var doc = (new DOMParser()).parseFromString(src, "text/xml");
-        // var string = (new XMLSerializer()).serializeToString(doc);
-        // console.log('rendering', string);
-        
-        var result = xslt.transformToFragment(doc, document);
-        var string =  serializeXML(result);
-        var dest = $('#dest');
-        dest.val( string );
-        $('#preview').html(string);
-    });    
+        // console.log("Parsed", doc);
+        var along = there.transformToDocument(doc).documentElement;
+        // console.log("HTML", along, serializeXML(along) );
+        var xfrm = here.transformToDocument(along).documentElement;
+        // console.log("WLML", xfrm, serializeXML(xfrm) );
+        var out = (new XMLSerializer()).serializeToString(xfrm);
+        $('#dest').val(out);
+    });
+]]>
 </script>
+{% endcomment %}
 {% endblock %}
\ No newline at end of file