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 diff --git a/src/App.svelte b/src/App.svelte index a2b87ff..de8e96f 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -11,6 +11,9 @@ setAllShortCuts, initShortCuts } from "./shortcuts"; + import { + storeDisplayPaletteMethod, + } from "./displayMethod"; const dispatch = createEventDispatcher(); export let hotkey; @@ -48,6 +51,17 @@ await asyncTimeout(100); onHandleCommand(command); }); + storeDisplayPaletteMethod(async active_state => { + if (! showModal) {focusedElement = document.activeElement} + 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/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 bf41564..c3232fe 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,6 @@ import App from "./App.svelte"; import pubsub from "micro-pubsub"; +import { retrieveDisplayPaletteMethod } from "./displayMethod"; class CommandPal { constructor(options) { @@ -18,6 +19,7 @@ class CommandPal { hotkeysGlobal: this.options.hotkeysGlobal || false }, }); + this.displayPalette = retrieveDisplayPaletteMethod(); const ctx = this; function subTo(eventName) { ctx.app.$on(eventName, (e) => ctx.ps.publish(eventName, e.detail));