From 07ccace995d445bd2b4d94434a2b8898ef653f5d Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Tue, 12 Mar 2024 10:46:04 -0500
Subject: [PATCH] Use Zooming to enlarge images on click (#106)

* add lightbox code from old ui, tweak css a little

* use the zooming lib instead, its better

* use background body for backdrop
---
 package-lock.json                 | 15 ++++++++++++++-
 package.json                      |  3 ++-
 src/js/vendor/zooming.bundle.js   | 16 ++++++++++++++++
 src/partials/body-end-scripts.hbs |  1 +
 4 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src/js/vendor/zooming.bundle.js

diff --git a/package-lock.json b/package-lock.json
index 92a48547..4a56d4da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,8 @@
         "require-directory": "~2.1",
         "require-from-string": "~2.0",
         "tailwindcss": "^3.3.5",
-        "vinyl-fs": "~3.0"
+        "vinyl-fs": "~3.0",
+        "zooming": "^2.1.1"
       },
       "engines": {
         "node": ">= 8.0.0"
@@ -16327,6 +16328,12 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zooming": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/zooming/-/zooming-2.1.1.tgz",
+      "integrity": "sha512-Z38dkZRQsFNBE67+xDBQLNKMs5J1Gc+s3/zO6iezTrC24VYLJV7YPBdBDJmiLhff5qa6Awxv4wsjqx3oYz2MYA==",
+      "dev": true
     }
   },
   "dependencies": {
@@ -29030,6 +29037,12 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zooming": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/zooming/-/zooming-2.1.1.tgz",
+      "integrity": "sha512-Z38dkZRQsFNBE67+xDBQLNKMs5J1Gc+s3/zO6iezTrC24VYLJV7YPBdBDJmiLhff5qa6Awxv4wsjqx3oYz2MYA==",
+      "dev": true
     }
   }
 }
diff --git a/package.json b/package.json
index 2405d242..1ab70bb1 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "require-directory": "~2.1",
     "require-from-string": "~2.0",
     "tailwindcss": "^3.3.5",
-    "vinyl-fs": "~3.0"
+    "vinyl-fs": "~3.0",
+    "zooming": "^2.1.1"
   }
 }
diff --git a/src/js/vendor/zooming.bundle.js b/src/js/vendor/zooming.bundle.js
new file mode 100644
index 00000000..70a860ea
--- /dev/null
+++ b/src/js/vendor/zooming.bundle.js
@@ -0,0 +1,16 @@
+;(function () {
+  'use strict'
+
+  const Zooming = require('zooming')
+
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  const zooming = new Zooming({
+    bgColor: 'var(--ds-background-body)',
+    bgOpacity: 0.9,
+    scaleBase: 0.8,
+    transitionDuration: prefersReducedMotion ? 0.01 : 0.3,
+  })
+
+  zooming.listen('.doc .imageblock img, .doc .image img')
+})()
diff --git a/src/partials/body-end-scripts.hbs b/src/partials/body-end-scripts.hbs
index ecda19cd..5c82e5c2 100644
--- a/src/partials/body-end-scripts.hbs
+++ b/src/partials/body-end-scripts.hbs
@@ -1,6 +1,7 @@
 <script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/tabs.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/zooming.js"></script>
 
 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
 <script>