Add external link icon button to lightbox dialog

agarun · May 17, 2024 · 460afd0 · 460afd0
1 parent f21fbd7
commit 460afd0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
@@ -1,7 +1,6 @@
 import dynamic from 'next/dynamic';
 import { getPage } from '@/lib/api';
 import Nav from '@/lib/nav';
-import Canvas from '@/lib/canvas';
 
 const Masonry = dynamic(() => import('@/lib/masonry'), {
   ssr: false
@@ -20,9 +19,7 @@ async function Page({ params: { slug } }: { params: { slug: string } }) {
 
   return (
     <section className="flex my-20">
-      <div className="pl-20 pr-40 space-y-1">
-        <Canvas />
-
+      <div className="pt-10 pl-20 pr-40 space-y-1">
         <Nav />
       </div>
 

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -8,6 +8,10 @@
   }
 }
 
+::selection {
+  background: #e5b3c3;
+}
+
 /* Homepage */
 .globe-container {
   & > div {

diff --git a/src/hooks/use-lightbox.tsx b/src/hooks/use-lightbox.tsx
@@ -3,20 +3,20 @@ import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import 'photoswipe/dist/photoswipe.css';
 
 export interface LightboxData {
-  src: string;
+  url: string;
   width: number;
   height: number;
 }
 
-function selectDataSource(data) {
+function selectDataSource(data: Array<LightboxData>) {
   return data.map(item => ({
     url: item.url,
     width: item.width,
     height: item.height
   }));
 }
 
-export function useLightbox(data: LightboxData[]) {
+export function useLightbox(data: Array<LightboxData>) {
   useEffect(() => {
     let lightbox = new PhotoSwipeLightbox({
       gallery: '#gallery',
@@ -33,11 +33,39 @@ export function useLightbox(data: LightboxData[]) {
       return;
     }
 
+    lightbox.on('uiRegister', function () {
+      if (!lightbox?.pswp?.ui) return;
+      lightbox.pswp.ui.registerElement({
+        name: 'download-button',
+        order: 8,
+        isButton: true,
+        tagName: 'a',
+
+        html: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="fill: #f294a4; stroke: black; stroke-width: 12px; width: 20px; height: 20px;">
+  <path d="M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/>
+</svg>`,
+
+        onInit: (el, pswp) => {
+          el.setAttribute('download', '');
+          el.setAttribute('target', '_blank');
+          el.setAttribute('rel', 'noopener noreferrer');
+          el.setAttribute(
+            'style',
+            'display: flex; justify-content: center; align-items: center;'
+          );
+          pswp.on('change', () => {
+            const anchor = el as HTMLAnchorElement;
+            anchor.href = pswp?.currSlide?.data.src || '';
+          });
+        }
+      });
+    });
+
     lightbox.init();
 
     return () => {
       lightbox.destroy();
-      lightbox = null;
     };
   }, [data]);
 }