let sets work across iframes
This commit is contained in:
“chrisshank”
parent
8e898b526f
commit
2b240c185a
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Falling Sand Demo</title>
|
||||
<style>
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
folk-shape {
|
||||
position: absolute;
|
||||
background-color: rgba(119, 119, 119, 1);
|
||||
border-radius: 2px;
|
||||
|
||||
&:has(iframe) {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.key-helper {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
font-family: monospace;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.key-number {
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 25px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* margins cause infinite resize loops */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="key-helper">
|
||||
<div><span class="key-number">1</span> Smoke</div>
|
||||
<div><span class="key-number">2</span> Water</div>
|
||||
<div><span class="key-number">3</span> Lava</div>
|
||||
<div><span class="key-number">4</span> Sand</div>
|
||||
<div><span class="key-number">5</span> Plant</div>
|
||||
<div><span class="key-number">6</span> Stone</div>
|
||||
<div><span class="key-number">7</span> Wall</div>
|
||||
<div><span class="key-number">8</span> Ice</div>
|
||||
<div><span class="key-number">9</span> Fire</div>
|
||||
</div>
|
||||
|
||||
<folk-sand sources="iframe folk-shape">
|
||||
<p>Sanding</p>
|
||||
<folk-shape x="400" y="250" width="60" height="90"></folk-shape>
|
||||
<folk-shape x="200" y="400" width="100" height="100"></folk-shape>
|
||||
<folk-shape x="500" y="100" width="30" height="70"></folk-shape>
|
||||
</folk-sand>
|
||||
|
||||
<folk-shape x="10" y="100" width="250" height="400">
|
||||
<iframe src="./sticky-html-arrow.html"></iframe>
|
||||
</folk-shape>
|
||||
|
||||
<folk-shape x="300" y="100" width="250" height="400">
|
||||
<iframe id="frame2" src="./sticky-html-arrow.html"></iframe>
|
||||
</folk-shape>
|
||||
|
||||
<script type="module">
|
||||
import '../src/standalone/folk-shape.ts';
|
||||
import '../src/standalone/folk-sand.ts';
|
||||
|
||||
const sandElement = document.querySelector('folk-sand');
|
||||
const keyNumbers = document.querySelectorAll('.key-number');
|
||||
|
||||
// Reset all key styles
|
||||
function resetKeyStyles() {
|
||||
keyNumbers.forEach((key) => {
|
||||
key.style.background = 'rgba(255, 255, 255, 0.2)';
|
||||
});
|
||||
}
|
||||
|
||||
sandElement.onMaterialChange = (materialNumber) => {
|
||||
resetKeyStyles();
|
||||
const activeKey = keyNumbers[materialNumber - 1];
|
||||
if (activeKey) {
|
||||
activeKey.style.background = 'rgba(255, 255, 255, 0.6)';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
folk-shape {
|
||||
border: 1px solid black;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(119, 119, 119, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { property, state } from '@lit/reactive-element/decorators.js';
|
||||
import { ClientRectObserverEntry } from './common/client-rect-observer.ts';
|
||||
import { FolkElement } from './common/folk-element.ts';
|
||||
import { FolkObserver } from './common/folk-observer.ts';
|
||||
import { FolkObserver, parseDeepCSSSelector } from './common/folk-observer.ts';
|
||||
import { css, CSSResultGroup, PropertyValues } from '@lit/reactive-element';
|
||||
|
||||
const folkObserver = new FolkObserver();
|
||||
|
|
@ -64,15 +64,16 @@ export class FolkBaseSet extends FolkElement {
|
|||
|
||||
#observeSources() {
|
||||
const childElements = new Set(this.children);
|
||||
const elements = this.sources ? document.querySelectorAll(this.sources) : [];
|
||||
const sourceElements = new Set(elements).union(childElements);
|
||||
const elements = this.sources ? parseDeepCSSSelector(this.sources) : [];
|
||||
const elementsMap = new Map(elements);
|
||||
const sourceElements = new Set(elements.map((el) => el[0])).union(childElements);
|
||||
const elementsToObserve = sourceElements.difference(this.sourceElements);
|
||||
const elementsToUnobserve = this.sourceElements.difference(sourceElements);
|
||||
|
||||
this.unobserveSources(elementsToUnobserve);
|
||||
|
||||
for (const el of elementsToObserve) {
|
||||
folkObserver.observe(el, this.#sourcesCallback);
|
||||
folkObserver.observe(el, this.#sourcesCallback, { iframeSelector: elementsMap.get(el) });
|
||||
}
|
||||
|
||||
this.sourceElements = sourceElements;
|
||||
|
|
|
|||
Loading…
Reference in New Issue