Galeria z przeciąganiem obrazków.

diff --git a/apps/explorer/views.py b/apps/explorer/views.py
index 150b03d..71493c6 100755 (executable)
--- a/apps/explorer/views.py
+++ b/apps/explorer/views.py
@@ -8,14 +8,15 @@ from django.conf import settings
 from django.contrib.auth.decorators import login_required, permission_required
 
 from django.core.urlresolvers import reverse
 from django.contrib.auth.decorators import login_required, permission_required
 
 from django.core.urlresolvers import reverse

-from django.http import HttpResponse
+from django.http import HttpResponse, Http404

 from django.utils import simplejson as json
 from django.views.generic.simple import direct_to_template
 from django.shortcuts import render_to_response
 from django.template import RequestContext
 from django.contrib.auth.decorators import login_required
 
 from django.utils import simplejson as json
 from django.views.generic.simple import direct_to_template
 from django.shortcuts import render_to_response
 from django.template import RequestContext
 from django.contrib.auth.decorators import login_required
 

-from explorer import forms
+from explorer import forms, models
+import os

 # from api.models import PullRequest
 from bookthemes.models import Theme
 
 # from api.models import PullRequest
 from bookthemes.models import Theme
 


@@ -131,3 +132,13 @@ def pull_requests(request):
 def renderer_test(request):
     return direct_to_template(request, 'renderer.html', mimetype="text/html",
         extra_context = {} )
 def renderer_test(request):
     return direct_to_template(request, 'renderer.html', mimetype="text/html",
         extra_context = {} )

+
+
+def document_gallery(request, document):
+    assocs = models.GalleryForDocument.objects.filter(document=document)
+    directory = assocs[0].subpath
+    try:
+        images = ['/media/%s/%s' % (directory, f) for f in os.listdir(os.path.join(settings.MEDIA_ROOT, directory)) if f.lower().endswith('.jpg')]
+        return HttpResponse(json.dumps(images))
+    except IndexError:
+        raise Http404

diff --git a/platforma/static/css/html.css b/platforma/static/css/html.css
index cbf1874..574e764 100755 (executable)
--- a/platforma/static/css/html.css
+++ b/platforma/static/css/html.css
@@ -524,4 +524,8 @@
     border: 1px solid #C8B849;
     background-color: #D4CB9C;
     white-space: pre;
     border: 1px solid #C8B849;
     background-color: #D4CB9C;
     white-space: pre;

+    overflow: auto;
+    margin: 1.5em 0 0;
+    font-family: monospace;
+    font-size: 10pt;

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/platforma/static/css/master.css b/platforma/static/css/master.css
index d7b6dc0..493a196 100755 (executable)
--- a/platforma/static/css/master.css
+++ b/platforma/static/css/master.css
@@ -10,9 +10,10 @@ body {
     top: 25px;
     bottom: 0;
     right: 0;;
     top: 25px;
     bottom: 0;
     right: 0;;

-    width: 14px;
-    background: #EEE url(/static/img/gallery.png) no-repeat scroll center center;
+    width: 13px;
+    background: #C1C1C1 url(/static/img/gallery.png) no-repeat scroll center center;

     border-left: 1px solid #999;
     border-left: 1px solid #999;

+    border-right: 1px solid #999;

     cursor: col-resize;
 }
 
     cursor: col-resize;
 }
 


