2f:Tcb3,async function addPopupHelp (element, options) { let {anchor = 'right', offsetx = 0, offsety = 0, contents = html`

`, insetCloseIcon = false, insetTop = 0, insetRight = 0, popx = 0, popy = 0} = options; let modalBkg; let oneTimeSetup = () => { modalBkg = document.getElementById("modalBkg"); if (modalBkg) return; document.body.append(html` `) modalBkg = html``; document.body.append(modalBkg); }; oneTimeSetup(); // Retrieve the element that will receive the help anchor and its geometry //let element = document.getElementById(id); let {x,y,width,height} = element.getBoundingClientRect(); // Retrieve the parent and its position let parent = element.parentNode; let {x:px,y:py} = parent.getBoundingClientRect(); // Relative position of element wrt parent let [dx,dy] = [x-px+offsetx,y-py+offsety]; // Position the anchor image wrt element let img = await FileAttachment("help_outline-24px.svg").image(); img.setAttribute("class", "helpIcon"); parent.append(img); let anchorx = dx, anchory = dy; switch(anchor) { case 'right': anchorx = dx+width; break; case 'ne': anchorx = (dx+width-24); break; } img.style.top = anchory+'px'; img.style.left = anchorx+'px'; let popbox = html`

`; let img2 = await FileAttachment("cancel-24px.svg").image(); img2.setAttribute("class","closeIcon"); let setPopupPos = function (popx, popy) { popbox.style.top = (anchory+popy)+"px"; popbox.style.left = (anchorx+popx)+"px"; } setPopupPos(popx,popy) let setPopupContents = function (contents) { while( popbox.hasChildNodes() ){ popbox.removeChild(popbox.lastChild); } popbox.append(contents); if (insetCloseIcon) { img2.style.position = 'absolute'; img2.style.top = `${insetTop}px`; img2.style.right = `${insetRight}px`; } else { contents.classList.add("popcontents"); } popbox.append(img2); } setPopupContents(contents) parent.append(popbox); img.onclick = (e)=> { popbox.style.display="block"; modalBkg.style.display="block"; } img2.onclick = (e)=> { popbox.style.display="none"; modalBkg.style.display="none" } return {setPopupPos: setPopupPos, setPopupContents: setPopupContents, popbox:popbox } }30:[{"id":"76ed507491670e4a9c7366745e6d231b67f3e5a2ea5030c75ae26f64b03096a87840592ddc90be959ff18ef004a2d5cd465d03b9673a67970987706fe3b3b10f","href":"https://static.observableusercontent.com/files/76ed507491670e4a9c7366745e6d231b67f3e5a2ea5030c75ae26f64b03096a87840592ddc90be959ff18ef004a2d5cd465d03b9673a67970987706fe3b3b10f","name":"help_outline-24px.svg","type":"image/svg+xml","lastModified":1680021317532.3,"size":381},{"id":"be2ecfca23bfdbe4773c025c3a6ceccaa2e550d3367d16c2d71fcee2bab8115a08508227e873e67fe34e76e1eef09130b03bbdcc090837524b2a18f871adb32b","href":"https://static.observableusercontent.com/files/be2ecfca23bfdbe4773c025c3a6ceccaa2e550d3367d16c2d71fcee2bab8115a08508227e873e67fe34e76e1eef09130b03bbdcc090837524b2a18f871adb32b","name":"cancel-24px.svg","type":"image/svg+xml","lastModified":1680021317532.3,"size":313},{"id":"117427bc4b5a8321c6e4304ee3a5f8d9c2b56f5f9b0b19fc00dab93f17712a8b4edb525338013cba114d15b97893043a0a402e5ca8c7a0525a7f484b1b532966","href":"https://static.observableusercontent.com/files/117427bc4b5a8321c6e4304ee3a5f8d9c2b56f5f9b0b19fc00dab93f17712a8b4edb525338013cba114d15b97893043a0a402e5ca8c7a0525a7f484b1b532966","name":"popup diorama3@5.svg","type":"image/svg+xml","lastModified":1680021317532.3,"size":8363}] 2d:{"title":"Popup Help","cells":[{"id":0,"value":"md`# Popup Help`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"page = html`\n

\n Some contents here
\n

\n Some more contents here\n

\n And here\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"css = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"removePopups = function (page) {\n page.querySelectorAll(\".popbox, .helpIcon\").forEach((el)=> {\n el.remove();\n });\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"popupSvg = {\n let txt = await FileAttachment(\"popup diorama3@5.svg\").image()\n return txt\n return `${txt.substring(txt.search('Explanation for text1 here`,offsetx:20, popx:-40, popy:20})\n addPopupHelp(t2, {anchor:'ne', contents: html`Explanation for text2`})\n let pop = await addPopupHelp(t3, {insetCloseIcon:true, \n insetTop:20, insetRight:20, contents:popupSvg,\n popx:-200, popy:20});\n pop.popbox.style.padding = '0px';\n pop.popbox.style.width = popupSvg.width + 'px';\n pop.popbox.style.height = popupSvg.height + 'px';\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}