GH#20 toggle for opening the info panel on click in the gallery

src/DisplayObjects/GalleryView.ts

@@ -49,7 +49,7 @@ export class GalleryView extends ItemView
     // Create Search Control Element
     this.filterEl = this.viewEl.createDiv({ cls: 'ob-gallery-filter', attr: { style: 'display: none;' } })
 
-    // Add action button to hide / show filter panel
+    // Add button to open the filter menu
     const filterButton = viewActionsEl?.createEl('a', { cls: 'view-action', attr: { 'aria-label': loc('FILTER_TOOLTIP') } })
     setIcon(filterButton, 'filter')
 
@@ -58,7 +58,7 @@ export class GalleryView extends ItemView
 		  new FilterMenu(event.pageX, event.pageY, this.filter, this.mediaSearch, this.plugin );
 		});
 
-    // Add action button to hide / show filter panel
+    // Add button to open the search bar menu
     const searchButton = viewActionsEl?.createEl('a', { cls: 'view-action', attr: { 'aria-label': loc('SEARCH_TOOLTIP') } })
     setIcon(searchButton, 'fa-search')
 
@@ -67,6 +67,31 @@ export class GalleryView extends ItemView
 		  new FilterTypeMenu(event.pageX, event.pageY, this.filterType, this.plugin.accentColor, (filterType) => this.setFilter(filterType));
 		});
 
+    // Add toggle for opening the info panel
+    const infoToggle = viewActionsEl?.createDiv({
+		  cls: 'icon-toggle',
+		  attr: { 'aria-label': loc('INFO_TOGGLE_TOOLTIP')}
+		})
+    setIcon(infoToggle, 'contact')
+
+    if(plugin.platformSettings().rightClickInfoGallery)
+    {
+      infoToggle.addClass("icon-checked");
+    }
+
+		infoToggle.addEventListener('click', (event) =>
+		{
+      plugin.platformSettings().rightClickInfoGallery = !plugin.platformSettings().rightClickInfoGallery;
+		  if(plugin.platformSettings().rightClickInfoGallery)
+		  {
+        infoToggle.addClass("icon-checked");
+		  }
+		  else
+		  {
+        infoToggle.removeClass("icon-checked");
+		  }
+		});
+
     // mover the context menu to the end of the action list
     if(viewActionsEl)
     {
@@ -173,11 +198,9 @@ export class GalleryView extends ItemView
     }
 
     this.filter.filterFill();
-
-    const infoView = await GalleryInfoView.OpenLeaf(this.plugin);
-
+
     // Add listener to change active file
-    this.mediaGrid.setupClickEvents(infoView);
+    this.mediaGrid.setupClickEvents();
 
     this.loadResults();
   }

src/DisplayObjects/MediaGrid.ts

@@ -1,8 +1,7 @@
-import { Keymap, TFile, type UserEvent } from "obsidian"
+import { Keymap, type UserEvent } from "obsidian"
 import type GalleryTagsPlugin from "../main"
 import
  {
-	 getImageInfo,
 	setLazyLoading,
 	updateFocus,
 } from '../utils'
@@ -166,16 +165,14 @@ export class MediaGrid
 		this.displayEl.scrollTop = scrollPosition;
 	}
 
