From 9069871de90b205df1de0385833ca1d1e551a498 Mon Sep 17 00:00:00 2001 From: Tom Norris Date: Sat, 18 Nov 2023 22:19:11 -0800 Subject: [PATCH] GH#20 toggle for opening the info panel on click in the gallery --- src/DisplayObjects/GalleryView.ts | 35 +++++++++++++++++---- src/DisplayObjects/MediaGrid.ts | 44 +++++++++++++++------------ src/Loc/Languages/en.ts | 1 + src/TechnicalFiles/Constants.ts | 1 + src/TechnicalFiles/GallerySettings.ts | 1 + src/main.ts | 2 +- 6 files changed, 57 insertions(+), 27 deletions(-) diff --git a/src/DisplayObjects/GalleryView.ts b/src/DisplayObjects/GalleryView.ts index c328c0f..66e89b3 100644 --- a/src/DisplayObjects/GalleryView.ts +++ b/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(); } diff --git a/src/DisplayObjects/MediaGrid.ts b/src/DisplayObjects/MediaGrid.ts index da498fb..40a297f 100644 --- a/src/DisplayObjects/MediaGrid.ts +++ b/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) diff --git a/src/Loc/Languages/en.ts b/src/Loc/Languages/en.ts index a211ef8..a7a3395 100644 --- a/src/Loc/Languages/en.ts +++ b/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", diff --git a/src/TechnicalFiles/Constants.ts b/src/TechnicalFiles/Constants.ts index c3c4e5e..4886efe 100644 --- a/src/TechnicalFiles/Constants.ts +++ b/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, diff --git a/src/TechnicalFiles/GallerySettings.ts b/src/TechnicalFiles/GallerySettings.ts index 8bebe7e..c8da385 100644 --- a/src/TechnicalFiles/GallerySettings.ts +++ b/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 diff --git a/src/main.ts b/src/main.ts index 1e7b38e..3a66910 100644 --- a/src/main.ts +++ b/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'