Preliminary sidebar handling css

src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts

@@ -207,8 +207,8 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
     );
 
     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, () => {

src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts

@@ -108,6 +108,8 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
 
     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<T extends ExpandPanel> extends BaseView<T> {
       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<T extends ExpandPanel> extends BaseView<T> {
           this.toggled();
         }
       );
-    }
+    } */
   }
 
   toggled(): void {
@@ -159,19 +173,31 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
   }
 
   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();
@@ -186,7 +212,7 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
           this.expandFullFinish();
         }
       );
-    }
+    } */
   }
 
   collapseFull(): void {

src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts

@@ -67,4 +67,37 @@ 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);
+  }
+
+  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();
+  }
 }

src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts

@@ -66,4 +66,18 @@ export class RightPanel<T extends ExpandPanel> extends BaseExpandPanel<T> {
       ),
     });
   }
+
+  toggle(autoToggled?: boolean): void {
+    if (this.isExpanded) {
+      this.$element.parent().removeClass("rightPanelOpen");
+    } else {
+      this.$element.parent().addClass("rightPanelOpen");
+    }
+
+    super.toggle(autoToggled);
+  }
+
+  expandFull(): void {
+    super.expandFull();
+  }
 }

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();

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;
+        }
+    })
 }

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;
+        }
+    })
+
 }

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
 

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;
+        }
+    })
 }