#Help with Overlay Window Button

1 messages · Page 1 of 1 (latest)

polar bridge
#

Since I'm absolutely horrible at html/js, was hoping someone could share their code or point me in the right direction for adding a (simple?) way to add a "Close for All" button when sharing images with my players in an Overlay window?

Right now, I'm using a macro to close the the Overlay for everyone, so basically just need a way to launch that macro via a button (maybe a white X in the corner of the Overlay, or just clicking anywhere outside the window/image, ala D&D Beyond?)

That would be easier/more convenient than using my current method.

Thanks for any help!

frozen relic
#

You could use an anchor tag with a macroLinkText pointing to your current macro & location, and style as needed using css or inline styling. e.g.

<a class="fakeButton" href="[r: macroLinkText("closeFrameMacro@"+getMacroLocation(), "all", "")]">X</a>
polar bridge
polar bridge
# frozen relic You could use an anchor tag with a `macroLinkText` pointing to your current macr...

Hmm, so I looked online to see some examples for CSS and that search resulted in me adding the following:

    [r: '.close-btn {
        position: absolute;
        top: 5px;
        right: 10px;
        font-weight: bold;
        background-color: transparent;
        border: none;
        font-size: 16px;
        cursor: pointer;
      }
    ']

But it doesn't seem to do anything. The image just displays as before and clicking doesn't do anything. Also, not sure if the command you listed was supposed to show an X, but no X appears, either.

Sorry, I'm a complete noob when it comes to this stuff.

polar bridge
polar bridge
# frozen relic You could use an anchor tag with a `macroLinkText` pointing to your current macr...

Okay, maybe you can help with this, too...

First off, it's working fantastically. Thank you so much!

To make it perfect, I'm trying to get it not pass the mouse click "through" the overlay. The MT wiki page for the overlay roll function states the following:


In case of a mouse click or press, the click is first ran through validateAndPassEvent to see if it should be dispatched to the current zone renderer or not. The validation is done by the webView, which check the value of --pointermap for the html element clicked. If the value is --pointermap:block, the mouse event is not forwarded; if it is --pointermap:pass, it is forwarded, and if it is --pointermap:blockopaque, the transparency of the point clicked determines if the click goes through or not.

But how do I incorporate that into my macro/code to be able to "block" the click from going through the overlay: I tried to add "--pointermap: block;" to my CSS, but didn't do anything. I also tried the CSS standard "pointer-events: auto;" and it didn't stop the click from passing through the overlay, either.

Thanks for any help you might be able to suggest on getting the "--pointermap: block" function to work.

frozen relic
polar bridge
# frozen relic Here is a working example with the "--pointermap: block" https://discord.com/cha...

I think it actually -was- working as intended, but the feature just might not do what I was trying to "block." I was trying to block a click from affecting another overlay that was underneath the current overlay. The pointermap block specifier doesn't seem to prevent that.

Would be nice if we could identify that pointer shouldn't pass beyond a z-index or something, but don't think that's even a thing in html/css.

It looks like I might be able to do it with some JS script, if the MT overlays support functions like "overlay.style.display = 'block';"

Hmm, might have to generate the entire overlay via JS to be able to control click reactions on it. More research to do...

frozen relic