fixed two types of gallery

content/examples/gallery/readme.md

@@ -1,5 +1,5 @@
 ---
-title: Gallery
+title: Gallery PhotoSwipe
 order: 3
 ---
 # Gallery
@@ -8,22 +8,20 @@ This is a Gallery Astro component, a yaml Code block with metadata 'gallery' is
 
 ``````
 ```yaml gallery
-- tree.svg
-- gallery-tiger.svg
-- gallery-long_diag.svg
-- gallery-Linux_kernel_map.svg
-- gallery-tiger.svg
+- 01 Abstract Mix.png
+- 01a fail mix.png
+- 12 Aqara Fan button hold.png
+- 17 Retro light cable management.png
 - github-dark.png
 ```
 ``````
 
 will generate this gallery
 
 ```yaml gallery
-- tree.svg
-- gallery-tiger.svg
-- gallery-long_diag.svg
-- gallery-Linux_kernel_map.svg
-- gallery-tiger.svg
+- 01 Abstract Mix.png
+- 01a fail mix.png
+- 12 Aqara Fan button hold.png
+- 17 Retro light cable management.png
 - github-dark.png
 ```

content/examples/gallery_pz/readme.md

@@ -0,0 +1,29 @@
+---
+title: Gallery Panzoom
+order: 3
+---
+# Gallery
+
+This is a Gallery Astro component, a yaml Code block with metadata 'gallery' is provided with a list of images like this
+
+``````
+```yaml gallery
+- tree.svg
+- gallery-tiger.svg
+- gallery-long_diag.svg
+- gallery-Linux_kernel_map.svg
+- gallery-tiger.svg
+- github-dark.png
+```
+``````
+
+will generate this gallery
+
+```yaml pz_gallery
+- tree.svg
+- gallery-tiger.svg
+- gallery-long_diag.svg
+- gallery-Linux_kernel_map.svg
+- gallery-tiger.svg
+- github-dark.png
+```

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" />

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