jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove deep selector syntax for iframes

This commit is contained in:
“chrisshank” 2024-12-16 21:17:40 -08:00
parent b2d8bb1088
commit 8e898b526f
4 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/cross-iframe-sticky-html-arrow.html
View File

@ -36,7 +36,7 @@
<iframe id="frame2" src="./sticky-html-arrow.html"></iframe> <iframe id="frame2" src="./sticky-html-arrow.html"></iframe>
</folk-shape> </folk-shape>
<folk-rope source="#frame1 >>> #box1" target="#frame2 >>> #box2"></folk-rope> <folk-rope source="iframe#frame1 #box1" target="iframe#frame2 #box2"></folk-rope>
<script type="module"> <script type="module">
import '../src/standalone/folk-shape.ts'; import '../src/standalone/folk-shape.ts';

7
demo/cross-iframe-xanadu-links.html
View File

@ -57,12 +57,9 @@
</head> </head>
<body> <body>
<iframe id="frame1" src="./_xanadu-article.html"></iframe> <iframe id="frame1" src="./_xanadu-article.html"></iframe>
<iframe id="frame2" src="./_xanadu-article.html"></iframe> <iframe id="frame2" src="./_xanadu-article.html"></iframe>
<folk-xanadu source="iframe#frame1 p:nth-child(2)" target="iframe#frame2 p:nth-child(8)"></folk-xanadu>
<folk-xanadu source="#frame1 >>> p:nth-child(2)" target="#frame2 >>> p:nth-child(8)"></folk-xanadu> <folk-xanadu source="iframe#frame1 p:nth-child(6)" target="iframe#frame2 p:nth-child(4)"></folk-xanadu>
<folk-xanadu source="#frame1 >>> p:nth-child(6)" target="#frame2 >>> p:nth-child(4)"></folk-xanadu>
<script type="module"> <script type="module">
import '../src/standalone/folk-xanadu.ts'; import '../src/standalone/folk-xanadu.ts';

16
src/common/folk-observer.ts
View File

@ -233,6 +233,18 @@ export class FolkObserver {
} }
} }
export function parseDeepCSSSelector(selector: string): string[] { const regex = /(.*iframe.*)\s+(.*)/;
return selector.split('>>>').map((s) => s.trim());
export function parseDeepCSSSelector(selectorList: string): [Element, string | undefined][] {
const array: [Element, string | undefined][] = [];
for (const selector of selectorList.split(/,(?![^()]*\))/g)) {
const [, elementSelector, iframeSelector] = regex.exec(selector) || [undefined, selector, undefined];
document.querySelectorAll(elementSelector).forEach((el) => {
array.push([el, iframeSelector]);
});
}
return array;
} }

18
src/folk-base-connection.ts
View File

@ -52,9 +52,12 @@ export class FolkBaseConnection extends FolkElement {
if (vertex) { if (vertex) {
this.sourceRect = DOMRectReadOnly.fromRect(vertex); this.sourceRect = DOMRectReadOnly.fromRect(vertex);
} else { } else {
const [selector, iframeSelector] = parseDeepCSSSelector(this.source); const [el] = parseDeepCSSSelector(this.source);
this.#sourceIframeSelector = iframeSelector;
this.sourceElement = document.querySelector(selector); if (el !== undefined) {
this.sourceElement = el[0];
this.#sourceIframeSelector = el[1];
}
} }
} }
@ -76,9 +79,12 @@ export class FolkBaseConnection extends FolkElement {
if (vertex) { if (vertex) {
this.targetRect = DOMRectReadOnly.fromRect(vertex); this.targetRect = DOMRectReadOnly.fromRect(vertex);
} else { } else {
const [selector, iframeSelector] = parseDeepCSSSelector(this.target); const [el] = parseDeepCSSSelector(this.target);
this.#targetIframeSelector = iframeSelector;
this.targetElement = document.querySelector(selector); if (el !== undefined) {
this.targetElement = el[0];
this.#targetIframeSelector = el[1];
}
} }
} }