Make extra Content persistent (#398)

* split container and content for better readibility 
* package gcodeviewer extension

src/areas/elementsCache.js

@@ -0,0 +1,102 @@
+/*
+ elementsCache.js - ESP3D WebUI MainPage file
+
+ Copyright (c) 2020 Luc Lebosse. All rights reserved.
+  Original code inspiration : 2021 Alexandre Aussourd
+
+ This code is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 2.1 of the License, or (at your option) any later version.
+
+ This code is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with This code; if not, write to the Free Software
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+*/
+import { h, render } from "preact"
+import { useState, useEffect, useMemo } from "preact/hooks"
+import { ExtraContentItem } from "../components/ExtraContent"
+import { useUiContext,useUiContextFn, useSettingsContext } from "../contexts"
+import {  eventBus } from "../hooks/eventBus"
+
+const ElementsCache = () => {
+    const { ui } = useUiContext()
+    const { interfaceSettings } = useSettingsContext()
+    const [content, setContent] = useState([])
+
+    const extractValues = (entry) => {
+        const result = { id: "extra_content_" + entry.id };
+        entry.value.forEach(param => {
+            result[param.name] = param.value;
+        });
+        return result;
+    };
+    console.log("ElementsCache is rendering")
+    useEffect(() => {
+        if (ui.ready && interfaceSettings.current?.settings?.extracontents) {
+            //console.log("ElementsCache can now be created")
+            const isEnabled  = useUiContextFn.getValue("showextracontents")
+            if (!isEnabled) {
+                console.log("ExtraContent are disabled")
+                return
+            }
+            const isVisibleOnStart = useUiContextFn.getValue("openextrapanelsonstart")
+            const extraContentSettings = interfaceSettings.current.settings.extracontents;
+            const extraContentsEntry = extraContentSettings.find(entry => entry.id === 'extracontents');
+
+            if (extraContentsEntry?.value?.length > 0) {
+                const newContent = extraContentsEntry.value.map(entry => {
+                    const item = extractValues(entry)
+                   // console.log(item)
+                    return <ExtraContentItem key={item.id} {...item} isVisibleOnStart={isVisibleOnStart} />
+                });
+                setContent(newContent);
+            }
+        }
+    }, [ui.ready, interfaceSettings]);
+
+    const memoizedContent = useMemo(() => content, [content]);
+
+    return (
+        <div style="position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible;" id="elementsCache">
+            {memoizedContent}
+        </div>
+    )
+}
+
+export default ElementsCache;
+
+const elementsCache = {
+
+    isExtraContent: (id) => {
+    const itemid = "extra_content_" + id
+    return elementsCache.has(itemid)
+    },
+
+    getRootfromId: (id) => {
+        return id.replace("extra_content_", "")
+    },
+
+    getIdFromRoot: (id) => {
+        return "extra_content_" + id
+    },
+
+    has: (id) => {
+        const cacheHost = document.getElementById("elementsCache")
+        if (!cacheHost) return false
+        return cacheHost.querySelector('#' + id) !== null
+    },
+
+    get: (id) => {
+        const cacheHost = document.getElementById("elementsCache")
+        if (!cacheHost) return null
+        return cacheHost.querySelector('#' + id)
+    }
+}
+
+export { ElementsCache, elementsCache }

src/components/App/index.js

@@ -28,22 +28,23 @@ import {
     WsContextProvider,
 } from "../../contexts"
 import { TargetContextProvider } from "../../targets"
-import { ToastsContainer } from "../Toast"
-import { ModalContainer } from "../Modal"
+import { ContainerHelper } from "../Controls"
 import { ContentContainer } from "../../areas"
+import { ElementsCache } from "../../areas/elementsCache"
 
 const App = () => {
     return (
         <div id="app">
+
             <DatasContextProvider>
                 <TargetContextProvider>
                     <RouterContextProvider>
                         <UiContextProvider>
                             <HttpQueueContextProvider>
                                 <SettingsContextProvider>
                                     <WsContextProvider>
-                                        <ToastsContainer id="top_toasts_container"/>
-                                        <ModalContainer id="top_modals_container"/>
+                                        <ContainerHelper id="top_container" active={true}/>
+                                        <ElementsCache />
                                         <ContentContainer />
                                     </WsContextProvider>
                                 </SettingsContextProvider>

src/components/Controls/CloseButton.js

@@ -17,45 +17,57 @@
 */
 import { h } from "preact"
 import { useState, useEffect } from "preact/hooks"
-
 import { useUiContext, useUiContextFn } from "../../contexts"
+import { eventBus } from "../../hooks/eventBus"
+import { elementsCache } from "../../areas/elementsCache"
 
-const isFullScreen = (element) => {
-    return document.fullscreenElement === element
-}
 
-const CloseButton = ({ panelRef, panelId, hideOnFullScreen, callbackfn }) => {
+const CloseButton = ({elementId, hideOnFullScreen, onclick }) => {
     const { panels } = useUiContext()
     const [isFullScreenMode, setIsFullScreenMode] = useState(false)
-
+    //at each render, check if the element is fullscreen
     useEffect(() => {
-        const handleFullscreenChange = () => {
-            setIsFullScreenMode(isFullScreen(panelRef.current))
+        //Handle fullscreen change event
+        const handleFullScreenChange = () => {
+            const element =document.getElementById(elementId)
+            if ( document.getElementById(elementId)) {
+            //console.log("Button close Fullscreen state changed for " + elementId)
+            setIsFullScreenMode(document.fullscreenElement==element)
+            }
         }
-
-        document.addEventListener("fullscreenchange", handleFullscreenChange)
-
+         //Add event listener to handle fullscreen change
+        document.addEventListener("fullscreenchange", handleFullScreenChange)
+        //Remove event listener on unmount
         return () => {
             document.removeEventListener(
                 "fullscreenchange",
-                handleFullscreenChange
+                handleFullScreenChange
             )
         }
-    }, [panelRef])
-
+    })
+    //Hide the button if fullscreen mode is active and hideOnFullScreen is true
     if (hideOnFullScreen && isFullScreenMode) {
         return null
     }
-
+    //display the button according to the props
     return (
         <span
             class="btn btn-clear btn-close m-1"
             aria-label="Close"
             onclick={(e) => {
                 useUiContextFn.haptic()
-                panels.hide(panelId)
-                if (callbackfn) {
-                    callbackfn()
+                panels.hide(elementId)
+                console.log("Close button clicked for element " + elementId)
+                if (elementsCache.isExtraContent(elementId)) { 
+                    console.log("emit for root element " + elementsCache.getIdFromRoot(elementId), " isVisible: false")
+                    eventBus.emit('updateState', {id: elementsCache.getIdFromRoot(elementId), isVisible: false, from: "closeButton"})
+                } else {
+                    console.log("emit for element " + elementId, " isVisible: false")
+                    eventBus.emit('updateState', {id: elementId, isVisible: false, from: "closeButton"})
+
+                }
+                if (onclick) {
+                    onclick()
                 }
             }}
         />

src/components/Controls/ContainerHelper.js

@@ -18,29 +18,46 @@ ContainerHelper.js - ESP3D WebUI component file
 */
 
 import { Fragment, h } from "preact"
-import { getFullscreenElement } from "../Helpers"
 import { ModalContainer } from "../Modal"
 import { ToastsContainer } from "../Toast"
+import { useState, useEffect,  } from "preact/hooks"
+import { eventBus } from "../../hooks/eventBus"
 
-const ContainerHelper = (props) => {
-    const { id } = props
-    //console.log("ContainerHelper id", id)
-    const fullScreenElement = getFullscreenElement()
-    if (!fullScreenElement) {
-        //console.log("No fullscreen element")
-        return null
-    } else {
-        //console.log("Fullscreen element", fullScreenElement.id)
-    }
-    //console.log("ContainerHelper id ", id, " vs fullscreen element id ", fullScreenElement.id)
-    if (fullScreenElement.id != id) {
-        return null
-    }
-    return (
+const ContainerHelper = ({id, active=false}) => {
+
+   const  [enabled, setEnabled] = useState(active)
+    //console.log("ContainerHelper id", id ,"active", active)
+    const listenerId = `listener_containerhelper_${id}`;
+    useEffect(() => {
+        const handleUpdateState = (msg) => {
+                if ('isFullScreen' in msg) {
+                  if (msg.isFullScreen) {
+                    if (id==msg.id) {
+                      setEnabled(true)
+                    } else {
+                      setEnabled(false)
+                    }
+                 } else {
+                    if (id==="top_container") {
+                      setEnabled(true)
+                    } else {
+                        setEnabled(false)
+                    }
+                 }
+                }
+            }
+        eventBus.on("updateState", handleUpdateState, listenerId)
+        return () => {
+            //eventBus.off("updateState", handleUpdateState,listenerId)
+        }})
+
+
+    if (enabled)return (
         <Fragment>
-            <ModalContainer id={"modal_" + id} />
-            <ToastsContainer id={"toast_" + id} />
+            <ModalContainer />
+            <ToastsContainer />
         </Fragment>
     )
+    return null
 }
 export default ContainerHelper