From 950fe87b956be939ce4cc355ede2fc17c2be82df Mon Sep 17 00:00:00 2001
From: Lukasz Rekucki <lrekucki@gmail.com>
Date: Fri, 13 Nov 2009 18:31:31 +0100
Subject: [PATCH] Annotations.

---
 apps/explorer/views.py                   |  2 +-
 platforma/static/css/master.css          | 99 ++++++++++++++++--------
 platforma/templates/explorer/editor.html |  3 +-
 platforma/templates/renderer.html        | 85 ++++++++++++++------
 platforma/urls.py                        | 20 ++---
 5 files changed, 142 insertions(+), 67 deletions(-)

diff --git a/apps/explorer/views.py b/apps/explorer/views.py
index 76670f50..fde7aeb9 100755
--- a/apps/explorer/views.py
+++ b/apps/explorer/views.py
@@ -130,5 +130,5 @@ def pull_requests(request):
 # Testing
 #
 def renderer_test(request):
-    return direct_to_template(request, 'renderer.html', mimetype="application/xhtml+xml",
+    return direct_to_template(request, 'renderer.html', mimetype="text/html",
         extra_context = {} )
diff --git a/platforma/static/css/master.css b/platforma/static/css/master.css
index 8200037c..874d9e12 100755
--- a/platforma/static/css/master.css
+++ b/platforma/static/css/master.css
@@ -6,19 +6,6 @@ body {
     background: #AAA;
 }
 
-/*  fix icon buttons */
-
-button img {
-    vertical-align: middle;
-    margin: 0px;
-}
-
-/* default form style hacks */
-select {
-    border: none;
-    margin-left: 0.1em;f
-}
-
 #body-wrap {
     margin: 0px;
     padding: 0px;
@@ -60,10 +47,6 @@ select {
     right: 1em;
 }
 
-#header button {
-    vertical-align: middle;
-}
-
 /* Commit dialog */
 #commit-dialog-error-empty-message {
     color: red;
@@ -260,20 +243,6 @@ input.image-gallery-current-page {
     margin: 0px;
 }
 
-body#base button {
-    background-color: #DDD;
-    border-width: 1px;
-    padding: 0px 0.5em;    
-    font-family: Sans-Serif;
-    /* color: #000; */
-    margin: 2px 4px;
-}
-
-body#base button:hover {
-    background-color: #EEE;
-}
-
-
 
 /* ================= */
 /* = Message boxes = */
@@ -294,3 +263,71 @@ body#base button:hover {
     background-color: red;
 }
 
+
+
+/*
+ *
+ * Buttons
+ *
+ */
+*.button {
+    /* reset margin and padding and see what happens */
+    padding: 0;
+    margin: 0;
+    border: 2px solid blue;
+
+    /*
+     * Borders and padding:
+    */
+    
+    /* observation 1: Firefox doesn't apply top/bottom borders to spans in button */
+    /* observation 2: Webkit leaves out some padding to left/right 
+        also: it cuts the top/bottom margin to 1px max */
+
+    /* observation 3: Opera does the oposite then WK and FF ->
+        span has all borders, button has only left/right 
+    */
+
+    /* Line Height */
+
+    /* 1. Wszystkie przeglądarki, domyślnie ustawiają vertical-align: baseline */
+    vertical-align: baseline;
+
+    /* 2. Opera ustawia rozmiar przycisku, na rozmiar line-height obiektu, który go zawiera */
+    
+    display: inline-block;
+    position: relative;
+    background: yellow;
+    padding: 2px 4px;
+
+    font-size: 16pt;
+    text-decoration: none;
+}
+
+*.button:active {
+    background: aqua;
+}
+
+*.button > span.upper-bg {
+    position: absolute;
+    top: 0px; 
+    left: 2px;
+    right: 0px;
+    bottom: 5px;
+
+    margin: 0px;
+    
+    background-color: white;
+    z-index: 0;
+    display: block;
+}
+
+*.button > span.button-text {
+    position: relative;
+    margin: 0px;
+    display: inline-block;
+    z-index: 2;
+    background: blue;
+    opacity: 0.5;
+}
+
diff --git a/platforma/templates/explorer/editor.html b/platforma/templates/explorer/editor.html
index 08f7d41e..7eca642d 100755
--- a/platforma/templates/explorer/editor.html
+++ b/platforma/templates/explorer/editor.html
@@ -64,7 +64,8 @@
 	<script type="text/html" charset="utf-8" id="html-view-template">
                 <div class="htmlview-toolbar">
                     <a class="html-print-link" href="print" ui:baseref="{% url file_print fileid %}" target="_new">{% trans "Print version"  %}</a>
