LOE
League of Extraordinary FoundryVTT DevelopersTyphonJS (Michael)

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
TM
TyphonJS (Michael)•577d ago
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.
TM
TyphonJS (Michael)•577d ago
UU
Unknown User•577d ago
TM
TyphonJS (Michael)•576d ago
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.
UU
Unknown User•573d ago
TM
TyphonJS (Michael)•573d ago
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...
Want results from more Discord servers?
Add your server
More Posts
Package jam judge signup threadPackage jam judge signup thread (free league points inside)git filter troubleshootingI'm troubleshooting a new setup that my code contributors can benefit from. I'm using a .gitconfig fmultiroll damage roll messagesMessing with multiroll chat message in v10❓About Commissions**Do not post commissions in this thread.** This thread is for discussing the commissions process, gIssue Submission ToolI'm looking for suggestions for free ticket submission without signing into GitHub that go beyond BuMM+, manifest+, attributions, and moreWe can make a thread to keep the MM+ discussion seperate if you'd likeGlitterSuppose someone wanted to make a module which created a stylistic ~~defect~~ enhancement that never Here s an example No template data inHere's an example. No template data in the actor object, but the object is associated with a templatRolling Hooks**Rolling Hooks!** I am working on a couple of additions to one of the upcoming version of 5e to addWeight MRSure.2.0.0 explorationFrom Atropos in the mothership (in v10 Feedback) > Hello folks, for those of you testing V10 using tElectron ViteIt loads at least.early v10 compat testing@dnd5e - No action required Work is being done on fixing the core system compatibility with v10 in module.json helpYou have no manifest or download fields.TyphonJS Runtime Library - RC 0.0.12The TyphonJS Runtime Library / TRL release candidate version 0.0.12 is now available. This is a massCypress FunYeah, unfortunately it ain't that simple 😅 Cypress, like you say, automatically retries things, andpreUpdateHook questionHey all, question for anyone who has a sec. I'm trying to use `preCreateActor` to add rolled values spitballing about jest mocksok. ok. ok. pure spitballing theory here. All the client side source exists in esmodule form (hopef