PopOut!
Just starting a thread here for some discussion of "PopOut!" module in relation to my UI library / TRL / Svelte.... I can make it work somewhat, but would like to increase the ergonomics of that support to provide as clean of a solution as possible vs hacking it. Makes sense for discussion here rather than posting an issue on the repo quite yet. Tagging module author @infinite_entropy
6 Replies
So, I have done some initial engineering analysis of what it would take to get this working and would just like to discuss a bit.
A main sticking point that could use a small mod in the module is that my UI library for the app header uses "pointerdown" / pointer events and the injected "popout" button uses "click" the event handling in my UI library will already have processed the pointer down event and stop the event processing before "click" is processed. Simple small mod that shouldn't cause any issues is changing this listener to "pointerdown" instead of "click".
https://github.com/League-of-Foundry-Developers/fvtt-module-popout/blob/master/popout.js#L235
Basically it comes down to a few things insofar as better marking the app / div element as popped out. I can short circuit the parts of TRL that need to be shut off like the "advanced position" handling and draggable support from my UI library, but I'm doing that by detecting if the
width of the main app div is 100%. It would be great if a class could be added to that main div to indicate popped out state instead as it feels a little hacky doing this switch on just width 100%.
The other thing that causes an issue is that TRL / svelte-standard and additional component library injects a dynamic root stylesheet with CSS variables and I'd need a way to respond to the new browser window loading and do that injection.
I'll have to take a look at the hooks provided and see if that is an avenue for some of the above. I'll report back soon.
Yeah, so on a little further inspection of the popout module code. I'd like to find out if another lifecycle hook could be added before the app.setPosition call, so that I can disable the things I need to disable in my UI library cleanly:
https://github.com/League-of-Foundry-Developers/fvtt-module-popout/blob/master/popout.js#L710
// popout is the new browser window created.
Maybe a hook like Hooks.callAll("PopOut:loading", app, node, popout);
Added around line 699: https://github.com/League-of-Foundry-Developers/fvtt-module-popout/blob/master/popout.js#L699
It probably wouldn't be a bad idea to include the popout / browser window in all other lifecycle hooks as applicable as well.
OK I got everything working... There are a few mods to the popout module. Nothing major.
As mentioned the "click" event change to "pointerdown" on line 235 (does not affect standard FVTT apps):
https://github.com/League-of-Foundry-Developers/fvtt-module-popout/blob/master/popout.js#L235
Addition of a new lifecycle hook to allow my UI library to properly shutdown resources for the popped out state and add dynamic style sheet / CSS variables to the new browser window:
Add: Hooks.callAll("PopOut:loading", app, app.element[0], popout); at line 579:
https://github.com/League-of-Foundry-Developers/fvtt-module-popout/blob/master/popout.js#L579
And one more change. Removal of line 824 in the app.close override function on 824:
https://github.com/League-of-Foundry-Developers/fvtt-module-popout/blob/master/popout.js#L824
return oldClose.apply(app, args);
There is no need to invoke the original close method here as popout.close() just above also will trigger the original close callback after the popped out browser window is closed in the popped out window unload event here:
https://github.com/League-of-Foundry-Developers/fvtt-module-popout/blob/master/popout.js#L643
I have a different close method in my UI library that is similar to core.. I can't decide if it is a Svelte thing as otherwise I get a hung window. This removal of return oldClose.apply(app, args); doesn't affect the stock Foundry Application close behavior from either pressing the close button in the app or on the popped out browser window.
--------------------------------------------
With these changes essential support for popping out TRL / Svelte applications is achieved with handling just these 3 hooks:
https://github.com/typhonjs-fvtt-lib/svelte/blob/main/src/application/index.js#L9-L24
https://github.com/typhonjs-fvtt-lib/svelte-standard/blob/main/src/component/standard/index.js#L66-L75
As things go handling dialogs would require dropping of the instanceof check for Dialog as it's a different class in my UI library... Also my UI library supports fully modal dialogs and the modal state is applied instantly to the main browser window. All in all though having things for normal TRL / Svelte apps being able to be popped out is neat.
I did all this investigation on request of a developer using TRL. So there is interest in getting this working. It's all ready on my side.Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
OK.. Submitted PR here: https://github.com/League-of-Foundry-Developers/fvtt-module-popout/pull/89
Given that the module has a dependency warning / already has a PR to fix that it seems like this module can accept both PRs and do a release.
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Excellent... Glad this can help multiple use cases; just like I need to inject CSS variables / dynamic style sheet I imagine that is a similar use case on your side. Hopefully
Posnet can take a look when back from holiday...