{% trans "Wolne Lektury" %} :: {{ picture.title }}

+{% load catalogue_tags social_tags %} +{% load picture_tags %} + +

+ {% block picture-view %} - {% thumbnail picture.image_file "216x288" as thumb %} -

+ {% thumbnail picture.image_file "216x288" crop="center" as thumb %} +

{% endthumbnail %} -

+ {% endblock %} + {# what about licensing icons here #} +

+ +

{% for author in tags.author %} - {{ author }} + {{ author }}{% if not forloop.last %},{% endif %} {% endfor %}

{% spaceless %} {% trans "Epoch" %}: - + {% for tag in tags.epoch %} - {{ tag.name }} + {{ tag.name }} {% if not forloop.last %},{% endif %} {% endfor %} {% trans "Kind" %}: - + {% for tag in tags.kind %} - {{ tag.name }} + {{ tag.name }} {% if not forloop.last %},{% endif %} {% endfor %} {% endspaceless %}

+ {% trans "View online" %} +
+ {% trans "download original" %} +

diff --git a/apps/picture/templates/picture/picture_viewer.html b/apps/picture/templates/picture/picture_viewer.html new file mode 100644 index 000000000..46772dbc2 --- /dev/null +++ b/apps/picture/templates/picture/picture_viewer.html @@ -0,0 +1,52 @@ +{% load i18n %} +{% load static from staticfiles %} +{% load chunks compressed catalogue_tags %} + + + + +{# XXX byÅo: picture.pretty_title #} + {% trans "Wolne Lektury" %} :: {{ picture.title }} + + {% compressed_css "picture" %} + + + {% compressed_js "book" %} + + + + + +

+ {# book_info book #} +

+ + + +

+ +

+ {{ piwik_tag|safe }} + + +{% endthumbnail %} +{% endblock %} + + +{% block book-box-extra-info %} +{% if themes %} +

{% trans "Motifs and themes" %}

{{ theme }} ({{ theme.count }})

+{% else %} +

+{% endif %} +{% endblock %} + + +{% block right-column %} +

+ INFO + {% comment %}

{% trans "See" %}

{% trans "Source" %} {% trans "of the book" %}
{% trans "Source XML file" %}
{% trans "Book on" %} {% trans "Editor's Platform" %}
{% trans "Book description on Lektury.Gazeta.pl" %}
{% trans "Book description on Wikipedia" %}
{% trans "Mix this book" %}

{% trans "Download" %}

+ {% if related.media.mp3 or related.media.ogg or related.media.daisy %} + {% trans "Download all audiobooks for this book" %}: + {% download_audio book %}. + {% endif %} +

{% endcomment %} +

+{% endblock %} diff --git a/apps/picture/templatetags/__init__.py b/apps/picture/templatetags/__init__.py new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/apps/picture/templatetags/__init__.py @@ -0,0 +1 @@ + diff --git a/apps/picture/templatetags/picture_tags.py b/apps/picture/templatetags/picture_tags.py new file mode 100644 index 000000000..3fe5b360c --- /dev/null +++ b/apps/picture/templatetags/picture_tags.py @@ -0,0 +1,26 @@ +from django import template +from django.template import Node, Variable, Template, Context +from catalogue.utils import split_tags + +register = template.Library() + +@register.inclusion_tag('picture/picture_short.html', takes_context=True) +def picture_short(context, picture): + return { + 'picture': picture, + 'main_link': picture.get_absolute_url(), + # 'related': picture.related_info(), + 'request': context.get('request'), + 'tags': split_tags(picture.tags), + } + +@register.inclusion_tag('picture/picture_wide.html', takes_context=True) +def picture_wide(context, picture): + return { + 'picture': picture, + 'main_link': picture.get_absolute_url(), + # 'related': picture.related_info(), + 'request': context.get('request'), + 'tags': split_tags(picture.tags), + } + diff --git a/apps/picture/views.py b/apps/picture/views.py index 3f04e3c89..dcc380713 100644 --- a/apps/picture/views.py +++ b/apps/picture/views.py @@ -1,8 +1,10 @@ -from picture.models import Picture + from django.contrib.auth.decorators import permission_required from django.utils.datastructures import SortedDict from django.shortcuts import render_to_response, get_object_or_404 from django.template import RequestContext +from django.core.paginator import Paginator +from picture.models import Picture def picture_list(request, filter=None, template_name='catalogue/picture_list.html'): @@ -14,13 +16,17 @@ def picture_list(request, filter=None, template_name='catalogue/picture_list.htm if pictures_by_author[tag]: books_nav.setdefault(tag.sort_key[0], []).append(tag) - # import pdb; pdb.set_trace() return render_to_response(template_name, locals(), context_instance=RequestContext(request)) -def picture_detail(request, picture): - picture = get_object_or_404(Picture, slug=picture) +def picture_list_thumb(request, filter=None, template_name='picture/picture_list_thumb.html'): + picture_list = Picture.objects.all() + return render_to_response(template_name, locals(), + context_instance=RequestContext(request)) + +def picture_detail(request, slug): + picture = get_object_or_404(Picture, slug=slug) categories = SortedDict() for tag in picture.tags.iterator(): @@ -28,9 +34,17 @@ def picture_detail(request, picture): picture_themes = [] - return render_to_response("catalogue/picture_detail.html", locals(), + return render_to_response("picture/picture_detail.html", locals(), context_instance=RequestContext(request)) + +def picture_viewer(request, slug): + picture = get_object_or_404(Picture, slug=slug) + + return render_to_response("picture/picture_viewer.html", locals(), + context_instance=RequestContext(request)) + + # ========= # = Admin = # ========= @@ -56,3 +70,5 @@ def import_picture(request): return HttpResponse(_("Picture imported successfully")) else: return HttpResponse(_("Error importing file: %r") % import_form.errors) + + diff --git a/apps/wolnelektury_core/static/css/book_box.css b/apps/wolnelektury_core/static/css/book_box.css index 190ddd773..8a7cff20c 100755 --- a/apps/wolnelektury_core/static/css/book_box.css +++ b/apps/wolnelektury_core/static/css/book_box.css @@ -208,6 +208,7 @@ width: 32em; } + .book-wide-box #theme-list-wrapper { margin-left: 15.4em; margin-bottom: 3em; diff --git a/apps/wolnelektury_core/static/css/master.picture.css b/apps/wolnelektury_core/static/css/master.picture.css new file mode 100644 index 000000000..d541d2735 --- /dev/null +++ b/apps/wolnelektury_core/static/css/master.picture.css @@ -0,0 +1,39 @@ + +#picture-view img.canvas { + width: 700px; + margin: 3rem auto 1rem auto; + display: block; +// position: fixed; +} + +#picture-view .toolbar { + position: fixed; + top: 1.5rem; + right: 0rem; + background: #333; + color: #FFF; + opacity: 0.9; + z-index: 99; + list-style: none; + padding: 0; + margin: 0; +} + +#picture-view .toolbar .button a { + display: block; + height:1.5rem; + width:1.5rem; + text-align: center; + color: #FFF; + padding: 0.2rem; + text-decoration: none; +} + +#picture-view .toolbar .button a:link, +#picture-view .toolbar .button a:visited { + color: #FFF; +} + +#picture-view .toolbar.button a:active { + color: yellow; +} \ No newline at end of file diff --git a/apps/wolnelektury_core/static/css/picture_box.css b/apps/wolnelektury_core/static/css/picture_box.css old mode 100755 new mode 100644 index 83022eb77..7a56b3f75 --- a/apps/wolnelektury_core/static/css/picture_box.css +++ b/apps/wolnelektury_core/static/css/picture_box.css @@ -1,89 +1,12 @@ -.picture-mini-box, .picture-box { - display: inline-block; - margin: 0; - vertical-align: top; +.book-wide-box.picture img.cover { + width: 53.5em; + height: auto; } - -.picture-box { - width: 37.5em; -} - -.picture-mini-box { - width: 12.5em; -} - -.picture-mini-box a, .picture-box-inner { - display: block; - color: black; - border: 1px solid #ddd; - height: 20em; - padding: .75em; - margin: .1em; - background: #fff; - -moz-box-shadow: 2px 2px 2px #ddd; - -webkit-box-shadow: 2px 2px 2px #ddd; - box-shadow: 2px 2px 2px #ddd; - overflow: hidden; -} - -.picture-mini-box a { - height: 20em; - margin: .1em; -} -.picture-box-inner { - height: 14.4em; - margin: .5em; -} - -.picture-mini-box img, .picture-box img { - width: 10.8em; - height: 14.4em; -} -.picture-mini-box img { - margin-bottom: .3em; -} -.picture-box img { - float: left; - margin-right: 1.5em; +.picture.book-wide-box .book-box-tools { + margin-left: 50em; // 535px image + 15px margin @ 11pt } -.picture-mini-box .author { - color: #777; -} - - -.picture-box-body { - height: 13em; - overflow: hidden; -} -.picture-box-head { - min-height: 7em; -} -.picture-box-tag { - font-size: .8em; - margin-right: .5em; -} -.picture-box-download { - position: relative; -} -.picture-box-formats { - display: none; - top: -2em; - position: absolute; - height: 2em; - width: 100em; -} -.picture-box-formats a { - margin-right: 1em; -} -.picture-box-download:hover .picture-box-formats { - display: block; -} - -.picture-box-tools a:before { - content: url("/static/img/download.png"); - font-size: 2em; - margin-right: .25em; - vertical-align: middle; -} +.picture li.book-box-download { + width: 15em; +} \ No newline at end of file diff --git a/apps/wolnelektury_core/static/js/picture.js b/apps/wolnelektury_core/static/js/picture.js new file mode 100644 index 000000000..dca2d1329 --- /dev/null +++ b/apps/wolnelektury_core/static/js/picture.js @@ -0,0 +1,121 @@ + +(function($) { + $.widget('wl.pictureviewer', { + + options: { + steps: 6, // steps of zoom + max: 300, // max zoom in percent + plus_button: undefined, + minus_button: undefined + }, + + _create: function() { + var self = this; + self._zoom = 0; + self.initial_size = [ + self.element.width(), + self.element.height() + ]; + self.initial_position = self.element.offset(); + + self.element.css({ + 'margin': 0, + 'position': 'absolute', + }); + self.element.offset(self.initial_position); + + if (self.options.plus_button) + self.options.plus_button.click( + function(ev) { self.zoom(1); }); + if (self.options.minus_button) + self.options.minus_button.click( + function(ev) { self.zoom(-1); }); + + function contain(event, ui) { + var fix = self.allowedPosition(ui.position); + console.log("fix: ", fix); + if (fix !== undefined) { + return false; + }; + }; + self.element.draggable({drag: contain}); + + return self; + }, + + zoom: function(steps) { + var t = this._zoom + steps; + return this.zoomTo(t); + }, + + zoomForStep: function(step) { + // 0 => initial + // max_step-1 => max % + return 100 + (this.options.max - 100) / this.options.steps * step + }, + + zoomTo: function(level) { + if (level < 0 || level > this.options.steps) + return; + var ratio = this.zoomForStep(level) / 100; + var new_width = ratio * this.initial_size[0]; + var new_height = ratio * this.initial_size[1]; + var target = { + 'width': new_width, + 'left': this.initial_position.left - (new_width - this.initial_size[0])/2, + 'top': this.initial_position.top - (new_height - this.initial_size[1])/2, + }; + this._zoom = level; + this.element.animate(target, 200); // default duration=400 + }, + + allowedPosition: function(off) { + var x = undefined, fix_x = undefined; + var y = undefined, fix_y = undefined; + var w = this.element.width(); + var h = this.element.height(); + var cw = $(window).width(); + var ch = $(window).height(); + var off = off || this.element.offset(); + + if (w <= cw) { + var x = off.left; + if (x < 0) + fix_x = 0; + if (x + w > cw) + fix_x = cw - w; + } else { + if (x > 0) + fix_x = 0; + if (x + w < cw) + fix_x = cw - w; + } + + if (h <= ch) { + var y = off.top; + if (y < 0) + fix_y = 0; + if (y + h > ch) + fix_y = ch - h; + } else { + if (y > 0) + fix_y = 0; + if (y + h < ch) + fix_y = ch - h; + } + if (fix_x !== undefined || fix_y !== undefined) + return { top: fix_y, left: fix_x }; + return undefined; + + }, + }); +}(jQuery)); + + +$(document).ready(function(){ + $("img.canvas").pictureviewer({ + plus_button: $(".toolbar .button.plus"), + minus_button: $(".toolbar .button.minus") + }); +}); + diff --git a/wolnelektury/settings/static.py b/wolnelektury/settings/static.py index a3ff42430..28d42e9ff 100644 --- a/wolnelektury/settings/static.py +++ b/wolnelektury/settings/static.py @@ -51,6 +51,13 @@ PIPELINE_CSS = { ], 'output_filename': 'css/compressed/book.css', }, + 'picture': { + 'source_filenames': [ + 'css/master.book.css', + 'css/master.picture.css', + ], + 'output_filename': 'css/compressed/picture.css', + }, 'player': { 'source_filenames': [ 'jplayer/jplayer.blue.monday.css', @@ -102,6 +109,7 @@ PIPELINE_JS = { 'js/jquery.scrollto.js', 'js/jquery.highlightfade.js', 'js/book.js', + 'js/picture.js', 'player/openplayer.js', ], 'output_filename': 'js/book.min.js',

{% block book_list_header %}{% trans "Listing of all pictures" %}{% endblock %}

{% trans "See" %}

{% trans "Download" %}