image listings / boxes work but need polishing. started coding the viewer.
authorMarcin Koziej <marcin@lolownia.org>
Tue, 26 Nov 2013 12:27:20 +0000 (13:27 +0100)
committerMarcin Koziej <marcin@lolownia.org>
Tue, 26 Nov 2013 12:27:20 +0000 (13:27 +0100)
18 files changed:
apps/catalogue/templates/catalogue/work-list.html
apps/catalogue/urls.py
apps/funding/static/funding/funding.css
apps/picture/models.py
apps/picture/templates/picture/picture_detail.html [new file with mode: 0644]
apps/picture/templates/picture/picture_list_thumb.html [new file with mode: 0644]
apps/picture/templates/picture/picture_mini_box.html [new file with mode: 0644]
apps/picture/templates/picture/picture_short.html
apps/picture/templates/picture/picture_viewer.html [new file with mode: 0644]
apps/picture/templates/picture/picture_wide.html [new file with mode: 0644]
apps/picture/templatetags/__init__.py [new file with mode: 0644]
apps/picture/templatetags/picture_tags.py [new file with mode: 0644]
apps/picture/views.py
apps/wolnelektury_core/static/css/book_box.css
apps/wolnelektury_core/static/css/master.picture.css [new file with mode: 0644]
apps/wolnelektury_core/static/css/picture_box.css [changed mode: 0755->0644]
apps/wolnelektury_core/static/js/picture.js [new file with mode: 0644]
wolnelektury/settings/static.py

index 19ca7c7..1541985 100755 (executable)
@@ -1,13 +1,16 @@
 {% load pagination_tags %}
 {% load book_short from catalogue_tags %}
+{% load picture_short from picture_tags %}
 
 {% autopaginate object_list 10 %}
 {% spaceless %}
 <ol class='work-list'>
 {% for item in object_list %}
-    <li class='{{ object_type }}-item'>
+    <li class='Book-item'>
         {% if item.short_html %}
             {{ item.short_html }}
+        {% elif object_type == "Picture"  %}
+            {% picture_short item %}
         {% else %}
             {% book_short item %}
         {% endif %}
@@ -15,4 +18,4 @@
 {% endfor %}
 </ol>
 {% endspaceless %}
