convert photoswipe

gulpfile.js

@@ -58,6 +58,8 @@ const common = {
         .pipe(gulp.dest(path.join(outputPath, 'js'))),
       () => gulp.src('node_modules/html2canvas/dist/html2canvas.min.js')
         .pipe(gulp.dest(path.join(outputPath, 'js'))),
+      () => gulp.src('node_modules/photoswipe/dist/umd/*.js')
+        .pipe(gulp.dest(path.join(outputPath, 'js'))),
       () => gulp.src('node_modules/@tabler/icons/iconfont/tabler-icons.min.css')
         .pipe(gulp.dest(path.join(outputPath, 'css'))),
       () => gulp.src('node_modules/inter-ui/inter.css')

package.json

@@ -123,6 +123,7 @@
         "mldoc": "1.5.7",
         "path": "0.12.7",
         "path-complete-extname": "1.0.0",
+        "photoswipe": "^5.3.7",
         "pixi-graph-fork": "0.2.0",
         "pixi.js": "6.2.0",
         "posthog-js": "1.10.2",

resources/css/photoswipe.css

@@ -1,441 +0,0 @@
-/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
-
-.pswp {
-  --pswp-bg: #000;
-  --pswp-placeholder-bg: #222;
-  --pswp-error-text-color: #f7f7f7;
-
-  --pswp-root-z-index: 100000;
-  
-  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
-  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
-  
-  /* defined via js:
-  --pswp-transition-duration: 333ms; */
-  
-  --pswp-icon-color: #fff;
-  --pswp-icon-color-secondary: #4f4f4f;
-  --pswp-icon-stroke-color: #4f4f4f;
-  --pswp-icon-stroke-width: 2px;
-}
-
-
-/*
-	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
-*/
-
-.pswp {
-	position: fixed;
-	z-index: var(--pswp-root-z-index);
-	display: none;
-	touch-action: none;
-	outline: 0;
-	opacity: 0.003;
-	contain: layout style size;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-/* Prevents focus outline on the root element,
-  (it may be focused initially) */
-.pswp:focus {
-  outline: 0;
-}
-
-.pswp * {
-  box-sizing: border-box;
-}
-
-.pswp img {
-  max-width: none;
-}
-
-.pswp--open {
-	display: block;
-}
-
-.pswp,
-.pswp__bg {
-	transform: translateZ(0);
-	will-change: opacity;
-}
-
-.pswp__bg {
-  opacity: 0.005;
-	background: var(--pswp-bg);
-}
-
-.pswp,
-.pswp__scroll-wrap {
-	overflow: hidden;
-}
-
-.pswp,
-.pswp__scroll-wrap,
-.pswp__bg,
-.pswp__container,
-.pswp__item,
-.pswp__img,
-.pswp__zoom-wrap {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.pswp {
-	position: fixed;
-}
-
-.pswp__img,
-.pswp__zoom-wrap {
-	width: auto;
-	height: auto;
-}
-
-.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
-	cursor: -webkit-zoom-in;
-	cursor: -moz-zoom-in;
-	cursor: zoom-in;
-}
-
-.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
-	cursor: move;
-	cursor: -webkit-grab;
-	cursor: -moz-grab;
-	cursor: grab;
-}
-
-.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
-  cursor: -webkit-grabbing;
-  cursor: -moz-grabbing;
-  cursor: grabbing;
-}
-
-/* :active to override grabbing cursor */
-.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
-.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
-.pswp__img {
-	cursor: -webkit-zoom-out;
-	cursor: -moz-zoom-out;
-	cursor: zoom-out;
-}
-
-
-/* Prevent selection and tap highlights */
-.pswp__container,
-.pswp__img,
-.pswp__button {
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.pswp__item {
-	/* z-index for fade transition */
-	z-index: 1;
-	overflow: hidden;
-}
-
-.pswp__hidden {
-	display: none !important;
-}
-
-
-/*
-
-  PhotoSwipe UI
-
-*/
-
-/*
-	Error message appears when image is not loaded
-	(JS option errorMsg controls markup)
-*/
-.pswp__error-msg {
-	position: absolute;
-	top: 50%;
-	left: 0;
-	width: 100%;
-	padding: 0 10px;
-	margin-top: -0.5em;
-	font-size: 1em;
-	line-height: 1;
-	color: var(--pswp-error-text-color);
-	text-align: center;
-}
-
-.pswp__error-msg a {
-  color: var(--pswp-error-text-color);
-  text-decoration: underline;
-}
-
-/*
-class pswp__hide-on-close is applied to elements that
-should hide (for example fade out) when PhotoSwipe is closed
-and show (for example fade in) when PhotoSwipe is opened
- */
-.pswp .pswp__hide-on-close {
-	opacity: 0.005;
-	will-change: opacity;
-	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
-	z-index: 10; /* always overlap slide content */
-	pointer-events: none; /* hidden elements should not be clickable */
-}
-
-/* class pswp--ui-visible is added when opening or closing transition starts */
-.pswp--ui-visible .pswp__hide-on-close {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-/* <button> styles, including css reset */
-.pswp__button {
-	position: relative;
-	display: block;
-	width: 50px;
-	height: 60px;
-	padding: 0;
-	margin: 0;
-	overflow: hidden;
-	cursor: pointer;
-	background: none;
-	border: 0;
-	box-shadow: none;
-	opacity: 0.85;
-	-webkit-appearance: none;
-	-webkit-touch-callout: none;
-}
-
-.pswp__button:hover,
-.pswp__button:active,
-.pswp__button:focus {
-  transition: none;
-  padding: 0;
-  background: none;
-  border: 0;
-  box-shadow: none;
-  opacity: 1;
-}
-
-.pswp__icn {
-  position: absolute;
-  top: 14px;
-  left: 9px;
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  pointer-events: none;
-  fill: var(--pswp-icon-color);
-  color: var(--pswp-icon-color-secondary);
-  border-radius: 50%;
-}
-
-.pswp__icn-shadow {
-  stroke: var(--pswp-icon-stroke-color);
-  stroke-width: var(--pswp-icon-stroke-width);
-  fill: none;
-}
-
-.pswp__icn:focus {
-	outline: 0;
-}
-
-/*
-	div element that matches size of large image,
-	large image loads on top of it,
-	used when msrc is not provided
-*/
-div.pswp__img--placeholder,
-.pswp__img--with-bg {
-	background: var(--pswp-placeholder-bg);
-}
-
-.pswp__top-bar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 60px;
-	display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-	z-index: 10;
-
-	/* allow events to pass through top bar itself */
-	pointer-events: none !important;
-}
-.pswp__top-bar > * {
-  pointer-events: auto;
-  /* this makes transition significantly more smooth,
-     even though inner elements are not animated */
-  will-change: opacity;
-}
-
-
-/*
-
-  Close button
-
-*/
-.pswp__button--close {
-  margin-right: 6px;
-}
-
-
-/*
-
-  Arrow buttons
-
-*/
-.pswp__button--arrow {
-  position: absolute;
-  top: 0;
-  width: 75px;
-  height: 100px;
-  top: 50%;
-  margin-top: -50px;
-}
-
-.pswp__button--arrow:disabled {
-  display: none;
-  cursor: default;
-}
-
-.pswp__button--arrow .pswp__icn {
-  top: 50%;
-  margin-top: -30px;
-  width: 60px;
-  height: 60px;
-  background: none;
-  border-radius: 0;
-}
-
-/* Display arrows only when user hovers over them */
-/* .pswp--ui-visible {
-  .pswp__button--arrow, {
-    opacity: 0.75;
-
-    &:hover,
-    &:focus {
-      opacity: 1;
-      outline: none;
-    }
-  }
-} */
-
-.pswp--one-slide .pswp__button--arrow {
-  display: none;
-}
-
-/* hide arrows on touch screens */
-.pswp--touch .pswp__button--arrow {
-  visibility: hidden;
-}
-
-/* show arrows only after mouse was used */
-.pswp--has_mouse .pswp__button--arrow {
-  visibility: visible;
-}
-
-.pswp__button--arrow--prev {
-  right: auto;
-  left: 0px;
-}
-
-.pswp__button--arrow--next {
-  right: 0px;
-}
-.pswp__button--arrow--next .pswp__icn {
-  left: auto;
-  right: 14px;
-  /* flip horizontally */
-  transform: scale(-1, 1);
-}
-
-/*
-
-  Zoom button
-
-*/
-.pswp__button--zoom {
-  display: none;
-}
-
-.pswp--zoom-allowed .pswp__button--zoom {
-  display: block;
-}
-
-/* "+" => "-" */
-.pswp--zoomed-in .pswp__zoom-icn-bar-v {
-  display: none;
-}
-
-
-/*
-
-  Loading indicator
-
-*/
-.pswp__preloader {
-  position: absolute;
-  display: none;
-  width: 24px;
-  height: 24px;
-  pointer-events: none;
-  border: 3px solid var(--pswp-preloader-color);
-  border-left-color: var(--pswp-preloader-color-secondary);
-  border-radius: 50%;
-
-
-  
-
-  /* left:50% / top:50% styles are defined via JS,
-    as size of PhotoSwipe viewport might change visually
-    (because of UI elements like sidebar),
-    use !important if you want to override them */
-}
-
-.pswp__preloader--active {
-  display: block;
-  animation: pswp-fadein 333ms linear, pswp-clockwise 600ms linear infinite;
-}
-
-.pswp__preloader--hiding {
-  animation: pswp-clockwise 600ms linear infinite;
-
-  /* use of !important to override hide-on-close styles */
-  opacity: 0 !important;
-}
-
-
-@keyframes pswp-clockwise {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@keyframes pswp-fadein {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-
-/*
-
-  "1 of 10" counter
-
-*/
-.pswp__counter {
-  height: 30px;
-  margin: 18px 0 0 20px;
-  font-size: 14px;
-  line-height: 30px;
-  color: var(--pswp-icon-color);
-  opacity: 0.85;
-  margin-right: auto; /* align left */
-}
-
-.pswp--one-slide .pswp__counter {
-  display: none;
-}

src/main/frontend/extensions/lightbox.cljs

@@ -5,15 +5,15 @@
 
 (defn load-base-assets$
   []
-  (util/js-load$ (str util/JS_ROOT "/photoswipe.js")))
+  (util/js-load$ (str util/JS_ROOT "/photoswipe.umd.min.js"))
+  (util/js-load$ (str util/JS_ROOT "/photoswipe-lightbox.umd.min.js")))
 
 (defn preview-images!
   [images]
 
   (p/let [_ (load-base-assets$)]
-    (let [options {:dataSource images :pswpModule js/window.photoswipe.default :showHideAnimationType "fade"}
-          _ (js/console.log (bean/->js options))
-          ^js lightbox (js/window.photoswipe.PhotoSwipeLightbox. (bean/->js options))]
+    (let [options {:dataSource images :pswpModule js/window.PhotoSwipe :showHideAnimationType "fade"}
+          ^js lightbox (js/window.PhotoSwipeLightbox. (bean/->js options))]
       (doto lightbox
         (.init)
         (.loadAndOpen 0)))))

tailwind.all.css

@@ -5,7 +5,7 @@
 @import "inter-ui/inter.css";
 @import "resources/css/reveal.min.css";
 @import "resources/css/reveal_black.min.css";
-@import "resources/css/photoswipe.css";
+@import "photoswipe/dist/photoswipe.css";
 @import "resources/css/shepherd.css";
 @import "resources/css/fonts.css";
 @import "resources/css/excalidraw.min.css";

yarn.lock

@@ -5312,6 +5312,11 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
+photoswipe@^5.3.7:
+  version "5.3.7"
+  resolved "https://registry.npmjs.org/photoswipe/-/photoswipe-5.3.7.tgz#c67df67aaddb5705bcf8ff265bd2086f57805756"
+  integrity sha512-zsyLsTTLFrj0XR1m4/hO7qNooboFKUrDy+Zt5i2d6qjFPAtBjzaj/Xtydso4uxzcXpcqbTmyxDibb3BcSISseg==
+
 picocolors@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"