@saltcorn/mobile-app 0.9.1-beta.0 → 0.9.1-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saltcorn/mobile-app",
   "displayName": "Saltcorn mobile app",
-  "version": "0.9.1-beta.0",
+  "version": "0.9.1-beta.2",
   "description": "Apache Cordova application with @saltcorn/markup",
   "main": "index.js",
   "scripts": {

package/www/index.html

@@ -415,7 +415,7 @@
               fullWrap: true,
               alerts,
             });
-            await replaceIframe(page.content);
+            if (page.content) await replaceIframe(page.content, page.isFile);
           } else if (isPublicJwt(jwt)) {
             const config = state.mobileConfig;
             config.role_id = 100;
@@ -429,7 +429,7 @@
               fullWrap: true,
               alerts,
             });
-            await replaceIframe(page.content);
+            if (page.content) await replaceIframe(page.content, page.isFile);
           } else if (
             (await isPublicEntryPoint(entryPoint)) &&
             state.mobileConfig.autoPublicLogin

package/www/js/routes/common.js

@@ -158,5 +158,9 @@ const wrapContents = (contents, title, context, req) => {
         alerts: prepareAlerts(context, req),
         role: state.mobileConfig.role_id,
       });
-  return { content: wrappedContent, title: title };
+  return {
+    content: wrappedContent,
+    title: title,
+    replaceIframe: context.fullWrap,
+  };
 };

package/www/js/routes/page.js

@@ -1,4 +1,4 @@
-/*global MobileRequest, parseQuery, MobileResponse, wrapContents, saltcorn*/
+/*global MobileRequest, parseQuery, MobileResponse, wrapContents, saltcorn, loadFileAsText*/
 
 // post/page/:pagename/action/:rndid
 const postPageAction = async (context) => {
@@ -37,6 +37,13 @@ const getPage = async (context) => {
   const query = parseQuery(context.query);
   const res = new MobileResponse();
   const contents = await page.run(query, { res, req });
-  const title = "title"; // TODO
-  return wrapContents(contents, title, context, req);
+  if (contents.html_file) {
+    if (state.mobileConfig?.isOfflineMode)
+      throw new Error(req.__("Offline mode: cannot load file"));
+    const content = await loadFileAsText(contents.html_file);
+    return { content, title: "title", replaceIframe: true, isFile: true };
+  } else {
+    const title = "title"; // TODO
+    return wrapContents(contents, title, context, req);
+  }
 };

package/www/js/utils/global_utils.js

@@ -75,6 +75,7 @@ function showAlerts(alerts, toast = true) {
     const area = iframe.contentWindow.document.getElementById(
       toast ? "toasts-area" : "top-alert"
     );
+    if (!area) return false;
     const successIds = [];
     area.innerHTML = "";
     for (const { type, msg } of alerts) {
@@ -93,6 +94,7 @@ function showAlerts(alerts, toast = true) {
       }, 5000);
     }
   }
+  return true;
 }
 
 function clearTopAlerts() {
@@ -103,6 +105,37 @@ function clearTopAlerts() {
   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;
+  }
+}
+
 async function loadEncodedFile(fileId) {
   try {
     const response = await apiCall({
@@ -141,11 +174,36 @@ function splitPathQuery(url) {
   return { path, query };
 }
 
-async function replaceIframe(content) {
+async function replaceIframe(content, isFile = false) {
+  const iframe = document.getElementById("content-iframe");
   await write("content.html", `${cordova.file.dataDirectory}`, content);
   const url = await getDirEntry(`${cordova.file.dataDirectory}content.html`);
-  const iframe = document.getElementById("content-iframe");
   iframe.src = url.toURL();
+  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) {
@@ -227,6 +285,11 @@ function handleOpenModal() {
   return result;
 }
 
+function isHtmlFile() {
+  const iframe = document.getElementById("content-iframe");
+  return iframe.getAttribute("is-html-file") === "true";
+}
+
 async function handleRoute(route, query, files, data) {
   const mobileConfig = saltcorn.data.state.getState().mobileConfig;
   try {
@@ -249,6 +312,7 @@ async function handleRoute(route, query, files, data) {
         files: files,
         data: data,
         alerts: [],
+        fullWrap: isHtmlFile(), // fullWrap when it's currently a fixed-html-file
       });
       if (page.redirect) {
         const { moddalWasOpen, noSubmitReload } = handleOpenModal();
@@ -270,7 +334,7 @@ async function handleRoute(route, query, files, data) {
         }
       } else if (page.content) {
         if (!page.replaceIframe) await replaceIframeInnerContent(page.content);
-        else await replaceIframe(page.content);
+        else await replaceIframe(page.content, page.isFile);
       } else {
         showAlerts([
           {

package/www/js/utils/iframe_view_utils.js

@@ -222,7 +222,7 @@ async function login(e, entryPoint, isSignup) {
         fullWrap: true,
         alerts,
       });
-      await parent.replaceIframe(page.content);
+      if (page.content) await parent.replaceIframe(page.content, page.isFile);
     } else if (loginResult?.alerts) {
       parent.showAlerts(loginResult?.alerts);
     } else {
@@ -263,7 +263,7 @@ async function publicLogin(entryPoint) {
           },
         ],
       });
-      await parent.replaceIframe(page.content);
+      if (page.content) await parent.replaceIframe(page.content, page.isFile);
     } else if (loginResult?.alerts) {
       parent.showAlerts(loginResult?.alerts);
     } else {
@@ -847,7 +847,7 @@ async function deleteOfflineData(noFeedback) {
 }
 
 function showLoadSpinner() {
-  if ($("#scspinner").length === 0) {
+  if (!parent.isHtmlFile() && $("#scspinner").length === 0) {
     $("body").append(`
     <div 
       id="scspinner" 
@@ -883,7 +883,7 @@ function showLoadSpinner() {
 }
 
 function removeLoadSpinner() {
-  $("#scspinner").remove();
+  if (!parent.isHtmlFile()) $("#scspinner").remove();
 }
 
 /**