feat: locale and fixed some debouncing stuff
This commit is contained in:
parent
75bf105e98
commit
de41ed3306
5 changed files with 89 additions and 22 deletions
|
@ -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]")
|
(() => {
|
||||||
.forEach(e => {
|
function updateCopy() {
|
||||||
if (e.hasAttribute("x-inner-text")) {
|
document.querySelectorAll("[x-copy-query]:not([x1-copy-uuid])")
|
||||||
e.innerText = document.querySelector(e.getAttribute("x-copy-query")).innerHTML
|
.forEach(e => {
|
||||||
} else {
|
let uuid = new Date().getTime().toString(36);
|
||||||
e.innerHTML = document.querySelector(e.getAttribute("x-copy-query")).innerHTML
|
e.setAttribute("x1-copy-uuid", uuid);
|
||||||
}
|
if (e.hasAttribute("x-inner-text")) {
|
||||||
})
|
e.innerText = document.querySelector(e.getAttribute("x-copy-query")).innerHTML
|
||||||
|
} else {
|
||||||
|
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
34
modules/locale.js
Normal 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
23
test.html
|
@ -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
12
test.json
Normal 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
15
x0.js
|
@ -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());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue