From ee66861ef16fa385c2db9fd1f315ba89e21404fc Mon Sep 17 00:00:00 2001
From: wass <wassim.filali@gmail.com>
Date: Sat, 18 May 2024 16:02:10 +0200
Subject: [PATCH] fixed default gallery

---
 src/components/gallery/gallery.astro      | 192 +++++++---------------
 src/components/gallery/gallery.js         |  84 +++-------
 src/components/gallery/gallery_grid.astro |  60 -------
 src/components/gallery/gallery_pz.astro   | 132 +++++++++++++++
 src/components/gallery/gallery_pz.js      |  62 +++++++
 src/components/gallery/pswp_gallery.js    |  22 ---
 src/components/markdown/code/Code.astro   |   7 +-
 7 files changed, 282 insertions(+), 277 deletions(-)
 delete mode 100644 src/components/gallery/gallery_grid.astro
 create mode 100644 src/components/gallery/gallery_pz.astro
 create mode 100644 src/components/gallery/gallery_pz.js
 delete mode 100644 src/components/gallery/pswp_gallery.js

diff --git a/src/components/gallery/gallery.astro b/src/components/gallery/gallery.astro
index 01af26c..70d8e3a 100644
--- a/src/components/gallery/gallery.astro
+++ b/src/components/gallery/gallery.astro
@@ -1,132 +1,60 @@
----
-import {relAssetToUrl} from '@/libs/assets.js'
-import {get_dir_files} from '@/libs/utils.js'
-import PanZoomModal from '../panzoom/panzoommodal.astro'
-import yaml from 'js-yaml'
-
-export interface Props {
-  code: string;
-  dirpath: string;
-  expanded: boolean;
-}
-
-const { code, dirpath, expanded=true } = Astro.props as Props;
-
-let relImages
-const data = yaml.load(code)
-if(Array.isArray(data)){
-    relImages = data
-}else{
-    if(Object.hasOwn(data,"dir")){
-        relImages = await get_dir_files(dirpath,data.dir)
-    }
-}
-
-let imagesUrls = []
-for(const relFile of relImages){
-    const url = await relAssetToUrl(relFile,dirpath)
-    imagesUrls.push({
-        url:url,
-        isSVG:url.endsWith(".svg"),
-        name:relFile
-    })
-}
----
-
-<div class="container gallery" data-state="init">
-    <button class="collapsible">
-        {expanded?"Click to close":"Click to expand"}
-    </button>
-    <div class={`content ${expanded?"expanded":""}`}>
-        <div class="itemscontainer">
-            {imagesUrls.map((image)=>(
-                <div class="item" data-name={image.name}>
-                    <div class="itemimage">
-                        {image.isSVG&&
-                            <object data={image.url} />
-                        }
-                        {(!image.isSVG)&&
-                            <img src={image.url} />
-                        }
-                    </div>
-                    <PanZoomModal url={image.url} />
-                </div>
-            ))}
-        </div>
-    </div>
-</div>
-
-<style>
-.container{
-    background:rgb(134, 134, 134);
-    padding:5px;
-    border-radius: 5px;
-}
-.collapsible{
-    color:white;
-    text-align: left;
-    background: #333333;
-    border: none;
-    cursor: pointer;
-    width:100%;
-    padding: 10px;
-}
-.collapsible:hover{
-    background-color: #545454;
-    transition: background-color 0.3s;
-}
-.content{
-    background:rgb(43, 43, 43);
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.2s ease-out;
-}
-.content.expanded{
-    max-height: 600px;
-}
-.itemscontainer{
-    padding:10px;
-    display:flex;
-    flex-wrap: wrap;
-    gap: 10px 10px;
-}
-.item{
-    cursor:pointer;
-}
-.itemimage:hover{
-    scale: 1.1;
-    transition: scale 0.5s;
-}
-.item:hover > .overlay{
-    display: block;
-}
-.item:hover > .itemimage{
-    filter:brightness(100%);
-}
-.itemimage{
-    filter:brightness(80%);
-    width:150px;
-    height:150px;
-}
-
-.overlay{
-    padding:5px;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    hyphens: auto;
-    color:white;
-    max-width: 150px;
-}
-object{
-    pointer-events: none;
-    max-height: 100%;
-    max-width: 100%;
-}
-img{
-    pointer-events: none;
-    max-height: 100%;
-    max-width: 100%;
-}
-</style>
-
-<script src="./gallery.js" />
+---
+import {yaml_to_grid_images,select_masonry} from './grid_utils.js'
+import PhotoGallery from '../photoswipe/Gallery.astro'
+
+export interface Props {
+    code: string;
+    dirpath: string;
+    expanded: boolean;
+    masonry: boolean;
+}
+
+const { code, dirpath, expanded=true, masonry=null } = Astro.props as Props;
+
+const imagesUrls = await yaml_to_grid_images(code,dirpath)
+let mas = masonry
+if(mas == null){
+    mas = select_masonry(imagesUrls)
+}
+---
+
+<div class={`pswp-gallery container ${mas?'masonry':'grid'}`} id="my-gallery">
+    {imagesUrls.map((image)=>(
+        <a  href={image.url}
+            class={`item  ${mas?'masonry':'grid'}`}
+            style={`grid-area: span ${image.spanHeight} / span ${image.spanWidth};`}
+            itemscope
+            itemtype="http://schema.org/ImageGallery"
+            data-pswp-width={image.width} 
+            data-pswp-height={image.height} >
+            {(image.ext == ".svg")?
+                <object data={image.url} />:
+                <img src={image.url} />
+            }
+        </a>
+    ))}
+</div>
+
+<style>
+.container.grid{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    grid-auto-rows: 10rem;
+    grid-gap: 10px;
+}
+img{
+    width: 100%;
+    height: 100%;
+    object-fit:cover;
+}
+.container.masonry{
+    column-width: 20rem;
+    column-gap: 1rem;
+}
+.item.masonry{
+    break-inside: avoid;
+    margin-bottom: 1rem;
+}
+</style>
+
+<script src="./gallery.js" />
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 33db595..c97280c 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -1,62 +1,22 @@
-import {event} from '../panzoom/client_utils'
-
-function init_container(container){
-    if(container.getAttribute("data-state") != "init"){
-        return
-    }
-    const collapsible = container.querySelector(".collapsible")
-    const content = container.querySelector(".content")
-    collapsible.onclick = ()=>{
-        content.classList.toggle("expanded")
-        if (content.classList.contains("expanded")){
-            //*2 speeds up the animation but resolves the resize problem without actively watching the resize
-            content.style.maxHeight = content.scrollHeight*2 + "px";
-            collapsible.textContent = "Click to close"
-        } else {
-            content.style.maxHeight = null;
-            collapsible.textContent = "Click to expand"
-        }
-        console.log(content.style.maxHeight)
-    }
-
-    //item open modal
-    const itemimages = container.querySelectorAll(".itemimage")
-    const items = [...itemimages]
-    for(let el in items){
-        items[el].onclick = (e)=>{
-            const modal = e.target.parentElement.querySelector(".modal-background")
-            event(modal,"init")
-        }
-    }
-
-}
-
-function checkModal(){
-    //check if any modal needs to be opened
-    const params = new URL(location.href).searchParams;
-    const modal_name = params.get('modal');
-    if(modal_name){
-        console.log(`opening modal for ${modal_name}`)
-        const container = document.querySelector(".container.gallery")
-        const item = container.querySelector(`[data-name="${modal_name}"]`)
-        const modal = item.querySelector(".modal-background")
-        event(modal,"init")
-    }
-}
-  
-function init(){
-    const containers_els = document.querySelectorAll(".container.gallery")
-    if(containers_els.length == 0){//prevent irrelvant paeg execution
-        return
-    }
-
-    const containers = [...containers_els]
-    for(let el in containers){
-        init_container(containers[el])
-    }
-  //allow the modal to init and register its listener before throwing the open event
-  setTimeout(checkModal,10)
-}
-
-document.addEventListener('DOMContentLoaded', init, false);
-
+async function initPhotoSwipe() {
+  // Dynamically import the PhotoSwipeLightbox module and CSS
+  const { default: PhotoSwipeLightbox } = await import('photoswipe/lightbox');
+  await import('photoswipe/style.css');
+
+  // Initialize PhotoSwipeLightbox
+  const lightbox = new PhotoSwipeLightbox({
+      gallery: '#my-gallery',
+      children: 'a',
+      pswpModule: () => import('photoswipe') // This remains the same, dynamically importing the main module
+  });
+
+  // Initiate the lightbox
+  lightbox.init();
+}
+
+// Call initPhotoSwipe on page load
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', initPhotoSwipe);
+} else {  // `DOMContentLoaded` has already fired
+  initPhotoSwipe();
+}
diff --git a/src/components/gallery/gallery_grid.astro b/src/components/gallery/gallery_grid.astro
deleted file mode 100644
index dfc1150..0000000
--- a/src/components/gallery/gallery_grid.astro
+++ /dev/null
@@ -1,60 +0,0 @@
----
-import {yaml_to_grid_images,select_masonry} from './grid_utils.js'
-import PhotoGallery from '../photoswipe/Gallery.astro'
-
-export interface Props {
-    code: string;
-    dirpath: string;
-    expanded: boolean;
-    masonry: boolean;
-}
-
-const { code, dirpath, expanded=true, masonry=null } = Astro.props as Props;
-
-const imagesUrls = await yaml_to_grid_images(code,dirpath)
-let mas = masonry
-if(mas == null){
-    mas = select_masonry(imagesUrls)
-}
----
-
-<div class={`pswp-gallery container ${mas?'masonry':'grid'}`} id="my-gallery">
-    {imagesUrls.map((image)=>(
-        <a  href={image.url}
-            class={`item  ${mas?'masonry':'grid'}`}
-            style={`grid-area: span ${image.spanHeight} / span ${image.spanWidth};`}
-            itemscope
-            itemtype="http://schema.org/ImageGallery"
-            data-pswp-width={image.width} 
-            data-pswp-height={image.height} >
-            {(image.ext == ".svg")?
-                <object data={image.url} />:
-                <img src={image.url} />
-            }
-        </a>
-    ))}
-</div>
-
-<style>
-.container.grid{
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    grid-auto-rows: 10rem;
-    grid-gap: 10px;
-}
-img{
-    width: 100%;
-    height: 100%;
-    object-fit:cover;
-}
-.container.masonry{
-    column-width: 20rem;
-    column-gap: 1rem;
-}
-.item.masonry{
-    break-inside: avoid;
-    margin-bottom: 1rem;
-}
-</style>
-
-<script src="./pswp_gallery.js" />
diff --git a/src/components/gallery/gallery_pz.astro b/src/components/gallery/gallery_pz.astro
new file mode 100644
index 0000000..e7b0faa
--- /dev/null
+++ b/src/components/gallery/gallery_pz.astro
@@ -0,0 +1,132 @@
+---
+import {relAssetToUrl} from '@/libs/assets.js'
+import {get_dir_files} from '@/libs/utils.js'
+import PanZoomModal from '../panzoom/panzoommodal.astro'
+import yaml from 'js-yaml'
+
+export interface Props {
+  code: string;
+  dirpath: string;
+  expanded: boolean;
+}
+
+const { code, dirpath, expanded=true } = Astro.props as Props;
+
+let relImages
+const data = yaml.load(code)
+if(Array.isArray(data)){
+    relImages = data
+}else{
+    if(Object.hasOwn(data,"dir")){
+        relImages = await get_dir_files(dirpath,data.dir)
+    }
+}
+
+let imagesUrls = []
+for(const relFile of relImages){
+    const url = await relAssetToUrl(relFile,dirpath)
+    imagesUrls.push({
+        url:url,
+        isSVG:url.endsWith(".svg"),
+        name:relFile
+    })
+}
+---
+
+<div class="container gallery" data-state="init">
+    <button class="collapsible">
+        {expanded?"Click to close":"Click to expand"}
+    </button>
+    <div class={`content ${expanded?"expanded":""}`}>
+        <div class="itemscontainer">
+            {imagesUrls.map((image)=>(
+                <div class="item" data-name={image.name}>
+                    <div class="itemimage">
+                        {image.isSVG&&
+                            <object data={image.url} />
+                        }
+                        {(!image.isSVG)&&
+                            <img src={image.url} />
+                        }
+                    </div>
+                    <PanZoomModal url={image.url} />
+                </div>
+            ))}
+        </div>
+    </div>
+</div>
+
+<style>
+.container{
+    background:rgb(134, 134, 134);
+    padding:5px;
+    border-radius: 5px;
+}
+.collapsible{
+    color:white;
+    text-align: left;
+    background: #333333;
+    border: none;
+    cursor: pointer;
+    width:100%;
+    padding: 10px;
+}
+.collapsible:hover{
+    background-color: #545454;
+    transition: background-color 0.3s;
+}
+.content{
+    background:rgb(43, 43, 43);
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+}
+.content.expanded{
+    max-height: 600px;
+}
+.itemscontainer{
+    padding:10px;
+    display:flex;
+    flex-wrap: wrap;
+    gap: 10px 10px;
+}
+.item{
+    cursor:pointer;
+}
+.itemimage:hover{
+    scale: 1.1;
+    transition: scale 0.5s;
+}
+.item:hover > .overlay{
+    display: block;
+}
+.item:hover > .itemimage{
+    filter:brightness(100%);
+}
+.itemimage{
+    filter:brightness(80%);
+    width:150px;
+    height:150px;
+}
+
+.overlay{
+    padding:5px;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    color:white;
+    max-width: 150px;
+}
+object{
+    pointer-events: none;
+    max-height: 100%;
+    max-width: 100%;
+}
+img{
+    pointer-events: none;
+    max-height: 100%;
+    max-width: 100%;
+}
+</style>
+
+<script src="./gallery_pz.js" />
diff --git a/src/components/gallery/gallery_pz.js b/src/components/gallery/gallery_pz.js
new file mode 100644
index 0000000..8576023
--- /dev/null
+++ b/src/components/gallery/gallery_pz.js
@@ -0,0 +1,62 @@
+import {event} from '../panzoom/client_utils'
+
+function init_container(container){
+    if(container.getAttribute("data-state") != "init"){
+        return
+    }
+    const collapsible = container.querySelector(".collapsible")
+    const content = container.querySelector(".content")
+    collapsible.onclick = ()=>{
+        content.classList.toggle("expanded")
+        if (content.classList.contains("expanded")){
+            //*2 speeds up the animation but resolves the resize problem without actively watching the resize
+            content.style.maxHeight = content.scrollHeight*2 + "px";
+            collapsible.textContent = "Click to close"
+        } else {
+            content.style.maxHeight = null;
+            collapsible.textContent = "Click to expand"
+        }
+        console.log(content.style.maxHeight)
+    }
+
+    //item open modal
+    const itemimages = container.querySelectorAll(".itemimage")
+    const items = [...itemimages]
+    for(let el in items){
+        items[el].onclick = (e)=>{
+            const modal = e.target.parentElement.querySelector(".modal-background")
+            event(modal,"init")
+        }
+    }
+
+}
+
+function checkModal(){
+    //check if any modal needs to be opened
+    const params = new URL(location.href).searchParams;
+    const modal_name = params.get('modal');
+    if(modal_name){
+        console.log(`opening modal for ${modal_name}`)
+        const container = document.querySelector(".container.gallery")
+        const item = container.querySelector(`[data-name="${modal_name}"]`)
+        const modal = item.querySelector(".modal-background")
+        event(modal,"init")
+    }
+}
+  
+function init(){
+    const containers_els = document.querySelectorAll(".container.gallery")
+    if(containers_els.length == 0){//prevent irrelvant paeg execution
+        return
+    }
+
+    const containers = [...containers_els]
+    for(let el in containers){
+        init_container(containers[el])
+    }
+  //allow the modal to init and register its listener before throwing the open event
+  setTimeout(checkModal,10)
+}
+
+document.addEventListener('DOMContentLoaded', init, false);
+
diff --git a/src/components/gallery/pswp_gallery.js b/src/components/gallery/pswp_gallery.js
deleted file mode 100644
index c97280c..0000000
--- a/src/components/gallery/pswp_gallery.js
+++ /dev/null
@@ -1,22 +0,0 @@
-async function initPhotoSwipe() {
-  // Dynamically import the PhotoSwipeLightbox module and CSS
-  const { default: PhotoSwipeLightbox } = await import('photoswipe/lightbox');
-  await import('photoswipe/style.css');
-
-  // Initialize PhotoSwipeLightbox
-  const lightbox = new PhotoSwipeLightbox({
-      gallery: '#my-gallery',
-      children: 'a',
-      pswpModule: () => import('photoswipe') // This remains the same, dynamically importing the main module
-  });
-
-  // Initiate the lightbox
-  lightbox.init();
-}
-
-// Call initPhotoSwipe on page load
-if (document.readyState === 'loading') {  // Loading hasn't finished yet
-  document.addEventListener('DOMContentLoaded', initPhotoSwipe);
-} else {  // `DOMContentLoaded` has already fired
-  initPhotoSwipe();
-}
diff --git a/src/components/markdown/code/Code.astro b/src/components/markdown/code/Code.astro
index 2af0bf3..5f34231 100644
--- a/src/components/markdown/code/Code.astro
+++ b/src/components/markdown/code/Code.astro
@@ -3,6 +3,7 @@ import Highlighter from './Highlighter.astro'
 import Kroki from './Kroki.astro'
 import ModelViewerCode from '../model/ModelViewerCode.astro';
 import Cards from '../cards/Cards.astro'
