tecitheme 1.2.2 → 1.2.4

package/dist/StyleUtils.js

@@ -12,8 +12,8 @@ export function humanizeProduct(product) {
           return "License Manager";
       case "usage":
           return "Usage (Internal)"
-      case "sales-licensing":
-          return "Sales & Licensing";
+      case "purchasing-licensing":
+          return "Purchasing, Licensing, & Support";
       default:
           return product;
   }

package/dist/components/Header.svelte

@@ -489,6 +489,7 @@
           placeholderShort="Search"
           indices={[searchIndex]}
           title=""
+          keyCombo={["Control", "y"]}
         />
       </div>
     </div>

package/dist/components/Search/SearchBar.svelte

@@ -1,9 +1,12 @@
 <script>
   import { getModalStore } from "@skeletonlabs/skeleton";
 
-  export let id, placeholder, placeholderShort, filters, title, indices;
+  export let id, placeholder, placeholderShort, filters, title, indices, keyCombo;
   export let showRefinements = undefined;
 
+  // Let users specify a key combo using Javascript key names, or default to Ctrl+K
+  keyCombo = keyCombo ? keyCombo : ["Control", "k"]
+
   const modalStore = getModalStore();
 
   const modal = {
@@ -35,28 +38,48 @@
     modalStore.trigger(modal) 
   };
 
-  let isCtrlDown = false;
-  let isKDown = false;
-
+  // Fill an array to track which keys of the assigned combo have been pressed
+  let keysPressed = Array(keyCombo.length).fill(false);
   function onKeyMove(e, value) 
   {
-    switch(e.key)
+    //  If a combo key is pressed or released, track that state
+    if (keyCombo.includes(e.key))
     {
-      case "Control":
-        isCtrlDown = value;
-        break;
-      case "k": 
-        isKDown = value;
-        break;
+      keysPressed[keyCombo.indexOf(e.key)] = value; 
     }
+    
+    // Check that every combo key is currently pressed
+    const comboMatch = keysPressed.every(v => v === true);
 
-    if (isCtrlDown && isKDown && !isModalOpen)
+    // If combo is pressed and modal isn't open, open the modal
+    if (comboMatch && !isModalOpen)
     {
       triggerSearch()
       e.preventDefault();
     }
   }
 
+  // Clean up the key combo names for display in the UI.
+  // This isn't exhaustive, and may need updated in the future to account for other keys
+  let keyComboDisplayValues = []
+  function createKeyDisplayValue(key)
+  {
+    switch (key)
+    {
+      case "Control":
+        return "Ctrl";
+      case "Escape":
+        return "Esc";
+      case "LShift":
+        return "LShift";
+      case "RShift":
+        return "RShift";
+      default:
+        return key.toUpperCase();
+    }
+  }
+  keyComboDisplayValues = keyCombo.map(key => createKeyDisplayValue(key));
+
 </script>
 
 <svelte:window
@@ -71,5 +94,5 @@
   <span class="hidden md:flex">{placeholder}</span>
   <span class="flex md:hidden">{placeholderShort}</span>
   <div class="hidden md:flex flex-grow"></div>
-  <span class="hidden md:flex">Ctrl+K</span>
+  <span class="hidden md:flex">{keyComboDisplayValues.join("+")}</span>
 </button>

package/dist/components/Search/SearchBar.svelte.d.ts

@@ -8,6 +8,7 @@ export default class SearchBar extends SvelteComponent<{
     placeholderShort: any;
     filters: any;
     indices: any;
+    keyCombo: any;
     showRefinements?: any;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -25,6 +26,7 @@ declare const __propDef: {
         placeholderShort: any;
         filters: any;
         indices: any;
+        keyCombo: any;
         showRefinements?: any;
     };
     events: {

package/dist/components/Search/TeciSearchBox.svelte

@@ -1,11 +1,26 @@
 <script>
+  import { debounce } from "instantsearch.js/es/lib/utils";
   import { SearchBox } from "svelte-algolia-instantsearch";
 
   export let placeholder;
   export let placeholderShort;
+
+  // Just debounces searches by 300ms. Almost not noticeable to users, but should clean up our query analytics
+  const debouncedRefine =  debounce((refine, query) => 
+  {
+    refine(query);
+  }, 300);
+
+  // Hook to use the debounced refinement
+  function queryHook(query, refine)
+  {
+    debouncedRefine(refine, query);
+  }
 </script>
 
 <SearchBox 
+  {queryHook}
+  {placeholder}
   classes={{
     root: "hidden md:flex w-full",
     form: "w-full relative",
@@ -14,10 +29,11 @@
     submitIcon: "w-3 h-3",
     reset: "absolute hidden right-0 top-0 w-0 h-0"
   }}
-  placeholder={placeholder}
 />
 
 <SearchBox 
+  {queryHook}
+  placeholder={placeholderShort}
   classes={{
     root: "flex md:hidden w-full",
     form: "w-full relative",
@@ -25,5 +41,4 @@
     submit: "absolute left-0 top-1/2 w-6 h-6 -translate-y-1/2 translate-x-1/2",
     reset: "absolute hidden right-0 top-0 w-0 h-0"
   }}
-  placeholder={placeholderShort}
 />

package/dist/utils.d.ts

@@ -46,6 +46,7 @@ export function makeIdString(text: any): string;
  * Converts a simplified image source string in to the proper TECi Image src. If imageSrc is an absolute url (starts with http) it is returned unchanged
  * @param {*} imageSrc The image source string
  * @param {*} site ('www' or 'support') TECi image folder to pull from
+ * @param {*} params A list of image transformation parameters to pass to the image CDN (https://developers.cloudflare.com/images/transform-images/transform-via-url/)
  */
 export function getTeciImageURL(imageSrc: any, site: any, params: any): any;
 /**

package/dist/utils.js

@@ -526,12 +526,18 @@ export function makeIdString(text) {
  * Converts a simplified image source string in to the proper TECi Image src. If imageSrc is an absolute url (starts with http) it is returned unchanged
  * @param {*} imageSrc The image source string
  * @param {*} site ('www' or 'support') TECi image folder to pull from 
+ * @param {*} params A list of image transformation parameters to pass to the image CDN (https://developers.cloudflare.com/images/transform-images/transform-via-url/)
  */
 export function getTeciImageURL(imageSrc, site = "www", params) {
-  return imageSrc.startsWith("http") ? imageSrc : `https://media.thunderheadeng.net/cdn-cgi/image/${params??''}/${site}/images/${imageSrc}`
+  if (imageSrc.startsWith("http")) {
+    return imageSrc
+  } else if (imageSrc.includes('.gif')) {
+    return imageSrc.startsWith("http") ? imageSrc : `https://media.thunderheadeng.net/${site}/images/${imageSrc}`
+  } else {
+    return imageSrc.startsWith("http") ? imageSrc : `https://media.thunderheadeng.net/cdn-cgi/image/${params??''}/${site}/images/${imageSrc}`  
+  }
 }
 
-
 /**
  * Convenience function that sets the state of a Svelte Store to true when an element is visible on the screen. Useful for triggering animations.
  * 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",