@@ -28,7 +29,7 @@ body {
 #html-view {
     overflow: auto;
     position: absolute;
 #html-view {
     overflow: auto;
     position: absolute;

-    top: 26px;
+    top: 27px;

     bottom: 0;
     left: 0;
     right: 0;
     bottom: 0;
     left: 0;
     right: 0;


@@ -36,7 +37,7 @@ body {
 
 #sidebar {
     position: absolute;
 
 #sidebar {
     position: absolute;

-    overflow: auto;
+    overflow: hidden;

     top: 25px;
     right: 0;
     bottom: 0;
     top: 25px;
     right: 0;
     bottom: 0;


@@ -100,10 +101,12 @@ body {
 }
 
 .toolbar {
 }
 
 .toolbar {

+    width: 100%;

     border-bottom: 1px solid #777;
     background-color: #C1C1C1;
     margin: 0;
     padding: 2px;
     border-bottom: 1px solid #777;
     background-color: #C1C1C1;
     margin: 0;
     padding: 2px;

+    z-index: 10;

 /*    height: 22px;*/
 }
 
 /*    height: 22px;*/
 }
 


@@ -125,6 +128,7 @@ body {
 }
 
 .toolbar input {
 }
 
 .toolbar input {

+    float: left;

     font-size: 11px;
     padding: 0;
     margin: 2px 5px 0 5px;
     font-size: 11px;
     padding: 0;
     margin: 2px 5px 0 5px;


@@ -158,4 +162,29 @@ p { margin: 0;}
     background-color: #FAFAFA;
     border: 1px solid #DDD;
 /*    -webkit-transition: all 1s linear;*/
     background-color: #FAFAFA;
     border: 1px solid #DDD;
 /*    -webkit-transition: all 1s linear;*/

+}
+
+/* =========== */
+/* = Gallery = */
+/* =========== */
+.gallery-image {
+    position: absolute;
+    top: 27px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    border: none;
+    background-color: #000;
+    overflow: hidden;
+}
+
+img {
+    position: absolute;
+    -moz-drag: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    cursor: pointer;

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/platforma/static/js/main.js b/platforma/static/js/main.js
index 284fd19..cf89c29 100644 (file)
--- a/platforma/static/js/main.js
+++ b/platforma/static/js/main.js
@@ -111,7 +111,101 @@ function selectTheme(themeId)
 //     });
 // }
 
 //     });
 // }
 

+function gallery(element) {
+    var element = $(element);
+    
+    function changePage(pageNumber) {        
+        $('img', element).attr('src', element.data('images')[pageNumber - 1]);
+    }
+    
+    function normalizeNumber(pageNumber) {
+        // Numer strony musi być pomiędzy 1 a najwyższym numerem
+        var pageCount = element.data('images').length;
+        pageNumber = parseInt(pageNumber, 10);
+        
+        if (!pageNumber || pageNumber == NaN || pageNumber == Infinity || pageNumber == -Infinity) {
+            return 1;
+        } else if (pageNumber < 1) {
+            return 1;
+        } else if (pageNumber > pageCount) {
+            return pageCount;
+        } else {
+            return pageNumber;
+        }
+    }
+    
+    $.ajax({
+        url: '/gallery/sample',
+        type: 'GET',
+        dataType: 'json',
+    
+        success: function(data) {
+            element.data('images', data);
+            var pn = $('.page-number', element);
+            pn.change(function(event) {
+                console.log('change!', $(this).val());
+                event.preventDefault();
+                var n = normalizeNumber(pn.val());
+                pn.val(n);
+                changePage(n);
+            });
+            $('.previous-page', element).click(function() {
+                pn.val(normalizeNumber(pn.val()) - 1);
+                pn.change();
+            });
+            $('.next-page', element).click(function() {
+                pn.val(normalizeNumber(pn.val()) + 1);
+                pn.change();
+            });
+            
+            var image = $('img', element).attr('unselectable', 'on');
+            var origin = {};
+            var imageOrigin = {};
+            var imageDimensions = {};
+            
+            function onMouseMove(event) {
+                var delta = {
+                    x: event.clientX - origin.x,
+                    y: event.clientY - origin.y
+                };
+                
+                var newTop = Math.min(0, Math.max(imageOrigin.top + delta.y, imageDimensions.galleryHeight - imageDimensions.height));
+                var newLeft = Math.min(0, Math.max(imageOrigin.left + delta.x, imageDimensions.galleryWidth - imageDimensions.width));
+                image.css({position: 'absolute', top: newTop, left: newLeft});
+                return false;
+            }
+            
+            function onMouseUp(event) {
+                $(document)
+                    .unbind('mousemove.gallery')
+                    .unbind('mouseup.gallery');
+                return false;
+            }
+            
+            image.bind('mousedown', function(event) {
+                origin = {
+                    x: event.clientX,
+                    y: event.clientY
+                };
+                imageOrigin = image.position();
+                imageDimensions = {
+                    width: image.width(),
+                    height: image.height(),
+                    galleryWidth: image.parent().width(),
+                    galleryHeight: image.parent().height()
+                };
+                $(document)
+                    .bind('mousemove.gallery', onMouseMove)
+                    .bind('mouseup.gallery', onMouseUp);
+                return false;
+            });
+        }
+    });
+}
+

 $(function() {
 $(function() {

+    gallery('#sidebar');
+    

     CodeMirror.fromTextArea('id_text', {
         parserfile: 'parsexml.js',
         path: "/static/js/lib/codemirror/",
     CodeMirror.fromTextArea('id_text', {
         parserfile: 'parsexml.js',
         path: "/static/js/lib/codemirror/",


@@ -249,7 +343,7 @@ $(function() {
     
     $('.vsplitbar').click(function() {
         if ($('#sidebar').width() == 0) {
     
     $('.vsplitbar').click(function() {
         if ($('#sidebar').width() == 0) {

-            $('#sidebar').width(480).show();
+            $('#sidebar').width(480).css({right: 0}).show();

             $('#source-editor, #simple-editor').css({right: 495});
             $('.vsplitbar').css({right: 480})
             // $('#splitter').trigger('resize', [$(window).width() - 480]);
             $('#source-editor, #simple-editor').css({right: 495});
             $('.vsplitbar').css({right: 480})
             // $('#splitter').trigger('resize', [$(window).width() - 480]);

diff --git a/platforma/templates/wiki/document_details.html b/platforma/templates/wiki/document_details.html
index 139ade5..826ac64 100644 (file)
--- a/platforma/templates/wiki/document_details.html
+++ b/platforma/templates/wiki/document_details.html
@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block maincontent %}
 {% endblock %}
 
 {% block maincontent %}

-    <form action="{% url wiki.views.document_detail document.name|urlencode %}" method="post" accept-charset="utf-8">
+    {# <form action="{% url wiki.views.document_detail document.name|urlencode %}" method="post" accept-charset="utf-8"> #}

         <div id="header">
             <div id="tools" style="float: right;">Wersja: {{ document.revision }}<button style="margin-left: 6px" id="save-button">Zapisz</button></div>
             <h1>{{ document.name }}</h1>
         <div id="header">
             <div id="tools" style="float: right;">Wersja: {{ document.revision }}<button style="margin-left: 6px" id="save-button">Zapisz</button></div>
             <h1>{{ document.name }}</h1>


@@ -43,13 +43,15 @@
             <div class="vsplitbar"> </div>
             <div id="sidebar">
                 <div class="toolbar">
             <div class="vsplitbar"> </div>
             <div id="sidebar">
                 <div class="toolbar">

-                    <button>Poprzednia strona</button> <button>Następna strona</button>
-                    <input type="text" size="3" value="01" />
+                    <button class="previous-page">⇽ Poprzednia</button>
+                    <input type="text" size="3" maxlength="3" value="1" class="page-number" />
+                    <button class="next-page">Następna ⇾</button>

                     <div class="toolbar-end"> </div>
                 </div>
                     <div class="toolbar-end"> </div>
                 </div>

-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="gallery-image">
+                    <img src="" />
+                </div>

             </div>
         </div>
             </div>
         </div>

-    </form>
+    {# </form> #}

 {% endblock %}
\ No newline at end of file
 {% endblock %}
\ No newline at end of file

diff --git a/platforma/urls.py b/platforma/urls.py
index 495c735..a5667bb 100755 (executable)
--- a/platforma/urls.py
+++ b/platforma/urls.py
@@ -32,6 +32,8 @@ urlpatterns = patterns('',
     # Our über-restful api
     # url(r'^api/', include('api.urls')),
     
     # Our über-restful api
     # url(r'^api/', include('api.urls')),
     

+    url(r'^gallery/(?P<document>[^/]+)$', 'explorer.views.document_gallery'),
+    

     # Static files (should be served by Apache)
     url(r'^%s(?P<path>.+)$' % settings.MEDIA_URL[1:], 'django.views.static.serve',
         {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),
     # Static files (should be served by Apache)
     url(r'^%s(?P<path>.+)$' % settings.MEDIA_URL[1:], 'django.views.static.serve',
         {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),