আগ্রহের ভিত্তিতে ট্রিগার করা অ্যাকশনের প্রিভিউ

ব্যবহারকারীরা কোনও অ্যাকশন নেওয়ার আগে তাদের সেই অ্যাকশনের প্রিভিউ দেখানো হলে তা তাদের জন্য সুবিধাজনক হতে পারে। ইন্টারেস্ট ইনভোকার হল একটি পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম ফিচার যা ইন্টারেস্ট সোর্স (যেমন, একটি বোতাম বা লিঙ্ক) এবং ইন্টারেস্ট টার্গেটের মধ্যে ইন্টারেস্ট সম্পর্ক তৈরি করার জন্য একটি ডিক্লারেটিভ-ভিত্তিক উপায় প্রদান করে। ডিক্লারেটিভ সম্পর্ক স্থাপন করা হয়ে গেলে, CSS ও জাভাস্ক্রিপ্ট ব্যবহার করে আগ্রহ ও আগ্রহ হারানোর ভিত্তিতে ডেভেলপার বিভিন্ন পদ্ধতিতে প্রতিক্রিয়া জানাতে পারেন। এই ব্যবহারের ক্ষেত্রে, আমরা আগ্রহ ভিত্তিক টার্গেটের জন্য বিভিন্ন এফেক্টের প্রিভিউ দেখতে 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 অ্যাট্রিবিউট সহ এলিমেন্ট) শুরু ও শেষ হওয়ার বিলম্ব interest-delay-start ও interest-delay-end CSS প্রপার্টি বা শর্টহ্যান্ড interest-delay প্রপার্টি দিয়ে সেট করা যেতে পারে।

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

ফলব্যাক স্ট্র্যাটেজি

ইন্টারেস্ট ইনভোকারের জন্য ফলব্যাক ও ব্রাউজার সহায়তা

NPM থেকে interestfor পলিফিল প্যাকেজ ব্যবহার করে ইন্টারেস্ট ইনভোকারকে শর্তসাপেক্ষে পলিফিল করতে হবে। CDN ব্যবহার করার পরিবর্তে পলিফিল বান্ডেল করাকে অগ্রাধিকার দিন।

বাধ্যতামূলক: HTMLButtonElement.prototype-এ interestForElement প্রপার্টি চেক করে ফিচার শনাক্ত করুন এবং নেটিভ সাপোর্ট না থাকলে শুধুমাত্র তখনই পলিফিল লোড করুন।

<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 পলিফিল সংক্রান্ত সতর্কতা

পলিফিল ব্যবহার করার সময়, নেটিভ সিউডো-ক্লাস ও প্রপার্টি সাপোর্ট না থাকার কারণে CSS API-তে সামান্য পরিবর্তন হয়:

• সিউডো-ক্লাস: পলিফিল আসল :interest-source এবং :interest-target সিউডো-ক্লাস নির্ধারণ করতে পারে না, তাই এটি পরিবর্তে .interest-source এবং .interest-target ক্লাস প্রয়োগ করে। বাধ্যতামূলক: নেটিভ ও পলিফিল্ড, উভয় স্টেটেই কাজ করার জন্য :is()-এর সাথে এগুলি একত্রিত করুন।

/* 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-এর জন্য, পলিফিলকে 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);
}