Display palette method #28
Conversation
This is a preliminary implementation of a method to control CommandPal display. It can be called in 3 ways: c = CommandPal(...); c.displayPalette() - acts as a toggle c.displayPalette(true) - displays the palette c.displayPalette(false) - hides the palette Passing anything other than true/false will throw an error. This implementation has a few warnings from the build system. The code works as intended, but I don't know enough to determine if these warnings are a problem. ``` > rollup -c src/main.js → public/build/bundle.js... (!) Circular dependency src/main.js -> src/App.svelte -> src/main.js (!) Mixing named and default exports https://rollupjs.org/guide/en/#output-exports The following entry modules are using named and default exports together: src/main.js Consumers of your bundle will have to use chunk['default'] to access their default export, which may not be what you want. Use `output.exports: 'named'` to disable this warning ```
Created a new file to house the mechanism linking App and main.js/CommandPal. This works as the prior commit did but without any errors during build. This solution occured to me just after the last commit finished 8-/.
Must have missed this and tested with older version.
Save activeElement when showModal is false indicating it will be opened.
| let displayPaletteMethod; // temp variable for holding function | ||
| // generated by App by calling setDisplayPalette | ||
|
|
||
| export function storeDisplayPaletteMethod(method) { | ||
| displayPaletteMethod = method; | ||
| } | ||
|
|
||
| export function retrieveDisplayPaletteMethod() { | ||
| return displayPaletteMethod; | ||
| } | ||
|
|
There was a problem hiding this comment.
This is clever, it's basically using the module file scope, as a container to hold the variable which is a function. This is global to the project, but private everywhere else.
To be honest, I think it's a bit convoluted, but I've sat down for a bit and can't think of a better solution 😅 so nice work 👌
There was a problem hiding this comment.
Yeah, I am not happy with it.
Supposedly:
https://stackoverflow.com/questions/69948606/how-to-call-a-function-inside-a-svelte-component-from-outside-the-component
https://akashmittal.com/svelte-calling-function-child-parent/
https://steveolensky.medium.com/svelte-how-to-call-functions-in-child-components-d8af9933bef3
might provide some ideas, but I am still trying to digest them. The first seems to
be promising.
There was a problem hiding this comment.
I'm happy with your solution, as it needs to be shared with main.js which is outside of the svelte context.
We could use some kind of event to pass the function handler or something, but that sounds even worse haha
|
c.dispatch('close') maybe? or a wrapper for it for opened/closed and to toggle. |
Yeah that would be nice to be able to send events to the Command Pal instance 🤔 Then we'd have |
This addresses #25.
I am not sure if it's the right way to get App and CommandPal to cooperate, but it works.