Update photoswipe lightbox to use esm version of code.

ivelum · Dec 19, 2024 · 69b3e98 · 69b3e98
1 parent 399310c
commit 69b3e98
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 14 deletions.
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -5,11 +5,8 @@
 {{- define "main" }}
   <script type="module">
     import '/js/prettify.js';
+    import '/js/lightbox.js';
   </script>
-  <script src="/vendor/photoswipe-lightbox.umd.min.js"></script>
-  <script src="/vendor/photoswipe.umd.min.js"></script>
-  <link rel="stylesheet" href="/vendor/photoswipe.css">
-  <script src="/js/lightbox.js"></script>
   <div class="page article">
     <div class="article--back">
       <a class="article--back-link" href="/blog/">

diff --git a/static/js/lightbox.js b/static/js/lightbox.js
@@ -1,4 +1,13 @@
+import PhotoSwipeLightbox from '/vendor/photoswipe-lightbox.esm.min.js';
+import PhotoSwipe from '/vendor/photoswipe.esm.min.js';
+
 window.addEventListener("load", function () {
+  const link = document.createElement('link');
+  link.type = 'text/css';
+  link.rel = 'stylesheet';
+  document.head.appendChild(link);
+
+  link.href = '/vendor/photoswipe.css';
   document.querySelectorAll('img').forEach(function (img) {
     if (img.parentNode.tagName === "A") {
       img.parentNode.setAttribute("data-pswp-width", img.naturalWidth);

diff --git a/static/vendor/photoswipe-lightbox.esm.min.js b/static/vendor/photoswipe-lightbox.esm.min.js