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

Author: colegoldsmith

package-lock.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"
   }
 }

package.json

@@ -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')
+})()

src/js/vendor/zooming.bundle.js

@@ -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>