Skip to content
Snippets Groups Projects
Verified Commit 9b04e9c1 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

refactor: monitor all attribute changes

parent 86675435
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 163 additions and 31 deletions
application/source/dom/customelement.mjs
+ 24
− 11
View file @ 9b04e9c1
......@@ -203,9 +203,9 @@ class CustomElement extends HTMLElement {
this[internalSymbol] = new ProxyObserver({
options: initOptionsFromAttributes(this, extend({}, this.defaults)),
});
initAttributeChangeMutationObserver.call(this);
initOptionObserver.call(this);
this[initMethodSymbol]();
initOptionObserver.call(this);
initAttributeChangeMutationObserver.call(this);
}
/**
......@@ -229,6 +229,28 @@ class CustomElement extends HTMLElement {
return [ATTRIBUTE_OPTIONS, ATTRIBUTE_DISABLED];
}
/**
*
* @param attribute
* @param callback
* @returns {Monster.DOM.CustomElement}
*/
addAttributeObserver(attribute, callback) {
validateFunction(callback);
this[attributeObserverSymbol][attribute] = callback;
return this;
}
/**
*
* @param attribute
* @returns {Monster.DOM.CustomElement}
*/
removeAttributeObserver(attribute) {
delete this[attributeObserverSymbol][attribute];
return this;
}
/**
* Derived classes can override and extend this method as follows.
*
......@@ -611,14 +633,6 @@ class CustomElement extends HTMLElement {
function initAttributeChangeMutationObserver() {
const self = this;
if (self[attributeObserverSymbol] === undefined) {
self[attributeObserverSymbol] = {};
}
if(Object.keys(self[attributeObserverSymbol]).length === 0) {
return;
}
new MutationObserver(function (mutations) {
for (const mutation of mutations) {
if (mutation.type === "attributes") {
......@@ -628,7 +642,6 @@ function initAttributeChangeMutationObserver() {
}).observe(self, {
attributes: true,
attributeOldValue: true,
attributeFilter: Object.keys(self[attributeObserverSymbol]),
});
}
......
development/playground/dom-arguments/index.html 0 → 100644
+ 29
− 0
View file @ 9b04e9c1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popper Button</title>
<script src="main.mjs" type="module"></script>
</head>
<body>
<a href="../">Back</a>
<main>
<h1>Updater</h1>
<script type="application/json" data-monster-role="translations">
{
"theListContainsNoEntries": "translation1",
"key2": {
"other": "translation2"
},
"multi": {
"two": "translation3"
}
}
</script>
<monster-1>Monster1</monster-1>
</main>
</body>
</html>
development/playground/dom-arguments/main.mjs 0 → 100644
+ 70
− 0
View file @ 9b04e9c1
import {Fetch} from '../../../application/source/i18n/providers/fetch.mjs';
import {Updater} from '../../../application/source/dom/updater.mjs';
import {
attributeObserverSymbol,
CustomElement,
registerCustomElement
} from '../../../application/source/dom/customelement.mjs';
import {domReady} from '../../../application/source/dom/ready.mjs';
import {Embed} from '../../../application/source/i18n/providers/embed.mjs';
import {ATTRIBUTE_OPTIONS_SELECTOR} from "../../../application/source/monster.mjs";
const initMethodSymbol = Symbol.for("@schukai/monster/dom/@@initMethodSymbol");
class Monster1 extends CustomElement {
constructor() {
super();
}
get defaults() {
return Object.assign(
{},
super.defaults,
{
a: {
b: {
c: "d"
}
}
});
};
[initMethodSymbol]() {
self = this;
console.log("initMethodSymbol");
this[attributeObserverSymbol]["data-monster-option-a-b-c"] = (value) => {
console.log("data-monster-option-a-b-c", value);
self.setOption("a.b.c", value);
};
}
/**
*
* @return {string}
*/
static getTag() {
return "monster-1";
}
}
domReady.then(() => {
const m1 = document.querySelector("monster-1");
console.log(m1);
window.m1 = m1;
// read from scritp tag with id i18n
});
registerCustomElement(Monster1);
development/playground/dom-arguments/translation.json 0 → 100644
+ 4
− 0
View file @ 9b04e9c1
{
"key1": "value1",
"key2": "value2"
}
\ No newline at end of file
development/playground/dom-insert/index.html
+ 8
− 4
View file @ 9b04e9c1
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<script type="module" src="main.mjs"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popper Button</title>
<script src="main.mjs" type="module"></script>
</head>
<body>
<h1>Updater</h1>
<a href="../">Back</a>
<main>
<template id="current">
......@@ -14,6 +18,6 @@
<ul data-monster-insert="current path:a.b" >
</ul>
</div>
</main>
</body>
</html>
development/playground/i18n-control/index.html
+ 20
− 14
View file @ 9b04e9c1
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<script type="module" src="main.mjs"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popper Button</title>
<script src="main.mjs" type="module"></script>
</head>
<body>
<a href="../">Back</a>
<main>
<h1>Updater</h1>
<script type="application/json" data-monster-role="translations">
......@@ -20,5 +25,6 @@
<monster-1>Monster1</monster-1>
</main>
</body>
</html>
development/playground/i18n-updater/updater.html
+ 8
− 2
View file @ 9b04e9c1
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<script type="module" src="updater.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popper Button</title>
<script src="main.mjs" type="module"></script>
</head>
<body>
<a href="../">Back</a>
<main>
<h1>Updater</h1>
<div data-monster-replace="i18n:key1"></div>
<div data-monster-replace="i18n:key2"></div>
</main>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment