From: zuber <marek@stepniowski.com>
Date: Mon, 14 Dec 2009 23:40:32 +0000 (+0100)
Subject: Galeria z przeciąganiem obrazków.
X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/a1f864eeb12aacf2d2c094c2bcb8add8b10c4e48
Galeria z przeciąganiem obrazków.
---
diff --git a/apps/explorer/views.py b/apps/explorer/views.py
index 150b03d1..71493c69 100755
--- 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.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 explorer import forms
+from explorer import forms, models
+import os
# 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 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 cbf18745..574e7646 100755
--- 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;
+ overflow: auto;
+ margin: 1.5em 0 0;
+ font-family: monospace;
+ font-size: 10pt;
}
\ No newline at end of file
diff --git a/platforma/static/css/master.css b/platforma/static/css/master.css
index d7b6dc0b..493a1969 100755
--- a/platforma/static/css/master.css
+++ b/platforma/static/css/master.css
@@ -10,9 +10,10 @@ body {
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-right: 1px solid #999;
cursor: col-resize;
}
@@ -28,7 +29,7 @@ body {
#html-view {
overflow: auto;
position: absolute;
- top: 26px;
+ top: 27px;
bottom: 0;
left: 0;
right: 0;
@@ -36,7 +37,7 @@ body {
#sidebar {
position: absolute;
- overflow: auto;
+ overflow: hidden;
top: 25px;
right: 0;
bottom: 0;
@@ -100,10 +101,12 @@ body {
}
.toolbar {
+ width: 100%;
border-bottom: 1px solid #777;
background-color: #C1C1C1;
margin: 0;
padding: 2px;
+ z-index: 10;
/* height: 22px;*/
}
@@ -125,6 +128,7 @@ body {
}
.toolbar input {
+ float: left;
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;*/
+}
+
+/* =========== */
+/* = 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
diff --git a/platforma/static/js/main.js b/platforma/static/js/main.js
index 284fd197..cf89c293 100644
--- 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() {
+ gallery('#sidebar');
+
CodeMirror.fromTextArea('id_text', {
parserfile: 'parsexml.js',
path: "/static/js/lib/codemirror/",
@@ -249,7 +343,7 @@ $(function() {
$('.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]);
diff --git a/platforma/templates/wiki/document_details.html b/platforma/templates/wiki/document_details.html
index 139ade53..826ac648 100644
--- a/platforma/templates/wiki/document_details.html
+++ b/platforma/templates/wiki/document_details.html
@@ -11,7 +11,7 @@
{% 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>
@@ -43,13 +43,15 @@
<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>
- <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>
- </form>
+ {# </form> #}
{% endblock %}
\ No newline at end of file
diff --git a/platforma/urls.py b/platforma/urls.py
index 495c7357..a5667bb7 100755
--- a/platforma/urls.py
+++ b/platforma/urls.py
@@ -32,6 +32,8 @@ urlpatterns = patterns('',
# 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}),