From 1c3c214add642b24441d32a0f092dda7537f61dc Mon Sep 17 00:00:00 2001 From: "John P. rouillard" Date: Sat, 4 Feb 2023 16:53:25 -0500 Subject: [PATCH 1/5] add displayPalette method to CommandPal objects MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 ``` --- src/App.svelte | 13 +++++++++++++ src/main.js | 8 ++++++++ 2 files changed, 21 insertions(+) diff --git a/src/App.svelte b/src/App.svelte index a2b87ff..d5ca873 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -11,6 +11,9 @@ setAllShortCuts, initShortCuts } from "./shortcuts"; + import { + setDisplayPalette, + } from "./main"; const dispatch = createEventDispatcher(); export let hotkey; @@ -48,6 +51,16 @@ await asyncTimeout(100); onHandleCommand(command); }); + setDisplayPalette(async active_state => { + if (active_state === undefined) { + showModal = !showModal; + } else if ([true, false].includes(active_state)) { + showModal = active_state; + } else { + throw("Non-boolean: " + active_state + + " - passed to displayPalette") + } + }) }); function setItems(newItems) { diff --git a/src/main.js b/src/main.js index bf41564..07b392d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,9 @@ import App from "./App.svelte"; import pubsub from "micro-pubsub"; +let displayPaletteMethod; // temp variable for holding function + // generated by App by calling setDisplayPalette + class CommandPal { constructor(options) { console.log("CommandPal", { options }); @@ -18,6 +21,7 @@ class CommandPal { hotkeysGlobal: this.options.hotkeysGlobal || false }, }); + this.displayPalette = displayPaletteMethod; const ctx = this; function subTo(eventName) { ctx.app.$on(eventName, (e) => ctx.ps.publish(eventName, e.detail)); @@ -42,5 +46,9 @@ class CommandPal { } } +export function setDisplayPalette(method) { + displayPaletteMethod = method; +} + export default CommandPal; window.CommandPal = CommandPal; From 345a6416ee7ed2d5982de772e5541069215b8eab Mon Sep 17 00:00:00 2001 From: "John P. rouillard" Date: Sat, 4 Feb 2023 17:03:31 -0500 Subject: [PATCH 2/5] Remove circular dependency and export issues 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-/. --- src/App.svelte | 4 ++-- src/displayMethod.js | 11 +++++++++++ src/main.js | 10 ++-------- 3 files changed, 15 insertions(+), 10 deletions(-) create mode 100644 src/displayMethod.js diff --git a/src/App.svelte b/src/App.svelte index d5ca873..3052ed2 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -12,8 +12,8 @@ initShortCuts } from "./shortcuts"; import { - setDisplayPalette, - } from "./main"; + storeDisplayPaletteMethod, + } from "./displayMethod"; const dispatch = createEventDispatcher(); export let hotkey; diff --git a/src/displayMethod.js b/src/displayMethod.js new file mode 100644 index 0000000..42d9efd --- /dev/null +++ b/src/displayMethod.js @@ -0,0 +1,11 @@ +let displayPaletteMethod; // temp variable for holding function + // generated by App by calling setDisplayPalette + +export function storeDisplayPaletteMethod(method) { + displayPaletteMethod = method; +} + +export function retrieveDisplayPaletteMethod() { + return displayPaletteMethod; +} + diff --git a/src/main.js b/src/main.js index 07b392d..c3232fe 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,6 @@ import App from "./App.svelte"; import pubsub from "micro-pubsub"; - -let displayPaletteMethod; // temp variable for holding function - // generated by App by calling setDisplayPalette +import { retrieveDisplayPaletteMethod } from "./displayMethod"; class CommandPal { constructor(options) { @@ -21,7 +19,7 @@ class CommandPal { hotkeysGlobal: this.options.hotkeysGlobal || false }, }); - this.displayPalette = displayPaletteMethod; + this.displayPalette = retrieveDisplayPaletteMethod(); const ctx = this; function subTo(eventName) { ctx.app.$on(eventName, (e) => ctx.ps.publish(eventName, e.detail)); @@ -46,9 +44,5 @@ class CommandPal { } } -export function setDisplayPalette(method) { - displayPaletteMethod = method; -} - export default CommandPal; window.CommandPal = CommandPal; From 1839e3c601e889946546cd1e6df9979710e951da Mon Sep 17 00:00:00 2001 From: "John P. rouillard" Date: Sat, 4 Feb 2023 17:07:38 -0500 Subject: [PATCH 3/5] Add documentation for displayPalette --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 936325d..f2be779 100644 --- a/README.md +++ b/README.md @@ -139,6 +139,12 @@ const c = new CommandPal({ c.start() // Destroy the instance c.destroy() +// Display the instance +c.displayPalette(true) +// Hide the instance +c.displayPalette(false) +// Toggle from display -> hide or hide -> display +c.displayPalette() ``` ### Subscribe to events From 8c6b93325de787df09e9fa3d8fd2a75698cf489e Mon Sep 17 00:00:00 2001 From: "John P. rouillard" Date: Sun, 5 Feb 2023 18:01:42 -0500 Subject: [PATCH 4/5] bug: replace setDisplayPalette with storeDisplayPaletteMethod Must have missed this and tested with older version. --- src/App.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.svelte b/src/App.svelte index 3052ed2..6441f62 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -51,7 +51,7 @@ await asyncTimeout(100); onHandleCommand(command); }); - setDisplayPalette(async active_state => { + storeDisplayPaletteMethod(async active_state => { if (active_state === undefined) { showModal = !showModal; } else if ([true, false].includes(active_state)) { From 2c5abdfcfd09f80321d0eb8fb121bc8e2aeaf717 Mon Sep 17 00:00:00 2001 From: "John P. rouillard" Date: Mon, 6 Feb 2023 23:37:21 -0500 Subject: [PATCH 5/5] Set focusedElement when calling displayPalette Save activeElement when showModal is false indicating it will be opened. --- src/App.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.svelte b/src/App.svelte index 6441f62..de8e96f 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -52,6 +52,7 @@ onHandleCommand(command); }); storeDisplayPaletteMethod(async active_state => { + if (! showModal) {focusedElement = document.activeElement} if (active_state === undefined) { showModal = !showModal; } else if ([true, false].includes(active_state)) {