מקרים לדוגמה בחלון קופץ

Swetha Gopalakrishnan

Saurabh Rajpal

חלונות קופצים נמצאים בכל מקום באינטרנט. אפשר לראות אותן בתפריטים, בטיפים ומתגים תיבות דו-שיח, המשמשות לתכונות כמו הגדרות חשבון, ווידג'טים של גילוי נאות תצוגות מקדימות של כרטיסי המוצר. למרות מידת הנפוצות של הרכיבים האלה, אנחנו מפתחים אותם בדפדפנים, הוא עדיין מסורבל באופן מפתיע. כדי לפתור את הבעיה, קבוצה חדשה של ממשקי API הצהרתיים של HTML לבניית חלונות קופצים מגיעים לדפדפנים, הראשון אלה הם ה-API של Popover.

חלון קופץ הוא חלק מ-Baseline Newly Available (זמין ב-Baseline Newly).

בדרך כלל מתבלבלים בין חלון קופץ לבין תיבת דו-שיח. אבל יש כמה מפתחות שונות בהתנהגות שלהם. רכיב dialog נפתח באמצעות dialog.showModal (תיבת דו-שיח בחלון מודאלי), היא חוויה שדורשת אינטראקציה מפורשת של המשתמש כדי סוגרים את חלון העזר. popover תומך בסגירת אור. מודל dialog לא עושה זאת. תיבת דו-שיח מודאלית הופכת את שאר הדף לאימי. popover לא. מידע נוסף על ההבדלים

המאמר הזה הוא חלק מסדרה שעוסקת באופן שבו חברות מסחר אלקטרוני שיפרו את האתר שלהם באמצעות תכונות חדשות של CSS וממשק משתמש. במאמר הזה נסביר האופן שבו Tokopedia הטמיעה את Popover API והפיקה ממנו תועלת.

Tokopedia

השימוש במאפייני חלון קופץ הפחית עד 70% של שורות קוד ב-React. חלון העזר יכול להיות נשלט באופן טבעי על ידי HTML במקום לדרוש טיפול באירועים JavaScript ושימוש ב-React.createPortal כדי להעביר את ה-DOM המודל לסוף document.body. אנחנו יכולים גם להשתמש ב-@starting-style כדי להנפיש פתיחה וסגירה של חלון קופץ.—אנדי Wihalim, תוכנה בכירה מהנדסים, Tokopedia.

דפי פרטי המוצר של Tokopedia מכילים תמונות מרובות של מוצרים המוצר. כשמשתמש לוחץ על התמונה הממוזערת של המוצר, נפתח חלון שמראה את תמונה מוגדלת. זהו דפוס נפוץ שבו משתמשים באתרים של מסחר אלקטרוני.

קוד

ב-Tokopedia משתמשים ב-React לפיתוח הקצה הקדמי שלה. לפני ההטמעה של עבור המודל הזה, הם השתמשו בחלון קופץ של DOM ובלחצן. הלחצן שינה את מצב התגובה כדי לפתוח את חלון העזר. באמצעות ה-API הקופץ, הן מציינות מאפיין popovertarget באלמנט שפותח את החלון הקופץ עם ערך שזהה למזהה של רכיב החלון הקופץ.

באמצעות היישום הבסיסי הזה, החלון הקופץ פועל אבל מופיע ונעלם ללא אנימציה. כדי ליצור אנימציית כניסה ויציאה חלקה עבור חלון קופץ, יש להשתמש ב-:popover-open וב-@starting-style ולאפשר אנימציה של מאפיינים בדידים. בדוגמת הקוד הבאה, החלון הקופץ גדל פנימה והחוצה באמצעות transform: 'scale()'בנכס.

בדוגמה הזו לקוד מוצג איך להטמיע אנימציות כניסה ויציאה בממשק ה-API של חלון קופץ.

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

כדי לשרת דפדפנים שאינם תומכים ב-API של חלונות קופצים, Tokopedia הטמיעה את popover-polyfill של אי-זוגי, בגודל 3.2KB בלבד באמצעות דחיסת gzip. הם היו מרוצים מהפוליפיל כי הוא עבד טוב ולא גרם לרגרסיות בביצועים. בסך הכל, הן היו יכולת לצמצם עד 70% שורות קוד ב-React באמצעות ה-API בחלון קופץ.

נקודות למחשבה כשמשתמשים ב-Popover API

ב-Tokopedia משתמשים ב-React, והצוות השיג פיצול קוד על ידי ניתוק רכיב קופץ עבור דפים שאינם משתמשים בו, ואז מבצע פיצול קוד עבור תוכן קופץ. כך הוא הקטין את גודל הבקשה הראשונית.

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

משאבים

• חדש: Popover API
• ההבדל בין חלון קופץ לבין תיבת דו-שיח
• רוצה לדווח על באג או לבקש תכונה חדשה? אנחנו רוצים לשמוע מה דעתך.

קראו את המאמרים הנוספים בסדרה הזו שמדברים על האופן שבו מסחר אלקטרוני החברות הפיקו תועלת מהשימוש בתכונות חדשות של CSS ושל ממשק המשתמש, כמו אנימציות, חלון קופץ, שאילתות קונטיינרים והבורר has().

• למה היכולות של ממשק המשתמש באינטרנט חשובות לאתר המסחר האלקטרוני?
• מקרים לדוגמה של אנימציות מבוססות גלילה
• הצגת מקרים לדוגמה של Transitions
• מקרים לדוגמה של שאילתות קונטיינר
• מקרים לדוגמה של בורר:has()