Cipta Navigasi Boleh Resizable dengan Rangsangan

Artikel ini pada asalnya diterbitkan pada Rails Designer—pustaka komponen UI untuk apl Rails, dibina dengan ViewComponent, direka bentuk dengan CSS Tailwind dan dipertingkatkan dengan Hotwire.

---

Jika apl anda mempunyai navigasi bar sisi, yang agak biasa dengan kebanyakan skrin yang cukup lebar untuk menyokong hari ini, menjadikannya boleh diubah saiz mungkin merupakan ciri yang bagus untuk ditambah. Memberi penyesuaian ini membolehkan pengguna anda mengubah suai skrin untuk tugas yang sedang dijalankan. Mungkin mereka mahu menumpukan pada menulis karya besar seterusnya atau mungkin mereka membelah skrin mereka, menjadikan lebar lalai agak terlalu lebar.

Walau apa pun sebabnya, mengubah saiz navigasi bar sisi (atau mana-mana komponen lain) adalah mudah dengan JavaScript dan dengan itu dengan Rangsangan. Mari selami. Mari kita sediakan asas dalam HTML:

<main data-controller="resizer" class="flex">
  <nav data-resizer-target="container" class="relative w-1/6">
    <!-- Imagine some nav items here -->
  </nav>

  <div class="w-5/6">
    <p>Content for your app here</p>
  </div>
</main>

HTML di atas menggunakan kelas CSS Tailwind, tetapi itu tidak diperlukan untuk contoh ini. Anda sudah tentu boleh menggayakannya mengikut kesukaan anda.

Kini pengawal rangsangan. Seperti yang anda perhatikan dari atas pengendali (elemen yang boleh diseret untuk mengubah saiz) tidak ditambahkan dalam HTML, ia sebaliknya akan disuntik dengan JS.

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="resizer"
export default class extends Controller {
  static targets = ["container"];
  static values = {
    resizing: { type: Boolean, default: false },
    maxWidth: { type: Number, default: 360 } // in px
  };

  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);
  }

  // private

  get #handler() {
    return `
      <span
        data-action="mousedown->resizer#setup"
        class="absolute top-0 w-1 h-full bg-gray-200 -right-px cursor-col-resize hover:bg-gray-300"
      ></span>
    `
  }
}

Ini akan menyuntik pengendali di sebelah elemen-nav (kedudukan mutlak). Ia juga mempunyai tindakan untuk melancarkan setup() pada acara mousedown. Jom tambah.

export default class extends Controller {
  // …
  connect() {
    this.containerTarget.insertAdjacentHTML("beforeend", this.#handler);

    this.resize = this.#resize.bind(this);
    this.stop = this.#stop.bind(this);
  }

  setup() {
      this.resizingValue = true;

      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stop);
  }
  // …
}

Apa yang berlaku di sini? Mengapa tidak menambah #resize() dan #stop() pada acara mousemove dan mouseup masing-masing. Ini adalah untuk memastikan bahawa ini merujuk kepada tika pengawal apabila mengubah saiz dan berhenti dipanggil sebagai pendengar acara, mengekalkan akses kepada sifat dan kaedah pengawal.

Mari tambahkan fungsi peribadi #resize() dan #stop().

export default class extends Controller {
  // …

  // private

  #resize(event) {
    if (!this.resizingValue) return;

    const width = event.clientX - this.containerTarget.offsetLeft;

    if (width <= this.maxWidthValue) {
      this.containerTarget.style.width = `${width}px`;
    } else {
      this.containerTarget.style.width = `${this.maxWidthValue}px`;
    }
  }

  #stop() {
    this.resizingValue = false;

    document.removeEventListener('mousemove', this.resize);
    document.removeEventListener('mouseup', this.stop);
  }

  // …
}

Fungsi #resize() mengira lebar baharu bekas berdasarkan kedudukan tetikus (event.clientX) dan mengemas kini lebar bekas, memastikan ia tidak melebihi lebar maksimum yang dibenarkan (ditetapkan dalam nilai). Fungsi #stop() menghentikan proses saiz semula dengan menetapkan resizingValue kepada false dan mengalih keluar pendengar acara.

Jika anda pergi ke penyemak imbas anda, anda kini boleh mengubah saiz penyemak imbas dan tidak menjadikannya lebih luas daripada nilai yang ditetapkan sebagai maxWidth (360px secara lalai).

Hebat! ? Itu sahaja yang anda perlukan untuk mengubah saiz elemen dalam apl anda menggunakan Rangsangan. Dari sini anda boleh menambah baik dengan menyimpan nilai dalam tetapan pengguna (cth. melalui Redis) agar sama merentas penyemak imbas atau menyimpannya dalam LocalStorage penyemak imbas untuk menyimpannya untuk sesi itu (Rails Designer membantu anda dengan menyediakan utiliti JS untuk itu).

Atas ialah kandungan terperinci Cipta Navigasi Boleh Resizable dengan Rangsangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!