-                    <button class="html-add-motive" type="button">Dodaj motyw</button>                    
+                    <button class="html-add-theme" type="button">Oznacz fragment motywem</button>
+                    <button class="html-add-annotation" type="button">Dodaj przypis</button>
                 </div>
                 
 		<div class="htmlview">
diff --git a/platforma/templates/renderer.html b/platforma/templates/renderer.html
index 84de36d6..d2518427 100755
--- a/platforma/templates/renderer.html
+++ b/platforma/templates/renderer.html
@@ -2,39 +2,74 @@
 
 {% block extrahead %}
 <link rel="stylesheet" href="{{STATIC_URL}}css/html.css" type="text/css" charset="utf-8" />
-<script src="{{STATIC_URL}}js/lib/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
+<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 %}
-
-<!-- <button type="button" id="render">Render</button>
-
-<table width="100%" align="center">
-    <tr>
-        <td width="50%">
-                <textarea id="source" cols="70" rows="30" ></textarea>
-        </td>
-        <td width="50%">
-                <textarea id="dest" cols="70" rows="30" ></textarea>
-        </td>
-    </tr>
-</table>
-<iframe>
-    
-</iframe> -->
-<div id="target"> </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[
-    var editor = new CodeMirror(CodeMirror.replace("target"), {
-  parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
-  path: "{{STATIC_URL}}js/lib/codemirror",
-  stylesheet: "{{STATIC_URL}}css/xmlcolors.css",
-  content: "Hello world!"
-});
+<![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>
 
diff --git a/platforma/urls.py b/platforma/urls.py
index 318d97cc..ccb9fcf7 100755
--- a/platforma/urls.py
+++ b/platforma/urls.py
@@ -11,9 +11,7 @@ PATH_END = PATH_SEC + "/$"
 urlpatterns = patterns('',
     # Explorer:
     url(r'^$', 'explorer.views.file_list', name='file_list'),        
-    url(r'^file/upload', 'explorer.views.file_upload', name='file_upload'),
-
-    url(r'^renderer$', 'explorer.views.renderer_test'),
+    url(r'^file/upload', 'explorer.views.file_upload', name='file_upload'),    
 
     url(r'^management/pull-requests$', 'explorer.views.pull_requests'),
   
@@ -50,11 +48,15 @@ else:
     )
 
 # Static files
-if settings.DEBUG and not hasattr(settings, 'DONT_SERVE_STATIC'):
+if settings.DEBUG:
     urlpatterns += patterns('',
-        url(r'^%s(?P<path>.+)$' % settings.MEDIA_URL[1:], 'django.views.static.serve',
-            {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),
-        url(r'^%s(?P<path>.+)$' % settings.STATIC_URL[1:], 'django.views.static.serve',
-            {'document_root': settings.STATIC_ROOT, 'show_indexes': True}),
+        url(r'^renderer$', 'explorer.views.renderer_test'),
     )
-# 
\ No newline at end of file
+
+    if not hasattr(settings, 'DONT_SERVE_STATIC'):
+        urlpatterns += patterns('',
+            url(r'^%s(?P<path>.+)$' % settings.MEDIA_URL[1:], 'django.views.static.serve',
+                {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),
+            url(r'^%s(?P<path>.+)$' % settings.STATIC_URL[1:], 'django.views.static.serve',
+                {'document_root': settings.STATIC_ROOT, 'show_indexes': True}),
+        )
\ No newline at end of file
-- 
2.20.1