From 3e22ce02fb569d1db06e7a8f564c5aa328dfb92e Mon Sep 17 00:00:00 2001 From: pacien Date: Sat, 26 Sep 2020 18:55:09 +0200 Subject: viewer: fix momentum/kinetic scroll on Safari and Firefox on iOS GitHub: closes #253 --- viewer/src/assets/scss/scrollbar.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'viewer/src') diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss index a00b4c2..4ca0a2c 100644 --- a/viewer/src/assets/scss/scrollbar.scss +++ b/viewer/src/assets/scss/scrollbar.scss @@ -23,6 +23,10 @@ .scrollbar { overflow: auto; + + // enable momentum/kinetic scroll on Safari and Firefox on iOS + -webkit-overflow-scrolling: touch; + scrollbar-color: $scrollbar-color transparent; scrollbar-width: thin; &::-webkit-scrollbar { -- cgit v1.2.3 From 6b6c1145ab8e4e6894eb54b1c98fb4b02e0d17b3 Mon Sep 17 00:00:00 2001 From: pacien Date: Sat, 17 Oct 2020 20:54:18 +0200 Subject: viewer: set pointer cursor on collapsible info panel title bar GitHub: closes #269 --- viewer/src/views/PanelLeft.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'viewer/src') diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue index 0ab3aa8..d2a3656 100644 --- a/viewer/src/views/PanelLeft.vue +++ b/viewer/src/views/PanelLeft.vue @@ -37,7 +37,7 @@ :current-tags="currentTags" /> -

+

{{ $t("panelLeft.information.title") }}

