新增对PJAX的支持

README.md

@@ -1,3 +1,12 @@
+# anian-plugin-search
+
+> 基于原作者v1.7.1代码修改
+
+#### v1.7.1-1
+1. 新增对PJAX的支持
+
+
+
 # plugin-search-widget
 
 Halo 2.0 的通用搜索组件插件。

build.gradle

@@ -16,7 +16,7 @@ repositories {
 }
 
 dependencies {
-    implementation platform('run.halo.tools.platform:plugin:2.17.0-SNAPSHOT')
+    implementation platform('run.halo.tools.platform:plugin:2.20.11')
     compileOnly 'run.halo.app:api'
 
     testImplementation 'run.halo.app:api'

gradle.properties

@@ -1 +1 @@
-version=1.0.0-SNAPSHOT
+version=1.7.1-1

packages/search-widget/src/search-form.ts

@@ -181,16 +181,19 @@ export class SearchForm extends LitElement {
   renderListItem(hit: HaloDocument, index: number, listIcon: string) {
     return html`
       <li
-        @click="${() => this.handleOpenLink(hit)}"
         @mouseenter=${() => {
           this.selectedIndex = index;
         }}
-        class="shadow-sm flex items-center space-x-3 rounded-base cursor-pointer p-3 bg-hit [&_mark]:text-primary [&_mark]:font-semibold [&_mark]:bg-transparent ${
+        data-index=${index}
+      >
+        <a
+          href=${hit.permalink}
+          @click="${(event: MouseEvent) => this.handleOpenLink(hit, event)}"
+          class="shadow-sm flex items-center space-x-3 rounded-base cursor-pointer p-3 bg-hit no-underline text-inherit [&_mark]:text-primary [&_mark]:font-semibold [&_mark]:bg-transparent ${
             index === this.selectedIndex
               ? '!bg-primary [&_mark]:!text-white [&_mark]:underline'
               : ''
           }"
-        data-index=${index}
         >
           <span
             class="flex-none shrink ${listIcon} ${
@@ -226,6 +229,7 @@ export class SearchForm extends LitElement {
               this.selectedIndex === index ? '!visible' : ''
             }"
           ></span>
+        </a>
       </li>
     `;
   }
@@ -247,7 +251,7 @@ export class SearchForm extends LitElement {
     this.fetchHits(value);
   }
 
-  handleClearHistory() {
+  private handleClearHistory() {
     localStorage.removeItem(HISTORY_KEY);
     this.historyHits = [];
   }
@@ -280,14 +284,56 @@ export class SearchForm extends LitElement {
     300
   );
 
-  handleOpenLink(hit: HaloDocument) {
+  handleOpenLink(hit: HaloDocument, event?: MouseEvent) {
     const updatedHistory = uniqBy([hit, ...this.historyHits], 'id').slice(
       0,
       MAX_HISTORY_ITEMS
     );
     localStorage.setItem(HISTORY_KEY, JSON.stringify(updatedHistory));
     this.historyHits = updatedHistory;
-    window.location.href = hit.permalink;
+
+    if (event && this.shouldUseNativeNavigation(event)) {
+      return;
+    }
+
+    event?.preventDefault();
+
+    this.navigate(hit.permalink);
+
+    queueMicrotask(() => {
+      this.dispatchEvent(
+        new CustomEvent('search-widget:navigate', {
+          bubbles: true,
+          composed: true,
+        })
+      );
+    });
+  }
+
+  private shouldUseNativeNavigation(event: MouseEvent) {
+    return (
+      event.defaultPrevented ||
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    );
+  }
+
+  private navigate(url: string) {
+    const win = window as Window & {
+      pjax?: {
+        loadUrl(url: string): void;
+      };
+    };
+
+    if (win.pjax) {
+      win.pjax.loadUrl(url);
+      return;
+    }
+
+    window.location.href = url;
   }
 
   handleKeydown = (e: KeyboardEvent) => {
@@ -315,11 +361,12 @@ export class SearchForm extends LitElement {
       const hit = hits[this.selectedIndex];
       if (hit) {
         this.handleOpenLink(hit);
+        e.preventDefault();
       }
     }
   };
 
-  handleScrollIntoSelected() {
+  private handleScrollIntoSelected() {
     const selectedElement = this.shadowRoot?.querySelector(
       `[data-index="${this.selectedIndex}"]`
     );

packages/search-widget/src/search-modal.ts

@@ -64,6 +64,7 @@ export class SearchModal extends LitElement {
             ? html`<search-form
               .baseUrl=${this.baseUrl}
               .options=${this.options}
+              @search-widget:navigate=${this.close}
             ></search-form>`
             : ''
         }