FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Feat(Playground): Support load global js and css variables

Browse Source
This commit is contained in:
Fat Snake
2024-11-02 15:27:32 +08:00
parent 451225c1cf
commit 216d3fd41c
14 changed files with 1704 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Playground/Output/Preview/iframe.html
View File

@@ -4,14 +4,14 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Preview</title>
<style id="theme-variable"></style>
<style id="global-css-variable"></style>
</head>
<body>
<script>
window.addEventListener("message", ({ data }) => {
if (data?.type === "UPDATE") {
// Record old styles that need to be removed
const appStyleElement = document.querySelectorAll("style:not(:is(style[id$=\"_oxygen_base_style.css\"], style[id=\"theme-variable\"]))") || [];
const appStyleElement = document.querySelectorAll("style:not(:is(style[id$=\"_oxygen_base_style.css\"], style[id=\"global-css-variable\"]))") || [];
// Remove old app
const appSrcElement = document.querySelector("#appSrc");
@@ -37,8 +37,11 @@
URL.revokeObjectURL(oldSrc);
}
if (data?.type === "THEME") {
document.querySelector("#theme-variable").textContent = data.data.themeSrc;
if (data?.type === "GLOBAL_VARIABLES") {
document.querySelector("#global-css-variable").textContent = data.data.globalCssVariables;
for (const key in data.data.globalJsVariables) {
globalThis[key] = data.data.globalJsVariables[key]
}
}
});
</script>