fix: use js to set top for positon fixed

Thanks to algolia/autocomplete#1199
tiddly-gittly · May 20, 2024 · 449989b · 449989b
1 parent 5c86836
commit 449989b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/src/commandpalette/styles/DefaultCommandPalette.css.tid b/src/commandpalette/styles/DefaultCommandPalette.css.tid
@@ -4,14 +4,23 @@ tags: $:/tags/Stylesheet
 
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html
 
-.tw-commandpalette-default-container {
+:root {
+  --position-autocomplete-panel-top: 5em;
+}
+.aa-Panel {
   /**
-   * container of command input can't be position fix
+   * container of command input can't be position fix, otherwise need a hack
    * https://github.com/algolia/autocomplete/issues/1199
   */
-  position: absolute;
-  background:<<colour page-background>>;
+  position: fixed !important;
+  top: calc(var(--position-autocomplete-panel-top) + 1em) !important;
   z-index: 9999;
+}
+.tw-commandpalette-default-container {
+  position: fixed;
+  background:<<colour page-background>>;
+  z-index: 9998;
+  top: 5em;
   left: 50%;
   transform: translate(-50%, 0%);
   width: 80%;
@@ -24,7 +33,7 @@ tags: $:/tags/Stylesheet
 }
 .tw-default-commandpalette-mask-layer {
   position: fixed;
-  z-index: 9998;
+  z-index: 9997;
   top: 0;
   left: 0;
   right: 0;
@@ -41,9 +50,6 @@ tags: $:/tags/Stylesheet
   overscroll-behavior: none;
 }
 
-div.aa-Panel {
-  z-index: 10000;
-}
 div.aa-SourceHeader {
   border-bottom: 1px solid;
   padding-bottom: 0.3em;

diff --git a/src/commandpalette/widgets/widget.ts b/src/commandpalette/widgets/widget.ts
@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import { Modal } from '$:/core/modules/utils/dom/modal.js';
 import { widget as Widget } from '$:/core/modules/widgets/widget.js';
 import { autocomplete } from '@algolia/autocomplete-js';
 import type { AutocompleteNavigator } from '@algolia/autocomplete-shared/dist/esm/core/AutocompleteNavigator';
-import { IChangedTiddlers, ITiddlerFields } from 'tiddlywiki';
+import { IChangedTiddlers, IParseTreeNode, ITiddlerFields, IWidgetInitialiseOptions } from 'tiddlywiki';
 import '@algolia/autocomplete-theme-classic';
 import { AutocompleteState } from '@algolia/autocomplete-core';
 import { observe, unobserve } from '@seznam/visibility-observer';
@@ -17,6 +18,11 @@ class CommandPaletteWidget extends Widget {
     return false;
   }
 
+  constructor(parseTreeNode: IParseTreeNode, options?: IWidgetInitialiseOptions) {
+    super(parseTreeNode, options);
+    this.fixPanelPosition = this.fixPanelPosition.bind(this);
+  }
+
   autoCompleteInstance: ReturnType<typeof autocomplete<ITiddlerFields>> | undefined;
 
   render(parent: Element, nextSibling: Element) {
@@ -53,8 +59,8 @@ class CommandPaletteWidget extends Widget {
       },
     });
     this.autoCompleteInstance.setContext({ widget: this } satisfies IContext);
-    this.onCommandPaletteDetachedDOMInit(containerElement);
     this.onCommandPaletteInputDOMInit(containerElement);
+    this.onCommandPaletteDetachedDOMInit(containerElement);
   }
 
   onVisibilityChange(
@@ -146,6 +152,24 @@ class CommandPaletteWidget extends Widget {
     this.modalCount++;
     // call with this
     Modal.prototype.adjustPageClass.call(this);
+    /* eslint-disable @typescript-eslint/unbound-method */
+    this.fixPanelPosition();
+    inputElement.addEventListener('focus', this.fixPanelPosition);
+    inputElement.addEventListener('blur', this.fixPanelPosition);
+    window.addEventListener('resize', this.fixPanelPosition);
+    /* eslint-enable @typescript-eslint/unbound-method */
+  }
+
+  /**
+   * container of command input can't be position fix, otherwise need a hack
+   * @url https://github.com/algolia/autocomplete/issues/1199
+  */
+  fixPanelPosition() {
+    const defaultInputElement = document.querySelector('.tw-commandpalette-default-container');
+    if (!defaultInputElement) return;
+    const rect = defaultInputElement.getBoundingClientRect();
+    // Set css variable to be below the search box in case the search box moved when the window was resized
+    document.documentElement.style.setProperty('--position-autocomplete-panel-top', `${rect.bottom}px`);
   }
 
   handleDarkMode() {
@@ -170,6 +194,9 @@ class CommandPaletteWidget extends Widget {
     this.setCloseState();
     this.autoCompleteInstance?.destroy();
     this.autoCompleteInstance = undefined;
+    /* eslint-disable @typescript-eslint/unbound-method */
+    window.removeEventListener('resize', this.fixPanelPosition);
+    /* eslint-enable @typescript-eslint/unbound-method */
   }
 }