#29 maintain the open tab while open or closing other overlays

micmro · Feb 10, 2017 · fc803e6 · fc803e6
1 parent 7f2b662
commit fc803e6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/src/ts/typing/open-overlay.ts b/src/ts/typing/open-overlay.ts
@@ -1,15 +1,23 @@
 import {WaterfallEntry} from "./waterfall";
 
-export type OnCloseFn = (indexBackup: number, holder: SVGElement) => void;
+export type OnCloseFn = (overlayIndex: number) => void;
 
+/** Metadata to describe open overlays */
 export interface OpenOverlay {
+  /** index of row (request) associated with overlay  */
   index: number;
+  /** default Y position of overlay if no overlay is opened */
   defaultY: number;
+  /** data of row */
   entry: WaterfallEntry;
+  /** callback called when closing overlay */
   onClose: OnCloseFn;
-   /* instance  info **/
+  /** current y position */
   actualY?: number;
+  /** current visible height of the overlay in px */
   height?: number;
+  /** index of the currently opened tab of the overlay */
+  openTabIndex?: number;
 }
 
 export interface OverlayChangeEvent {

diff --git a/src/ts/waterfall/details-overlay/overlay-manager.ts b/src/ts/waterfall/details-overlay/overlay-manager.ts
@@ -29,14 +29,18 @@ export default class OverlayManager implements OverlayManagerClass {
     }
     const self = this;
 
-    this.openOverlays.push({
+    let overlay = {
       "defaultY": y,
       "entry": entry,
       "index": index,
       "onClose": () => {
         self.closeOverlay(index, accordionHeight, barEls);
       },
-    });
+      "openTabIndex": 0,
+    };
+
+    this.openOverlays.push(overlay);
+
 
     this.renderOverlays(accordionHeight);
     this.context.pubSub.publishToOverlayChanges({
@@ -114,8 +118,7 @@ export default class OverlayManager implements OverlayManagerClass {
       .sort((a, b) => a.index > b.index ? 1 : -1)
       .forEach((overlay) => {
         let y = overlay.defaultY + currY;
-        let infoOverlay = createRowInfoOverlay(overlay.index, y, accordionHeight,
-          overlay.entry, overlay.onClose);
+        let infoOverlay = createRowInfoOverlay(overlay, y, accordionHeight);
         // if overlay has a preview image show it
         let previewImg = infoOverlay.querySelector("img.preview") as HTMLImageElement;
         if (previewImg && !previewImg.src) {

diff --git a/src/ts/waterfall/details-overlay/svg-details-overlay.ts b/src/ts/waterfall/details-overlay/svg-details-overlay.ts
@@ -1,7 +1,6 @@
 import * as svg from "../../helpers/svg";
-import {OnCloseFn} from "../../typing/open-overlay";
-import {WaterfallEntry} from "../../typing/waterfall";
-import {createDetailsBody} from "./html-details-body";
+import { OpenOverlay } from "../../typing/open-overlay";
+import { createDetailsBody } from "./html-details-body";
 
 export function forEach(els: NodeListOf<Element>, fn: (el: Element, index: number) => any) {
   Array.prototype.forEach.call(els, fn);
@@ -46,10 +45,8 @@ function createHolder(y: number, accordionHeight: number) {
   return innerHolder;
 }
 
-export function createRowInfoOverlay(indexBackup: number, y: number,
-                                     accordionHeight: number, entry: WaterfallEntry,
-                                     onClose: OnCloseFn): SVGGElement {
-  const requestID =  entry.rawResource._number || indexBackup + 1;
+export function createRowInfoOverlay(overlay: OpenOverlay, y: number, accordionHeight: number): SVGGElement {
+  const requestID = overlay.entry.rawResource._number || overlay.index + 1;
   let wrapper = svg.newG("outer-info-overlay-holder");
   let holder = createHolder(y, accordionHeight);
 
@@ -61,24 +58,25 @@ export function createRowInfoOverlay(indexBackup: number, y: number,
   });
 
   let closeBtn = createCloseButtonSvg(y);
-  closeBtn.addEventListener("click", () => onClose(indexBackup, holder));
+  closeBtn.addEventListener("click", () => overlay.onClose(overlay.index));
 
-  let body = createDetailsBody(requestID, entry, accordionHeight);
+  let body = createDetailsBody(requestID, overlay.entry, accordionHeight);
   let buttons = body.getElementsByClassName("tab-button") as NodeListOf<HTMLButtonElement>;
   let tabs = body.getElementsByClassName("tab") as NodeListOf<HTMLDivElement>;
 
-  let setTabStatus = (index) => {
+  let setTabStatus = (tabIndex: number) => {
+    overlay.openTabIndex = tabIndex;
     forEach(tabs, (tab: HTMLDivElement, j) => {
-      tab.style.display = (index === j) ? "block" : "none";
-      buttons.item(j).classList.toggle("active", (index === j));
+      tab.style.display = (tabIndex === j) ? "block" : "none";
+      buttons.item(j).classList.toggle("active", (tabIndex === j));
     });
   };
 
-  forEach(buttons, (btn, i) => {
-    btn.addEventListener("click", () => { setTabStatus(i); });
+  forEach(buttons, (btn, tabIndex) => {
+    btn.addEventListener("click", () => setTabStatus(tabIndex));
   });
 
-  setTabStatus(0);
+  setTabStatus(overlay.openTabIndex);
 
   foreignObject.appendChild(body);
   holder.appendChild(foreignObject);