-	setupClickEvents(infoView:GalleryInfoView = null)
+	setupClickEvents()
 	{
     	// Create gallery display Element		
 		this.imageFocusEl = this.displayEl.createDiv({ cls: 'ob-gallery-image-focus', attr: { style: 'display: none;' } })
 		const focusElContainer = this.imageFocusEl.createDiv({ attr: { class: 'focus-element-container' } })
 		this.focusImage = focusElContainer.createEl('img', { attr: { style: 'display: none;' } })
 		this.focusVideo = focusElContainer.createEl('video', { attr: { controls: 'controls', src: ' ', style: 'display: none; margin:auto;' } })
-
-		this.infoView = infoView;
-
+
 		if ('ontouchstart' in document.documentElement === true)
 		{
 			this.displayEl.addEventListener('touchstart', (e) => {this.vidTouch(e)},true);
@@ -217,13 +214,16 @@ export class MediaGrid
 				updateFocus(this.focusImage, this.focusVideo, this.mediaSearch.imgList[this.#imgFocusIndex], false)
 			}
 
-			if(infoView)
-			{
-				await infoView.updateInfoDisplay(this.plugin.getImgResources()[this.mediaSearch.imgList[this.#imgFocusIndex]]);
-			}
-			else
+			if(this.plugin.platformSettings().rightClickInfoGallery)
 			{
-				infoView = await GalleryInfoView.OpenLeaf(this.plugin, this.plugin.getImgResources()[this.mediaSearch.imgList[this.#imgFocusIndex]]);
+				if(this.infoView)
+				{
+					await this.infoView.updateInfoDisplay(this.plugin.getImgResources()[this.mediaSearch.imgList[this.#imgFocusIndex]]);
+				}
+				else
+				{
+					this.infoView = await GalleryInfoView.OpenLeaf(this.plugin, this.plugin.getImgResources()[this.mediaSearch.imgList[this.#imgFocusIndex]]);
+				}
 			}
 		}
 
@@ -246,10 +246,10 @@ export class MediaGrid
 
 			if (this.imageFocusEl.style.getPropertyValue('display') != 'block')
 			{
-			return;
+				return;
 			}
 
-			if (infoView && infoView.sourceEl.style.getPropertyValue('display') === 'block')
+			if (this.infoView && this.infoView.sourceEl.style.getPropertyValue('display') === 'block')
 			{
 				return;
 			}
@@ -301,13 +301,17 @@ export class MediaGrid
 			return;
 		}
 
-		if(this.infoView)
-		{
-			await this.infoView.updateInfoDisplay(this.plugin.getImgResources()[visualEl.src]);
-		}
-		else
+
+		if(this.plugin.platformSettings().rightClickInfoGallery)
 		{
-			this.infoView = await GalleryInfoView.OpenLeaf(this.plugin, this.plugin.getImgResources()[visualEl.src]);
+			if(this.infoView)
+			{
+				await this.infoView.updateInfoDisplay(this.plugin.getImgResources()[visualEl.src]);
+			}
+			else
+			{
+				this.infoView = await GalleryInfoView.OpenLeaf(this.plugin, this.plugin.getImgResources()[visualEl.src]);
+			}
 		}
 
 		if(Keymap.isModifier(evt as UserEvent, 'Shift') || this.selectMode)

src/Loc/Languages/en.ts

@@ -76,6 +76,7 @@ export default
 	GALLERY_VIEW_TITLE: "Gallery View",
 	FILTER_TOOLTIP: "Filter Actions",
 	SEARCH_TOOLTIP: "Change Search Bar",
+	INFO_TOGGLE_TOOLTIP: "Toggle the info panel",
 	SORT_ORDER_TOOLTIP: "Sort Options",
 	COUNT_TOOLTIP: "Number of files displayed by filter out of files the gallery could display",
 	FILTER_PATH_TOOLTIP: "Folder to search",

src/TechnicalFiles/Constants.ts

@@ -28,6 +28,7 @@ const DEFAULT_PLATFORM_SETTINGS: PlatformSettings = {
   defaultFilter: "", 
   lastFilter: "",
   rightClickInfo: true,
+  rightClickInfoGallery: true,
   rightClickMenu: true,
   width: 400,
   useMaxHeight: false,

src/TechnicalFiles/GallerySettings.ts

@@ -19,6 +19,7 @@ export interface PlatformSettings
   defaultFilter: string
   lastFilter: string
   rightClickInfo: boolean
+  rightClickInfoGallery: boolean
   rightClickMenu: boolean
   width: number
   useMaxHeight: boolean

src/main.ts

@@ -1,4 +1,4 @@
-import { Plugin, type WorkspaceLeaf, addIcon, Menu, Editor, MarkdownView, type MarkdownFileInfo, MenuItem, Notice, TFile, getAllTags, TFolder, TAbstractFile, Platform } from 'obsidian'
+import { Plugin, type WorkspaceLeaf, addIcon, Menu, Editor, MarkdownView, type MarkdownFileInfo, MenuItem, Notice, TFile, TFolder, TAbstractFile, Platform } from 'obsidian'
 import { scaleColor, type ImageResources, addEmbededTags, getimageLink, getImageInfo, preprocessUri, ToastMessage, addRemoteMeta, isRemoteMedia, getTags } from './utils'
 import { GallerySettingTab } from './settings'
 import { GalleryBlock } from './Blocks/GalleryBlock'