strix/x0
strix/x0
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: locale and fixed some debouncing stuff

Browse source
This commit is contained in:
Strix 2023-12-24 03:05:20 +01:00
parent 75bf105e98
commit de41ed3306
No known key found for this signature in database
GPG key ID: 5F35B3B8537287A7
5 changed files with 89 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
modules/copy.js
View file

@ -1,10 +1,21 @@
// [x-copy-query="<query selector>"] // [x-copy-query="<query selector>"]
// [x-inner-text] - will use innerText // [x-inner-text] - will use innerText
document.querySelectorAll("[x-copy-query]") (() => {
function updateCopy() {
document.querySelectorAll("[x-copy-query]:not([x1-copy-uuid])")
.forEach(e => { .forEach(e => {
let uuid = new Date().getTime().toString(36);
e.setAttribute("x1-copy-uuid", uuid);
if (e.hasAttribute("x-inner-text")) { if (e.hasAttribute("x-inner-text")) {
e.innerText = document.querySelector(e.getAttribute("x-copy-query")).innerHTML e.innerText = document.querySelector(e.getAttribute("x-copy-query")).innerHTML
} else { } else {
e.innerHTML = document.querySelector(e.getAttribute("x-copy-query")).innerHTML e.innerHTML = document.querySelector(e.getAttribute("x-copy-query")).innerHTML
} }
}) })
}
window.x0?.registerModuleUpdateHook("copy", updateCopy);
window.x0?.registerModuleRemoveHook("copy", () => {
document.querySelectorAll("[x-copy-query]").forEach(e => e.innerHTML = "");
});
})()

34
modules/locale.js Normal file
View file

@ -0,0 +1,34 @@
// [x-locale-key="<key>"]
// html[x1-locale-file] -
// html[x1-locale-watch] - watch document for changes and update
(async () => {
if (!document.querySelector("html").hasAttribute("x1-locale-file")) return;
let backupElements = window.x0?.registerStorage("locale") ?? {};
let locale = (await (await fetch(document.querySelector("html").getAttribute("x1-locale-file"))).json()) ?? {};
const getValueFromPath = (obj, path) => path.split(".").reduce((obj, key) => obj && obj[key], obj);
function updateLocale() {
document.querySelectorAll("[x-locale-key]:not([x1-locale-uuid])")
.forEach(e => {
let uuid = new Date().getTime().toString(36);
e.setAttribute("x1-locale-uuid", uuid);
backupElements[uuid] = e.cloneNode();
e.innerHTML = getValueFromPath(locale, e.getAttribute("x-locale-key"));
})
}
updateLocale();
if (document.querySelector("html").hasAttribute("x1-locale-watch"))
document.querySelector("html").onchange = updateLocale;
window.x0?.registerModuleUpdateHook("locale", updateLocale);
window.x0?.registerModuleRemoveHook("locale", (s) => {
Object.keys(s)
.forEach(uuid => {
document.querySelector(`[x1-locale-uuid="${uuid}"]`).outerHTML = s[uuid].outerHTML;
})
})
})()

23
test.html
View file

@ -1,22 +1,27 @@
<html x0-mods="copy,http" x0-module-root="./modules/"> <html
x0-mods="locale,copy,http"
x0-module-root="./modules/"
x0-init="false"
x1-locale-file="./test.json"
x1-locale-watch
>
<body> <body>
<button onclick="window.x0.update()">Update x0</button>
<input type="text" name="text" id="text">
<h1 x-locale-key="main.greeting"></h1>
<div> <div>
<h2>Copy</h2> <h2 x-locale-key="copy-section.header"></h2>
<div id="ex"> <div id="ex">
<span>Original content</span> <span x-locale-key="copy-section.content-span"></span>
</div> </div>
<div x-inner-text x-copy-query="#ex"></div> <div x-copy-query="#ex"></div>
</div> </div>
<div> <div>
<h2>Get</h2> <h2 x-locale-key="http-section.header"></h2>
<pre x-inner-text x-get="./test.html" x-get-refresh=5000></> <pre x-inner-text x-get="./test.html" x-get-refresh=5000></>
</div> </div>
<div>
<button onclick="window.x0.update()">Update x0</button>
</div>
</body> </body>
<script src="./x0.js"></script> <script src="./x0.js"></script>

12
test.json Normal file
View file

@ -0,0 +1,12 @@
{
"main": {
"greeting": "Welcome to the test page!"
},
"copy-section": {
"header": "Copy",
"content-span": "Original Content"
},
"http-section": {
"header": "http"
}
}

15
x0.js
View file

@ -10,20 +10,19 @@ if (window['x0']) {
} }
class x0 { class x0 {
#rootElement; #rootElement = document.querySelector("html");
#cfg = { #cfg = {
moduleSource: "./x0/modules/", moduleSource: "./x0/modules/",
modules: [], modules: [],
init: true init: true
} }
#hooks = { #hooks = {
moduleRemove: {} moduleRemove: {},
moduleUpdate: {}
} }
#moduleStorage = {}; #moduleStorage = {};
constructor(rootElement = document.querySelector("html")) { constructor() {
this.#rootElement = rootElement;
this.#updateConfig(); this.#updateConfig();
if (this.#cfg.init) if (this.#cfg.init)
this.#updateScriptElements(); this.#updateScriptElements();
@ -71,6 +70,11 @@ class x0 {
this.#hooks.moduleRemove[module] = callback; this.#hooks.moduleRemove[module] = callback;
} }
registerModuleUpdateHook(module, callback) {
if (this.#hooks.moduleUpdate[module]) return null;
this.#hooks.moduleUpdate[module] = callback;
}
/** registerStorage /** registerStorage
* Register a storage. * Register a storage.
* This can only happen once per module. * This can only happen once per module.
@ -84,6 +88,7 @@ class x0 {
update() { update() {
this.#updateConfig(); this.#updateConfig();
this.#updateScriptElements(); this.#updateScriptElements();
Object.values(this.#hooks.moduleUpdate).forEach(f => f());
} }
} }