+import GalleryPz from '../../gallery/gallery_pz.astro';
 import Gallery from '../../gallery/gallery.astro';
 import Swiper from '../../swiper/swiper.astro'
 import kroki from './kroki.yaml'
@@ -20,11 +21,12 @@ const params = node.meta?node.meta.split(' '):[]
 
 const yaml_glb      = ((language == "yaml") && (node.meta?.startsWith("glb")))
 const yaml_cards    = ((language == "yaml") && (node.meta?.startsWith("cards")))
+const yaml_gallery_pz  = ((language == "yaml") && (node.meta?.startsWith("pz_gallery")))
 const yaml_gallery  = ((language == "yaml") && (node.meta?.startsWith("gallery")))
 const yaml_swiper  = ((language == "yaml") && (node.meta?.startsWith("swiper")))
 
 const is_diagram = kroki.languages.includes(language)
-const custom_yaml = yaml_glb || yaml_cards || yaml_gallery || yaml_swiper
+const custom_yaml = yaml_glb || yaml_cards || yaml_gallery || yaml_gallery_pz || yaml_swiper
 
 const other_language = (!is_diagram && !custom_yaml)
 ---
@@ -40,6 +42,9 @@ const other_language = (!is_diagram && !custom_yaml)
 {yaml_gallery &&
     <Gallery code={code} dirpath={dirpath}/>
 }
+{yaml_gallery_pz &&
+    <GalleryPz code={code} dirpath={dirpath}/>
+}
 {yaml_swiper &&
     <Swiper code={code} dirpath={dirpath}/>
 }