page title now changes also when selecting papers

Author: Konstiman

vis/js/intermediate.js

@@ -26,8 +26,9 @@ import { getChartSize, getListSize } from "./utils/dimensions";
 import Headstart from "./components/Headstart";
 import { sanitizeInputData } from "./utils/data";
 import { createAnimationCallback } from "./utils/eventhandlers";
-import { removeQueryParams, handleReduxAction } from "./utils/url";
+import { removeQueryParams, handleUrlAction } from "./utils/url";
 import debounce from "./utils/debounce";
+import { handleTitleAction } from "./utils/title";
 
 /**
  * Class to sit between the "old" mediator and the
@@ -427,7 +428,7 @@ function createQueryParameterMiddleware() {
   return function () {
     return (next) => (action) => {
       if (!action.canceled && !action.isFromBackButton) {
-        handleReduxAction(action);
+        handleUrlAction(action);
       }
 
       return next(action);
@@ -436,21 +437,13 @@ function createQueryParameterMiddleware() {
 }
 
 function createPageTitleMiddleware(itm) {
-  return function () {
+  return function ({ getState }) {
     return (next) => (action) => {
-      if (
-        action.type === "ZOOM_IN" &&
-        !action.canceled &&
-        action.selectedAreaData
-      ) {
-        document.title = `${action.selectedAreaData.title} | ${itm.originalTitle}`;
-      }
-      if (action.type === "ZOOM_OUT" && !action.canceled) {
-        document.title = itm.originalTitle;
+      if (!action.canceled && !action.isFromBackButton) {
+        const state = getState();
+        handleTitleAction(action, itm.originalTitle, state);
       }
 
-      // TODO select paper / deselect paper ?
-
       return next(action);
     };
   };

vis/js/utils/title.js

@@ -0,0 +1,61 @@
+/**
+ * Sets correct page title based on the current action and state.
+ * 
+ * @param {Object} action the Redux action object
+ * @param {string} defaultTitle the original page title Headstart has when it loads
+ * @param {Object} state the Redux state object
+ */
+export const handleTitleAction = (action, defaultTitle, state) => {
+  switch (action.type) {
+    case "ZOOM_IN":
+      document.title = getZoomInTitle(
+        action.selectedAreaData,
+        action.selectedPaperData,
+        defaultTitle
+      );
+      return;
+    case "ZOOM_OUT":
+      document.title = defaultTitle;
+      return;
+    case "SELECT_PAPER":
+      document.title = getSelectPaperTitle(action.paper, defaultTitle);
+      return;
+    case "DESELECT_PAPER":
+      document.title = getDeselectPaperTitle(defaultTitle, state);
+      return;
+    default:
+      return;
+  }
+};
+
+const getZoomInTitle = (areaData, paperData, defaultTitle) => {
+  if (!areaData) {
+    return document.title;
+  }
+
+  if (paperData) {
+    return `${paperData.title} | ${defaultTitle}`;
+  }
+
+  return `${areaData.title} | ${defaultTitle}`;
+};
+
+const getSelectPaperTitle = (paperData, defaultTitle) => {
+  if (!paperData) {
+    return document.title;
+  }
+
+  return `${paperData.title} | ${defaultTitle}`;
+};
+
+const getDeselectPaperTitle = (defaultTitle, state) => {
+  if (state.selectedBubble) {
+    return getZoomInTitle(
+      { title: state.selectedBubble.title },
+      null,
+      defaultTitle
+    );
+  }
+
+  return defaultTitle;
+};

vis/js/utils/url.js

@@ -37,14 +37,12 @@ const addRemoveQueryParams = (paramsToAdd, paramsToRemove) => {
   window.history.pushState("", "", url.pathname + url.search);
 };
 
-//document.title = `${action.selectedAreaData.title} | ${itm.originalTitle}`;
-//document.title = itm.originalTitle;
-
-//document.title = `${action.paper.title} | ${itm.originalTitle}`;
-//document.title = itm.originalTitle;
-
-// TODO docs
-export const handleReduxAction = (action) => {
+/**
+ * Changes page url based on the current Redux action.
+ * 
+ * @param {Object} action the Redux action object
+ */
+export const handleUrlAction = (action) => {
   switch (action.type) {
     case "ZOOM_IN":
       return handleZoomIn(action);