تم نشر هذه المقالة في الأصل على Rails Designer—مكتبة مكونات واجهة المستخدم لتطبيق Rails، المبنية باستخدام ViewComponent، والمصممة باستخدام Tailwind CSS والمعززة باستخدام Hotwire.

---

إذا كان تطبيقك يحتوي على شريط التنقل الجانبي، وهو أمر شائع جدًا حيث تكون معظم الشاشات واسعة بما يكفي لدعم هذه الأيام، فقد تكون إمكانية تغيير حجمها ميزة رائعة يمكنك إضافتها. يتيح منح هذا التخصيص للمستخدمين إمكانية تعديل الشاشة للمهمة التي يقومون بها. ربما يريدون التركيز على كتابة القطعة الكبيرة التالية أو ربما يقومون بتقسيم شاشتهم، مما يجعل العرض الافتراضي عريضًا بعض الشيء.

مهما كان السبب، يعد تغيير حجم شريط التنقل الجانبي (أو أي مكون آخر) أمرًا سهلاً باستخدام JavaScript وبالتالي باستخدام Stimulus. هيا بنا نتعمق في الأمر. فلنقم بإعداد الأساسيات في HTML:

    
Content for your app here
  

يستخدم 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 `
      
    `
  }
}

سيؤدي هذا إلى إدخال المعالج بجوار عنصر التنقل (الموضع المطلق). كما أن لديها أيضًا إجراء لإطلاق setup() في حدث mousedown. دعونا نضيفه.

تصدير الفئة الافتراضية يمتد وحدة التحكم { // ... يتصل() { this.containerTarget.insertAdjacentHTML("beforeend", this.#handler); this.resize = this.#resize.bind(this); this.stop = this.#stop.bind(this); } يثبت() { this.resizingValue = true; document.addEventListener('mousemove', this.resize); document.addEventListener('mouseup', this.stop); } // ... }

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().

تصدير الفئة الافتراضية يمتد وحدة التحكم { // ... // خاص # تغيير الحجم (الحدث) { إذا عاد (! this.resizingValue) ؛ const width = events.clientX - this.containerTarget.offsetLeft; إذا (العرض 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() العرض الجديد للحاوية بناءً على موضع الماوس (event.clientX) وتقوم بتحديث عرض الحاوية، مما يضمن عدم تجاوز الحد الأقصى للعرض المسموح به (المحدد في القيم). تعمل الدالة #stop() على إيقاف عملية تغيير الحجم عن طريق تعيين قيمة resizingValue إلى false وإزالة مستمعي الأحداث.

إذا توجهت إلى متصفحك، فأنت الآن قادر على تغيير حجم المتصفح وعدم جعله أوسع من القيمة المعينة على maxWidth (360 بكسل افتراضيًا).

رائع! ؟ هذا هو كل ما تحتاجه لتغيير حجم عنصر في تطبيقك باستخدام Stimulus. من هنا يمكنك التحسين من خلال تخزين القيمة في إعدادات المستخدم (على سبيل المثال عبر Redis) لتكون هي نفسها عبر المتصفحات أو تخزينها في LocalStorage للمتصفح لتخزينها لتلك الجلسة (يساعدك Rails Designer من خلال توفير أدوات JS المساعدة لذلك).