jekyll_ranked_search 0.0.2 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a717e9e1526e49b484e6b84067aa22daef311e21160e80a5c87a5a18fd6aeeb
-  data.tar.gz: 5f6403859df289ecd20971ecb775d08bcc88487616df544ebacc1c2e74805fe6
+  metadata.gz: aa336a48a9eb94c3a0e7e395dee1a9c4a7938339cfa800e528db49b3c2876953
+  data.tar.gz: ced1e0e9cd3919a5a5fc28848c80523a81987698c11b0be0b4ea487f5f3ca3a7
 SHA512:
-  metadata.gz: 7c268065e1ffe5dbd646feca161ed346dfc649c52d2b4f7269e1cab98e17a3a6180cb70c81a82a8c9b081b4b3a4aa7a6d5dd4d7d9b3ea10610a20210610e0f46
-  data.tar.gz: 73822909d296b0d24a711cbffe27ceb906d6319bc419932ce5dc8be94774d1840339aba7eb58634c126c75a836bc4b4279275eab8ae431d47b17ffc9df0127d4
+  metadata.gz: f87c796fa346ac49d87bb939ee85ed37cfbe4083954a2963e2fb04e95963b87e0b95d2b5b03356364a1ce84f59d366fc74477e65fd532f1808ed272b810cda22
+  data.tar.gz: 811a1bebdcbef011282022bfe7083d2284d0c690132aad7a79431fd01fd0548144540f8499c61e04458e6f93ab1b29f4a61a3d05c220e5fede490ce7c05d5861

data/lib/search.js

@@ -4,16 +4,44 @@ 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},
+
+    // Maximum number of results to show
+    maxResults: {type: Number, attribute: "max-results"},
   };
 
+  /**
+   * 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;
+
+    // Default to maximum of 8 results
+    this.maxResults = 8;
+
+    this._placeholder = "Search...";
   }
 
   static styles = css`
@@ -40,6 +68,7 @@ class SearchBox extends LitElement {
       margin-top: 4px;
       z-index: 10;
       background-color: #F6F6F6;
+      overflow: hidden;
       border-radius: 4px;
       box-shadow: 1px 1px 2px #888;
     }
@@ -77,16 +106,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 +134,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 +196,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)));
     }
 
@@ -178,25 +215,37 @@ class SearchBox extends LitElement {
     const candidates = [...results.entries()].sort((a, b) => b[1] - a[1]).map((a) => a[0]);
     
     // Get top n results
-    this._results = candidates.map((idx) => this._data.docs[idx]).slice(0, 8);
+    this._results = candidates.map((idx) => this._data.docs[idx]).slice(0, this.maxResults);
     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.4
 platform: ruby
 authors:
 - Friedrich Ewald
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-24 00:00:00.000000000 Z
+date: 2023-07-05 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: []