Adding a reverse sort option to the filter section

TomNCatz · Sep 4, 2023 · 66c0e10 · 66c0e10
1 parent adad18e
commit 66c0e10
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 57 deletions.
diff --git a/src/settings.ts b/src/settings.ts
@@ -66,19 +66,6 @@ export class GallerySettingTab extends PluginSettingTab
           await this.plugin.saveSettings()
         }))
 
-    new Setting(containerEl)
-      .setName('Main Gallery Display Order')
-      .setDesc('Toggle this option to reverse the order in which the main gallery displays images.')
-      .addToggle((toggle) =>
-      {
-        toggle.setValue(this.plugin.settings.reverseDisplay)
-        toggle.onChange(async (value) =>
-        {
-          this.plugin.settings.reverseDisplay = value
-          await this.plugin.saveSettings()
-        });
-      })
-
     new Setting(containerEl)
       .setName('Gallery On Open Path Search')
       .setDesc(`The path from which to show images when the main gallery is opened. 

diff --git a/src/svelte/ImageGrid.svelte b/src/svelte/ImageGrid.svelte
@@ -5,7 +5,7 @@
 </script>
 
 {#each columns as images}
-    <div class="column">
+    <div class="gallery-grid-column">
     {#each images as img}
         {#if img.includes(".mp4") || img.includes(".webm")}
             <video src={img} controls=true width={maxColumnWidth} class="gallery-grid-vid"> <track kind="captions"> </video>
@@ -14,26 +14,4 @@
         {/if}
     {/each}
     </div>
-{/each}
-
-
-<style>
-    .column {
-        float: left;
-        flex: 50%;
-    }
-    .gallery-grid-vid{
-        display: block;
-    }
-    .gallery-grid-img{
-        display: block;
-    }
-    /*:global(img) {
-        opacity: 0.9;
-        transition: 0.1;
-    }
-    :global(img):hover {
-        opacity: 1;
-        transform: scale(1.04);
-    }*/
-</style>
+{/each}
diff --git a/src/utils.ts b/src/utils.ts
@@ -8,7 +8,6 @@ export interface GallerySettings
   imgDataFolder: string | null
   galleryLoadPath: string
   width: number
-  reverseDisplay: boolean
 }
 
 export type ImageResources = Record<string, string>
@@ -41,8 +40,7 @@ export interface InfoBlockArgs
 export const SETTINGS: GallerySettings = {
   imgDataFolder: null,
   galleryLoadPath: '/',
-  width: 400,
-  reverseDisplay: true
+  width: 400
 }
 
 export const EXTRACT_COLORS_OPTIONS = {

diff --git a/src/view.ts b/src/view.ts
@@ -88,10 +88,11 @@ export class GalleryView extends ItemView
         type: 'text',
         attr: { spellcheck: false, placeholder: 'Path' }
       })
+      pathFilterEl.value = this.plugin.settings.galleryLoadPath;
 
       pathFilterEl.addEventListener('input', async () =>
       {
-        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, plugin)
+        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin)
       });
 
       // Filter by Name
@@ -103,7 +104,7 @@ export class GalleryView extends ItemView
 
       nameFilterEl.addEventListener('input', async () =>
       {
-        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, plugin)
+        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin)
       });
 
       // Filter by Tags
@@ -115,11 +116,10 @@ export class GalleryView extends ItemView
 
       tagFilterEl.addEventListener('input', async () =>
       {
-        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, plugin)
+        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin)
       });
 
       // Filter Exclusive or inclusive
-
       const exclusiveFilterEl = this.filterEl.createEl('input', {
         cls: 'ob-gallery-filter-input',
         type: 'checkbox'
@@ -134,22 +134,41 @@ export class GalleryView extends ItemView
 
       exclusiveFilterEl.addEventListener('input', async () =>
       {
-        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, plugin)
+        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin)
       });
 
-      // todo: figure out a way to actually get a resize event
-      this.displayEl.onresize = async () =>
+      // Should display order be reversed
+      const sortReverseEl = this.filterEl.createEl('input', {
+        cls: 'ob-gallery-filter-input',
+        type: 'checkbox'
+      })
+      sortReverseEl.name = 'sortReverse'
+      sortReverseEl.id = 'sortReverse'
+
+      const sortReverseLabelEl = this.filterEl.createEl('label');
+      sortReverseLabelEl.textContent = "Reverse Sort";
+      sortReverseLabelEl.htmlFor = "sortReverse"
+      sortReverseLabelEl.style.paddingLeft = "20px"
+
+      sortReverseEl.addEventListener('input', async () =>
       {
-        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, plugin)
-      };
+        await this.updateDisplay(pathFilterEl.value.trim(), nameFilterEl.value.trim(), tagFilterEl.value.trim(), exclusiveFilterEl.checked, sortReverseEl.checked, plugin)
+      });
 
+      // file filter counts
       this.countEl = this.filterEl.createEl('label');
       this.countEl.style.paddingLeft = "20px"
       this.countEl.textContent = "counts";
+
+      // 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, sortReverseEl.checked, plugin)
+      };
     }
   }
 
-  async updateDisplay(path: string, name: string, tag: string, exclusive: boolean, plugin: GalleryTagsPlugin)
+  async updateDisplay(path: string, name: string, tag: string, exclusive: boolean, reverse : boolean, plugin: GalleryTagsPlugin)
   {
     this.displayEl.empty()
 
@@ -165,14 +184,12 @@ export class GalleryView extends ItemView
 
       this.imgList = Object.keys(this.imgResources)
       this.countEl.setText(this.imgList.length+"/"+totalFiles.length);
+      if(reverse)
+      {
+        this.imgList = this.imgList.reverse()
+      }
     }
 
-    if (this.plugin.settings.reverseDisplay)
-    {
-      this.imgList = this.imgList.reverse()
-    }
-
-
     const [columns, columnWidth] = splitcolumns(this.imgList, this.displayEl, plugin.settings.width)
     let tempImg = this.app.vault.adapter.getResourcePath(".obsidian/plugins/obsidian-tagged-gallery/loading.gif")
     new ImageGrid({
@@ -240,7 +257,7 @@ export class GalleryView extends ItemView
     // Set Header Icon
     this.headerEl.querySelector('svg').outerHTML = gallerySearchIcon
 
-    await this.updateDisplay(this.plugin.settings.galleryLoadPath, '','',true, this.plugin)
+    await this.updateDisplay(this.plugin.settings.galleryLoadPath, '', '', true, false, this.plugin)
 
     // Open Info panel
     const workspace = this.app.workspace

diff --git a/styles.css b/styles.css
@@ -76,6 +76,17 @@
     display: none;
 }
 
+.gallery-grid-column{
+    float: left;
+    flex: 50%;
+}
+.gallery-grid-vid{
+    display: block;
+}
+.gallery-grid-img{
+    display: block;
+}
+
 /* active-thumb View CSS */
 
 .gallery-widget {