Add button event to preliminary sidebar styling

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,14 +99,14 @@ 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";
   static SHOW_SETTINGS_DIALOGUE: string = "showSettingsDialogue";
   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";

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<Config["modules"]["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 = $(
-      '<div class="overlay moreInfo" aria-hidden="true"></div>'
-    );
-    this.shell.$overlays.append(this.$moreInfoDialogue);
-    this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue);
-
     this.$shareDialogue = $(
       '<div class="overlay share" aria-hidden="true"></div>'
     );

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<Config> {
   $downloadDialogue: JQuery;
   $shareDialogue: JQuery;
   $helpDialogue: JQuery;
-  $moreInfoDialogue: JQuery;
   $settingsDialogue: JQuery;
   centerPanel: ModelViewerCenterPanel;
   downloadDialogue: DownloadDialogue;
@@ -36,7 +34,6 @@ export default class ModelViewerExtension extends BaseExtension<Config> {
   helpDialogue: HelpDialogue;
   leftPanel: ContentLeftPanel;
   mobileFooterPanel: FooterPanel<Config["modules"]["footerPanel"]>;
-  moreInfoDialogue: MoreInfoDialogue;
   rightPanel: MoreInfoRightPanel;
   settingsDialogue: SettingsDialogue;
   shareDialogue: ShareDialogue;
@@ -99,12 +96,6 @@ export default class ModelViewerExtension extends BaseExtension<Config> {
       this.shell.$footerPanel.hide();
     }
 
-    this.$moreInfoDialogue = $(
-      '<div class="overlay moreInfo" aria-hidden="true"></div>'
-    );
-    this.shell.$overlays.append(this.$moreInfoDialogue);
-    this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue);
-
     this.$downloadDialogue = $(
       '<div class="overlay download" aria-hidden="true"></div>'
     );

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<Config> {
   $downloadDialogue: JQuery;
   $externalContentDialogue: JQuery;
   $helpDialogue: JQuery;
-  $moreInfoDialogue: JQuery;
   $multiSelectDialogue: JQuery;
   $settingsDialogue: JQuery;
   $shareDialogue: JQuery;
@@ -78,7 +76,6 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
   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<Config> {
     this.shell.$overlays.append(this.$helpDialogue);
     this.helpDialogue = new HelpDialogue(this.$helpDialogue);
 
-    this.$moreInfoDialogue = $(
-      '<div class="overlay moreInfo" aria-hidden="true"></div>'
-    );
-    this.shell.$overlays.append(this.$moreInfoDialogue);
-    this.moreInfoDialogue = new MoreInfoDialogue(this.$moreInfoDialogue);
-
     this.$multiSelectDialogue = $(
       '<div class="overlay multiSelect" aria-hidden="true"></div>'
     );

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 {

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

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

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

@@ -32,8 +32,14 @@ export class RightPanel<T extends ExpandPanel> extends BaseExpandPanel<T> {
         this.expandFull();
       }
     });
+
+    this.extensionHost.subscribe(IIIFEvents.TOGGLE_MOREINFO_RIGHT_PANEL, () => {
+      this.toggle();
+    });
   }
 
+
+
   getTargetWidth(): number {
     return this.isExpanded
       ? this.options.panelCollapsedWidth
@@ -66,4 +72,14 @@ 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);
+  }
 }

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