jekyll_ranked_search 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a717e9e1526e49b484e6b84067aa22daef311e21160e80a5c87a5a18fd6aeeb
-  data.tar.gz: 5f6403859df289ecd20971ecb775d08bcc88487616df544ebacc1c2e74805fe6
+  metadata.gz: 81e9541ca2a4139827dfb10a8ad23bb3f493f9465d95c8c0d8f18f55affeb10f
+  data.tar.gz: cc861e099846391ab537624f4a509e7bf97987c5f68851335a613fe8fbadb6e9
 SHA512:
-  metadata.gz: 7c268065e1ffe5dbd646feca161ed346dfc649c52d2b4f7269e1cab98e17a3a6180cb70c81a82a8c9b081b4b3a4aa7a6d5dd4d7d9b3ea10610a20210610e0f46
-  data.tar.gz: 73822909d296b0d24a711cbffe27ceb906d6319bc419932ce5dc8be94774d1840339aba7eb58634c126c75a836bc4b4279275eab8ae431d47b17ffc9df0127d4
+  metadata.gz: cb47470cf5b035428a768d83804dd92703e754e3776f85655094f136e02d1523e0995c884595caf02716a29fe8cf7f416fd05f4549b18ca121c13fbad0ec252e
+  data.tar.gz: 5258f44e86d40cc44666aae5841ffd7e50c7a51b5c60dcf7666300177b278ffff0c4e89f5b4a6b2d62c6117f21edea8f8a0ee75ed076a8def7b010a572472a1d

data/lib/search.js

@@ -4,16 +4,38 @@ import 'https://cdn.jsdelivr.net/npm/@github/relative-time-element';
 
 class SearchBox extends LitElement {
   static properties = {
-    _data: {state: true, type: Array},
+    _isLoading: {state: true, type: Boolean},
+    _data: {state: false, type: Array},
     _results : {state: true, type: Array},
     _open: {state: true, type: Boolean},
+    _placeholder: {state: true, type: String},
+
+    // Lazy loading
+    lazy: {type: Boolean, attribute: true},
   };
 
+  /**
+   * Constructor. Sets up default values.
+   */
   constructor() {
     super();
+
+    // No data initially loaded
     this._data = [];
+
+    // Results are initially empty
     this._results = [];
+
+    // Start in closed state, show no results
     this._open = false;
+
+    // Default to not loading
+    this._isLoading = false;
+
+    // Disable lazy loading by default
+    this.lazy = false;
+
+    this._placeholder = "Search...";
   }
 
   static styles = css`
@@ -77,16 +99,17 @@ class SearchBox extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.loadData();
+
+    // Load data if lazy loading is disabled
+    if (!this.lazy) {
+      this.loadData();
+    }
 
     document.addEventListener('click', (event) => {
       if (!event.composedPath().includes(this) && this._open) {
           this.toggle();
       }
-  });
-
-    // Register arrow keys
-
+    });
   }
 
   toggle() {
@@ -104,12 +127,20 @@ class SearchBox extends LitElement {
   }
 
   async loadData() {
+    // Set state during loading
+    this._isLoading = true;
+    this.updatePlaceholder();
+
     const response = await fetch("/search.json");
     const jsonData = await response.json();
     jsonData.word2doc = new Map(Object.entries(jsonData.word2doc));
     jsonData.bow = new Map(Object.entries(jsonData.bow));
     jsonData.tfidf = new Map(Object.entries(jsonData.tfidf));
     this._data = jsonData;
+    
+    // Cleanup state
+    this._isLoading = false;
+    this.updatePlaceholder();
   }
 
   disconnectedCallback() {
@@ -158,7 +189,6 @@ class SearchBox extends LitElement {
     for (const tokenId of tokenIds.slice(1)) {
       // Find document candidates
       const docCandidates = new Set(this._data.word2doc.get(tokenId.toString()));
-      // console.log("intersection", docCandidates, docs);
       docs = new Set([...docs].filter((x) => docCandidates.has(x)));
     }
 
@@ -182,21 +212,33 @@ class SearchBox extends LitElement {
     this._open = true;
   }
 
-  placeholder() {
+  updatePlaceholder() {
+    if (this._isLoading) {
+      this._placeholder = "Loading...";
+      return;
+    }
     if (this._data && this._data.docs && this._data.docs.length > 0) {
       let plural = "";
       if (this._data.docs.length !== 1) {
         plural = "s";
       }
-      return "Search in " + this._data.docs.length + ` post${plural}...`;
-    } else {
-      return "Loading...";
+      this._placeholder = "Search in " + this._data.docs.length + ` post${plural}...`;
+      return;
+    }
+  }
+
+  /**
+   * Event triggered on search box focus.
+   */
+  focus(_) {
+    if (this.lazy && this._data.length === 0 && !this._isLoading) {
+      this.loadData();
     }
   }
 
   render() {
     return html`<div>
-      <input id="q" type="text" placeholder="${this.placeholder()}" @keyup="${this.search}" @click=${this.openIfResults}>
+      <input id="q" type="text" placeholder="${this._placeholder}" @keyup="${this.search}" @click=${this.openIfResults} @focus=${this.focus}>
       ${this._open ? html`
         <div id="results">
           ${this._results.map((result) => html`

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll_ranked_search
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Friedrich Ewald
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-24 00:00:00.000000000 Z
+date: 2023-06-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: redcarpet
@@ -46,7 +46,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.5.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
@@ -56,5 +56,5 @@ requirements: []
 rubygems_version: 3.4.13
 signing_key:
 specification_version: 4
-summary: TF-IDF search for Jekyll posts
+summary: TF-IDF offline search for Jekyll posts
 test_files: []