diff --git a/modules/copy.js b/modules/copy.js index da2fea3..1fc3c7d 100644 --- a/modules/copy.js +++ b/modules/copy.js @@ -1,10 +1,21 @@ // [x-copy-query=""] // [x-inner-text] - will use innerText -document.querySelectorAll("[x-copy-query]") - .forEach(e => { - 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 - } - }) \ No newline at end of file +(() => { + function updateCopy() { + document.querySelectorAll("[x-copy-query]:not([x1-copy-uuid])") + .forEach(e => { + let uuid = new Date().getTime().toString(36); + 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 = ""); + }); +})() \ No newline at end of file diff --git a/modules/locale.js b/modules/locale.js new file mode 100644 index 0000000..238be21 --- /dev/null +++ b/modules/locale.js @@ -0,0 +1,34 @@ +// [x-locale-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; + }) + }) +})() \ No newline at end of file diff --git a/test.html b/test.html index 8fb1f29..7982a4b 100644 --- a/test.html +++ b/test.html @@ -1,22 +1,27 @@ - - + + + +

-

Copy

+

- Original content +
-
+
-

Get

+
-
- -
diff --git a/test.json b/test.json new file mode 100644 index 0000000..13f2a75 --- /dev/null +++ b/test.json @@ -0,0 +1,12 @@ +{ + "main": { + "greeting": "Welcome to the test page!" + }, + "copy-section": { + "header": "Copy", + "content-span": "Original Content" + }, + "http-section": { + "header": "http" + } +} \ No newline at end of file diff --git a/x0.js b/x0.js index b477b13..1990ad8 100644 --- a/x0.js +++ b/x0.js @@ -10,20 +10,19 @@ if (window['x0']) { } class x0 { - #rootElement; + #rootElement = document.querySelector("html"); #cfg = { moduleSource: "./x0/modules/", modules: [], init: true } #hooks = { - moduleRemove: {} + moduleRemove: {}, + moduleUpdate: {} } #moduleStorage = {}; - constructor(rootElement = document.querySelector("html")) { - this.#rootElement = rootElement; - + constructor() { this.#updateConfig(); if (this.#cfg.init) this.#updateScriptElements(); @@ -71,6 +70,11 @@ class x0 { this.#hooks.moduleRemove[module] = callback; } + registerModuleUpdateHook(module, callback) { + if (this.#hooks.moduleUpdate[module]) return null; + this.#hooks.moduleUpdate[module] = callback; + } + /** registerStorage * Register a storage. * This can only happen once per module. @@ -84,6 +88,7 @@ class x0 { update() { this.#updateConfig(); this.#updateScriptElements(); + Object.values(this.#hooks.moduleUpdate).forEach(f => f()); } }