Stimulus を使用してサイズ変更可能なナビゲーションを作成する

この記事は元々、Rails Designer で公開されました。Rails アプリの UI コンポーネント ライブラリは、ViewComponent で構築され、Tailwind CSS で設計され、Hotwire で強化されました。

---

アプリにサイドバー ナビゲーションがある場合 (最近では、ほとんどの画面が十分な幅でサポートできるのが一般的です)、サイズ変更可能にすることは、追加すると優れた機能になる可能性があります。このカスタマイズを行うことで、ユーザーは現在のタスクに合わせて画面を微調整できるようになります。もしかしたら、次の大きな作品を書くことに集中したいのかもしれません。あるいは、画面を分割してデフォルトの幅が少し広すぎるかもしれません。

理由が何であれ、サイドバー ナビゲーション (またはその他のコンポーネント) のサイズ変更は JavaScript を使用すると簡単にでき、したがって Stimulus を使用すると簡単になります。早速見ていきましょう。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 では Tailwind CSS クラスを使用していますが、この例では必要ありません。もちろん、お好みのスタイルに仕上げることもできます。

今度は刺激コントローラーです。上からお気づきのとおり、ハンドラー (ドラッグしてサイズ変更できる要素) は HTML には追加されず、代わりに 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>
    `
  }
}

これにより、nav 要素 (絶対配置) の隣に ハンドラー が挿入されます。また、mousedown イベントで setup() を起動するアクションもあります。追加しましょう。

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);
  }
  // …
}

ここで何が起こっているのですか？それぞれmousemoveイベントとmouseupイベントに #resize() と #stop() を追加してみてはいかがでしょうか。これは、resize と stop がイベント リスナーとして呼び出されるときに、これがコントローラー インスタンスを参照するようにし、コントローラーのプロパティとメソッドへのアクセスを維持するためです。

プライベート関数 #resize() と #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);
  }

  // …
}

#resize() 関数は、マウスの位置 (event.clientX) に基づいてコンテナの新しい幅を計算し、コンテナの幅を更新して、最大許容幅 (値で設定) を超えないようにします。 #stop() 関数は、 resizingValue を false に設定し、イベント リスナーを削除することで、サイズ変更プロセスを停止します。

ブラウザに移動すると、ブラウザのサイズを変更できますが、maxWidth として設定された値 (デフォルトでは 360px) より幅を広くすることはできません。

すごい！ ? Stimulus を使用してアプリ内の要素のサイズを変更するために必要なのはこれだけです。ここからは、ブラウザ間で同じになるようにユーザーの設定に値を保存する (Redis 経由など) か、ブラウザの LocalStorage に値を保存してそのセッション用に値を保存することで改善できます (Rails Designer は、そのための JS ユーティリティを提供することで役に立ちます)。

以上がStimulus を使用してサイズ変更可能なナビゲーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。