client: additional-names-box: persistent visiblity within album

1 files changed, 42 insertions, 1 deletions

diff --git a/src/static/js/client/additional-names-box.js b/src/static/js/client/additional-names-box.js
index a6d9b098..e099904a 100644
--- a/src/static/js/client/additional-names-box.js
+++ b/src/static/js/client/additional-names-box.js
@@ -17,8 +17,16 @@ export const info = {
   state: {
     visible: false,
   },
+
+  session: {
+    visibleWhileNavigatingAlbum: {type: 'string'},
+  },
 };
 
+export function* bindSessionStorage() {
+  yield 'visibleWhileNavigatingAlbum';
+}
+
 export function getPageReferences() {
   info.box =
     document.getElementById('additional-names-box');
@@ -76,6 +84,33 @@ export function addInternalListeners() {
   });
 }
 
+export function mutatePageContent() {
+  const {session} = info;
+
+  if (!info.box) return;
+  if (!session.visibleWhileNavigatingAlbum) return;
+
+  const currentAlbum =
+    cssProp(document.body, '--album-directory');
+
+  if (session.visibleWhileNavigatingAlbum === currentAlbum) {
+    toggleAdditionalNamesBox();
+  }
+}
+
+export function initializeState() {
+  const {session} = info;
+
+  if (!session.visibleWhileNavigatingAlbum) return;
+
+  const currentAlbum =
+    cssProp(document.body, '--album-directory');
+
+  if (session.visibleWhileNavigatingAlbum !== currentAlbum) {
+    session.visibleWhileNavigatingAlbum = null;
+  }
+}
+
 export function addPageListeners() {
   for (const link of info.links) {
     link.addEventListener('click', domEvent => {
@@ -138,11 +173,17 @@ function handleAdditionalNamesBoxLinkClicked(domEvent) {
 }
 
 export function toggleAdditionalNamesBox() {
-  const {state} = info;
+  const {state, session} = info;
 
   state.visible = !state.visible;
+
   info.box.style.display =
     (state.visible
       ? 'block'
       : 'none');
+
+  session.visibleWhileNavigatingAlbum =
+    (state.visible
+      ? cssProp(document.body, '--album-directory')
+      : null);
 }