From b59a662919fea9feb2687c2a14f67b528575df7b Mon Sep 17 00:00:00 2001
From: Willard Nilges <willardnilges@gmail.com>
Date: Sat, 6 Apr 2024 20:59:04 -0400
Subject: [PATCH] Use flickity to display panoramas (#334)

* Flickity

* style carousel

* Update src/meshapi/templates/widgets/panorama_viewer.html

Co-authored-by: james-otten <james-otten@users.noreply.github.com>

* Delete virtualbox address

* pin flickity to 3.0.0

* Revert "pin flickity to 3.0.0"

This reverts commit 52124a0b6380b18a318c411b3acaffd2f056f801.

* Update panorama_viewer.html

---------

Co-authored-by: james-otten <james-otten@users.noreply.github.com>
---
 .../static/widgets/panorama_viewer.css        | 26 +++++++++++++++++++
 .../templates/widgets/panorama_viewer.html    | 20 +++++++++++---
 src/meshapi/widgets.py                        |  5 ++++
 3 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 src/meshapi/static/widgets/panorama_viewer.css

diff --git a/src/meshapi/static/widgets/panorama_viewer.css b/src/meshapi/static/widgets/panorama_viewer.css
new file mode 100644
index 00000000..9a3713b6
--- /dev/null
+++ b/src/meshapi/static/widgets/panorama_viewer.css
@@ -0,0 +1,26 @@
+.main-carousel {
+  width:100%;
+  min-height:fit-content;
+  max-height:300px;
+}
+.carousel-cell {
+  width: 100%; /* full width */
+  height: 200px;
+  /* center images in cells with flexbox */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.carousel-cell img {
+  display: block;
+}
+
+.no-panos {
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+
diff --git a/src/meshapi/templates/widgets/panorama_viewer.html b/src/meshapi/templates/widgets/panorama_viewer.html
index 3e929302..224e7a15 100644
--- a/src/meshapi/templates/widgets/panorama_viewer.html
+++ b/src/meshapi/templates/widgets/panorama_viewer.html
@@ -1,5 +1,17 @@
-<div style='display:flex; flex-direction: row; width:100%; overflow-x:auto; max-height:300px; padding-left: 10px;'>
-	{% for panorama in widget.value %}
-		<a href="{{ panorama }}" target="_blank"><img src="{{ panorama }}" style="margin-right:10px"/></a>
-	{% endfor %}
+<!--https://flickity.metafizzy.co/-->
+<!--integrity generated with https://www.srihash.org/-->
+<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js" integrity="sha384-6ma6pGRLjeu6PkX+yOaR0dUGt6OQl9evbv3H2kdLWwIXtUztaQrWUlbRBPVpDH4B" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
+
+<div class="main-carousel" data-flickity='{ "wrapAround": true }'>
+  {% if widget.value|length == 0 %}
+  <div class="no-panos">
+  	<p>There are no panoramas.</p>
+  </div>
+  {% endif %}
+  {% for panorama in widget.value %}
+  <div class="carousel-cell">
+  	<a href="{{ panorama }}" target="_blank"><img src="{{ panorama }}"/></a>
+  </div>
+  {% endfor %}
 </div>
diff --git a/src/meshapi/widgets.py b/src/meshapi/widgets.py
index dd79e7eb..4e0193f9 100644
--- a/src/meshapi/widgets.py
+++ b/src/meshapi/widgets.py
@@ -36,6 +36,11 @@ def render(self, name, value, attrs=None, renderer=None):
         template = super_template + pano_template
         return mark_safe(template)
 
+    class Media:
+        css = {
+            "all": ("widgets/panorama_viewer.css",),
+        }
+
 
 class DeviceIPAddressWidget(widgets.TextInput):
     template_name = "widgets/ip_address.html"