טכניקות עיצוב ריספונסיבי רבות כוללות שינוי גדלים של אלמנטים כשהעמוד משנה גודל, ובאמת עם CSS אפשר להגיע לתוצאות טובות כשמה שמעניין אותנו הוא המסך כולו. אבל ברגע שאנחנו מתחילים לשלב JavaScript העסק הופך יותר מסובך - קוד JavaScript יכול לגרום לשינוי גודל של אלמנט מסוים בעמוד, בלי לשנות את הגודל של כל החלון.

ממשק חדש שזמין כבר בכל הדפדפנים המרכזיים בשם Resize Observer יכול לעזור לנו לזהות שינויים כאלה ולהגיב אליהם, וכך אנחנו לא צריכים כל פעם שכותבים JavaScript בעמוד לחשוב על איזה גדלים הוא עלול להשפיע. בואו נראה דוגמה לממשק זה ודרכה גם אסביר איך הוא עובד.

1. דוגמה: עדכון צבע רקע לפי שינוי גודל תיבת טקסט

הקודפן הבא כולל דוגמה ראשונה ל Resize Observer שמשנה את צבע הרקע של המסך עם כל שינוי בגודל ה text area. אתם יכולים לנסות למשוך בידית של ה textarea כדי להגדיל ולהקטין אותו ולראות את הצבע משתנה:

הקוד של ResizeObserver הולך לפי תבנית פשוטה:

1. ביצירה אנחנו מעבירים Callback Function שתיקרא כל פעם שאלמנט שעוקבים אחריו משנה גודל.

2. אנחנו קוראים לפונקציה observe ומעבירים לה אלמנט כדי להתחיל לעקוב אחרי שינויים בגודל של אלמנט מסוים.

זה קוד ה JavaScript:

const textarea = document.querySelector('textarea');

const observer = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.target === textarea) {
      const area = entry.contentRect.width * entry.contentRect.height;

      if (area < 15000) {
        document.body.style.backgroundColor = 'yellow';
      } else if (area < 30000) {
        document.body.style.backgroundColor = 'blue';
      } else if (area < 100000) {
        document.body.style.backgroundColor = 'green';
      } else {
        document.body.style.backgroundColor = 'purple';
      }
    }
  }
});

observer.observe(textarea);

כמה החלטות עיצוביות של הממשק ששווה לשים לב אליהן:

1. ה Callback Function מקבל מערך של Entries. זה מערך בגלל שאפשר להשתמש באותו ResizeObserver כדי לעקוב אחר שינויי גודל במספר אלמנטים. כל תא במערך מייצג גודל שהשתנה באיזשהו אלמנט שעקבנו אחריו.

2. כל Entry מכיל את האלמנט שהשתנה ואת הגודל החדש שלו. בצורה כזאת לא צריך לתשאל מחדש את ה DOM לגבי הגודל, מה שמביא לביצועים טובים יותר.