TyphonJSGerark

Embed a DropDown/MenuList made with Svelte

Hello again! 😄 I've been pondering creating a second module for Foundry and a few questions popped up. The idea is to display a Menu/MenuItem using Svelte/TyphonJS when the user clicks on a specific element within a Journal. Now, since the journal is an integral part of Foundry, I'm a bit uncertain about the feasibility of this. Any advice? My initial idea was to trigger the creation of a SvelteApplication ( EmptyApplicationShell ) with an invisible bkg which opens a MenuList. As soon as the MenuItem is selected it will close the app. By doing so I can work in isolation.

TyphonJS (Michael)•256d ago

There is a menu / context menu components and buttons in svelte-standard

Gerark•256d ago

what If a want this menu/context menu to be a bit more custom? My idea is to simulate something similar to the one in the Unreal Blueprints

Gerark•256d ago

Gerark•256d ago

And since I'm explaining this I'm starting to feel more like this is just a normal window/application than a Context menu after all... is this a rubber duck moment? 😅

TyphonJS (Michael)•256d ago

There also is a folder component similar to what I suppose the triangle icon in the pict in svelte-standard You can add your own custom component to the menu provided in svelte-standard.

Gerark•256d ago

yup exactly those are "groups/folders"

TyphonJS (Michael)•256d ago

Using a dynamic array reducer for all of the menu items / search capability is possible as well. It'll still be a bit of custom coding to piece this all together, but should be possible with the tooling available. A good project for a custom component.

Gerark•256d ago

Should I go for using a SvelteApplication as a "host" for the context menu anyway?

TyphonJS (Michael)•256d ago

Probably not especially if it's a context menu. SvelteApplication and the application shells are for windowed GUI construction. I do believe Item Piles and Auto Animations uses the various menus, but probably not for providing a custom component. Here are the docs for TJSContextMenu... It's data driven and so should be your custom component. A fair amount of the standard components are data driven. https://typhonjs-fvtt-lib.github.io/api-docs/classes/_standard_application.TJSContextMenu.html

Gerark•256d ago

Auto Animations is a windowed gui tho. or maybe I'm not aware of some context menu. THis is actually a lack of base knowledge from my side. If I create a custom component in svelte can I use it inside a non-svelte application?

TyphonJS (Michael)•256d ago

AA uses TJSMenu / non-context menu. Item Piles might use a context menu, but also uses various TJSMenu instances.

Gerark•256d ago

Would then be possible to trigger a TJSMenu from, let's say, anywhere. It doesn't matter to what the Context Menu is "parented" ( if anything like this is even a concept )

TyphonJS (Michael)•255d ago

You'll want to use TJSContextMenu for a menu triggered from anywhere. TJSMenu is "parented". Are you wanting this context menu to be able to be displayed from anywhere in the browser window or a specific app / component? Here are some examples for TJSContextMenu from an unreleased module I use for testing: https://github.com/typhonjs-fvtt/better-macros-directory/blob/main/src/view/dir/Folder.svelte https://github.com/typhonjs-fvtt/better-macros-directory/blob/main/src/view/dir/FolderContent.svelte It is a replacement for the core macro directory to improve it, but also isn't 100% finished. As mentioned I've been using it for testing TRL features for focus management / keyboard navigation; TJSContextMenu is keyboard / focus navigation aware.

Gerark•255d ago

I see that in this case the TJSContextMenu is accepting a focusEl and it's a Constants.appId. What if I want to show the TJSContextMenu from a journal in Foundry? Let's say I have a specific class named "MyClass" assigned to a <span> element and I use jquery to retrieve all the "MyClass" elements and register to a click event. Can I pass an htmlElement to the TJSContextMenu focusEl property?

TyphonJS (Michael)•255d ago

I see that in this case the TJSContextMenu is accepting a focusEl and it's a Constants.appId.

In this case it's forwarding through the original focus source. When the context menu closes or an item is selected the original folder is focused again for potential keyboard navigation continuation. This is not something you'd particularly be concerned with in an adhoc GUI you're potentially creating. Foundry in general is not built or takes keyboard accessibility into concern, but I'm baking that into the TRL standard components. All you'd need to do is add a click event and pass the event for the event data. Perhaps you can setup a custom TextEditor substitution so you can just input @my-context-menu into a journal and it will add the necessary HTML to then hookup on the renderJournalPage or equivalent hook / whatever it is. I suggest using straight DOM API instead of JQuery... Something like: Psuedocode:

Hooks.on('renderJournalPage', (html, etc, etc) =>
{
   const myMenuEl = html.querySelector('.my-context-menu');
   if (myMenuEl)
   {
      myMenuEl.addEventListener('click', (event) =>
      {
         TJSContextMenu,create({
            event,
            items: [
               { class: MyContextMenuImpl } // Your Svelte component
            } 
         });
      });
   }
});

Hooks.on('renderJournalPage', (html, etc, etc) =>
{
   const myMenuEl = html.querySelector('.my-context-menu');
   if (myMenuEl)
   {
      myMenuEl.addEventListener('click', (event) =>
      {
         TJSContextMenu,create({
            event,
            items: [
               { class: MyContextMenuImpl } // Your Svelte component
            } 
         });
      });
   }
});

Gerark•255d ago

Perhaps you can setup a custom TextEditor substitution so you can just input @my-context-menu into a journal and it will add the necessary HTML to then hookup on the renderJournalPage or equivalent hook / whatever it is. I suggest using straight DOM API instead of JQuery... Something like:

Exactly. That's what I'm already doing so I want to show the context menu. I'm not sure if I can use the TJSContextMenu to simulate what I sent in the picture above ( With a search textbox and hierarchical treeview ) but I'll take a look at it no matter what as It can be handy for other case.

