दिलचस्पी के आधार पर ट्रिगर होने वाली कार्रवाइयों की झलक

उपयोगकर्ताओं को उनकी कार्रवाइयों की झलक दिखाना फ़ायदेमंद हो सकता है. इससे वे कार्रवाइयां करने से पहले, उनकी झलक देख सकते हैं. इंटरेस्ट इन्वोकर, वेब प्लैटफ़ॉर्म की एक एक्सपेरिमेंटल सुविधा है. यह डिक्लेरेटिव तरीके से, दिलचस्पी के सोर्स (जैसे, कोई बटन या लिंक) और दिलचस्पी के टारगेट के बीच संबंध बनाने का तरीका उपलब्ध कराती है. डिक्लेरेटिव रिलेशनशिप सेट अप होने के बाद, डेवलपर के पास कई तरीके होते हैं जिनसे वह सीएसएस और 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;
});

सीएसएस का इस्तेमाल करके, दिलचस्पी के चालू सोर्स और टारगेट चुने जा सकते हैं. इसके लिए, :interest-source और :interest-target स्यूडो-सिलेक्टर का इस्तेमाल करें.

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

इंटरेस्ट इन्वोकर (यानी कि interestfor एट्रिब्यूट वाला एलिमेंट) के लिए, शुरू और खत्म होने में लगने वाले समय को interest-delay-start और interest-delay-end सीएसएस प्रॉपर्टी या शॉर्टहैंड interest-delay प्रॉपर्टी की मदद से सेट किया जा सकता है.

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

फ़ॉलबैक रणनीतियां

इंटरेस्ट इन्वोकर के लिए फ़ॉलबैक और ब्राउज़र की सुविधा

दिलचस्पी के आधार पर ट्रिगर होने वाले इवेंट को, NPM के interestfor पॉलीफ़िल पैकेज का इस्तेमाल करके, शर्त के साथ पॉलीफ़िल किया जाना चाहिए. सीडीएन का इस्तेमाल करने के बजाय, पॉलीफ़िल को बंडल करें.

ज़रूरी: HTMLButtonElement.prototype पर interestForElement प्रॉपर्टी की जांच करके, सुविधा का पता लगाएं. साथ ही, नेटिव सपोर्ट मौजूद न होने पर ही 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>

सीएसएस पॉलीफ़िल से जुड़ी चेतावनियां

पॉलीफ़िल का इस्तेमाल करने पर, सीएसएस एपीआई में थोड़ा बदलाव होता है. ऐसा नेटिव स्यूडो-क्लास और प्रॉपर्टी के काम न करने की वजह से होता है:

• Pseudo-classes: Polyfill, असल :interest-source और :interest-target pseudo-classes को तय नहीं कर सकता. इसलिए, यह इसके बजाय .interest-source और .interest-target क्लास लागू करता है. ज़रूरी: नेटिव और पॉलीफ़िल, दोनों स्थितियों के साथ काम करने के लिए, उन्हें :is() के साथ जोड़ें.

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

• सीएसएस प्रॉपर्टी: interest-delay, interest-delay-start, और interest-delay-end के लिए, पॉलीफ़िल को सीएसएस वैरिएबल का इस्तेमाल करना ज़रूरी है. ऐसा इसलिए, क्योंकि यह सभी ब्राउज़र में कस्टम प्रॉपर्टी को सीधे तौर पर नहीं पढ़ सकता.

/* 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);
}