From: Frédéric Péters <fpeters@0d.be>
Date: Thu, 11 Jun 2020 09:45:42 +0000 (+0200)
Subject: import custom panik gallery template & script
X-Git-Tag: v2021~157
X-Git-Url: https://git.0d.be/?p=panikweb.git;a=commitdiff_plain;h=d59e2485b0e4e6dbf0f464538467354e12861ad1

import custom panik gallery template & script
---

diff --git a/panikweb_templates/static/js/combo.gallery.js b/panikweb_templates/static/js/combo.gallery.js
new file mode 100644
index 0000000..a91e714
--- /dev/null
+++ b/panikweb_templates/static/js/combo.gallery.js
@@ -0,0 +1,29 @@
+function gallery(element) {
+  var element_id = '#' + $(element).attr('id');
+  $(element).sortable({
+    items: '> li',
+    containment: 'parent',
+    placeholder: 'empty-image',
+    update: function(event, ui) {
+      var new_order = $(element).find('> li').map(function() { return $(this).data('object-id'); }).get().join();
+      $.ajax({
+        url: $(element).data('order-url'),
+        data: {'new-order': new_order},
+        success: function(data, status) {
+          $(element).replaceWith($(data).find(element_id));
+          gallery($(element_id));
+        }
+      });
+    }
+  });
+  $('.image-delete').on('click', function() {
+    $.ajax({
+      url: $(this).attr('href'),
+      success: function(data, status) {
+        $(element).replaceWith($(data).find(element_id));
+        gallery($(element_id));
+      }
+    });
+    return false;
+  });
+};
diff --git a/panikweb_templates/templates/combo/gallery.html b/panikweb_templates/templates/combo/gallery.html
index 49451a9..6be3c9f 100644
--- a/panikweb_templates/templates/combo/gallery.html
+++ b/panikweb_templates/templates/combo/gallery.html
@@ -1,28 +1,32 @@
 {% 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>
+{% thumbnail image.image "640x480" crop="50% 25%" as im %}
+<div class="first">
+<img src="{{ im.url }}"/>
+<span>{% if image.title %}{{ image.title }}{% endif %}</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>
+<div> {# extra opened <div> #}
 {% endthumbnail %}
-{% else %}
+  {% endif %}
+{% thumbnail image.image "60x60" crop="50% 25%" as im %}
 {% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
-<span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
+<span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
         {% if image.title %} title="{{image.title}}" {% endif %}/></span>
 {% endthumbnail %}
-
-{% endif %}
 {% endthumbnail %}
+
+  {% if forloop.last %}
+  </div> {# close extra <div> #}
+  {% endif %}
 {% endfor %}
 </div>
-</div>
+<script type="text/javascript">
+$(function() {
+  var $gallery = $('#gallery-{{cell.id}}');
+  $gallery.find('span').on('click', function() {
+    $gallery.find('div.first img').attr('src', $(this).data('image-large'));
+  });
+});
+</script>