Open & Close Search Overlay

Tujuan

Membuat overlay full-screen yang muncul saat klik icon search, dan hilang saat klik tombol close.

---

Langkah 1: HTML Overlay di footer.php

Di footer.php, tepat sebelum </body>:

<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" id="search-term" placeholder="What are you looking for?" 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>

💡 Tambahkan autocomplete="off" pada input untuk mencegah popup suggestion dari browser.

CSS Class

Class	Efek
search-overlay	Hidden by default
search-overlay--active	Membuat overlay visible (ditambah/dihapus via JS)
body-no-scroll	overflow: hidden — mencegah scroll saat overlay terbuka

---

Langkah 2: JavaScript — Search.js

import $ from 'jquery';

class Search {
  // 1. Constructor
  constructor() {
    this.openButton = $(".js-search-trigger");
    this.closeButton = $(".search-overlay__close");
    this.searchOverlay = $(".search-overlay");
    this.events();
  }

  // 2. Events
  events() {
    this.openButton.on("click", this.openOverlay.bind(this));
    this.closeButton.on("click", this.closeOverlay.bind(this));
  }

  // 3. Methods
  openOverlay() {
    this.searchOverlay.addClass("search-overlay--active");
    $("body").addClass("body-no-scroll");
  }

  closeOverlay() {
    this.searchOverlay.removeClass("search-overlay--active");
    $("body").removeClass("body-no-scroll");
  }
}

export default Search;

---

.bind(this) — Mengapa Diperlukan?

jQuery .on() method secara default mengubah this dalam callback menjadi HTML element yang di-klik. Tapi kita butuh this merujuk ke object Search kita.

// ❌ Tanpa bind — this = HTML element yang diklik
this.openButton.on("click", this.openOverlay);

// ✅ Dengan bind — this = object Search
this.openButton.on("click", this.openOverlay.bind(this));

Tanpa .bind(this), this.searchOverlay di dalam openOverlay() akan error karena HTML element tidak punya property searchOverlay.