Remove jQuery dependency from search

Signed-off-by: Takuya Noguchi <[email protected]>
rubygems · Jul 11, 2022 · 3ae4fb7 · 3ae4fb7
1 parent a78ef2f
commit 3ae4fb7
Showing 1 changed file with 50 additions and 39 deletions.
diff --git a/assets/javascripts/search.js b/assets/javascripts/search.js
@@ -5,18 +5,16 @@ var lunrIndex = null;
 var lunrData  = null;
 var search = null;
 
-$(document).ready(function() {
-  $.ajax({
-    url: "/search/lunr-index.json",
-    cache: true,
-    method: 'GET',
-    success: function (data) {
-      lunrData = data;
+document.addEventListener('DOMContentLoaded', function() {
+  var oReq = new XMLHttpRequest();
+  oReq.open("GET", "/search/lunr-index.json");
+  oReq.addEventListener("load", function () {
+      lunrData = JSON.parse(oReq.response);
       lunrIndex = lunr.Index.load(lunrData.index);
       search = new Search();
       search.init();
-    }
-  });
+    });
+  oReq.send();
 });
 
 (function() {
@@ -41,18 +39,18 @@ $(document).ready(function() {
     };
 
     this.initializePopover = function() {
-      this.popover = this.searchInput.popover(this.POPOVER_OPTIONS).data('bs.popover');
+      // TODO this.popover = this.searchInput.popover(this.POPOVER_OPTIONS).data('bs.popover');
     };
 
     this.hidePopover = function() {
-      this.popover.options.animation = true;
-      this.searchInput.popover('hide');
+      // TODO this.popover.options.animation = true;
+      // TODO this.searchInput.popover('hide');
       this.searchArrows.destroy();
     };
 
     this.showPopover = function(text) {
       this.popoverContent = this.generatePopoverContent(text);
-      this.searchInput.popover('show');
+      // TODO this.searchInput.popover('show');
     };
 
     this.generatePopoverContent = function(text) {
@@ -65,20 +63,34 @@ $(document).ready(function() {
       var generated = '<ul class="search-list-ul">';
       uniqueResults.forEach(function(res) {
         var store = lunrData.docs[res.ref];
-        var description = (store.description == null ? '' : $('<p>').text(store.description));
-
-        var element = $('<div>').html(
-          $('<li class="search-list-li">').html(
-            $('<a>').attr('href', store.url).html('<h4>' + store.title + '</h4>').
-            append(
-              $('<br />')
-            )
-          ).append(description).
-          append(
-            $('<li>').attr('class', 'separator').html($('<hr />'))
-          )
-        );
-        generated += element.html();
+        var elems = [];
+
+        // title
+        var title = document.createElement('h4')
+        title.textContent = store.title;
+        var titleLink = document.createElement('a');
+        titleLink.href = store.url;
+        titleLink.appendChild(title);
+        var li = document.createElement('li');
+        li.className = "search-list-li";
+        li.appendChild(titleLink);
+        li.appendChild(document.createElement('br'));
+        elems.push(li);
+
+        // description
+        if (store.description !== null) {
+          var description = document.createElement('p');
+          description.appendChild(document.createTextNode(store.description));
+          elems.push(description);
+        }
+
+        // separator
+        var liSep = document.createElement('li');
+        liSep.className = 'separator';
+        liSep.appendChild(document.createElement('hr'));
+        elems.push(liSep);
+
+        generated += elems.map(el => el.outerHTML).join("");
       });
 
       return generated + '</ul>';
@@ -87,8 +99,8 @@ $(document).ready(function() {
     this.uniqueResults = function(results) {
       var uniqueResults = [];
       var titles = [];
-      $.each(results, function(i, el){
-        if($.inArray(lunrData.docs[el.ref].title, titles) === -1) {
+      [].forEach.call(results, function (el) {
+        if(titles.indexOf(lunrData.docs[el.ref].title) === -1) {
           titles.push(lunrData.docs[el.ref].title);
           uniqueResults.push(el);
         }
@@ -99,32 +111,31 @@ $(document).ready(function() {
     this.initializePopoverEvents = function() {
       var self = this;
 
-      this.searchInput.on('paste keyup', function(e) {
+      this.searchInput.addEventListener('input', function(e) {
         if (self.searchArrows.isOneOfKeys(e.which)) return;
         if (e.which == 27)  return self.hidePopover(); // esc key
 
-        var text = $(this).val();
+        var text = this.value;
         self.processText(text);
       });
-      this.searchInput.focus(function(e)  {
-        var text = $(this).val();
+      this.searchInput.addEventListener('focus', function(e)  {
+        var text = this.value;
         if (text === '') return;
 
         self.showPopover(text);
       });
-      this.searchInput.on('shown.bs.popover', function()  {
-        self.popoverHandler = $(self.POPOVER_CLASS);
-        self.popover.options.animation = false;
+      this.searchInput.addEventListener('shown.bs.popover', function()  {
+        self.popoverHandler = document.querySelector(self.POPOVER_CLASS);
         self.popoverHandler.click(function(e) { e.stopPropagation() });
         self.searchArrows.init();
       });
-      this.searchInput.click(function(e) { e.stopPropagation() });
-      $(window).click(function() { self.hidePopover() });
+      this.searchInput.addEventListener('click', function(e) { e.stopPropagation() });
+      window.addEventListener('click', self.hidePopover);
     }
   };
 
   Search.prototype.init = function()  {
-    this.searchInput = $(this.SEARCH_INPUT_ID);
+    this.searchInput = document.querySelector(this.SEARCH_INPUT_ID);
     this.searchArrows = new SearchArrows();
     this.initializePopoverEvents();
     this.initializePopover();