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 8ec68e2c6771f28e2a7eadb03c852be3b6f0b551 Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Fri, 28 Feb 2025 09:56:38 +0000 Subject: [PATCH 04/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 05/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 06/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 07/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 08/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 09/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 10/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 1ed02d12e66945aebe97d8bb8572b00d5c6730a5 Mon Sep 17 00:00:00 2001 From: LlGC-jop Date: Mon, 3 Mar 2025 13:55:29 +0000 Subject: [PATCH 11/12] Make the gallery button work --- .../uv-openseadragon-extension/Extension.ts | 4 +- .../uv-shared-module/BaseExpandPanel.ts | 32 +++++++++---- .../modules/uv-shared-module/LeftPanel.ts | 23 ++++++++++ .../modules/uv-shared-module/RightPanel.ts | 4 ++ .../modules/uv-shared-module/css/styles.less | 46 +++++++++++++------ 5 files changed, 83 insertions(+), 26 deletions(-) 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..3712ba72f 100644 --- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts +++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts @@ -207,8 +207,8 @@ export default class OpenSeadragonExtension extends BaseExtension { ); this.extensionHost.subscribe(IIIFEvents.LEFTPANEL_EXPAND_FULL_START, () => { - this.shell.$centerPanel.hide(); - this.shell.$rightPanel.hide(); + /* this.shell.$centerPanel.hide(); + this.shell.$rightPanel.hide(); */ }); this.extensionHost.subscribe(IIIFEvents.MINUS, () => { 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 013d8866d..519eca0db 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts @@ -173,19 +173,33 @@ export class BaseExpandPanel extends BaseView { } expandFull(): void { - if (!this.isExpanded) { - this.toggled(); - } + + console.log("BaseExpandPanel.ts:expandFull()"); const settings = this.extension.getSettings(); let isReducedAnimation = settings.reducedAnimation; - var targetWidth: number = this.getFullTargetWidth(); - var targetLeft: number = this.getFullTargetLeft(); + /* var targetWidth: number = this.getFullTargetWidth(); + var targetLeft: number = this.getFullTargetLeft(); */ this.expandFullStart(); if (isReducedAnimation) { + if (!this.isExpanded) { + this.toggled(); + } + this.expandFullFinish(); + } else { + setTimeout(() => { + if (!this.isExpanded) { + this.toggled(); + } + this.expandFullFinish(); + }, 550); + } + + + /* if (isReducedAnimation) { this.$element.css("width", targetWidth); this.$element.css("left", targetLeft); this.expandFullFinish(); @@ -200,7 +214,7 @@ export class BaseExpandPanel extends BaseView { this.expandFullFinish(); } ); - } + } */ } collapseFull(): void { @@ -246,7 +260,7 @@ export class BaseExpandPanel extends BaseView { return 0; } - toggleStart(): void {} + toggleStart(): void { } toggleFinish(): void { if (this.isExpanded && !this.autoToggled) { @@ -256,14 +270,14 @@ export class BaseExpandPanel extends BaseView { } } - expandFullStart(): void {} + expandFullStart(): void { } expandFullFinish(): void { this.isFullyExpanded = true; this.$expandFullButton.hide(); } - collapseFullStart(): void {} + collapseFullStart(): void { } collapseFullFinish(): void { this.isFullyExpanded = false; 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 1b422732c..774f50fbb 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts @@ -77,4 +77,27 @@ export class LeftPanel< super.toggle(autoToggled); } + + expandFull(): void { + console.log("LeftPanel.ts:expandFull()"); + + this.$element.parent().addClass('leftPanelOpenFull'); + super.expandFull(); + } + + collapseFull(): void { + console.log("LeftPanel.ts:collapseFull()"); + + this.$element.parent().removeClass('leftPanelOpenFull'); + + // need this because 'closing' full width shouldn't actually do that + // if puts the left panel back to normal open state + // but if the left panel was previously closed, this class won't be present + // so we put it back + if (!this.$element.parent().hasClass("leftPanelOpen")) { + this.$element.parent().addClass("leftPanelOpen"); + } + + super.collapseFull(); + } } 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 e184eb22b..a555257b0 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts @@ -76,4 +76,8 @@ export class RightPanel extends BaseExpandPanel { super.toggle(autoToggled); } + + expandFull(): void { + super.expandFull(); + } } 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..564492cb9 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 @@ -19,12 +19,14 @@ @import 'xl'; :root { + // TODO: set these at runtime in html element style attr by getting from config? --uv-animation: 1; --uv-grid-left-width-open: 271px; --uv-grid-right-width-open: 271px; --uv-grid-left-width: 30px; + --uv-grid-main-width: minmax(0, 1fr); --uv-grid-right-width: 30px; } @@ -110,23 +112,17 @@ } .mainPanel { - - // TODO: set these at runtime in html element style attr by getting from config? - - - background: red; margin: 0; padding: 0; overflow: hidden; .md-mediaquery({ - background: maroon; padding: 0.5rem; display: grid; grid-template-columns: [left] var(--uv-grid-left-width) - [center] minmax(0, 1fr) + [center] var(--uv-grid-main-width) [right] var(--uv-grid-right-width); grid-template-areas: "left center right"; @@ -142,6 +138,14 @@ --uv-grid-right-width: var(--uv-grid-right-width-open); } + .mainPanel.leftPanelOpenFull { + --uv-grid-left-width: 100%; + --uv-grid-main-width: 0; + --uv-grid-right-width: 0; + + transition-duration: calc(var(--uv-animation) * 500ms); + } + .centerPanel { position: absolute; overflow: hidden; @@ -150,12 +154,8 @@ .centerPanel { width: 100% !important; left: auto !important; - - background: darkcyan; .md-mediaquery({ - background: darkolivegreen; - z-index: 15; grid-area: center; }); @@ -199,17 +199,35 @@ left: 0rem !important; }); + /* .top { + display: none; + } + .closed { + display: block; + } + .main { + display: none; + } */ + &.open { display: block; + + /* .top { + display: block; + } + .closed { + display: none; + } + .main { + display: block; + } */ } } .leftPanel { - background: pink; transform: translateX(calc(-100% + 30px)); .md-mediaquery({ - background: fuchsia; grid-area: left; transform: none; }); @@ -227,11 +245,9 @@ } .rightPanel { - background: lime; transform: translateX(calc(100% - 30px)); .md-mediaquery({ - background: yellowgreen; grid-area: right; transform: none; }); From 17e4699aef5f4fe1d72c89cb18aa55424732a7f3 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 3 Mar 2025 13:56:12 +0000 Subject: [PATCH 12/12] Commit from GitHub Actions (Lint code) --- .../iiif/modules/uv-shared-module/BaseExpandPanel.ts | 8 +++----- .../iiif/modules/uv-shared-module/LeftPanel.ts | 4 ++-- 2 files changed, 5 insertions(+), 7 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 519eca0db..955969e65 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts @@ -173,7 +173,6 @@ export class BaseExpandPanel extends BaseView { } expandFull(): void { - console.log("BaseExpandPanel.ts:expandFull()"); const settings = this.extension.getSettings(); @@ -198,7 +197,6 @@ export class BaseExpandPanel extends BaseView { }, 550); } - /* if (isReducedAnimation) { this.$element.css("width", targetWidth); this.$element.css("left", targetLeft); @@ -260,7 +258,7 @@ export class BaseExpandPanel extends BaseView { return 0; } - toggleStart(): void { } + toggleStart(): void {} toggleFinish(): void { if (this.isExpanded && !this.autoToggled) { @@ -270,14 +268,14 @@ export class BaseExpandPanel extends BaseView { } } - expandFullStart(): void { } + expandFullStart(): void {} expandFullFinish(): void { this.isFullyExpanded = true; this.$expandFullButton.hide(); } - collapseFullStart(): void { } + collapseFullStart(): void {} collapseFullFinish(): void { this.isFullyExpanded = false; 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 774f50fbb..fe794ece3 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts @@ -81,14 +81,14 @@ export class LeftPanel< expandFull(): void { console.log("LeftPanel.ts:expandFull()"); - this.$element.parent().addClass('leftPanelOpenFull'); + this.$element.parent().addClass("leftPanelOpenFull"); super.expandFull(); } collapseFull(): void { console.log("LeftPanel.ts:collapseFull()"); - this.$element.parent().removeClass('leftPanelOpenFull'); + this.$element.parent().removeClass("leftPanelOpenFull"); // need this because 'closing' full width shouldn't actually do that // if puts the left panel back to normal open state