@saltcorn/mobile-app 1.1.0-beta.8 → 1.1.0

package/{www/js/utils/global_utils.js → src/helpers/navigation.js}

@@ -1,8 +1,13 @@
-/*global window, $, offlineHelper, axios, write, cordova, router, getDirEntry, saltcorn, document, FileReader, navigator, splashConfig, i18next*/
+/*global saltcorn*/
+import i18next from "i18next";
 
-let routingHistory = [];
+import { router } from "../routing/index";
+import { startOfflineMode } from "./offline_mode";
+import { showAlerts } from "./common";
 
-function currentLocation() {
+export let routingHistory = [];
+
+export function currentLocation() {
   if (routingHistory.length == 0) return undefined;
   let index = routingHistory.length - 1;
   while (index > 0 && routingHistory[index].route.startsWith("post/")) {
@@ -11,7 +16,13 @@ function currentLocation() {
   return routingHistory[index].route;
 }
 
-function currentQuery(skipPosts = false) {
+export function currentUrl() {
+  const query = currentQuery();
+  const safeQuery = query ? (query.startsWith("?") ? query : `?${query}`) : "";
+  return `${currentLocation()}${safeQuery}`;
+}
+
+export function currentQuery(skipPosts = false) {
   if (routingHistory.length == 0) return undefined;
   let index = routingHistory.length - 1;
   if (skipPosts)
@@ -21,7 +32,7 @@ function currentQuery(skipPosts = false) {
   return routingHistory[index].query;
 }
 
-function addQueryParam(key, value) {
+export function addQueryParam(key, value) {
   let query = currentQuery();
   if (!query) {
     routingHistory[routingHistory.length - 1].query = `${key}=${value}`;
@@ -32,251 +43,71 @@ function addQueryParam(key, value) {
   }
 }
 
-function addRoute(routeEntry) {
-  routingHistory.push(routeEntry);
-}
-
-function clearHistory() {
-  routingHistory = [];
-}
-
-function popRoute() {
-  routingHistory.pop();
-}
-
-async function apiCall({ method, path, params, body, responseType, timeout }) {
-  const config =
-    typeof saltcorn !== "undefined"
-      ? saltcorn.data.state.getState().mobileConfig
-      : splashConfig;
-  const serverPath = config.server_path;
-  const url = `${serverPath}${path}`;
-  const headers = {
-    "X-Requested-With": "XMLHttpRequest",
-    "X-Saltcorn-Client": "mobile-app",
-  };
-  if (config.tenantAppName) headers["X-Saltcorn-App"] = config.tenantAppName;
-  const token = config.jwt;
-  if (token) headers.Authorization = `jwt ${token}`;
-  try {
-    const result = await axios({
-      url: url,
-      method,
-      params,
-      headers,
-      responseType: responseType ? responseType : "json",
-      data: body,
-      timeout: timeout ? timeout : 0,
-    });
-    return result;
-  } catch (error) {
-    error.message = `Unable to call ${method} ${url}:\n${error.message}`;
-    throw error;
+export function setAnchor(anchor) {
+  if (routingHistory.length === 0)
+    throw new Error("No current route to set anchor");
+  else {
+    const current = routingHistory[routingHistory.length - 1];
+    current.anchor = anchor;
   }
 }
 
-function clearAlerts() {
-  const iframe = document.getElementById("content-iframe");
-  const alertsArea =
-    iframe.contentWindow.document.getElementById("toasts-area");
-  alertsArea.innerHTML = "";
-}
-
-function showAlerts(alerts, toast = true) {
-  if (typeof saltcorn === "undefined") {
-    console.log("Not yet initalized.");
-    console.log(alerts);
-  } else {
-    const iframe = document.getElementById("content-iframe");
-    let area = iframe.contentWindow.document.getElementById(
-      toast ? "toasts-area" : "top-alert"
-    );
-    if (!area) {
-      const areaHtml = `<div class="container">
-  <div 
-    id="toasts-area" 
-    class="toast-container position-fixed bottom-0 start-50 p-0" 
-    style="z-index: 9999;" 
-    aria-live="polite" 
-    aria-atomic="true">
-  </div>
-</div>`;
-      iframe.contentWindow.document
-        .getElementById("page-inner-content")
-        .insertAdjacentHTML("beforeend", areaHtml);
-      area = iframe.contentWindow.document.getElementById(
-        toast ? "toasts-area" : "top-alert"
-      );
-    }
-
-    const successIds = [];
-    area.innerHTML = "";
-    for (const { type, msg } of alerts) {
-      if (toast) {
-        const rndid = `tab${Math.floor(Math.random() * 16777215).toString(16)}`;
-        area.innerHTML += saltcorn.markup.toast(type, msg, rndid);
-        if (type === "success") successIds.push(rndid);
-      } else area.innerHTML += saltcorn.markup.alert(type, msg);
-    }
-    if (successIds.length > 0) {
-      setTimeout(() => {
-        for (const id of successIds) {
-          const toastEl = iframe.contentWindow.document.getElementById(id);
-          if (toastEl) $(toastEl).removeClass("show");
-        }
-      }, 5000);
-    }
+export function getAnchor() {
+  if (routingHistory.length === 0) return undefined;
+  else {
+    const current = routingHistory[routingHistory.length - 1];
+    return current.anchor;
   }
-  return true;
-}
-
-function clearTopAlerts() {
-  const iframe = document.getElementById("content-iframe");
-  const area = iframe.contentWindow.document.getElementById("alerts-area");
-  if (area) area.innerHTML = "";
-  const topAlert = iframe.contentWindow.document.getElementById("top-alert");
-  if (topAlert) topAlert.innerHTML = "";
 }
 
-// TODO combine with loadEncodedFile
-async function loadFileAsText(fileId) {
-  try {
-    const response = await apiCall({
-      method: "GET",
-      path: `/files/download/${fileId}`,
-      responseType: "blob",
-    });
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        return resolve(reader.result);
-      };
-      reader.onerror = (error) => {
-        return reject(error);
-      };
-      reader.readAsText(response.data);
-    });
-  } catch (error) {
-    if (
-      !showAlerts([
-        {
-          type: "error",
-          msg: error.message ? error.message : "An error occured.",
-        },
-      ])
-    );
-    throw error;
-  }
+export function addRoute(routeEntry) {
+  routingHistory.push(routeEntry);
 }
 
-async function loadEncodedFile(fileId) {
-  try {
-    const response = await apiCall({
-      method: "GET",
-      path: `/files/download/${fileId}`,
-      responseType: "blob",
-    });
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        return resolve(reader.result);
-      };
-      reader.onerror = (error) => {
-        return reject(error);
-      };
-      reader.readAsDataURL(response.data);
-    });
-  } catch (error) {
-    showAlerts([
-      {
-        type: "error",
-        msg: error.message ? error.message : "An error occured.",
-      },
-    ]);
-  }
+export function clearHistory() {
+  routingHistory = [];
 }
 
-function splitPathQuery(url) {
-  let path = url;
-  let query = undefined;
-  const queryStart = url.indexOf("?");
-  if (queryStart > 0) {
-    path = url.substring(0, queryStart);
-    query = url.substring(queryStart);
-  }
-  return { path, query };
+export function popRoute() {
+  routingHistory.pop();
 }
 
-async function replaceIframe(content, isFile = false) {
+export async function goBack(steps = 1, exitOnFirstPage = false) {
+  const { inLoadState } = saltcorn.data.state.getState().mobileConfig;
+  if (inLoadState) return;
   const iframe = document.getElementById("content-iframe");
-  iframe.srcdoc = content;
-  if (isFile) {
-    iframe.setAttribute("is-html-file", true);
-    await new Promise((resolve, reject) => {
-      iframe.onload = () => {
-        try {
-          const _iframe = document.getElementById("content-iframe");
-          const iframeDoc = _iframe.contentWindow.document;
-          const baseEl = iframeDoc.createElement("base");
-          iframeDoc.head.appendChild(baseEl);
-          baseEl.href = "http://localhost";
-          const scriptEl = iframeDoc.createElement("script");
-          iframeDoc.body.appendChild(scriptEl);
-          scriptEl.onload = () => {
-            resolve();
-          };
-          scriptEl.src = "js/utils/iframe_view_utils.js";
-        } catch (e) {
-          reject(e);
-        }
-      };
-      iframe.onerror = () => {
-        reject();
-      };
-    });
-  } else iframe.setAttribute("is-html-file", false);
-}
-
-function addScriptToIframeHead(iframeDoc, script) {
-  return new Promise((resolve, reject) => {
-    const srcAttr = script.attributes.getNamedItem("src").value;
-    const existingScripts = iframeDoc.head.getElementsByTagName("script");
-    for (const existing of existingScripts) {
-      const existingSrc = existing.attributes.getNamedItem("src");
-      if (existingSrc && existingSrc.value === srcAttr) return resolve(); // already there
+  if (
+    routingHistory.length === 0 ||
+    (exitOnFirstPage && routingHistory.length === 1)
+  ) {
+    navigator.app.exitApp();
+  } else if (routingHistory.length <= steps) {
+    try {
+      if (iframe?.contentWindow?.showLoadSpinner)
+        iframe.contentWindow.showLoadSpinner();
+      routingHistory = [];
+      await handleRoute("/");
+    } finally {
+      if (iframe?.contentWindow?.removeLoadSpinner)
+        iframe.contentWindow.removeLoadSpinner();
     }
-    const scriptEl = iframeDoc.createElement("script");
-    iframeDoc.head.appendChild(scriptEl);
-    scriptEl.onload = () => {
-      resolve();
-    };
-    scriptEl.src = srcAttr;
-  });
-}
-
-async function replaceIframeInnerContent(content) {
-  const iframe = document.getElementById("content-iframe");
-  const iframeDocument = iframe.contentWindow.document;
-  const modal = iframeDocument.getElementById("scmodal");
-  if (modal) modal.remove();
-  const innerContentDiv = iframeDocument.getElementById("page-inner-content");
-  innerContentDiv.innerHTML = content;
-  const scripts = innerContentDiv.getElementsByTagName("script");
-  for (const script of scripts) {
-    if (script.attributes.getNamedItem("src")) {
-      await addScriptToIframeHead(iframe.contentWindow.document, script);
-    } else {
-      iframe.contentWindow.eval(script.innerHTML);
+  } else {
+    try {
+      if (iframe?.contentWindow?.showLoadSpinner)
+        iframe.contentWindow.showLoadSpinner();
+      routingHistory = routingHistory.slice(0, routingHistory.length - steps);
+      // don't repeat a post
+      if (routingHistory[routingHistory.length - 1].route.startsWith("post/")) {
+        routingHistory.pop();
+      }
+      const newCurrent = routingHistory.pop();
+      await handleRoute(newCurrent.route, newCurrent.query);
+    } finally {
+      if (iframe?.contentWindow?.removeLoadSpinner)
+        iframe.contentWindow.removeLoadSpinner();
     }
   }
-  const scmodal = iframe.contentWindow.$("#scmodal");
-  if (scmodal) {
-    scmodal.modal("hide");
-  }
-  iframe.contentWindow.scrollTo(0, 0);
-  iframe.contentWindow.initialize_page();
 }
-
 function clearContentDiv() {
   const iframe = document.getElementById("content-iframe");
   if (iframe) {
@@ -286,53 +117,12 @@ function clearContentDiv() {
   }
 }
 
-async function gotoEntryView() {
-  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
-  try {
-    if (mobileConfig.inErrorState) window.location.reload(true);
-    else if (
-      mobileConfig.networkState === "none" &&
-      mobileConfig.allowOfflineMode &&
-      !mobileConfig.isOfflineMode
-    ) {
-      await offlineHelper.startOfflineMode();
-      clearHistory();
-    }
-    const page = await router.resolve({
-      pathname: mobileConfig.entry_point,
-      alerts: [],
-    });
-    addRoute({ route: mobileConfig.entry_point, query: undefined });
-    await replaceIframeInnerContent(page.content);
-  } catch (error) {
-    showAlerts([
-      {
-        type: "error",
-        msg: error.message ? error.message : "An error occured.",
-      },
-    ]);
-  }
-}
-
-function handleOpenModal() {
-  const result = { moddalWasOpen: false, noSubmitReload: false };
-  const iframe = document.getElementById("content-iframe");
-  if (!iframe) return result;
-  const openModal = iframe.contentWindow.$("#scmodal.modal.show");
-  if (openModal.length === 0) return result;
-  result.moddalWasOpen = true;
-  iframe.contentWindow.bootstrap.Modal.getInstance(openModal[0]).hide();
-  result.noSubmitReload = openModal[0].classList.contains("no-submit-reload");
-  return result;
-}
-
 function isModalOpen() {
   const iframe = document.getElementById("content-iframe");
   if (!iframe) return false;
   const openModal = iframe.contentWindow.$("#scmodal.modal.show");
   return openModal.length > 0;
 }
-
 function replaceModalContent(content) {
   const iframe = document.getElementById("content-iframe");
   if (!iframe) throw new Error("No iframe found");
@@ -343,12 +133,7 @@ function replaceModalContent(content) {
   modalBody.html(content);
 }
 
-function isHtmlFile() {
-  const iframe = document.getElementById("content-iframe");
-  return iframe.getAttribute("is-html-file") === "true";
-}
-
-async function handleRoute(route, query, files, data) {
+export async function handleRoute(route, query, files, data) {
   const mobileConfig = saltcorn.data.state.getState().mobileConfig;
   let routeAdded = false;
   const isModal = isModalOpen();
@@ -359,7 +144,7 @@ async function handleRoute(route, query, files, data) {
       mobileConfig.allowOfflineMode &&
       !mobileConfig.isOfflineMode
     ) {
-      await offlineHelper.startOfflineMode();
+      await startOfflineMode();
       clearHistory();
       await gotoEntryView();
     } else {
@@ -395,7 +180,8 @@ async function handleRoute(route, query, files, data) {
           );
         }
       } else if (page.content) {
-        if (isModal) replaceModalContent(page.content);
+        if (isModal && route?.startsWith("post"))
+          replaceModalContent(page.content);
         else if (!page.replaceIframe)
           await replaceIframeInnerContent(page.content);
         else await replaceIframe(page.content, page.isFile);
@@ -425,66 +211,137 @@ async function handleRoute(route, query, files, data) {
   }
 }
 
+function handleOpenModal() {
+  const result = { moddalWasOpen: false, noSubmitReload: false };
+  const iframe = document.getElementById("content-iframe");
+  if (!iframe) return result;
+  const openModal = iframe.contentWindow.$("#scmodal.modal.show");
+  if (openModal.length === 0) return result;
+  result.moddalWasOpen = true;
+  iframe.contentWindow.bootstrap.Modal.getInstance(openModal[0]).hide();
+  result.noSubmitReload = openModal[0].classList.contains("no-submit-reload");
+  return result;
+}
+
+export function isHtmlFile() {
+  const iframe = document.getElementById("content-iframe");
+  return iframe.getAttribute("is-html-file") === "true";
+}
+
 async function reload() {
   const currentRoute = currentLocation();
   if (!currentRoute) await gotoEntryView();
   await handleRoute(currentRoute, currentQuery(true));
 }
 
-async function goBack(steps = 1, exitOnFirstPage = false) {
-  const { inLoadState } = saltcorn.data.state.getState().mobileConfig;
-  if (inLoadState) return;
-  const iframe = document.getElementById("content-iframe");
-  if (
-    routingHistory.length === 0 ||
-    (exitOnFirstPage && routingHistory.length === 1)
-  ) {
-    navigator.app.exitApp();
-  } else if (routingHistory.length <= steps) {
-    try {
-      if (iframe?.contentWindow?.showLoadSpinner)
-        iframe.contentWindow.showLoadSpinner();
-      routingHistory = [];
-      await handleRoute("/");
-    } finally {
-      if (iframe?.contentWindow?.removeLoadSpinner)
-        iframe.contentWindow.removeLoadSpinner();
-    }
-  } else {
-    try {
-      if (iframe?.contentWindow?.showLoadSpinner)
-        iframe.contentWindow.showLoadSpinner();
-      routingHistory = routingHistory.slice(0, routingHistory.length - steps);
-      // don't repeat a post
-      if (routingHistory[routingHistory.length - 1].route.startsWith("post/")) {
-        routingHistory.pop();
-      }
-      const newCurrent = routingHistory.pop();
-      await handleRoute(newCurrent.route, newCurrent.query);
-    } finally {
-      if (iframe?.contentWindow?.removeLoadSpinner)
-        iframe.contentWindow.removeLoadSpinner();
+export async function gotoEntryView() {
+  const mobileConfig = saltcorn.data.state.getState().mobileConfig;
+  try {
+    if (mobileConfig.inErrorState) window.location.reload(true);
+    else if (
+      mobileConfig.networkState === "none" &&
+      mobileConfig.allowOfflineMode &&
+      !mobileConfig.isOfflineMode
+    ) {
+      await startOfflineMode();
+      clearHistory();
     }
+    const page = await router.resolve({
+      pathname: mobileConfig.entry_point,
+      alerts: [],
+    });
+    addRoute({ route: mobileConfig.entry_point, query: undefined });
+    await replaceIframeInnerContent(page.content);
+  } catch (error) {
+    showAlerts([
+      {
+        type: "error",
+        msg: error.message ? error.message : "An error occured.",
+      },
+    ]);
   }
 }
 
-function errorAlert(error) {
-  showAlerts([
-    {
-      type: "error",
-      msg: error.message ? error.message : "An error occured.",
-    },
-  ]);
-  console.error(error);
+export async function replaceIframe(content, isFile = false) {
+  const iframe = document.getElementById("content-iframe");
+  iframe.srcdoc = content;
+  if (isFile) {
+    iframe.setAttribute("is-html-file", true);
+    await new Promise((resolve, reject) => {
+      iframe.onload = () => {
+        try {
+          const _iframe = document.getElementById("content-iframe");
+          const iframeDoc = _iframe.contentWindow.document;
+          const baseEl = iframeDoc.createElement("base");
+          iframeDoc.head.appendChild(baseEl);
+          baseEl.href = "http://localhost";
+          const scriptEl = iframeDoc.createElement("script");
+          iframeDoc.body.appendChild(scriptEl);
+          scriptEl.onload = () => {
+            resolve();
+          };
+          scriptEl.src = "js/iframe_view_utils.js";
+        } catch (e) {
+          reject(e);
+        }
+      };
+      iframe.onerror = () => {
+        reject();
+      };
+    });
+  } else iframe.setAttribute("is-html-file", false);
 }
 
-async function checkJWT(jwt) {
-  if (jwt && jwt !== "undefined") {
-    const response = await apiCall({
-      method: "GET",
-      path: "/auth/authenticated",
-      timeout: 10000,
-    });
-    return response.data.authenticated;
-  } else return false;
+export function addScriptToIframeHead(iframeDoc, script) {
+  return new Promise((resolve /*reject*/) => {
+    const srcAttr = script.attributes.getNamedItem("src").value;
+    const existingScripts = iframeDoc.head.getElementsByTagName("script");
+    for (const existing of existingScripts) {
+      const existingSrc = existing.attributes.getNamedItem("src");
+      if (existingSrc && existingSrc.value === srcAttr) return resolve(); // already there
+    }
+    const scriptEl = iframeDoc.createElement("script");
+    iframeDoc.head.appendChild(scriptEl);
+    scriptEl.onload = () => {
+      resolve();
+    };
+    scriptEl.src = srcAttr;
+  });
+}
+
+export async function replaceIframeInnerContent(content) {
+  const iframe = document.getElementById("content-iframe");
+  const iframeDocument = iframe.contentWindow.document;
+  if (iframe.contentWindow.$) {
+    const scmodal = iframe.contentWindow.$("#scmodal");
+    if (scmodal.length > 0) {
+      scmodal.modal("hide");
+      scmodal.remove();
+    }
+  }
+  const modal = iframeDocument.getElementById("scmodal");
+  if (modal) modal.remove();
+  const innerContentDiv = iframeDocument.getElementById("page-inner-content");
+  innerContentDiv.innerHTML = content;
+  const scripts = innerContentDiv.getElementsByTagName("script");
+  for (const script of scripts) {
+    if (script.attributes.getNamedItem("src")) {
+      await addScriptToIframeHead(iframe.contentWindow.document, script);
+    } else {
+      iframe.contentWindow.eval(script.innerHTML);
+    }
+  }
+  iframe.contentWindow.scrollTo(0, 0);
+  iframe.contentWindow.initialize_page();
+}
+
+export function splitPathQuery(url) {
+  let path = url;
+  let query = undefined;
+  const queryStart = url.indexOf("?");
+  if (queryStart > 0) {
+    path = url.substring(0, queryStart);
+    query = url.substring(queryStart);
+  }
+  return { path, query };
 }