@pronto-tools-and-more/files 9.0.0 → 9.1.0

package/files/assets/live-reload.js

@@ -76,10 +76,127 @@ const updateCssError = (errorColor, css) => {
   document.body.append(error);
 };
 
+let loading;
+
+const removeLoading = () => {
+  if (!loading) {
+    return;
+  }
+  loading.remove();
+  loading = undefined;
+};
+
+const updateViewsLoading = () => {
+  removeLoading();
+  loading = document.createElement("div");
+  loading.className = "pronto-views-loading";
+  const loadingColor = "lime";
+  loading.style.position = "fixed";
+  loading.style.top = "0";
+  loading.style.right = "0";
+  loading.style.width = "20px";
+  loading.style.height = "20px";
+  loading.style.background = `radial-gradient(${loadingColor}, transparent)`;
+  loading.style.zIndex = "11111111";
+  loading.style.display = "flex";
+  document.body.append(loading);
+};
+
+let frame;
+
+const waitForIdle = (window) => {
+  return new Promise((resolve) => {
+    window.requestIdleCallback(resolve);
+  });
+};
+
+const waitForFrameReallyToLoad = async (currentFrame) => {
+  const maxWait = 10000;
+  const end = performance.now() + maxWait;
+  while (performance.now() < end) {
+    const { contentWindow } = currentFrame;
+    await waitForIdle(contentWindow);
+    contentWindow.document.documentElement.scrollTop =
+      document.documentElement.scrollTop;
+    const hasRoot =
+      contentWindow.document.body.querySelector("storefront-root");
+    const hasPurple = contentWindow.purple;
+    const hasView =
+      contentWindow.document.body.querySelector("storefront-view");
+    const hasCustomCss = contentWindow.document.body.querySelector(
+      'link[href="assets/custom.css"]'
+    );
+    const hasDeviceType =
+      contentWindow.document.body.dataset.storefrontDevice_type;
+    if (hasRoot && hasPurple && hasView && hasCustomCss && hasDeviceType) {
+      await waitForIdle(contentWindow);
+      await waitForIdle(contentWindow);
+      await waitForIdle(contentWindow);
+      return true;
+    }
+  }
+  return false;
+};
+
+const handleFrameLoad = async (event) => {
+  if (event.target !== frame) {
+    return;
+  }
+
+  const hasLoaded = await waitForFrameReallyToLoad(frame);
+  if (!hasLoaded) {
+    console.info("[pronto] iframe did not load");
+    // TODO hard reload?
+    return;
+  }
+  const toRemove = [];
+  for (const node of document.body.childNodes) {
+    if (node !== frame && node.nodeName !== "LINK") {
+      toRemove.push(node);
+    }
+  }
+  for (const node of toRemove) {
+    node.remove();
+  }
+  const toAdd = [];
+  for (const node of frame.contentWindow.document.body.childNodes) {
+    if (node.nodeName !== "LINK") {
+      toAdd.push(node);
+    }
+  }
+  document.body.prepend(...toAdd);
+  // frame.remove();
+  frame = undefined;
+};
+
+const updateViews = () => {
+  updateViewsLoading();
+  if (frame) {
+    frame.remove();
+    frame = undefined;
+  }
+  const currentFrame = document.createElement("iframe");
+  frame = currentFrame;
+  currentFrame.addEventListener("load", handleFrameLoad);
+  currentFrame.src = location.href;
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  currentFrame.style.background = "blue";
+  currentFrame.style.display = "block";
+  currentFrame.style.visibility = "hidden";
+  currentFrame.width = `${width}`;
+  currentFrame.height = `${height}`;
+  currentFrame.style.position = "fixed";
+  currentFrame.style.bottom = "0";
+  currentFrame.style.right = "0";
+  document.body.append(currentFrame);
+};
+
 const commandMap = {
   reload,
   updateCss,
   updateCssError,
+  updateViews,
 };
 
 const getCommand = (method) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pronto-tools-and-more/files",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {},

package/files/framework/src/default/storefront/assets/appBar.json

@@ -1 +0,0 @@
-[{"id":"default","logo":false,"scrollBehavior":"none","content":{"content":[{"name":"template-main-app-bar","type":"view"},{"name":"template-app-bar-menus","type":"view"},{"dataSource":{"type":"menu","filter":{"name":{"value":"burger-menu"}}},"type":"menu","class":"menu-side","id":"menu-side","actions":[{"content":{"mode":"once","type":"action-executor"},"name":"close"}],"template":"SLIDE_IN_LEFT"}],"type":"section","class":"header-section"}},{"id":"article","logo":false,"scrollBehavior":"none","content":{"content":[{"name":"template-article-app-bar","type":"view"},{"content":[{"content":[{"dataSource":{"type":"menu","filter":{"name":{"value":"menu-ressorts"}},"contextKey":"menu-ressorts"},"type":"menu","class":"$functions.handleAppBarMenu($global.menu_ressorts[0].items, $context.ressort)","template":"STATIC","id":"menu-ressorts"}],"type":"section","class":"main-menu"}],"type":"section","id":"app-bar-menus","sticky":true}],"type":"section","class":"header-section"}},{"id":"back","logo":false,"scrollBehavior":"none","content":{"content":[{"name":"template-main-app-bar","type":"view"},{"dataSource":{"type":"menu","filter":{"name":{"value":"menu-burger-web"}}},"type":"menu","class":"menu-side","id":"menu-side","actions":[{"content":{"mode":"once","type":"action-executor"},"name":"close"}]}],"type":"section","class":"header-section"},"leftButton":"back"},{"id":"default-with-menus","logo":false,"scrollBehavior":"none","content":{"content":[{"name":"template-main-app-bar","type":"view"},{"name":"init-view","type":"view"},{"dataSource":{"type":"menu","filter":{"name":{"value":"menu-burger-web"}}},"type":"menu","class":"menu-side","id":"menu-side","actions":[{"content":{"mode":"once","type":"action-executor"},"name":"close"}]}],"type":"section","class":"header-section"},"leftButton":"menu"},{"id":"close","logo":false,"scrollBehavior":"none","content":{"type":"toolbar","actions":[{"iconUrl":"","type":"close"}]}},{"id":"foobar","logo":false,"scrollBehavior":"none","content":{"content":[{"name":"template-main-app-bar","type":"view"},{"name":"template-app-bar-menus","type":"view"}],"type":"section","class":"header-section"}}]