Skip to content

Commit aeeacd9

Browse files
luc-githubluc-github
authored
Make extra Content persistent (#398)
* split container and content for better readibility * package gcodeviewer extension
1 parent 8f7e11b commit aeeacd9

39 files changed

+1588
-944
lines changed

‎extensions/gcodeViewer/dist/gcodeViewer.html.gz‎

12.6 KB
Binary file not shown.

‎extensions/gcodeViewer/dist/gcodeViewer.html/gcodeViewer.html‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎extensions/gcodeViewer/src/gcodeViewer.html‎

Lines changed: 568 additions & 282 deletions
Large diffs are not rendered by default.

‎src/areas/elementsCache.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/*
2+
elementsCache.js - ESP3D WebUI MainPage file
3+
4+
Copyright (c) 2020 Luc Lebosse. All rights reserved.
5+
Original code inspiration : 2021 Alexandre Aussourd
6+
7+
This code is free software; you can redistribute it and/or
8+
modify it under the terms of the GNU Lesser General Public
9+
License as published by the Free Software Foundation; either
10+
version 2.1 of the License, or (at your option) any later version.
11+
12+
This code is distributed in the hope that it will be useful,
13+
but WITHOUT ANY WARRANTY; without even the implied warranty of
14+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
15+
Lesser General Public License for more details.
16+
17+
You should have received a copy of the GNU Lesser General Public
18+
License along with This code; if not, write to the Free Software
19+
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
20+
*/
21+
import { h, render } from "preact"
22+
import { useState, useEffect, useMemo } from "preact/hooks"
23+
import { ExtraContentItem } from "../components/ExtraContent"
24+
import { useUiContext,useUiContextFn, useSettingsContext } from "../contexts"
25+
import { eventBus } from "../hooks/eventBus"
26+
27+
const ElementsCache = () => {
28+
const { ui } = useUiContext()
29+
const { interfaceSettings } = useSettingsContext()
30+
const [content, setContent] = useState([])
31+
32+
const extractValues = (entry) => {
33+
const result = { id: "extra_content_" + entry.id };
34+
entry.value.forEach(param => {
35+
result[param.name] = param.value;
36+
});
37+
return result;
38+
};
39+
console.log("ElementsCache is rendering")
40+
useEffect(() => {
41+
if (ui.ready && interfaceSettings.current?.settings?.extracontents) {
42+
//console.log("ElementsCache can now be created")
43+
const isEnabled = useUiContextFn.getValue("showextracontents")
44+
if (!isEnabled) {
45+
console.log("ExtraContent are disabled")
46+
return
47+
}
48+
const isVisibleOnStart = useUiContextFn.getValue("openextrapanelsonstart")
49+
const extraContentSettings = interfaceSettings.current.settings.extracontents;
50+
const extraContentsEntry = extraContentSettings.find(entry => entry.id === 'extracontents');
51+
52+
if (extraContentsEntry?.value?.length > 0) {
53+
const newContent = extraContentsEntry.value.map(entry => {
54+
const item = extractValues(entry)
55+
// console.log(item)
56+
return <ExtraContentItem key={item.id} {...item} isVisibleOnStart={isVisibleOnStart} />
57+
});
58+
setContent(newContent);
59+
}
60+
}
61+
}, [ui.ready, interfaceSettings]);
62+
63+
const memoizedContent = useMemo(() => content, [content]);
64+
65+
return (
66+
<div style="position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible;" id="elementsCache">
67+
{memoizedContent}
68+
</div>
69+
)
70+
}
71+
72+
export default ElementsCache;
73+
74+
const elementsCache = {
75+
76+
isExtraContent: (id) => {
77+
const itemid = "extra_content_" + id
78+
return elementsCache.has(itemid)
79+
},
80+
81+
getRootfromId: (id) => {
82+
return id.replace("extra_content_", "")
83+
},
84+
85+
getIdFromRoot: (id) => {
86+
return "extra_content_" + id
87+
},
88+
89+
has: (id) => {
90+
const cacheHost = document.getElementById("elementsCache")
91+
if (!cacheHost) return false
92+
return cacheHost.querySelector('#' + id) !== null
93+
},
94+
95+
get: (id) => {
96+
const cacheHost = document.getElementById("elementsCache")
97+
if (!cacheHost) return null
98+
return cacheHost.querySelector('#' + id)
99+
}
100+
}
101+
102+
export { ElementsCache, elementsCache }

‎src/components/App/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,23 @@ import {
2828
WsContextProvider,
2929
} from "../../contexts"
3030
import { TargetContextProvider } from "../../targets"
31-
import { ToastsContainer } from "../Toast"
32-
import { ModalContainer } from "../Modal"
31+
import { ContainerHelper } from "../Controls"
3332
import { ContentContainer } from "../../areas"
33+
import { ElementsCache } from "../../areas/elementsCache"
3434

3535
const App = () => {
3636
return (
3737
<div id="app">
38+
3839
<DatasContextProvider>
3940
<TargetContextProvider>
4041
<RouterContextProvider>
4142
<UiContextProvider>
4243
<HttpQueueContextProvider>
4344
<SettingsContextProvider>
4445
<WsContextProvider>
45-
<ToastsContainer id="top_toasts_container"/>
46-
<ModalContainer id="top_modals_container"/>
46+
<ContainerHelper id="top_container" active={true}/>
47+
<ElementsCache />
4748
<ContentContainer />
4849
</WsContextProvider>
4950
</SettingsContextProvider>

‎src/components/Controls/CloseButton.js‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,45 +17,57 @@
1717
*/
1818
import { h } from "preact"
1919
import { useState, useEffect } from "preact/hooks"
20-
2120
import { useUiContext, useUiContextFn } from "../../contexts"
21+
import { eventBus } from "../../hooks/eventBus"
22+
import { elementsCache } from "../../areas/elementsCache"
2223

23-
const isFullScreen = (element) => {
24-
return document.fullscreenElement === element
25-
}
2624

27-
const CloseButton = ({ panelRef, panelId, hideOnFullScreen, callbackfn }) => {
25+
const CloseButton = ({elementId, hideOnFullScreen, onclick }) => {
2826
const { panels } = useUiContext()
2927
const [isFullScreenMode, setIsFullScreenMode] = useState(false)
30-
28+
//at each render, check if the element is fullscreen
3129
useEffect(() => {
32-
const handleFullscreenChange = () => {
33-
setIsFullScreenMode(isFullScreen(panelRef.current))
30+
//Handle fullscreen change event
31+
const handleFullScreenChange = () => {
32+
const element =document.getElementById(elementId)
33+
if ( document.getElementById(elementId)) {
34+
//console.log("Button close Fullscreen state changed for " + elementId)
35+
setIsFullScreenMode(document.fullscreenElement==element)
36+
}
3437
}
35-
36-
document.addEventListener("fullscreenchange", handleFullscreenChange)
37-
38+
//Add event listener to handle fullscreen change
39+
document.addEventListener("fullscreenchange", handleFullScreenChange)
40+
//Remove event listener on unmount
3841
return () => {
3942
document.removeEventListener(
4043
"fullscreenchange",
41-
handleFullscreenChange
44+
handleFullScreenChange
4245
)
4346
}
44-
}, [panelRef])
45-
47+
})
48+
//Hide the button if fullscreen mode is active and hideOnFullScreen is true
4649
if (hideOnFullScreen && isFullScreenMode) {
4750
return null
4851
}
49-
52+
//display the button according to the props
5053
return (
5154
<span
5255
class="btn btn-clear btn-close m-1"
5356
aria-label="Close"
5457
onclick={(e) => {
5558
useUiContextFn.haptic()
56-
panels.hide(panelId)
57-
if (callbackfn) {
58-
callbackfn()
59+
panels.hide(elementId)
60+
console.log("Close button clicked for element " + elementId)
61+
if (elementsCache.isExtraContent(elementId)) {
62+
console.log("emit for root element " + elementsCache.getIdFromRoot(elementId), " isVisible: false")
63+
eventBus.emit('updateState', {id: elementsCache.getIdFromRoot(elementId), isVisible: false, from: "closeButton"})
64+
} else {
65+
console.log("emit for element " + elementId, " isVisible: false")
66+
eventBus.emit('updateState', {id: elementId, isVisible: false, from: "closeButton"})
67+
68+
}
69+
if (onclick) {
70+
onclick()
5971
}
6072
}}
6173
/>

‎src/components/Controls/ContainerHelper.js‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,46 @@ ContainerHelper.js - ESP3D WebUI component file
1818
*/
1919

2020
import { Fragment, h } from "preact"
21-
import { getFullscreenElement } from "../Helpers"
2221
import { ModalContainer } from "../Modal"
2322
import { ToastsContainer } from "../Toast"
23+
import { useState, useEffect, } from "preact/hooks"
24+
import { eventBus } from "../../hooks/eventBus"
2425

25-
const ContainerHelper = (props) => {
26-
const { id } = props
27-
//console.log("ContainerHelper id", id)
28-
const fullScreenElement = getFullscreenElement()
29-
if (!fullScreenElement) {
30-
//console.log("No fullscreen element")
31-
return null
32-
} else {
33-
//console.log("Fullscreen element", fullScreenElement.id)
34-
}
35-
//console.log("ContainerHelper id ", id, " vs fullscreen element id ", fullScreenElement.id)
36-
if (fullScreenElement.id != id) {
37-
return null
38-
}
39-
return (
26+
const ContainerHelper = ({id, active=false}) => {
27+
28+
const [enabled, setEnabled] = useState(active)
29+
//console.log("ContainerHelper id", id ,"active", active)
30+
const listenerId = `listener_containerhelper_${id}`;
31+
useEffect(() => {
32+
const handleUpdateState = (msg) => {
33+
if ('isFullScreen' in msg) {
34+
if (msg.isFullScreen) {
35+
if (id==msg.id) {
36+
setEnabled(true)
37+
} else {
38+
setEnabled(false)
39+
}
40+
} else {
41+
if (id==="top_container") {
42+
setEnabled(true)
43+
} else {
44+
setEnabled(false)
45+
}
46+
}
47+
}
48+
}
49+
eventBus.on("updateState", handleUpdateState, listenerId)
50+
return () => {
51+
//eventBus.off("updateState", handleUpdateState,listenerId)
52+
}})
53+
54+
55+
if (enabled)return (
4056
<Fragment>
41-
<ModalContainer id={"modal_" + id} />
42-
<ToastsContainer id={"toast_" + id} />
57+
<ModalContainer />
58+
<ToastsContainer />
4359
</Fragment>
4460
)
61+
return null
4562
}
4663
export default ContainerHelper

0 commit comments

Comments
 (0)