Display palette method

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

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) {

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;
+}
+

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));