TyphonJS (Michael)•255d ago

TJSContextMenu to simulate what I sent in the picture above ( With a search textbox and hierarchical treeview ) but I'll take a look at it no matter what as It can be handy for other case.

That is MyContextMenuImpl You can provide your own Svelte component that implements the GUI you desire... Of which a lot of other TRL API can help you implement it.

Gerark•255d ago

I should look more into what the TRL API provides already when it comes to components. With the first module I mainly did all by myself cause I wanted to learn on creating custom components. Now it's probably time to reuse something already available 🙂

TyphonJS (Michael)•255d ago

Yeah.. There is some good stuff in there particular around stores and then a lot of the components are data driven so can be externally configured.. Indeed many more potential examples to add to essential-svelte-esm and such.. The Better Macros Directory module does use a derived array reducer populated from Foundry document data and provides a search box to filter / macro results along w/ choosing the user to filter by that is similar to what you are going for in some respect, but also uses the TRL plugin manager, so might not be the easiest to follow without further explanations. It shows how to recursively use Svelte to render a folder structure w/ items inside. Might be worth installing to play around with the code. I see that I accidentally left in the local dev setup I use for that repo though so it may work with a few mods. I can clean it up today and make sure it works against the latest TRL when I get it out. Just working on some more type declarations / better API docs presently.

Gerark•255d ago

Maybe I didn't understand correctly what you meant by a MyContextMenuImpl. I see that the TJSContextMenu is using already an Impl. So I'm not sure if I should stick to it or I should just take inspiration and create my own version.

TyphonJS (Michael)•255d ago

You can do whatever you want with your own components or 3rd party ones, but should give things in TRL a try first.

Gerark•255d ago

What I meant was mostly if there was a way to inject a custom impl inside the existing TJSContextMenu in case the customization of each item won't be enough. Seems like I can customize each item so I can have a MenuItem for the Search box, another one for some title, a separator and then the TreeViewItems, probably.

TyphonJS (Michael)•255d ago

You could do that, but it won't be as effective. You can indeed inject any number of custom components per menu item, but the search index and the dynamic nature of the data being displayed and filtered is better suited to a single component that has full control of the data being displayed.

Gerark•255d ago

I see. Thank you! 🙂

TyphonJS (Michael)•249d ago

I updated the "Better Macros Directory" unreleased module for the latest TRL. It should be installable now. It may be instructive on how to configure a component for using a dynamic reducer that can filter data and have a dynamic display. While the main component is in an application shell instead you could provide it to TJSMenu instead, etc. This is not going to be a 1:1 demo code for your purpose, but a general repo to review on how to do something similar w/ Svelte. Particularly the use of the <svelte:self> directive if there are nested folders. https://github.com/typhonjs-fvtt/better-macros-directory

TyphonJS Join

293Members

View on Discord

Want results from more Discord servers?

Add your server

Slide Animations for SvelteApplicationI'd like my window ( which is an EmptyApplicationShell ) to play a slide-in animation when open and Bug: Multiple ProseMirror editors on same svelte component do not save properlySimple reproduction in a foundry world with at least one actor defined: ``` <svelte:options accessor System Works in Dev Mode but not after buildAfter updating to 0.1.1, I noticed something odd happening. The TITAN system now seems to work when Error building after updating to TRL 0.1.1Recently updated the TITAN system to TRL 0.1.1, but when I `npm run build` it errors out. Not sure w TJSApplication Character Sheet odd behavior with unlinked tokensHas anyone else experienced weird when using a TJSApplication as a character sheet with unlinked tok TJSDocumentCollection best practices?Hi! I've got a little component I'm using whose purpose is basically to just show a tiny preview of Release `TRL 0.1.1` - Patch releaseGreets @FVTT ▹ Developer! I have just released a patch / fix release that fixes a small oversight i Uncaught TypeError: $storeElementRoot is undefinedHi! Encountering the following error when trying to resize an application based on a TJSApplicationS Popcorn InitiativeJust opening a forum post to track @gerark progress w/ TRL & Svelte + an initial idea of implementin Token Action HUDLet's continue chatting about TAH here to keep track of discussion @larkinabout PostcssConfig seem not workin with 0.1.0@mleahy sorry to bother i'm trying to use the postccs feature of the @typhonjs-fvtt/runtime on the TJSDocument for aggregating actor flags for Svelte ComponentI'm sure this is very simple, but I'm having a hard time understanding how to get this to work. Mayb Update to ChatMessage outside of Svelte doesn't trigger reactivity on linked TJSDocumentI'm a bit confused about this... 1. When I render a ChatMessage via svelte, in the chat message sve Release `TRL 0.1.0` - The journey to beta begins...Greets @FVTT ▹ Developer, I am very excited to announce the release of TRL `0.1.0`. This is a major How do I get the elementRoot of a ChatMessage?SvelteApplication provides `elementRoot` prop to components that implement it, which is very useful.Getting started with the GUI and understanding element rootIt's been a while, but I've been working on my Knowledge Recalled module since V11 is out, and my fr Drag & Drop broke in v11Ok so something that broke for me when moving to v11 is drag&drop from both the items tab of the sid TJSDocument and Token Issues```js const tokens = cardData.targets .map(t => [t, fromUuidSync(t)]) .filter(([_, t SyrinControl & Svelte...I gather there is a bit to discuss... 😄Ver .11Not sure if this is the place to ask, but updated to v .7.11 foundry 10. Lost all quest data. Folde

Gaming

Programming

Embed a DropDown/MenuList made with Svelte