schoolbox web extension :)
feat(plugins/scrollSegments): hot reload
+33
-7
+33
-7
src/entrypoints/plugins/scrollSegments/index.ts
+33
-7
src/entrypoints/plugins/scrollSegments/index.ts
···
1
-
import { injectInlineStyles } from "@/utils";
1
+
import { dataAttr, injectInlineStyles, setDataAttr, uninjectInlineStyles } from "@/utils";
2
2
import { definePlugin } from "@/utils/plugin";
3
3
import styleText from "./styles.css?inline";
4
+
5
+
const ID = "scrollSegments";
6
+
const PLUGIN_ID = `plugin-${ID}`;
4
7
5
8
export default function init() {
6
9
definePlugin(
7
-
"scrollSegments",
10
+
ID,
8
11
() => {
9
-
const content = document.getElementById("content");
10
-
const footer = document.getElementById("footer");
12
+
const footerCopy = document.querySelector(dataAttr(PLUGIN_ID));
13
+
if (footerCopy) return;
14
+
15
+
// scroll to top to avoid hot reload bug
16
+
window.scrollTo({
17
+
top: 0,
18
+
behavior: "instant",
19
+
});
20
+
21
+
const content = document.querySelector("#content");
22
+
const footer = document.querySelector<HTMLDivElement>("#footer");
23
+
24
+
// add copy of footer to content
11
25
if (content && footer) {
12
-
content.appendChild(footer);
26
+
const clone = footer.cloneNode(true) as HTMLDivElement;
27
+
setDataAttr(clone, PLUGIN_ID);
28
+
content.appendChild(clone);
13
29
}
14
-
injectInlineStyles(styleText, "plugin-scrollSegments");
30
+
31
+
injectInlineStyles(styleText, PLUGIN_ID);
15
32
},
16
-
() => {},
33
+
() => {
34
+
const footerCopy = document.querySelector(dataAttr(PLUGIN_ID));
35
+
if (!footerCopy) return;
36
+
37
+
// remove copy of footer from content
38
+
const content = document.querySelector("#content");
39
+
content?.removeChild(footerCopy);
40
+
41
+
uninjectInlineStyles(PLUGIN_ID);
42
+
},
17
43
["#content", "#footer"],
18
44
);
19
45
}