תצוגות מקדימות של פעולות שמופעלות על סמך תחומי עניין

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

איך מטמיעים

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

<!-- MANDATORY: interest relationships must be established with the `interestfor` attribute on a button or a link -->
<button interestfor="interestingElement" data-effect="A">Some effect</button>
<button interestfor="interestingElement" data-effect="B">Some other effect</button>
<div id="interestingElement">Something interesting</div>

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

interestingElement.addEventListener("interest", event => {
  // Apply the preview based on `event.source`
  event.target.dataset.preview = event.source.dataset.effect;
});

interestingElement.addEventListener("loseinterest", event => {
  // Unapply the preview
  delete event.target.dataset.preview;
});

אפשר לבחור מקורות ויעדים פעילים של עניין באמצעות CSS, בעזרת הסלקטורים המדומים :interest-source ו-:interest-target בהתאמה.

/* Styles to apply when the effect is being previewed */
:interest-source {}
:interest-target {}

אפשר להגדיר את ההשהיה בתחילת ובסיום של מפעיל עניין (כלומר, הרכיב עם המאפיין interestfor) באמצעות מאפייני ה-CSS‏ interest-delay-start ו-interest-delay-end או המאפיין המקוצר interest-delay.

[interestfor] {
  interest-delay-start: 0.2s;
  interest-delay-end: 0.1s;
}

אסטרטגיות חלופיות

תמיכה בדפדפנים וחלופות ל-Interest invokers

צריך להוסיף ל-Interest Invokers פוליפיל (polyfill) מותנה באמצעות חבילת הפוליפיל interestfor מ-NPM. עדיף להשתמש ב-polyfill כחלק מחבילה ולא ב-CDN.

חובה: מזהים את התכונה על ידי בדיקת המאפיין interestForElement ב-HTMLButtonElement.prototype, וטוענים את ה-polyfill רק כשאין תמיכה מקומית.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

אזהרות לגבי CSS Polyfill

כשמשתמשים ב-polyfill, ה-CSS API משתנה קצת כדי לפצות על היעדר התמיכה המקורית במאפיינים ובמחלקות פסאודו:

• מחלקה מדומה (Pseudo-class): ה-polyfill לא יכול להגדיר מחלקות מדומות אמיתיות של :interest-source ו-:interest-target, אז הוא מחיל במקומן מחלקות של .interest-source ו-.interest-target. חובה: צריך לשלב אותם עם :is() כדי לתמוך במצבים מקוריים ובמצבים עם polyfill.

/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }

• מאפייני CSS: ב-interest-delay, ב-interest-delay-start וב-interest-delay-end, ה-polyfill דורש שימוש במשתני CSS כי הוא לא יכול לקרוא את המאפיינים המותאמים אישית ישירות בכל הדפדפנים.

/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}