Galery view looks pretty good again, though it still doesn't auto res…

…ize...
TomNCatz · Sep 1, 2023 · 23e808b · 23e808b
1 parent 000a5f7
commit 23e808b
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 13 deletions.
diff --git a/src/block.ts b/src/block.ts
@@ -4,10 +4,10 @@ import { extractColors } from '../node_modules/extract-colors'
 import type { GalleryBlockArgs, InfoBlockArgs } from './utils'
 import
   {
-    EXTENSIONS, GALLERY_DISPLAY_USAGE, GALLERY_INFO_USAGE, EXTRACT_COLORS_OPTIONS, OB_GALLERY_INFO,
+    EXTENSIONS, GALLERY_DISPLAY_USAGE, EXTRACT_COLORS_OPTIONS, OB_GALLERY_INFO,
     VIDEO_REGEX,
     getImageResources,
-    getImgInfo, updateFocus
+    getImgInfo, updateFocus, splitcolumns
   } from './utils'
 import { GalleryInfoView } from './view'
 import type GalleryPlugin from './main'
@@ -66,10 +66,12 @@ export class GalleryProcessor
 
     if (args.type === 'grid')
     {
+      const [columns, columnWidth] = splitcolumns(imgList, elCanvas, args.imgWidth)
+
       new ImageGrid({
         props: {
-          imageList: imgList,
-          maxColumnWidth: args.imgWidth
+          columns: columns,
+          maxColumnWidth: columnWidth
         },
         target: elCanvas
       })

diff --git a/src/svelte/ImageGrid.svelte b/src/svelte/ImageGrid.svelte
@@ -1,19 +1,29 @@
-<script>
-    export let imageList;
+<script> 
+    export let columns;
     export let maxColumnWidth = 400;
 </script>
 
-
-    {#each imageList as img}
+{#each columns as images}
+    <div class="column">
+    {#each images as img}
         {#if img.includes(".mp4")}
-            <video src={img} controls=true width={maxColumnWidth}> <track kind="captions"> </video>
+            <video src={img} controls=true width={maxColumnWidth} class="gallery-grid-img"> <track kind="captions"> </video>
         {:else}
             <img src={img} class="gallery-grid-img" alt="" width={maxColumnWidth} />
         {/if}
     {/each}
+    </div>
+{/each}
 
 
 <style>
+    .column {
+        float: left;
+        flex: 50%;
+    }
+    .gallery-grid-img{
+        display: block;
+    }
     /*:global(img) {
         opacity: 0.9;
         transition: 0.1;

diff --git a/src/utils.ts b/src/utils.ts
@@ -130,7 +130,6 @@ Please make sure that a Valid Folder is specified in the settings for the plugin
 const initializeInfo = (imgPath: string, imgName: string): string =>
 {
   return `---
-Palette:
 tags:
 ---
 
@@ -239,6 +238,32 @@ export const getImageResources = async (path: string, name: string, tag: string,
   return imgList
 };
 
+export const splitcolumns = (imgList: string[], target: HTMLElement, maxWidth: number): [string[][], number] =>
+{
+  let columnCount = Math.ceil(target.innerWidth/maxWidth);
+  let columns: string[][] = Array(columnCount)
+  let rowCount = Math.ceil(imgList.length/columnCount);
+
+  for(let col = 0; col < columnCount; col++)
+  {
+    columns[col] = [];
+  }
+
+  for(let row = 0; row <= rowCount; row++)
+  {
+    for(let col = 0; col < columnCount; col++)
+    {
+      let index = row*columnCount+col;
+      if(index < imgList.length)
+      {
+        columns[col].push(imgList[index]);
+      }
+    }
+  }
+
+  return [columns, (target.innerWidth-15)/columnCount];
+}
+
 export const containsTags = async (file: TFile, tag: string, exclusive: boolean, plugin: GalleryTagsPlugin): Promise<boolean> =>
 {
   if(tag == null || tag == "")

diff --git a/src/view.ts b/src/view.ts
@@ -3,7 +3,7 @@ import type { ImageResources } from './utils'
 import
   {
     OB_GALLERY, OB_GALLERY_INFO, GALLERY_RESOURCES_MISSING, VIDEO_REGEX,
-    gallerySearchIcon, getImageResources, getImgInfo, updateFocus
+    gallerySearchIcon, getImageResources, getImgInfo, updateFocus, splitcolumns
   } from './utils'
 import * as CodeMirror from 'codemirror'
 import ImageGrid from './svelte/ImageGrid.svelte'
@@ -125,6 +125,12 @@ export class GalleryView extends ItemView
       {
         await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, plugin)
       });
+
+      // todo: figure out a way to actually get a resize event
+      this.displayEl.onresize = async () =>
+      {
+        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, plugin)
+      };
     }
   }
 
@@ -146,10 +152,12 @@ export class GalleryView extends ItemView
       this.imgList = this.imgList.reverse()
     }
 
+    const [columns, columnWidth] = splitcolumns(this.imgList, this.imagesContainer, plugin.settings.width)
+
     new ImageGrid({
       props: {
-        imageList: this.imgList,
-        maxColumnWidth: this.plugin.settings.width
+        columns: columns,
+        maxColumnWidth: columnWidth
       },
       target: this.imagesContainer
     })