enhance gallery and allow it on episode pages

diff --git a/panikweb/base/static/js/specifics.js b/panikweb/base/static/js/specifics.js
index acaa43280c6f826991c0a576db25ab4619a68951..668413195ff9d0b7767d39c820d2485ce2f0cd23 100644 (file)
--- a/panikweb/base/static/js/specifics.js
+++ b/panikweb/base/static/js/specifics.js
@@ -665,9 +665,14 @@ $(function() {
                    $gallery.find('div.first img').attr('src', $(this).data('image-large'));
                    $gallery.find('div.first span.gallery-legend').text($(this).find('img').attr('title') || '');
                    $gallery.find('div.first').show('fade');
+                   $gallery.find('button').show();
                    return false;
                  });
-                 $gallery.find('div.first').on('click', function() { $(this).toggle('fade'); return false; });
+                 $gallery.find('div.first').on('click', function() {
+                         $(this).parents('.gallery').find('button').hide();
+                         $(this).toggle('fade');
+                         return false;
+                 });
                });
 
                 /* CHAT */
@@ -894,7 +899,30 @@ $(function() {
                $waveform.find('span.done:last').addClass('current');
        });
 
+       $('.gallery-previous').on('click', function() {
+         var e = $.Event('keydown');
+         e.which = 37;
+         $('body').trigger(e);
+         return false;
+       });
+
+       $('.gallery-next').on('click', function() {
+         var e = $.Event('keydown');
+         e.which = 39;
+         $('body').trigger(e);
+         return false;
+       });
+
+       $('.gallery-close').on('click', function() {
+         var e = $.Event('keydown');
+         e.which = 27;
+         $('body').trigger(e);
+         return false;
+       });
+
+
        $("body").keydown(function(e) {
+               console.log('keydown', e.which);
          var $visible_element = $('div.first:visible img');
          if ($visible_element.length == 0) {
            return true;
@@ -919,7 +947,8 @@ $(function() {
              idx = 0;
            }
          } else if (e.which == 27) { // escape
-           $visible_element.parent().toggle('fade');
+           $visible_element.parents('.first').toggle('fade');
+           $visible_element.parents('.gallery').find('button').hide();
            return true;
          } else {
            return true;
@@ -929,6 +958,7 @@ $(function() {
          if (e.which == 37) { $visible_element.css('transform-origin', 'bottom right'); }
          if (e.which == 39) { $visible_element.css('transform-origin', 'bottom left'); }
          var new_img = $visible_element.clone().appendTo($visible_element.parent());
+         $visible_element.hide();
          $(new_img).css('opacity', 0).attr('src', $(all_img[idx]).parent().data('image-large'));
          $(new_img).css('transform', 'scale(0, 1)');
          $(new_img)[0].offsetHeight; /* trigger reflow */

diff --git a/panikweb/base/templates/combo/gallerycell.html b/panikweb/base/templates/combo/gallerycell.html
index 0a53bf65a0126d3b82bd2fde278c1c56ef44eed2..85412a906aebbc4cd7d4bfaaedb94f3501f20e75 100644 (file)
--- a/panikweb/base/templates/combo/gallerycell.html
+++ b/panikweb/base/templates/combo/gallerycell.html
@@ -1,28 +1,3 @@
 {% load thumbnail %}
 {% if cell.title %}<h3>{{ cell.title }}</h3>{% endif %}
-<div class="gallery" id="gallery-{{cell.id}}">
-  {% for image in cell.image_set.all %}
-    {% if forloop.first %}
-      <div class="first" style="display: none;">
-        <img src="#"/>
-        <span class="gallery-legend"></span>
-      </div>
-      <div>
-    {% endif %}
-    {% thumbnail image.image "200x100" crop="50% 25%" as im %}
-      {% if cell.slug == 'portrait' %}
-        {% thumbnail image.image "480x640" crop="50% 25%" as im_large %}
-          <span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
-                                                                         class="portrait" {% if image.title %} title="{{image.title}}" {% endif %}/></span>
-        {% endthumbnail %}
-      {% else %}
-        {% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
-          <span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
-                                                                         {% if image.title %} title="{{image.title}}" {% endif %}/></span>
-        {% endthumbnail %}
-
-      {% endif %}
-    {% endthumbnail %}
-  {% endfor %}
-</div>
-</div>
+{% include "includes/gallery.html" with gallery_id=cell.id images_set=cell.image_set.all %}

diff --git a/panikweb/base/templates/episodes/detail.html b/panikweb/base/templates/episodes/detail.html
index 58f7d7f54cf5d9a033899ab2f4658f5a35bb5f41..a69ed88cd84d2a0ed363a0020218b27fdede8294 100644 (file)
--- a/panikweb/base/templates/episodes/detail.html
+++ b/panikweb/base/templates/episodes/detail.html
@@ -40,6 +40,7 @@
       </article>
     {% endif %}
   </div>
+
   {% block topik %}
     {% for topik in topik_pages %}
       {% topik topik=topik %}
@@ -59,26 +60,35 @@
     {% endif %}
   {% endblock %}
 
+  {% block tags %}
+    <div class="metas">
+      {% if episode.tags.all %}
+        <ul class="custom inline tags">
+          {% for tag in episode.tags.all %}
+            <li><a class="tag" href="{% url 'search' %}?selected_facets=tags_exact:{{tag|facet_tag}}">{{ tag }}</a></li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </div>
+  {% endblock %}
 
-  <div class="metas">
-    {% if episode.tags.all %}
-      <ul class="custom inline tags">
-        {% for tag in episode.tags.all %}
-          <li><a class="tag" href="{% url 'search' %}?selected_facets=tags_exact:{{tag|facet_tag}}">{{ tag }}</a></li>
-        {% endfor %}
-      </ul>
+  {% block gallery %}
+    {% if episode.picture_set.exists %}
+      {% include "includes/gallery.html" with gallery_id="episode" images_set=episode.picture_set.all %}
     {% endif %}
-  </div>
+  {% endblock %}
 
-  {% if soundfiles.count %}
-    <div class="wrapper extra-soundfiles">
-      <h3>Fragments sonores</h3>
-      <ul class="padded custom list">
-        {% for soundfile in soundfiles %}
-          <li id="podcast-part-{{ soundfile.id }}"><strong>{{ soundfile.title }}</strong> {% audio sound=soundfile %}</li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endif %}
+  {% block sound-fragments %}
+    {% if soundfiles.count %}
+      <div class="wrapper extra-soundfiles">
+        <h3>Fragments sonores</h3>
+        <ul class="padded custom list">
+          {% for soundfile in soundfiles %}
+            <li id="podcast-part-{{ soundfile.id }}"><strong>{{ soundfile.title }}</strong> {% audio sound=soundfile %}</li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+  {% endblock %}
 
 </div>

diff --git a/panikweb/base/templates/includes/gallery.html b/panikweb/base/templates/includes/gallery.html
new file mode 100644 (file)
index 0000000..dab6463
--- /dev/null
+++ b/panikweb/base/templates/includes/gallery.html
@@ -0,0 +1,35 @@
+{% load thumbnail %}
+
+<div class="gallery" id="gallery-{{ gallery_id }}">
+  <button class="gallery-close">×</button>
+  <button class="gallery-previous">«</button>
+  <button class="gallery-next">»</button>
+  {% for image in images_set %}
+    {% if forloop.first %}
+      <div class="first" style="display: none;">
+        <div class="image-container">
+          <img src="#"/>
+          <span class="gallery-legend"></span>
+        </div>
+      </div>
+      <div>
+    {% endif %}
+    {% thumbnail image.image "190x190" crop="50% 25%" as im %}
+      {% if cell.slug == 'portrait' %}
+        {% thumbnail image.image "960x1280" upscale=False as im_large %}
+          <span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
+                                                                         alt="{{ image.alt_text|default:"" }}"
+                                                                         class="portrait" {% if image.title %} title="{{image.title}}" {% endif %}/></span>
+        {% endthumbnail %}
+      {% else %}
+        {% thumbnail image.image "1280x960" upscale=False as im_large %}
+          <span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
+                                                                         alt="{{ image.alt_text|default:"" }}"
+                                                                         {% if image.title %} title="{{image.title}}" {% endif %}/></span>
+        {% endthumbnail %}
+
+      {% endif %}
+    {% endthumbnail %}
+  {% endfor %}
+</div>
+</div>