@@ -108,6 +108,10 @@ export default class PanelLeft extends Vue { margin-top: 2px; // Fixes a vertical centering issue with the carret } } + + .infoPanelTitleBar { + cursor: pointer; + } } .flexShrinkFully { -- cgit v1.2.3 From 5711823339b53039c80b55b33f633319648748d9 Mon Sep 17 00:00:00 2001 From: zeroinformatique Date: Sat, 17 Oct 2020 22:47:46 +0200 Subject: viewer: fixed the back button which was not working properly anymore (#271) github: resolves #270--- viewer/src/components/LdCommand.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'viewer/src') diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue index 6059162..2578055 100644 --- a/viewer/src/components/LdCommand.vue +++ b/viewer/src/components/LdCommand.vue @@ -25,10 +25,10 @@ @@ -55,7 +55,7 @@ export default class LdCommand extends Vue { return this.currentItemPath.length <= 1 && !this.$uiStore.searchMode; } - get isEntryPoint(): boolean { + isEntryPoint(): boolean { return history.state?.ldgallery === "ENTRYPOINT"; // Set by MainLayout.vue } -- cgit v1.2.3 From 5e179a35b23282c4613582755de06a91f6991309 Mon Sep 17 00:00:00 2001 From: zeroinformatique Date: Sun, 18 Oct 2020 00:22:04 +0200 Subject: viewer: accessibility: set focus on the main area (#273) github: resolves #177--- viewer/src/views/MainLayout.vue | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) (limited to 'viewer/src') diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index 6ef9a3b..9cd518b 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue @@ -22,7 +22,7 @@ - + @@ -43,6 +43,10 @@ export default class MainLayout extends Vue { isLoading: boolean = true; scrollPositions: ScrollPosition = {}; + get contentDiv() { + return this.content.$el as HTMLDivElement; + } + mounted() { history.replaceState({ ldgallery: "ENTRYPOINT" }, ""); this.fetchGalleryItems(); @@ -53,11 +57,15 @@ export default class MainLayout extends Vue { document.body.removeEventListener("fullscreenchange", this.onFullscreenChange); } + moveFocusToContentDiv() { + setTimeout(() => this.contentDiv.focus()); + } + @Watch("$route") routeChanged(newRoute: Route, oldRoute: Route) { - const el = this.content.$el; - this.scrollPositions[oldRoute.path] = el.scrollTop; - this.$nextTick(() => (el.scrollTop = this.scrollPositions[newRoute.path])); + this.scrollPositions[oldRoute.path] = this.contentDiv.scrollTop; + this.$nextTick(() => (this.contentDiv.scrollTop = this.scrollPositions[newRoute.path])); + this.moveFocusToContentDiv(); } fetchGalleryItems() { @@ -66,6 +74,7 @@ export default class MainLayout extends Vue { .fetchConfig() .then(this.$uiStore.initFromConfig) .then(this.$galleryStore.fetchGalleryItems) + .then(this.moveFocusToContentDiv) .finally(() => (this.isLoading = false)) .catch(this.displayError); } @@ -130,6 +139,9 @@ html { left: var(--layout-left); z-index: 3; overflow-x: hidden; + &:focus { + outline: none; + } } } .fullscreen { -- cgit v1.2.3 From 7f2231d86bb72c83f50693ec96526e7d9f47dfb8 Mon Sep 17 00:00:00 2001 From: zeroinformatique Date: Sun, 18 Oct 2020 01:12:07 +0200 Subject: viewer: fix sort order button hitbox (#272) * viewer: fix sort order button hitbox github: resolves #266 * viewer: fix sort order button hover color That was a conflict between the tag's color and the .link color. I enforced .link priority over * viewer: fix sort order button hover color TODO comment about Buefy issues--- viewer/src/assets/scss/global.scss | 2 +- viewer/src/components/LdCommand.vue | 2 +- viewer/src/components/LdCommandSort.vue | 9 +++++++-- 3 files changed, 9 insertions(+), 4 deletions(-) (limited to 'viewer/src') diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index c82e1bc..06d975f 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -80,7 +80,7 @@ button svg + span { color: $link; cursor: pointer; text-decoration: none; - &:hover { + &:hover, &:hover a { color: $link-hover; } } diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue index 2578055..5ba8266 100644 --- a/viewer/src/components/LdCommand.vue +++ b/viewer/src/components/LdCommand.vue @@ -78,7 +78,7 @@ export default class LdCommand extends Vue { align-items: center; flex: 0 0 $layout-left; - > a { + > * { // normalise icon active boxes width: $layout-top; line-height: $layout-top; diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue index cfaa5c1..4c246e6 100644 --- a/viewer/src/components/LdCommandSort.vue +++ b/viewer/src/components/LdCommandSort.vue @@ -19,8 +19,9 @@ --> -- cgit v1.2.3 From 6b125a393d8ce10bfd9273c24ea1615b335abeba Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Sat, 26 Jun 2021 17:44:03 +0200 Subject: viewer/GalleryNavigation: uniquely identify viewer instances by item Fixed error "Object is possibly 'null'" in the template --- viewer/src/views/GalleryNavigation.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'viewer/src') diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index c53df66..69198f6 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue @@ -21,7 +21,7 @@
- +
@@ -66,6 +66,10 @@ export default class GalleryNavigation extends Vue { return this.COMPONENT_BY_TYPE[this.$galleryStore.currentItem?.properties.type ?? ItemType.OTHER]; } + get componentKey() { + return this.$galleryStore.currentItem?.path ?? ""; + } + @Watch("path") pathChanged() { this.$galleryStore.setCurrentPath(this.path); -- cgit v1.2.3 From c9ac0c75d9273d3df86e66f2dad830146b7b1008 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Thu, 1 Jul 2021 20:19:47 +0200 Subject: viewer: Upgraded dependencies for Vue 2 Removed obsolete deps core-js ; resize-observer-polyfill --- viewer/src/services/ldzoom.ts | 2 -- viewer/src/store/galleryStore.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'viewer/src') diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts index 22d4699..0fb0848 100644 --- a/viewer/src/services/ldzoom.ts +++ b/viewer/src/services/ldzoom.ts @@ -17,8 +17,6 @@ -- along with this program. If not, see . */ -// polyfill still required for IE and Safari, see https://caniuse.com/#feat=resizeobserver -import ResizeObserver from "resize-observer-polyfill"; import "hammerjs"; /** diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts index 5d599aa..6d64e12 100644 --- a/viewer/src/store/galleryStore.ts +++ b/viewer/src/store/galleryStore.ts @@ -126,7 +126,7 @@ export default class GalleryStore extends VuexModule { } private static getUrlConfig() { - let search = window.location.search; + const search = window.location.search; if (search.length > 1) return search.substr(1) + ".json"; return "config.json"; } -- cgit v1.2.3 From 9165cc1efcf7791f78b61b2c51a9de651b1b09aa Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Fri, 2 Jul 2021 22:53:16 +0200 Subject: viewer: types normalization - gallery.d.ts GitHub: closes #301 --- viewer/src/@types/gallery.d.ts | 183 +++++++++++---------- viewer/src/@types/tag.d.ts | 6 +- viewer/src/components/LdBreadcrumb.vue | 7 +- viewer/src/components/LdCommand.vue | 5 +- viewer/src/components/LdCommandSort.vue | 2 +- viewer/src/components/LdGallery.vue | 6 +- viewer/src/components/LdInformation.vue | 5 +- viewer/src/components/LdKeyPress.vue | 2 +- viewer/src/components/LdProposition.vue | 9 +- viewer/src/components/LdTagInput.vue | 4 +- viewer/src/components/LdThumbnail.vue | 5 +- viewer/src/components/LdTitle.vue | 5 +- .../src/components/item_handlers/LdAudioViewer.vue | 5 +- .../src/components/item_handlers/LdDirectory.vue | 42 ----- .../components/item_handlers/LdDirectoryViewer.vue | 43 +++++ viewer/src/components/item_handlers/LdDownload.vue | 57 ------- .../components/item_handlers/LdDownloadViewer.vue | 58 +++++++ .../src/components/item_handlers/LdPdfViewer.vue | 3 +- viewer/src/components/item_handlers/LdPicture.vue | 127 -------------- .../components/item_handlers/LdPictureViewer.vue | 128 ++++++++++++++ .../components/item_handlers/LdPlainTextViewer.vue | 3 +- .../src/components/item_handlers/LdVideoViewer.vue | 3 +- viewer/src/main.ts | 4 +- viewer/src/services/indexfactory.ts | 13 +- viewer/src/services/indexsearch.ts | 17 +- viewer/src/services/itemComparators.ts | 13 +- viewer/src/services/ldzoom.ts | 7 +- viewer/src/services/navigation.ts | 15 +- viewer/src/store/galleryStore.ts | 15 +- viewer/src/store/index.ts | 7 +- viewer/src/store/uiStore.ts | 5 +- viewer/src/views/GalleryNavigation.vue | 8 +- viewer/src/views/GallerySearch.vue | 3 +- viewer/src/views/MainLayout.vue | 4 +- viewer/src/views/PanelLeft.vue | 5 +- 35 files changed, 420 insertions(+), 404 deletions(-) delete mode 100644 viewer/src/components/item_handlers/LdDirectory.vue create mode 100644 viewer/src/components/item_handlers/LdDirectoryViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdDownload.vue create mode 100644 viewer/src/components/item_handlers/LdDownloadViewer.vue delete mode 100644 viewer/src/components/item_handlers/LdPicture.vue create mode 100644 viewer/src/components/item_handlers/LdPictureViewer.vue (limited to 'viewer/src') diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index e9b80e6..d9e7534 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts @@ -17,98 +17,99 @@ -- along with this program. If not, see . */ -declare namespace Gallery { - type ItemSortStr = "title_asc" | "date_asc" | "date_desc"; +import { ItemType } from "./ItemType"; - interface Config { - galleryRoot: string; - galleryIndex?: string; - initialItemSort?: ItemSortStr; - initialTagDisplayLimit?: number; - } +export type ItemSortStr = "title_asc" | "date_asc" | "date_desc"; - interface GalleryProperties { - galleryTitle: string; - tagCategories: RawTag[]; - } - interface Index { - properties: GalleryProperties; - tree: Directory; - } +export interface Config { + galleryRoot: string; + galleryIndex?: string; + initialItemSort?: ItemSortStr; + initialTagDisplayLimit?: number; +} + +export interface Properties { + galleryTitle: string; + tagCategories: RawTag[]; +} +export interface Index { + properties: Properties; + tree: DirectoryItem; +} + +export interface OtherItem extends Item { + properties: OtherProperties; +} +export interface PictureItem extends Item { + properties: PictureProperties; +} +export interface PlainTextItem extends Item { + properties: PlainTextProperties; +} +export interface PDFItem extends Item { + properties: PDFProperties; +} +export interface VideoItem extends Item { + properties: VideoProperties; +} +export interface AudioItem extends Item { + properties: AudioProperties; +} +export interface DirectoryItem extends Item { + properties: DirectoryProperties; +} +export interface Item { + title: string; + datetime: string; + description: string; + tags: RawTag[]; + path: string; + thumbnail?: Thumbnail; + properties: + | OtherProperties + | PictureProperties + | PlainTextProperties + | PDFProperties + | VideoProperties + | AudioProperties + | DirectoryProperties; +} +export interface Resolution { + width: number; + height: number; +} +export interface OtherProperties { + type: ItemType.OTHER; + resource: string; +} +export interface PictureProperties { + type: ItemType.PICTURE; + resource: string; + resolution: Resolution; +} +export interface PlainTextProperties { + type: ItemType.PLAINTEXT; + resource: string; +} +export interface PDFProperties { + type: ItemType.PDF; + resource: string; +} +export interface VideoProperties { + type: ItemType.VIDEO; + resource: string; +} +export interface AudioProperties { + type: ItemType.AUDIO; + resource: string; +} +export interface DirectoryProperties { + type: ItemType.DIRECTORY; + items: Item[]; +} - interface Other extends Item { - properties: OtherProperties; - } - interface Picture extends Item { - properties: PictureProperties; - } - interface PlainText extends Item { - properties: PlainTextProperties; - } - interface PDF extends Item { - properties: PDFProperties; - } - interface Video extends Item { - properties: VideoProperties; - } - interface Audio extends Item { - properties: AudioProperties; - } - interface Directory extends Item { - properties: DirectoryProperties; - } - interface Item { - title: string; - datetime: string; - description: string; - tags: RawTag[]; - path: string; - thumbnail?: Thumbnail; - properties: - | OtherProperties - | PictureProperties - | PlainTextProperties - | PDFProperties - | VideoProperties - | AudioProperties - | DirectoryProperties; - } - interface Resolution { - width: number; - height: number; - } - interface OtherProperties { - type: import("./ItemType").ItemType.OTHER; - resource: string; - } - interface PictureProperties { - type: import("./ItemType").ItemType.PICTURE; - resource: string; - resolution: Resolution; - } - interface PlainTextProperties { - type: import("./ItemType").ItemType.PLAINTEXT; - resource: string; - } - interface PDFProperties { - type: import("./ItemType").ItemType.PDF; - resource: string; - } - interface VideoProperties { - type: import("./ItemType").ItemType.VIDEO; - resource: string; - } - interface AudioProperties { - type: import("./ItemType").ItemType.AUDIO; - resource: string; - } - interface DirectoryProperties { - type: import("./ItemType").ItemType.DIRECTORY; - items: Item[]; - } - interface Thumbnail { - resource: string; - resolution: Resolution; - } - type RawTag = string; +export interface Thumbnail { + resource: string; + resolution: Resolution; } +export type RawTag = string; diff --git a/viewer/src/@types/tag.d.ts b/viewer/src/@types/tag.d.ts index 59ae779..bb908d3 100644 --- a/viewer/src/@types/tag.d.ts +++ b/viewer/src/@types/tag.d.ts @@ -19,11 +19,11 @@ declare namespace Tag { interface Node { - tag: Gallery.RawTag; - tagfiltered: Gallery.RawTag; + tag: RawTag; + tagfiltered: RawTag; rootPart: boolean; childPart: boolean; - items: Gallery.Item[]; + items: Item[]; children: Index; } interface Search extends Node { diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue index 618b15a..2c17554 100644 --- a/viewer/src/components/LdBreadcrumb.vue +++ b/viewer/src/components/LdBreadcrumb.vue @@ -47,13 +47,14 @@ - - diff --git a/viewer/src/components/item_handlers/LdDirectoryViewer.vue b/viewer/src/components/item_handlers/LdDirectoryViewer.vue new file mode 100644 index 0000000..7440f54 --- /dev/null +++ b/viewer/src/components/item_handlers/LdDirectoryViewer.vue @@ -0,0 +1,43 @@ + + + + + + + diff --git a/viewer/src/components/item_handlers/LdDownload.vue b/viewer/src/components/item_handlers/LdDownload.vue deleted file mode 100644 index 7b09dab..0000000 --- a/viewer/src/components/item_handlers/LdDownload.vue +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - diff --git a/viewer/src/components/item_handlers/LdDownloadViewer.vue b/viewer/src/components/item_handlers/LdDownloadViewer.vue new file mode 100644 index 0000000..60c7c49 --- /dev/null +++ b/viewer/src/components/item_handlers/LdDownloadViewer.vue @@ -0,0 +1,58 @@ + + + + + + + diff --git a/viewer/src/components/item_handlers/LdPdfViewer.vue b/viewer/src/components/item_handlers/LdPdfViewer.vue index 462c463..e55989a 100644 --- a/viewer/src/components/item_handlers/LdPdfViewer.vue +++ b/viewer/src/components/item_handlers/LdPdfViewer.vue @@ -30,11 +30,12 @@ - - diff --git a/viewer/src/components/item_handlers/LdPictureViewer.vue b/viewer/src/components/item_handlers/LdPictureViewer.vue new file mode 100644 index 0000000..003ffe9 --- /dev/null +++ b/viewer/src/components/item_handlers/LdPictureViewer.vue @@ -0,0 +1,128 @@ + + + + + + + diff --git a/viewer/src/components/item_handlers/LdPlainTextViewer.vue b/viewer/src/components/item_handlers/LdPlainTextViewer.vue index cd26d9d..79465d5 100644 --- a/viewer/src/components/item_handlers/LdPlainTextViewer.vue +++ b/viewer/src/components/item_handlers/LdPlainTextViewer.vue @@ -27,11 +27,12 @@