معاينات الإجراءات التي يتم اتّخاذها استنادًا إلى الاهتمامات

قد يكون من المفيد تزويد المستخدمين بمعاينة لإجراءاتهم قبل الالتزام بها. "مُفعِّلات الاهتمام" هي ميزة تجريبية في منصة الويب توفّر طريقة مستندة إلى التعريف لإنشاء علاقات استهداف الاهتمامات بين مصدر الاهتمام (أي زر أو رابط) وهدف الاهتمام. بعد إنشاء العلاقة التعريفية، تتوفّر عدة طرق يمكن للمطوّر الاستجابة لها استنادًا إلى الاهتمام وفقدان الاهتمام باستخدام كل من 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 لمعاينة التأثيرات المختلفة لهدف استهداف الاهتمامات. كلا الحدثَين هما InterestEvents يتضمّنان السمة 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

يجب استخدام حزمة 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 قليلاً لمراعاة عدم توفّر فئة زائفة وسمة أصليتين:

• الفئات الصورية: لا يمكن لـ 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);
}