Quick Misc Edits (Perbaikan UX Search Overlay)

1. Pindahkan HTML Overlay dari PHP ke JavaScript

Alasan:

• Lebih terorganisir — HTML search hidup bersama logic JavaScript-nya
• Jika user disable JavaScript, HTML overlay tidak perlu dikirim (hemat bytes)

Langkah: Hapus HTML dari footer.php, Buat Method Baru di Search.js

Hapus dari footer.php: Hapus seluruh <div class="search-overlay">...</div> dari footer.php.

Tambah method addSearchHTML() di Search.js:

class Search {
  constructor() {
    this.addSearchHTML();  // ← HARUS dipanggil pertama!
    this.resultsDiv = $("#search-overlay__results");
    this.openButton = $(".js-search-trigger");
    this.closeButton = $(".search-overlay__close");
    this.searchOverlay = $(".search-overlay");
    this.searchField = $("#search-term");
    // ... sisanya tetap sama
  }

  // ... method lainnya ...

  addSearchHTML() {
    $("body").append(`
      <div class="search-overlay">
        <div class="search-overlay__top">
          <div class="container">
            <i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
            <input type="text" class="search-term" placeholder="What are you looking for?" id="search-term" autocomplete="off">
            <i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
          </div>
        </div>
        <div class="container">
          <div id="search-overlay__results"></div>
        </div>
      </div>
    `);
  }
}

Penting: Urutan di Constructor

this.addSearchHTML() HARUS dipanggil sebelum property lain yang mencari elemen DOM (seperti this.searchField = $("#search-term")), karena elemen tersebut belum ada di DOM sebelum method ini dijalankan.

2. Kurangi Typing Timer

Sebelum:

this.typingTimer = setTimeout(this.getResults.bind(this), 2000);

Sesudah:

this.typingTimer = setTimeout(this.getResults.bind(this), 750);

750ms (3/4 detik) terasa lebih responsif daripada 2000ms.

3. Auto-Focus pada Text Field

Masalah:

Saat overlay dibuka, user harus klik manual ke text field sebelum bisa mengetik.

Solusi di openOverlay():

openOverlay() {
  this.searchOverlay.addClass("search-overlay--active");
  $("body").addClass("body-no-scroll");
  this.searchField.val('');  // ← kosongkan field
  setTimeout(() => this.searchField.focus(), 301);
}

Kenapa 301ms?

• Overlay menggunakan CSS transition 300ms untuk fade-in
• Browser tidak bisa focus elemen yang belum visible
• 301ms = cukup waktu untuk transition selesai, baru focus

Arrow Function di setTimeout

// Cara panjang:
setTimeout(function() {
  this.searchField.focus();
}.bind(this), 301);

// Cara singkat (ES6 arrow function):
setTimeout(() => this.searchField.focus(), 301);

Arrow function:

• Tidak perlu .bind(this)
• Tidak perlu curly brackets untuk single-line body
• Tidak perlu semicolon di dalam body

4. Kosongkan Field Saat Reopen

Di openOverlay(), tambahkan sebelum setTimeout:

this.searchField.val('');

Sehingga setiap kali overlay dibuka ulang, field sudah bersih — user langsung bisa cari hal baru.

Kode Lengkap openOverlay():

openOverlay() {
  this.searchOverlay.addClass("search-overlay--active");
  $("body").addClass("body-no-scroll");
  this.searchField.val('');
  setTimeout(() => this.searchField.focus(), 301);
}