From 34ad02f288ea59646194b24c2fd30081f47f23e0 Mon Sep 17 00:00:00 2001 From: jamesmisson Date: Wed, 26 Feb 2025 17:08:22 +0000 Subject: [PATCH 01/12] fix css media query mechanism --- .../iiif/modules/uv-shared-module/css/lg.less | 29 ++++++++++++++ .../iiif/modules/uv-shared-module/css/md.less | 29 ++++++++++++++ .../uv-shared-module/css/mixins-extended.less | 20 ---------- .../uv-shared-module/css/right-panel.less | 2 + .../iiif/modules/uv-shared-module/css/sm.less | 28 +++++++++++++ .../iiif/modules/uv-shared-module/css/xl.less | 40 +++++++++++-------- 6 files changed, 112 insertions(+), 36 deletions(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/lg.less b/src/content-handlers/iiif/modules/uv-shared-module/css/lg.less index 5c52384ae..f0a748ce8 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/lg.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/lg.less @@ -10,4 +10,33 @@ } } + + .lg-mediaquery({ + .headerPanel { + display: block; + visibility: visible; + } + + .mainPanel { + .leftPanel { + display: block; + visibility: visible; + } + + .rightPanel { + display: block; + visibility: visible; + } + } + + .footerPanel { + display: block; + visibility: visible; + } + + .mobileFooterPanel { + display: none; + visibility: hidden; + } + }) } \ No newline at end of file diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/md.less b/src/content-handlers/iiif/modules/uv-shared-module/css/md.less index 2407c4a2b..3121cf295 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/md.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/md.less @@ -11,4 +11,33 @@ } + .md-mediaquery({ + .headerPanel { + display: block; + visibility: visible; + } + + .mainPanel { + .leftPanel { + display: block; + visibility: visible; + } + + .rightPanel { + display: block; + visibility: visible; + } + } + + .footerPanel { + display: block; + visibility: visible; + } + + .mobileFooterPanel { + display: none; + visibility: hidden; + } + }) + } \ No newline at end of file diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less b/src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less index 314b3f997..ad159e3be 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/mixins-extended.less @@ -26,26 +26,6 @@ } } -.only-desktop() { - display: var(--uv-desktop-display, none); - visibility: var(--uv-desktop-visibility, hidden); -} - -.only-mobile() { - display: var(--uv-mobile-display, block); - visibility: var(--uv-mobile-visibility, visible); -} - -:root { - .md-mediaquery({ - --uv-mobile-display: none; - --uv-mobile-visibility: hidden; - - --uv-desktop-display: block; - --uv-desktop-visibility: visible; - }); -} - // end media queries diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less b/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less index 78c2b6da5..dc3ba4dcb 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less @@ -4,6 +4,8 @@ .rightPanel { + width: 70px; + z-index: 10; .top { diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less index ba7310a67..b4731f34c 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less @@ -10,4 +10,32 @@ } } + .sm-mediaquery({ + .headerPanel { + display: none; + visibility: hidden; + } + + .mainPanel { + .leftPanel { + display: none; + visibility: hidden; + } + + .rightPanel { + display: none; + visibility: hidden; + } + } + + .footerPanel { + display: none; + visibility: hidden; + } + + .mobileFooterPanel { + display: block; + visibility: visible; + } + }) } \ No newline at end of file diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less b/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less index 98893ff8a..a3f6ca43c 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less @@ -1,4 +1,5 @@ .uv { + #debug { #xl { .xl-mediaquery({ @@ -8,25 +9,32 @@ } } - .headerPanel { - .only-desktop(); - } - - .mainPanel { - .leftPanel { - .only-desktop(); + .xl-mediaquery({ + .headerPanel { + display: block; + visibility: visible; } - .rightPanel { - .only-desktop(); + .mainPanel { + .leftPanel { + display: block; + visibility: visible; + } + + .rightPanel { + display: block; + visibility: visible; + } } - } - .footerPanel { - .only-desktop(); - } + .footerPanel { + display: block; + visibility: visible; + } - .mobileFooterPanel { - .only-mobile(); - } + .mobileFooterPanel { + display: none; + visibility: hidden; + } + }) } From 6a886a65fc3607f008839d1c73417bfecaef0d71 Mon Sep 17 00:00:00 2001 From: jamesmisson Date: Wed, 26 Feb 2025 17:12:27 +0000 Subject: [PATCH 02/12] fix whitespace --- .../iiif/modules/uv-shared-module/css/right-panel.less | 2 -- src/content-handlers/iiif/modules/uv-shared-module/css/xl.less | 1 - 2 files changed, 3 deletions(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less b/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less index dc3ba4dcb..78c2b6da5 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less @@ -4,8 +4,6 @@ .rightPanel { - width: 70px; - z-index: 10; .top { diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less b/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less index a3f6ca43c..0df7b47e4 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/xl.less @@ -1,5 +1,4 @@ .uv { - #debug { #xl { .xl-mediaquery({ From a73405777e2f304887d41a15c118f0962c2c819d Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Thu, 27 Feb 2025 14:25:24 +0000 Subject: [PATCH 03/12] Initial grid --- .../modules/uv-shared-module/css/styles.less | 66 ++++++++++++++++++- 1 file changed, 64 insertions(+), 2 deletions(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less index a65737286..177f5c6c6 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less @@ -100,14 +100,62 @@ background: @body-bg; // important, otherwise you see two spinners } + .mainPanel { + + background: red; + + .lg-mediaquery({ + background: maroon; + + display: grid; + grid-template-columns: [left] minmax(25%, 255px) [center] 1fr [right] minmax(25%, 255px); + grid-template-areas: "left center right"; + //gap: 10px; + }); + } + + .centerPanel { + position: absolute; + } + + .centerPanel { + width: 100% !important; + left: auto !important; + + background: yellow; + + .lg-mediaquery({ + background: wheat; + + z-index: 12; + grid-area: center; + }); + } + .leftPanel { position: absolute; background: @panel-dark-bg; border: @panel-border; } - .centerPanel { - position: absolute; + .leftPanel { + background: pink; + + position: relative; + width: auto !important; + height: auto !important; + + .lg-mediaquery({ + background: fuchsia; + + grid-area: left; + z-index: 10; + position: absolute; + top: 0.625rem !important; + right: 0.625rem !important; + bottom: 0.625rem !important; + left: 0.625rem !important; + }); } .rightPanel { @@ -116,6 +164,20 @@ border: @panel-border; } + .rightPanel { + background: lime; + z-index: 11; + grid-area: right; + + width: auto !important; + height: auto !important; + position: absolute; + top: 0.625rem !important; + right: 0.625rem !important; + bottom: 0.625rem !important; + left: 0.625rem !important; + } + .footerPanel { position: relative; margin-top: 0; From 7fd6e9ce7df7e448a2c2ee8eae2962bea825881d Mon Sep 17 00:00:00 2001 From: jamesmisson Date: Thu, 27 Feb 2025 17:40:58 +0000 Subject: [PATCH 04/12] trigger rightpanel with mobile footer moreinfo button --- src/content-handlers/iiif/IIIFEvents.ts | 3 +- .../uv-ebook-extension/Extension.ts | 9 -- .../uv-model-viewer-extension/Extension.ts | 9 -- .../uv-openseadragon-extension/Extension.ts | 9 -- .../uv-dialogues-module/MoreInfoDialogue.ts | 119 ------------------ .../modules/uv-shared-module/FooterPanel.ts | 2 +- .../modules/uv-shared-module/RightPanel.ts | 6 + .../uv-shared-module/css/right-panel.less | 2 +- .../iiif/modules/uv-shared-module/css/sm.less | 4 +- 9 files changed, 11 insertions(+), 152 deletions(-) delete mode 100644 src/content-handlers/iiif/modules/uv-dialogues-module/MoreInfoDialogue.ts diff --git a/src/content-handlers/iiif/IIIFEvents.ts b/src/content-handlers/iiif/IIIFEvents.ts index 865abb540..4934bb3b9 100644 --- a/src/content-handlers/iiif/IIIFEvents.ts +++ b/src/content-handlers/iiif/IIIFEvents.ts @@ -37,7 +37,6 @@ export class IIIFEvents { static HIDE_HELP_DIALOGUE: string = "hideHelpDialogue"; static HIDE_INFORMATION: string = "hideInformation"; static HIDE_LOGIN_DIALOGUE: string = "hideLoginDialogue"; - static HIDE_MOREINFO_DIALOGUE: string = "hideMoreInfoDialogue"; static HIDE_MULTISELECT_DIALOGUE: string = "hideMultiSelectDialogue"; static HIDE_OVERLAY: string = "hideOverlay"; static HIDE_RESTRICTED_DIALOGUE: string = "hideRestrictedDialogue"; @@ -100,7 +99,6 @@ export class IIIFEvents { static SHOW_LOGIN_DIALOGUE: string = "showLoginDialogue"; static SHOW_MESSAGE: string = "showMessage"; static MESSAGE_DISPLAYED: string = "messageDisplayed"; - static SHOW_MOREINFO_DIALOGUE: string = "showMoreInfoDialogue"; static SHOW_MULTISELECT_DIALOGUE: string = "showMultiSelectDialogue"; static SHOW_OVERLAY: string = "showOverlay"; static SHOW_RESTRICTED_DIALOGUE: string = "showRestrictedDialogue"; @@ -108,6 +106,7 @@ export class IIIFEvents { static SHOW_SHARE_DIALOGUE: string = "showShareDialogue"; static SHOW_TERMS_OF_USE: string = "showTermsOfUse"; static TARGET_CHANGE: string = "targetChange"; + static TOGGLE_MOREINFO_RIGHT_PANEL: string = "toggleMoreInfoRightPanel"; static THUMB_MULTISELECTED: string = "thumbMultiSelected"; static THUMB_SELECTED: string = "thumbSelected"; static TOGGLE_EXPAND_LEFT_PANEL: string = "toggleExpandLeftPanel"; diff --git a/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts index a5b0f4592..10a0834a1 100644 --- a/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts +++ b/src/content-handlers/iiif/extensions/uv-ebook-extension/Extension.ts @@ -8,7 +8,6 @@ import { FooterPanel } from "../../modules/uv-shared-module/FooterPanel"; import { FooterPanel as MobileFooterPanel } from "../../modules/uv-ebookmobilefooterpanel-module/MobileFooter"; import { HeaderPanel } from "../../modules/uv-shared-module/HeaderPanel"; import { IEbookExtension } from "./IEbookExtension"; -import { MoreInfoDialogue } from "../../modules/uv-dialogues-module/MoreInfoDialogue"; import { MoreInfoRightPanel } from "../../modules/uv-moreinforightpanel-module/MoreInfoRightPanel"; import { SettingsDialogue } from "./SettingsDialogue"; import { ShareDialogue } from "./ShareDialogue"; @@ -23,7 +22,6 @@ export default class Extension implements IEbookExtension { $downloadDialogue: JQuery; - $moreInfoDialogue: JQuery; $multiSelectDialogue: JQuery; $settingsDialogue: JQuery; $shareDialogue: JQuery; @@ -33,7 +31,6 @@ export default class Extension headerPanel: HeaderPanel; leftPanel: EbookLeftPanel; mobileFooterPanel: MobileFooterPanel; - moreInfoDialogue: MoreInfoDialogue; rightPanel: MoreInfoRightPanel; settingsDialogue: SettingsDialogue; shareDialogue: ShareDialogue; @@ -91,12 +88,6 @@ export default class Extension this.shell.$footerPanel.hide(); } - this.$moreInfoDialogue = $( - '' - ); - this.shell.$overlays.append(this.$moreInfoDialogue); - this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue); - this.$shareDialogue = $( '' ); diff --git a/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts index 7ff9a38da..c039c0830 100644 --- a/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts +++ b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/Extension.ts @@ -7,7 +7,6 @@ import { FooterPanel } from "../../modules/uv-shared-module/FooterPanel"; import { FooterPanel as MobileFooterPanel } from "../../modules/uv-modelviewermobilefooterpanel-module/MobileFooter"; import { HeaderPanel } from "../../modules/uv-shared-module/HeaderPanel"; import { HelpDialogue } from "../../modules/uv-dialogues-module/HelpDialogue"; -import { MoreInfoDialogue } from "../../modules/uv-dialogues-module/MoreInfoDialogue"; import { MoreInfoRightPanel } from "../../modules/uv-moreinforightpanel-module/MoreInfoRightPanel"; import { SettingsDialogue } from "./SettingsDialogue"; import { ShareDialogue } from "./ShareDialogue"; @@ -27,7 +26,6 @@ export default class ModelViewerExtension extends BaseExtension { $downloadDialogue: JQuery; $shareDialogue: JQuery; $helpDialogue: JQuery; - $moreInfoDialogue: JQuery; $settingsDialogue: JQuery; centerPanel: ModelViewerCenterPanel; downloadDialogue: DownloadDialogue; @@ -36,7 +34,6 @@ export default class ModelViewerExtension extends BaseExtension { helpDialogue: HelpDialogue; leftPanel: ContentLeftPanel; mobileFooterPanel: FooterPanel; - moreInfoDialogue: MoreInfoDialogue; rightPanel: MoreInfoRightPanel; settingsDialogue: SettingsDialogue; shareDialogue: ShareDialogue; @@ -99,12 +96,6 @@ export default class ModelViewerExtension extends BaseExtension { this.shell.$footerPanel.hide(); } - this.$moreInfoDialogue = $( - '' - ); - this.shell.$overlays.append(this.$moreInfoDialogue); - this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue); - this.$downloadDialogue = $( '' ); diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts index 021e6f5ba..dc0bf3385 100644 --- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts +++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts @@ -12,7 +12,6 @@ import { FooterPanel } from "../../modules/uv-searchfooterpanel-module/FooterPan import { HelpDialogue } from "../../modules/uv-dialogues-module/HelpDialogue"; import { IOpenSeadragonExtensionData } from "./IOpenSeadragonExtensionData"; import { Mode } from "./Mode"; -import { MoreInfoDialogue } from "../../modules/uv-dialogues-module/MoreInfoDialogue"; import { MoreInfoRightPanel } from "../../modules/uv-moreinforightpanel-module/MoreInfoRightPanel"; import { MultiSelectDialogue } from "../../modules/uv-multiselectdialogue-module/MultiSelectDialogue"; import { MultiSelectionArgs } from "./MultiSelectionArgs"; @@ -60,7 +59,6 @@ export default class OpenSeadragonExtension extends BaseExtension { $downloadDialogue: JQuery; $externalContentDialogue: JQuery; $helpDialogue: JQuery; - $moreInfoDialogue: JQuery; $multiSelectDialogue: JQuery; $settingsDialogue: JQuery; $shareDialogue: JQuery; @@ -78,7 +76,6 @@ export default class OpenSeadragonExtension extends BaseExtension { leftPanel: ContentLeftPanel; mobileFooterPanel: MobileFooterPanel; mode: Mode; - moreInfoDialogue: MoreInfoDialogue; multiSelectDialogue: MultiSelectDialogue; previousAnnotationRect: AnnotationRect | null; rightPanel: MoreInfoRightPanel; @@ -551,12 +548,6 @@ export default class OpenSeadragonExtension extends BaseExtension { this.shell.$overlays.append(this.$helpDialogue); this.helpDialogue = new HelpDialogue(this.$helpDialogue); - this.$moreInfoDialogue = $( - '' - ); - this.shell.$overlays.append(this.$moreInfoDialogue); - this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue); - this.$multiSelectDialogue = $( '' ); diff --git a/src/content-handlers/iiif/modules/uv-dialogues-module/MoreInfoDialogue.ts b/src/content-handlers/iiif/modules/uv-dialogues-module/MoreInfoDialogue.ts deleted file mode 100644 index 1f16db897..000000000 --- a/src/content-handlers/iiif/modules/uv-dialogues-module/MoreInfoDialogue.ts +++ /dev/null @@ -1,119 +0,0 @@ -const $ = require("jquery"); -import { IIIFEvents } from "../../IIIFEvents"; -import { Dialogue } from "../uv-shared-module/Dialogue"; -import { sanitize } from "../../../../Utils"; -import { Bools } from "@edsilv/utils"; -import { MetadataComponent, LimitType } from "@iiif/iiif-metadata-component"; -import { BaseConfig } from "../../BaseConfig"; - -export class MoreInfoDialogue extends Dialogue< - BaseConfig["modules"]["moreInfoRightPanel"] -> { - $title: JQuery; - metadataComponent: any; - $metadata: JQuery; - - constructor($element: JQuery) { - super($element); - } - - create(): void { - this.setConfig("moreInfoDialogue"); - - super.create(); - - this.openCommand = IIIFEvents.SHOW_MOREINFO_DIALOGUE; - this.closeCommand = IIIFEvents.HIDE_MOREINFO_DIALOGUE; - - this.extensionHost.subscribe( - this.openCommand, - (triggerButton: HTMLElement) => { - this.open(triggerButton); - } - ); - - this.extensionHost.subscribe(this.closeCommand, () => { - this.close(); - }); - - this.extensionHost.subscribe(IIIFEvents.CANVAS_INDEX_CHANGE, () => { - this.metadataComponent.set(this._getData()); - }); - - this.config.content = - this.extension.data.config!.modules.moreInfoRightPanel.content; - this.config.options = - this.extension.data.config!.modules.moreInfoRightPanel.options; - - // create ui - this.$title = $( - `
${this.config.content.title}
` - ); - this.$content.append(this.$title); - - this.$metadata = $('
'); - this.$content.append(this.$metadata); - - this.metadataComponent = new MetadataComponent({ - target: this.$metadata[0], - }); - - // hide - this.$element.hide(); - } - - open(triggerButton?: HTMLElement): void { - super.open(triggerButton); - this.metadataComponent.set(this._getData()); - } - - private _getData() { - return { - canvasDisplayOrder: this.config.options.canvasDisplayOrder, - canvases: this.extension.getCurrentCanvases(), - canvasExclude: this.config.options.canvasExclude, - canvasLabels: this.extension.getCanvasLabels(this.content.page), - content: this.config.content, - copiedMessageDuration: 2000, - copyToClipboardEnabled: Bools.getBool( - this.config.options.copyToClipboardEnabled, - false - ), - helper: this.extension.helper, - licenseFormatter: null, - limit: this.config.options.textLimit || 4, - limitType: LimitType.LINES, - manifestDisplayOrder: this.config.options.manifestDisplayOrder, - manifestExclude: this.config.options.manifestExclude, - range: this.extension.getCurrentCanvasRange(), - rtlLanguageCodes: this.config.options.rtlLanguageCodes, - sanitizer: (html: string) => { - return sanitize(html); - }, - showAllLanguages: this.config.options.showAllLanguages, - }; - } - - close(): void { - super.close(); - } - - resize(): void { - this.setDockedPosition(); - - // always put tabindex on, so the metadata is focusable, - // just in case there's something wrong with the height - // comparison below - this.$metadata.attr("tabindex", 0); - this.$metadata.attr("aria-label", this.config.content.title); - - // if metadata's first group's height is lte than metadata (200px fixed I think), - // there's no scroll happening, so no focus needed, and no aria label either - if ( - this.$metadata.find(".groups").first().height() <= this.$metadata.height() - ) { - this.$metadata.removeAttr("tabindex"); - this.$metadata.removeAttr("aria-label"); - } - } -} diff --git a/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts index 11c538774..d18751c58 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts @@ -149,7 +149,7 @@ export class FooterPanel< this.$moreInfoButton.onPressed(() => { this.extensionHost.publish( - IIIFEvents.SHOW_MOREINFO_DIALOGUE, + IIIFEvents.TOGGLE_MOREINFO_RIGHT_PANEL, this.$moreInfoButton ); }); diff --git a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts index f11ce04bf..c34c9ec3b 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts @@ -32,8 +32,14 @@ export class RightPanel extends BaseExpandPanel { this.expandFull(); } }); + + this.extensionHost.subscribe(IIIFEvents.TOGGLE_MOREINFO_RIGHT_PANEL, () => { + this.toggle(); + }); } + + getTargetWidth(): number { return this.isExpanded ? this.options.panelCollapsedWidth diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less b/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less index 78c2b6da5..fd0acdcc8 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less @@ -122,4 +122,4 @@ display: block; } } -} +} \ No newline at end of file diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less index b4731f34c..e1e87b58b 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less @@ -23,8 +23,8 @@ } .rightPanel { - display: none; - visibility: hidden; + display: block; + visibility: visible; } } From 8ec68e2c6771f28e2a7eadb03c852be3b6f0b551 Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Fri, 28 Feb 2025 09:56:38 +0000 Subject: [PATCH 05/12] Add toggle function to the specific panels so classes can be set --- .../iiif/modules/uv-shared-module/LeftPanel.ts | 10 ++++++++++ .../iiif/modules/uv-shared-module/RightPanel.ts | 10 ++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts index 48ab05a03..374b1cd96 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts @@ -67,4 +67,14 @@ export class LeftPanel< this.$element.width(this.$element.parent().width()); } } + + toggle(autoToggled?: boolean): void { + if (this.isExpanded) { + this.$element.parent().removeClass('leftPanelOpen'); + } else { + this.$element.parent().addClass('leftPanelOpen'); + } + + super.toggle(autoToggled); + } } diff --git a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts index f11ce04bf..872356f54 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts @@ -66,4 +66,14 @@ export class RightPanel extends BaseExpandPanel { ), }); } + + toggle(autoToggled?: boolean): void { + if (this.isExpanded) { + this.$element.parent().removeClass('rightPanelOpen'); + } else { + this.$element.parent().addClass('rightPanelOpen'); + } + + super.toggle(autoToggled); + } } From aada4091c1ad4da3e3242f4efb08d6f9cdb7d799 Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Fri, 28 Feb 2025 09:57:22 +0000 Subject: [PATCH 06/12] Add open class and change animation handling to let css do it, with timeout to account for transition time --- .../modules/uv-shared-module/BaseExpandPanel.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts index 68e838a95..6c32dd3e1 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts @@ -108,6 +108,8 @@ export class BaseExpandPanel extends BaseView { autoToggled ? (this.autoToggled = true) : (this.autoToggled = false); + this.$element.toggleClass('open'); + // if collapsing, hide contents immediately. if (this.isExpanded) { this.$top.attr("aria-hidden", "true"); @@ -118,7 +120,19 @@ export class BaseExpandPanel extends BaseView { this.$closed.show(); } + // to allow for the css transition to finish + // TODO: get this var from config and make sure css uses the same + // although make sure it is +50 to allow for lag + // and re-introduce the animation check if (isReducedAnimation) { + this.toggled(); + } else { + setTimeout(() => { + this.toggled(); + }, 300); + } + + /* if (isReducedAnimation) { // This is reduced motion. this.$element.css("width", this.getTargetWidth()); this.$element.css("left", this.getTargetLeft()); @@ -135,7 +149,7 @@ export class BaseExpandPanel extends BaseView { this.toggled(); } ); - } + } */ } toggled(): void { From 2c5a1d0f2f773b16c538b7b7cffe7b08469b2520 Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Fri, 28 Feb 2025 09:58:20 +0000 Subject: [PATCH 07/12] Comment out hiding of side panels on mobile, as they now need to be displayed all the time, with other css handling visibility --- .../iiif/modules/uv-shared-module/css/catch-all.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less b/src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less index 2d04194a9..da1acdf90 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/catch-all.less @@ -4,7 +4,7 @@ .hidden(); } - .mainPanel { + /* .mainPanel { .leftPanel { .hidden(); @@ -13,7 +13,7 @@ .rightPanel { .hidden(); } - } + } */ .footerPanel { .hidden(); From 2b912ba8f9aeec0edc1e535364493f84dbc57ce9 Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Fri, 28 Feb 2025 09:59:30 +0000 Subject: [PATCH 08/12] More commenting to keep panels visible all the time --- .../iiif/modules/uv-shared-module/css/sm.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less index b4731f34c..3762d7f5a 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/sm.less @@ -16,7 +16,7 @@ visibility: hidden; } - .mainPanel { + /* .mainPanel { .leftPanel { display: none; visibility: hidden; @@ -26,7 +26,7 @@ display: none; visibility: hidden; } - } + } */ .footerPanel { display: none; From e71f90d44eed87f7570bb74dddd3d313351ace0f Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Fri, 28 Feb 2025 09:59:57 +0000 Subject: [PATCH 09/12] Preliminary css to handling positioning and display of side panels --- .../modules/uv-shared-module/css/styles.less | 132 +++++++++++++----- 1 file changed, 100 insertions(+), 32 deletions(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less index 177f5c6c6..38268bb27 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less @@ -18,6 +18,9 @@ @import 'lg'; @import 'xl'; +:root { + --uv-animation: 1; +} .hidden { .hidden(); @@ -102,32 +105,56 @@ .mainPanel { + // TODO: set these at runtime in html element style attr by getting from config? + --uv-grid-left-width-open: 271px; + --uv-grid-right-width-open: 271px; + + --uv-grid-left-width: 30px; + --uv-grid-right-width: 30px; + background: red; + margin: 0; + padding: 0; + + overflow: hidden; - .lg-mediaquery({ + .md-mediaquery({ background: maroon; - + padding: 0.5rem; display: grid; - grid-template-columns: [left] minmax(25%, 255px) [center] 1fr [right] minmax(25%, 255px); + grid-template-columns: + [left] var(--uv-grid-left-width) + [center] minmax(0, 1fr) + [right] var(--uv-grid-right-width); grid-template-areas: "left center right"; - //gap: 10px; + + transition:all calc(var(--uv-animation) * 250ms) ease-in-out; }); } + .mainPanel.leftPanelOpen { + --uv-grid-left-width: var(--uv-grid-left-width-open); + } + + .mainPanel.rightPanelOpen { + --uv-grid-right-width: var(--uv-grid-right-width-open); + } + .centerPanel { position: absolute; + overflow: hidden; } .centerPanel { width: 100% !important; left: auto !important; - background: yellow; + background: darkcyan; - .lg-mediaquery({ - background: wheat; + .md-mediaquery({ + background: darkolivegreen; - z-index: 12; + z-index: 15; grid-area: center; }); } @@ -138,44 +165,85 @@ border: @panel-border; } - .leftPanel { - background: pink; + .rightPanel { + position: absolute; + background: @panel-dark-bg; + border: @panel-border; + } + + .leftPanel, .rightPanel { + overflow: hidden; + z-index: 20; + /* display: none; */ - position: relative; + transition:all calc(var(--uv-animation) * 250ms) ease-in-out; + + position: absolute; + top: 2em !important; + right: 0em !important; + bottom: 2em !important; + left: 0em !important; + width: auto !important; height: auto !important; - .lg-mediaquery({ - background: fuchsia; + .md-mediaquery({ + display: block !important; + position: relative; + top: 0rem !important; + right: 0rem !important; + bottom: 0rem !important; + left: 0rem !important; + }); + + &.open { + display: block; + } + } + + .leftPanel { + background: pink; + transform: translateX(calc(-100% + 30px)); + + .md-mediaquery({ + background: fuchsia; grid-area: left; - z-index: 10; - position: absolute; - top: 0.625rem !important; - right: 0.625rem !important; - bottom: 0.625rem !important; - left: 0.625rem !important; + transform: none; }); } - .rightPanel { - position: absolute; - background: @panel-dark-bg; - border: @panel-border; + .leftPanel.open { + left: 0 !important; + right: 3em !important; + transform: none; + + .md-mediaquery({ + left: initial !important; + right: initial !important; + }); } .rightPanel { background: lime; - z-index: 11; - grid-area: right; + transform: translateX(calc(100% - 30px)); + + .md-mediaquery({ + background: yellowgreen; + grid-area: right; + transform: none; + }); + } - width: auto !important; - height: auto !important; - position: absolute; - top: 0.625rem !important; - right: 0.625rem !important; - bottom: 0.625rem !important; - left: 0.625rem !important; + .rightPanel.open { + right: 0 !important; + left: 3em !important; + transform: none; + + .md-mediaquery({ + left: initial !important; + right: initial !important; + }); } .footerPanel { From 2add343679e75734bd45c0c0427cd7dc08be5121 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 28 Feb 2025 10:00:35 +0000 Subject: [PATCH 10/12] Commit from GitHub Actions (Lint code) --- .../iiif/modules/uv-shared-module/BaseExpandPanel.ts | 2 +- .../iiif/modules/uv-shared-module/LeftPanel.ts | 4 ++-- .../iiif/modules/uv-shared-module/RightPanel.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts index 6c32dd3e1..013d8866d 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts @@ -108,7 +108,7 @@ export class BaseExpandPanel extends BaseView { autoToggled ? (this.autoToggled = true) : (this.autoToggled = false); - this.$element.toggleClass('open'); + this.$element.toggleClass("open"); // if collapsing, hide contents immediately. if (this.isExpanded) { diff --git a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts index 374b1cd96..1b422732c 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts @@ -70,9 +70,9 @@ export class LeftPanel< toggle(autoToggled?: boolean): void { if (this.isExpanded) { - this.$element.parent().removeClass('leftPanelOpen'); + this.$element.parent().removeClass("leftPanelOpen"); } else { - this.$element.parent().addClass('leftPanelOpen'); + this.$element.parent().addClass("leftPanelOpen"); } super.toggle(autoToggled); diff --git a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts index 872356f54..e184eb22b 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts @@ -69,9 +69,9 @@ export class RightPanel extends BaseExpandPanel { toggle(autoToggled?: boolean): void { if (this.isExpanded) { - this.$element.parent().removeClass('rightPanelOpen'); + this.$element.parent().removeClass("rightPanelOpen"); } else { - this.$element.parent().addClass('rightPanelOpen'); + this.$element.parent().addClass("rightPanelOpen"); } super.toggle(autoToggled); From 94a8e0a483f5a1a35b470768bbf4d58f59bbac4d Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Fri, 28 Feb 2025 10:11:27 +0000 Subject: [PATCH 11/12] Move props to the root element to simulate setting html tag --- .../iiif/modules/uv-shared-module/css/styles.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less index 38268bb27..9516d1c2a 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less @@ -20,6 +20,12 @@ :root { --uv-animation: 1; + + --uv-grid-left-width-open: 271px; + --uv-grid-right-width-open: 271px; + + --uv-grid-left-width: 30px; + --uv-grid-right-width: 30px; } .hidden { @@ -106,11 +112,7 @@ .mainPanel { // TODO: set these at runtime in html element style attr by getting from config? - --uv-grid-left-width-open: 271px; - --uv-grid-right-width-open: 271px; - - --uv-grid-left-width: 30px; - --uv-grid-right-width: 30px; + background: red; margin: 0; From 148200db9659e299f42f233a443f5dac208be43e Mon Sep 17 00:00:00 2001 From: jamesmisson Date: Fri, 28 Feb 2025 14:53:23 +0000 Subject: [PATCH 12/12] merge jonathan/dev --- .../iiif/modules/uv-shared-module/css/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less index 9516d1c2a..1163fa912 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/styles.less @@ -176,7 +176,7 @@ .leftPanel, .rightPanel { overflow: hidden; z-index: 20; - /* display: none; */ + // display: none; transition:all calc(var(--uv-animation) * 250ms) ease-in-out;