js/j13observer.php
<html>
<head>
<title> <?php echo basename(__file__, '.php'); ?> </title>
<style type="text/css">
#layer {position:absolute; top:12em; left: 12em; width: 340; height:246; border: 1em solid red; padding-left: 2em;
background-image: url("pn.jpg"); background-repeat: no-repeat; background-color: yellow; }
</style>
<script type="text/javascript">
var cc = 0;
function out(msg) {
var pa = document.getElementById("outUl1");
var nd = document.createElement('li');
nd.innerHTML = ++cc + ". " + msg;
pa.prepend(nd);
}
function obs(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'attributes') {
var t = mutation.attributeName + ' attribute was modified for id=' + mutation.target.id
+ ", chk " + mutation.target.checked
+ ", disp=" + mutation.target.style.display + ', css=' + mutation.target.style.cssText;
/* for (var v in mutation)
t = t + ', ' + v + '=' + mutation[v]; */
out(t);
} else {
out("obs " + mutation.attributeName);
}
}
}
function observe() {
var ta = document.getElementById("target");
out("observe target display " + ta.style.display);
var config = { attributes: true }
var observer = new MutationObserver(obs);
observer.observe(ta, config);
swapRegister('outUl1', 'outUl2');
}
function moveChi(frId, toId) {
var fr = document.getElementById(frId);
var to = document.getElementById(toId);
while (fr.childNodes.length > 0)
to.appendChild(fr.childNodes[0]);
}
var swapList = [];
function swap(mutationsList, observer) {
for(var mut of mutationsList) {
if (mut.type != 'attributes') {
out("obs " + mut.attributeName);
} else {
var lst = swapList.find(l => l.find(e => e == mut.target));
out('swap ' + mut.attributeName + ' modified for id=' + mut.target.id
+ ", disp=" + mut.target.style.display + ' found list ' + lst.toString() + ' => ' + lst.map(e => e.style.display).toString());
var to = lst.find(e => e.style.display != 'none');
if (to === undefined) {
out('no element with display');
} else {
for (var e of lst) {
if (e === to) {
out(e.id + " is to " + e.style.display);
} else if (e.style.display != 'none' ) {
out(e.id + " is displayed " + e.style.display);
} else {
out(e.id + " is from " + e.style.display + ' to ' + to.id);
while (e.childNodes.length > 0)
to.appendChild(e.childNodes[0]);
}
}
}
}
}
}
function swapRegister(...ids) {
var els = ids.map(i => document.getElementById(i));
swapList.push(els);
out('reg ids ' + ids.toString() + " els " + els.toString() + ', dis ' + els.map(e => e.style.display == '' ? 'empty' : e.style.display).toString());
var config = { attributes: true }
els.forEach(e => {
(new MutationObserver(swap)).observe(e, config);
});
}
</script>
</head>
<body>
<h1 >attribue observer and move children</h1>
<table>
<tr><td><input type="button" value="output" onclick='out("button clicked");'S />
<input type="button" value="observe" onclick="observe();" /> </td><td>start observation for target </td></tr>
<tr><td>
<input type="checkbox" value="target" id="target" onInput="out('target input '+ getElementById('target').checked);">target</input>
</td><td>observe input and attribute change (function obs)<td/></tr>
<tr><td><input type="button" value="hide" onclick='document.getElementById("target").hidden = true;' />
<input type="button" value="show" onclick='document.getElementById("target").hidden = false;' />
<input type="button" value="display none" onclick='document.getElementById("target").style.display = "none";' />
<input type="button" value="display inline" onclick='document.getElementById("target").style.display = "inline";' /></td>
<td>actions on target</td></tr>
<tr><td><input type="button" value="move 1 to 2" onclick='moveChi("outUl1","outUl2");' />
<input type="button" value="move 2 to 1" onclick='moveChi("outUl2","outUl1");' />
</td><td>moveChi to move the childern between the two lists</td></tr>
<tr><td><input type="button" value="1 noDisp" onclick='document.getElementById("outUl1").style.display = "none";' />
<input type="button" value="1 disp" onclick='document.getElementById("outUl1").style.display = "block";' />
<input type="button" value="2 noDisp" onclick='document.getElementById("outUl2").style.display = "none";' />
<input type="button" value="2 disp" onclick='document.getElementById("outUl2").style.display = "block";' />
</td><td>change display for outUl1 and outUl2</td></tr>
</table>
<h1>outUl1 output 1</h1>
<ul id=outUl1>
<li>outUl1 output list anfang</li>
</ul>
<h1>outUl2 output 2</h1>
<ul id=outUl2>
<li>outUl2 output list anfang</li>
</ul>
<h1 id="src">Source <?php echo __file__; ?> </h1>
<?php highlight_file(__file__) ?>
</body>
</html>