Эта статья изначально была опубликована в Rails Designer — библиотеке компонентов пользовательского интерфейса для приложения Rails, созданной с помощью ViewComponent, разработанной с помощью Tailwind CSS и улучшенной с помощью Hotwire.

Если в вашем приложении есть навигация на боковой панели, что довольно часто встречается на большинстве экранов, которые в наши дни достаточно широки, чтобы их можно было поддерживать, было бы полезно добавить возможность изменения ее размера. Предоставление этой настройки позволяет вашим пользователям настраивать экран в соответствии с поставленной задачей. Возможно, они хотят сосредоточиться на написании следующего большого произведения, или, может быть, они разделили экран, сделав ширину по умолчанию слишком широкой.

Какова бы ни была причина, изменить размер навигации на боковой панели (или любого другого компонента) легко с помощью JavaScript и, следовательно, с помощью Stimulus. Давайте приступим прямо к делу. Давайте настроим основы HTML:

  

  

    
Content for your app here
  

Вышеприведенный HTML использует классы CSS Tailwind, но для данного примера это не требуется. Вы, конечно, можете оформить его так, как вам нравится.

Теперь контроллер стимулов. Как вы заметили выше, обработчик (элемент, размер которого можно перетаскивать) не добавляется в 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 `
      
    `
  }
}

Это добавит обработчик рядом с навигационным элементом (абсолютное позиционирование). У него также есть действие для запуска setup() при событии mousedown. Давайте добавим его.

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

Что здесь происходит? Почему бы не добавить #resize() и #stop() для событий mousemove и mouseup соответственно. Это необходимо для того, чтобы это относилось к экземпляру контроллера, когда изменения размера и остановки вызываются как прослушиватели событий, сохраняя доступ к свойствам и методам контроллера.

Давайте добавим частные функции #resize() и #stop().

export default class extends Controller {
  // …

  // private

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

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

    if (width 



Функция #resize() вычисляет новую ширину контейнера на основе положения мыши (event.clientX) и обновляет ширину контейнера, гарантируя, что она не превышает максимально допустимую ширину (заданную в значениях). Функция #stop() останавливает процесс изменения размера, устанавливая для resizingValue значение false и удаляя прослушиватели событий.

Если вы перейдете в браузер, теперь вы можете изменить его размер, не делая его шире, чем значение, установленное как maxWidth (360 пикселей по умолчанию).

Потрясающе! ? Это все, что вам нужно, чтобы изменить размер элемента в вашем приложении с помощью Stimulus. Отсюда вы можете улучшить, сохранив значение в настройках пользователя (например, через Redis), чтобы оно было одинаковым во всех браузерах, или сохранить его в LocalStorage браузера, чтобы сохранить его для этого сеанса (Rails Designer поможет вам, предоставив для этого утилиты JS).