From 7fc3ce567d33cba2eb173291cbb3399ed3dfce47 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Wed, 26 Dec 2018 12:53:32 +0100
Subject: Gallery table: init gallery for gallery table

---
 ishtar_common/static/js/ishtar.js              | 27 ++++++++++++++++++++------
 ishtar_common/templates/blocks/DataTables.html |  6 ++++--
 ishtar_common/views_item.py                    |  2 ++
 3 files changed, 27 insertions(+), 8 deletions(-)

(limited to 'ishtar_common')

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 04957d7a2..18f83f155 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -984,7 +984,7 @@ var dt_multi_enable_disable_submit_button = function(e, dt, type, indexes){
     }
 };
 
-var render_gallery = function(data_table, table_name, nb_select){
+var render_gallery = function(data_table, table_name, nb_select, gallery_id){
     var html = '<label>' + show_msg;
     var id_select = table_name + '-length_image';
     html += ' <select name="' + id_select + '" id="id_' + id_select + '">';
@@ -996,9 +996,16 @@ var render_gallery = function(data_table, table_name, nb_select){
         html += '>' + nb + '</option>';
     }
     html += '</select> ' + entries_msg + '</label>';
-    html += "<div class='ishtar-gallery d-flex flex-wrap'>";
+    html += "<div class='ishtar-gallery d-flex flex-wrap' id='" + gallery_id + "'>";
+    var captions = '<div class="lightgallery-captions">';
 
     $.each(data_table["rows"], function(idx, data){
+        var thumb = "";
+        if ("main_image__thumbnail" in data){
+            thumb = data["main_image__thumbnail"];
+        } else {
+            thumb = static_path + "media/images/empty-image.png";
+        }
         var image = "";
         if ("main_image__image" in data){
             image = data["main_image__image"];
@@ -1013,15 +1020,21 @@ var render_gallery = function(data_table, table_name, nb_select){
         if ("name" in data){
             name = data["name"];
         }
+        var caption_id = 'lightgallery-' +  gallery_id +'-caption-' + data["id"];
         html += '<div class="card m-2">';
-        html += '<a class="thumb-image" href="#">';
-        html += '<img class="card-img-top" src="' + image + '">';
+        html += '<a data-sub-html="#'+ caption_id + '" class="thumb-image" href="' + image + '">';
+        html += '<img class="card-img-top" src="' + thumb + '">';
         html += '</a>';
         html += '<div class="card-body">';
         html += '<h4 class="card-title">' + link + " " + name + '</h4>';
         html += "</div></div>";
+        captions += '<div id="' +  caption_id + '">';
+        captions += '<span class="close">&times</span>';
+        captions += name;
+        captions += '</div>';
     });
     html += "</div>";
+    captions += '</div >';
 
     /* pagination */
     var page_total = data_table['total'];
@@ -1079,7 +1092,7 @@ var render_gallery = function(data_table, table_name, nb_select){
         page_current + 1, page_current, "Next", disabled, " next");
 
     html += '</ul></div></div>';
-    return html;
+    return captions + html;
 };
 
 var render_paginate_button = function(nb, current, label, disabled, extra_class){
@@ -1100,11 +1113,13 @@ var render_paginate_button = function(nb, current, label, disabled, extra_class)
 
 var current_image_page = 1;
 
-var register_image_paginate = function(){
+var register_image_gallery = function(gallery_id){
     $(".image-pagination .paginate_button a").click(function(){
         current_image_page = $(this).attr('data-dt-idx');
         gallery_submit_search();
     });
+    lightGallery(document.getElementById(gallery_id),
+                 {selector: '.thumb-image'}) ;
 };
 
 var main_submit_search = function(){
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index 2e2897539..2bd292cf5 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -75,10 +75,12 @@ gallery_submit_search = function(){
 
     var url = "{{source}}json-image?length=" + nb_select + "&submited=1&" + data;
     $.getJSON(url, function(data) {
+        var timestamp = Math.floor(Date.now() / 1000);
+        var gallery_id = "gallery-" + timestamp;
         $("#tab-content-gallery-{{name}}").html(
-            render_gallery(data, "{{name}}", nb_select));
+            render_gallery(data, "{{name}}", nb_select, gallery_id));
         $("#id_{{name}}-length_image").change(gallery_submit_search);
-        register_image_paginate();
+        register_image_gallery(gallery_id);
     });
 
     if ($('.modal-progress').length > 0){
diff --git a/ishtar_common/views_item.py b/ishtar_common/views_item.py
index dee4d2ffb..73569d4cb 100644
--- a/ishtar_common/views_item.py
+++ b/ishtar_common/views_item.py
@@ -1313,7 +1313,9 @@ def get_item(model, func_name, default_name, extra_request_keys=None,
                 table_cols = ['cached_label']
             if data_type == 'json-image':
                 query_table_cols.append('main_image__image')
+                query_table_cols.append('main_image__thumbnail')
                 table_cols.append('main_image__image')
+                table_cols.append('main_image__thumbnail')
 
         # manage sort tables
         manual_sort_key = None
-- 
cgit v1.2.3