-{% paginate %}
\ No newline at end of file
+{% paginate %}
index 4320919..194015a 100644 (file)
@@ -14,8 +14,10 @@ SLUG = r'[a-z0-9-]*'
 
 urlpatterns = patterns('picture.views',
     # pictures - currently pictures are coupled with catalogue, hence the url is here
-    url(r'^obraz/?$', 'picture_list'),
-    url(r'^obraz/(?P<picture>%s)/?$' % SLUG, 'picture_detail')
+    url(r'^obraz/?$', 'picture_list_thumb'),
+    url(r'^obraz/(?P<slug>%s).html$' % SLUG, 'picture_viewer', name='picture_viewer'),
+    url(r'^obraz/(?P<slug>%s)/?$' % SLUG, 'picture_detail'),
+
 )
 
 urlpatterns += patterns('',
index 89dd7aa..a3e6546 100755 (executable)
@@ -1 +1 @@
-.funding,.funding-top-header{background:orange;margin:auto;padding:5px 0;position:relative}.funding a.call,.funding-top-header a.call{height:1.2em;width:9em;padding:.35em .5em;margin:.5em;display:inline-block;vertical-align:top;text-align:center;background:rgb(.465%, 59.936%, 63.653%)}.funding .description,.funding-top-header .description{display:inline-block;padding-left:.6em}.funding .description a,.funding-top-header .description a{display:block;color:#000;padding:0 3px}.funding strong,.funding-top-header strong{font-size:1.5em;padding:.2em 0 0}.funding .progress,.funding-top-header .progress{width:95.7em;margin:.3em 0 .4em;border-radius:2em;background-image:url(/static/img/progress-pixel.png);background-repeat:repeat-y;background-color:#f68900;box-shadow:.1em .1em .1em #888}.funding .progress .piece,.funding-top-header .progress .piece{font-size:1.3em;padding:.3em .5em}.funding .with-button .progress,.funding-top-header .with-button .progress{width:78em}.funding .funding .funding-title-strong,.funding .funding-title,.funding-top-header .funding-title,.funding-top-header .funding-top-header .funding-title-strong{font-size:1.1em}.funding .funding-title-strong,.funding-top-header .funding-title-strong{font-weight:bold;font-size:1.5em}.funding .close,.funding-top-header .close{position:absolute;top:0;right:5px}.funding-top-header{width:97.5em}.wlfund{width:100%;border-spacing:0}.wlfund td{padding:1em .5em 1em;text-align:center;border-top:1em solid rgba(255, 255, 255, 0);border-bottom:2px solid #DDD;background-clip:padding-box;-moz-background-clip:padding;-webkit-background-clip:padding}.wlfund td.oneline{white-space:nowrap}.wlfund td:last-child{text-align:right}.wlfund .funding-plus td{background-color:#cfe5e7}.wlfund .funding-minus td{background-color:#fff}.honking{background:#018189;font-size:1.5em;padding:.5em;color:#fff;border:0;box-shadow:.2em .2em .3em #888;position:relative}.honking:hover{box-shadow:none;top:.1em;left:.1em}.share a{margin-right:1.5em}.share a img{vertical-align:middle}.funding-handle{position:absolute;top:0;right:0;z-index:2;background:orange;cursor:pointer;padding:.2em 1em;border-radius:0 0 0 1em;font-size:13px}.funding-cover{float:left;margin-right:10px}.funding-details-intro{padding-top:1em}.funding-details-intro h3:first-of-type{margin-top:0}
\ No newline at end of file
+.funding,.funding-top-header{background:orange;margin:auto;padding:5px 0;position:relative}.funding a.call,.funding-top-header a.call{height:1.2em;width:9em;padding:.35em .5em;margin:.5em;display:inline-block;vertical-align:top;text-align:center;background:#018189}.funding .description,.funding-top-header .description{display:inline-block;padding-left:.6em}.funding .description a,.funding-top-header .description a{display:block;color:#000;padding:0 3px}.funding strong,.funding-top-header strong{font-size:1.5em;padding:.2em 0 0}.funding .progress,.funding-top-header .progress{width:95.7em;margin:.3em 0 .4em;border-radius:2em;background-image:url(/static/img/progress-pixel.png);background-repeat:repeat-y;background-color:#f68900;box-shadow:.1em .1em .1em #888}.funding .progress .piece,.funding-top-header .progress .piece{font-size:1.3em;padding:.3em .5em}.funding .with-button .progress,.funding-top-header .with-button .progress{width:78em}.funding .funding-title,.funding .funding-title-strong,.funding-top-header .funding-title,.funding-top-header .funding-title-strong{font-size:1.1em}.funding .funding-title-strong,.funding-top-header .funding-title-strong{font-weight:bold;font-size:1.5em}.funding .close,.funding-top-header .close{position:absolute;top:0;right:5px}.funding-top-header{width:97.5em}.wlfund{width:100%;border-spacing:0}.wlfund td{padding:1em .5em 1em;text-align:center;border-top:1em solid rgba(255,255,255,0);border-bottom:2px solid #ddd;background-clip:padding-box;-moz-background-clip:padding;-webkit-background-clip:padding}.wlfund td.oneline{white-space:nowrap}.wlfund td:last-child{text-align:right}.wlfund .funding-plus td{background-color:#cfe5e7}.wlfund .funding-minus td{background-color:#fff}.honking{background:#018189;font-size:1.5em;padding:.5em;color:#fff;border:0;box-shadow:.2em .2em .3em #888;position:relative}.honking:hover{box-shadow:none;top:.1em;left:.1em}.share a{margin-right:1.5em}.share a img{vertical-align:middle}.funding-handle{position:absolute;top:0;right:0;z-index:2;background:orange;cursor:pointer;padding:.2em 1em;border-radius:0 0 0 1em;font-size:13px}.funding-cover{float:left;margin-right:10px}.funding-details-intro{padding-top:1em}.funding-details-intro h3:first-of-type{margin-top:0}
\ No newline at end of file
index c34b39a..dc92c43 100644 (file)
@@ -184,7 +184,7 @@ class Picture(models.Model):
         if short_html is not None:
             return mark_safe(short_html)
         else:
-            tags = self.tags.filter(category__in=('author', 'kind', 'epoch'))
+            tags = self.tags.filter(category__in=('author', 'kind', 'epoch', 'genre'))
             tags = split_tags(tags)
 
             short_html = unicode(render_to_string('picture/picture_short.html',
diff --git a/apps/picture/templates/picture/picture_detail.html b/apps/picture/templates/picture/picture_detail.html
new file mode 100644 (file)
index 0000000..ef4042c
--- /dev/null
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% load picture_tags catalogue_tags pagination_tags %}
+{% load thumbnail %}
+
+
+{% block titleextra %}{{ picture.title }}{% endblock %}
+
+{% block bodyid %}picture-detail{% endblock %}
+
+{% block body %}
+  {% picture_wide picture %}
+{% endblock %}
diff --git a/apps/picture/templates/picture/picture_list_thumb.html b/apps/picture/templates/picture/picture_list_thumb.html
new file mode 100644 (file)
index 0000000..eeaab78
--- /dev/null
@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% load chunks %}
+{% load picture_tags %}
+{% load thumbnail %}
+
+{% block bodyid %}picture-list{% endblock %}
+
+{% block titleextra %}{% trans "Listing of all pictures" %}{% endblock %}
+
+
+{% block body %}
+    <h1>{% block book_list_header %}{% trans "Listing of all pictures" %}{% endblock %}</h1>
+
+
+    <div class='clearboth'></div>
+<div id="books-list">
+  <ol class="work-list">{% spaceless %}
+{% for picture in picture_list %}
+   <li class="Book-item">
+ {% picture_short picture %} 
+   </li>
+{% endfor %}
+  {% endspaceless %}</ol>
+</div>
+
+
+
+{% endblock %}
diff --git a/apps/picture/templates/picture/picture_mini_box.html b/apps/picture/templates/picture/picture_mini_box.html
new file mode 100644 (file)
index 0000000..5df989e
--- /dev/null
@@ -0,0 +1,21 @@
+
+{% load thumbnail %}
+<div class="book-mini-box">
+    <a href="{{ book.get_absolute_url }}">
+        {% if picture.cover %}
+            <img src="
+                {% thumbnail book.cover "139x193" as thumb %}
+                    {{ thumb.url }}
+                {% empty %}
+                    {{ book.cover.url }}
+                {% endthumbnail %}
+            " alt="{{ author_str }} – {{ book.title }}" class="cover" />
+        {% endif %}
+        <div class="desc">
+            <span class="mono author">{{ author_str }}</span>
+            <span class="title">{{ book.title }}</span>
+        </div>
+    </a>
+</div>
+
+
index 1f6a4c0..edc59b8 100644 (file)
@@ -1,42 +1,66 @@
 {% load i18n %}
 {% load thumbnail %}
-<div class="picture-box">
-<div class="picture-box-inner">
+{% load catalogue_tags social_tags %}
+{% load picture_tags %}
+
+<div class="{% block box-class %}book-box{% endblock %} picture">
+<div class="book-box-inner" style="position:relative">
+  <div class="cover-area">
+    {% block picture-view %}
     <a href="{{ picture.get_absolute_url }}">
-      {% thumbnail picture.image_file "216x288" as thumb %}
-      <img src="{{thumb.url}}"/>
+      {% thumbnail picture.image_file "216x288" crop="center" as thumb %}
+      <img class="cover" src="{{thumb.url}}"/>
       {% endthumbnail %}
     </a>
-    <div class="picture-box-body">
-        <div class="picture-box-head">
+    {% endblock %}
+     {# what about licensing icons here #}
+  </div>
+    <div class="book-box-body">
+      
+        <div class="book-box-head">
             <div class="mono author">
             {% for author in tags.author %}
-                {{ author }}
+                <a href="{% tag_url 'author' author.slug %}">{{ author }}</a>{% if not forloop.last %},{% endif %}
             {% endfor %}
             </div>
-            <div class="title">{{ picture.title }}</div>
+            <div class="title"><a href="{{ picture.get_absolute_url }}">{{ picture.title }}</a></div>
         </div>
         <div class="tags">
             {% spaceless %}
 
             <span class="mono">{% trans "Epoch" %}:&nbsp;</span>
-            <span class="picture-box-tag">
+            <span class="book-box-tag">
                 {% for tag in tags.epoch %}
-                    <a href="{{ tag.get_absolute_url }}">{{ tag.name }} </a>
+                    <a href="{{ tag.get_absolute_url }}">{{ tag.name }} </a>{% if not forloop.last %},{% endif %}
                 {% endfor %}
             </span>
 
             <span class="mono">{% trans "Kind" %}:&nbsp;</span>
-            <span class="picture-box-tag">
+            <span class="book-box-tag">
                 {% for tag in tags.kind %}
-                    <a href="{{ tag.get_absolute_url }}">{{ tag.name }} </a>
+                    <a href="{{ tag.get_absolute_url }}">{{ tag.name }} </a>{% if not forloop.last %},{% endif %}
                 {% endfor %}
             </span>
 
             {% endspaceless %}
         </div>
     </div>
-    <ul class="picture-box-tools">
+    <ul class="book-box-tools">
+      <li class="book-box-read">
+        <a href="{% url 'picture_viewer' picture.slug %}" class="mono downarrow">{% trans "View online" %}</a>
+      </li>
+      <li class="book-box-download">
+       <a href="{{picture.image_file.url}}" class="mono downarrow">{% trans "download original" %}</a>
+      </li>
+<!--      <li class="book-box-download hoverget">
+        <a class="mono downarrow hoverclick">{% trans "Download" %}</a>
+        <div class="book-box-formats mono">
+         {% if picture.image_file %}
+         <span><a href="{{ picture.image_file.url}}">JPG</a> {% trans "original" %}</span>
+         {% endif %}
+       </div>-->
+      </li>
     </ul>
+    <div class="clearboth"/>
 </div>
 </div>
diff --git a/apps/picture/templates/picture/picture_viewer.html b/apps/picture/templates/picture/picture_viewer.html
new file mode 100644 (file)
index 0000000..46772db
--- /dev/null
@@ -0,0 +1,52 @@
+{% load i18n %}
+{% load static from staticfiles %}
+{% load chunks compressed catalogue_tags %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+{# XXX było: picture.pretty_title #}
+        <title>{% trans "Wolne Lektury" %} :: {{ picture.title }}</title>
+        <link rel="icon" href="{% static "img/favicon.png" %}" type="image/x-icon" />
+        {% compressed_css "picture" %}
+        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+       <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
+        {% compressed_js "book" %}
+       <!-- old IE support -->
+
+    </head>
+    <body>
+        <div id="menu">
+            <ul>
+                <li><a class="menu" href="#themes">{% trans "Themes" %}</a></li>
+                <li><a class="menu" href="#objects">{% trans "Objects" %}</a></li>
+               <!-- XXX do we have this? -->
+                <li><a class="menu" href="#nota_red">{% trans "Edit. note" %}</a></li>
+                <li><a class="menu" href="#info">{% trans "Infobox" %}</a></li>
+                <li><a href="{{ picture.get_absolute_url }}">{% trans "Picture's page" %}</a></li>
+<!-- XXX -->
+                <li><a class="menu" href="#download">{% trans "Download" %}</a></li>
+            </ul>
+        </div>
+        <div id="info">
+            {# book_info book #}
+        </div>
+<!-- do something with the logo        <div id="header">
+            <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" /></a>
+        </div>-->
+
+       <!-- main picture view -->
+       <div id="picture-view">
+         <ul class="toolbar">
+           <li class="button plus"><a href="#">&#x2795;<!-- heavy plus sign --></a></li>
+           <li class="button minus"><a href="#">&#x2796;<!-- heavy minus sign --></a>
+           </li>
+         </ul>
+         <div class="picture-wrap">
+           <img class="canvas" src="{{ picture.image_file.url }}"/>
+         </div>
+       </div>
+        {{ piwik_tag|safe }}
+    </body>
+</html
diff --git a/apps/picture/templates/picture/picture_wide.html b/apps/picture/templates/picture/picture_wide.html
new file mode 100644 (file)
index 0000000..6eec8d4
--- /dev/null
@@ -0,0 +1,70 @@
+{% extends "picture/picture_short.html" %}
+{% load i18n %}
+{% load picture_tags thumbnail %}
+{% load cite_promo from social_tags %}
+
+
+{% block box-class %}book-wide-box{% endblock %}
+
+{% block picture-view %}
+{% thumbnail picture.image_file "535" upscale="false" as thumb %}
+<img class="cover" src="{{thumb.url}}"/>
+{% endthumbnail %}
+{% endblock %}
+
+
+{% block book-box-extra-info %}
+{% if themes %}
+    <div class="hidden-box-wrapper" id="theme-list-wrapper">
+        <p><a class="mono hidden-box-trigger theme-list-link"
+                href="#">{% trans "Motifs and themes" %}</a></p>
+        <div class="hidden-box">
+            <ul>
+            {% for theme in themes %}
+                <li><a href="{% url 'book_fragments' book.slug theme.slug %}">{{ theme }} ({{ theme.count }})</a></li>
+            {% endfor %}
+            </ul>
+        </div>
+    </div>
+{% else %}
+       <p>&nbsp;</p>
+{% endif %}
+{% endblock %}
+
+
+{% block right-column %}
+<div class="right-column">
+   INFO
+  {% comment %}<div class="other-tools">
+    <h2 class="mono">{% trans "See" %}</h2>
+    <ul class="plain">
+      {% if extra_info.source_url %}
+      <li><a href="{{ extra_info.source_url }}">{% trans "Source" %}</a> {% trans "of the book" %}</li>
+      {% endif %}
+      <li><a href="{{ book.xml_file.url }}">{% trans "Source XML file" %}</a></li>
+      {% if extra_info.about and not hide_about %}
+      <li>{% trans "Book on" %} <a href="{{ extra_info.about }}">{% trans "Editor's Platform" %}</a></li>
+      {% endif %}
+      {% if book.gazeta_link %}
+      <li><a href="{{ book.gazeta_link }}">{% trans "Book description on Lektury.Gazeta.pl" %}</a></li>
+      {% endif %}
+      {% if book.wiki_link %}
+      <li><a href="{{ book.wiki_link }}">{% trans "Book description on Wikipedia" %}</a></li>
+      {% endif %}
+      <li><a href="{% url 'poem_from_book' book.slug %}">{% trans "Mix this book" %}</a></li>
+    </ul>
+  </div>
+  <div class="other-download">
+    <h2 class="mono">{% trans "Download" %}</h2>
+    <ul class="plain">
+      <li>
+       {% if related.media.mp3 or related.media.ogg or related.media.daisy %}
+        {% trans "Download all audiobooks for this book" %}:
+           {% download_audio book %}.
+       {% endif %}
+      </li>
+      {% custom_pdf_link_li book %}
+    </ul>
+  </div>{% endcomment %}
+</div>
+{% endblock %}
diff --git a/apps/picture/templatetags/__init__.py b/apps/picture/templatetags/__init__.py
new file mode 100644 (file)
index 0000000..8b13789
--- /dev/null
@@ -0,0 +1 @@
+
diff --git a/apps/picture/templatetags/picture_tags.py b/apps/picture/templatetags/picture_tags.py
new file mode 100644 (file)
index 0000000..3fe5b36
--- /dev/null
@@ -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),
+        }
+
index 3f04e3c..dcc3807 100644 (file)
@@ -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)
+
+
index 190ddd7..8a7cff2 100755 (executable)
     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 (file)
index 0000000..d541d27
--- /dev/null
@@ -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
old mode 100755 (executable)
new mode 100644 (file)
index 83022eb..7a56b3f
@@ -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 (file)
index 0000000..dca2d13
--- /dev/null
@@ -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")
+  });
+});
+
index a3ff424..28d42e9 100644 (file)
@@ -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',