ওয়েবে পপওভার এখন সর্বত্রই দেখা যায়। মেনু, টগলটিপ এবং ডায়ালগে এগুলি ব্যবহৃত হয়, যেমন অ্যাকাউন্ট সেটিংস, ডিসক্লোজার উইজেট এবং প্রোডাক্ট কার্ড প্রিভিউয়ের মতো ফিচারের জন্য। এই কম্পোনেন্টগুলো এত প্রচলিত হওয়া সত্ত্বেও, ব্রাউজারে এগুলো তৈরি করা এখনও আশ্চর্যজনকভাবে কষ্টসাধ্য। এই সমস্যার সমাধান করতে, পপওভার তৈরির জন্য এক নতুন সেট ডিক্লারেটিভ HTML API ব্রাউজারে আসছে, যার মধ্যে প্রথমটি হলো পপওভার এপিআই (Popover API )।
প্রায়শই পপওভারকে ডায়ালগের সাথে গুলিয়ে ফেলা হয়। তবে এদের আচরণে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে। dialog.showModal দিয়ে খোলা একটি dialog এলিমেন্ট (একটি মোডাল ডায়ালগ) হলো এমন একটি অভিজ্ঞতা, যা বন্ধ করার জন্য ব্যবহারকারীর সুস্পষ্ট হস্তক্ষেপের প্রয়োজন হয়। একটি popover light-dismiss সমর্থন করে। একটি মোডাল dialog তা করে না। একটি মোডাল ডায়ালগ পৃষ্ঠার বাকি অংশকে নিষ্ক্রিয় করে দেয়। একটি popover তা করে না। পার্থক্যগুলো সম্পর্কে আরও পড়ুন ।
এই নিবন্ধটি এমন একটি ধারাবাহিক প্রতিবেদনের অংশ , যেখানে আলোচনা করা হয়েছে কিভাবে ইকমার্স কোম্পানিগুলো নতুন CSS এবং UI ফিচার ব্যবহার করে তাদের ওয়েবসাইটকে আরও উন্নত করেছে। এই নিবন্ধে জানুন, টোকোপিডিয়া কীভাবে পপওভার এপিআই (Popover API) প্রয়োগ করেছে এবং এর থেকে উপকৃত হয়েছে।
টোকোপিডিয়া
React-এ popover অ্যাট্রিবিউট ব্যবহার করে কোডের লাইন ৭০% পর্যন্ত কমানো সম্ভব হয়েছে। জাভাস্ক্রিপ্টে ইভেন্ট হ্যান্ডলিং এবং
document.bodyএর শেষে মডাল DOM সরানোর জন্যReact.createPortalব্যবহার করার পরিবর্তে, মডালটিকে সরাসরি HTML দ্বারাই নিয়ন্ত্রণ করা যায়। এছাড়াও, আমরা@starting-styleব্যবহার করে পপওভারের খোলা ও বন্ধ হওয়াকে অ্যানিমেট করতে পারি।— অ্যান্ডি উইহালিম , সিনিয়র সফটওয়্যার ইঞ্জিনিয়ার, টোকোপিডিয়া ।
টোকোপিডিয়ার প্রোডাক্ট ডিটেইল পেজ (পিডিপি)-এ প্রতিটি পণ্যের জন্য একাধিক ছবি থাকে। পণ্যের থাম্বনেইলে ক্লিক করলে, বড় ছবিটি দেখানোর জন্য একটি মোডাল উইন্ডো খোলে। ইকমার্স ওয়েবসাইটগুলোতে এটি একটি প্রচলিত পদ্ধতি।
কোড
টোকোপিডিয়া তাদের ফ্রন্টএন্ড ডেভেলপমেন্টের জন্য রিয়্যাক্ট ব্যবহার করে। এই মোডালটির জন্য পপওভার এপিআই প্রয়োগ করার আগে, তারা একটি ডম মোডাল এবং একটি বাটন ব্যবহার করত। বাটনটি মোডালটি খোলার জন্য রিয়্যাক্ট স্টেট পরিবর্তন করত। পপওভার এপিআই ব্যবহার করে, তারা এলিমেন্টটিতে একটি popovertarget অ্যাট্রিবিউট নির্দিষ্ট করে দেয়, যা পপওভার এলিমেন্টের আইডির সমান একটি ভ্যালু দিয়ে পপওভারটি খোলে।
এই সাধারণ বাস্তবায়নে, পপওভারটি কাজ করে কিন্তু কোনো অ্যানিমেশন ছাড়াই আবির্ভূত ও অদৃশ্য হয়। পপওভারের জন্য একটি মসৃণ প্রবেশ ও প্রস্থান অ্যানিমেশন তৈরি করতে, :popover-open এবং @starting-style ব্যবহার করুন এবং স্বতন্ত্র প্রোপার্টিগুলোর অ্যানিমেশনের অনুমতি দিন। নিম্নলিখিত কোড উদাহরণে, transform: 'scale()' প্রোপার্টি ব্যবহার করে পপওভারটি ছোট ও বড় হয়।
এই কোড উদাহরণটি দেখায় কিভাবে পপওভার এপিআই-এর জন্য এন্ট্রি এবং এক্সিট অ্যানিমেশন প্রয়োগ করতে হয়।
<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',
transform: 'scale(0.8)',
opacity: 0,
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
'&:popover-open': {
transform: 'scale(1)',
opacity: 1,
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
},
});
যেসব ব্রাউজার পপওভার এপিআই সমর্থন করে না, তাদের সুবিধার জন্য টোকোপিডিয়া oddbird-এর তৈরি popover-polyfill- টি প্রয়োগ করেছে, যা gzip কম্প্রেশনের পর মাত্র ৩.২ কিলোবাইট। তারা এই পলিফিলটি নিয়ে সন্তুষ্ট ছিল, কারণ এটি ভালোভাবে কাজ করেছে এবং পারফরম্যান্সে কোনো অবনতি ঘটায়নি। সার্বিকভাবে, তারা পপওভার এপিআই ব্যবহার করে React-এ কোডের লাইন সংখ্যা ৭০% পর্যন্ত কমাতে সক্ষম হয়েছে।
পপওভার এপিআই ব্যবহার করার সময় বিবেচ্য বিষয়সমূহ
টোকোপিডিয়া রিয়্যাক্ট ব্যবহার করে, এবং দলটি যেসব পেজে পপওভার ব্যবহার করা হয় না সেগুলোর জন্য পপওভার কম্পোনেন্টটি আনমাউন্ট করে এবং এরপর পপওভার কন্টেন্টের জন্য কোড স্প্লিট করে কোড স্প্লিটিং সম্পন্ন করেছে। এভাবে তারা তাদের প্রাথমিক রিকোয়েস্টের আকার কমিয়ে এনেছে।
অন্যান্য এলিমেন্টের সাপেক্ষে পপওভারের অবস্থান ঠিক করতে, সেগুলোকে CSS অ্যাঙ্কর পজিশনিং ( যা শীঘ্রই ক্রোমে আসছে ) এর সাথে ব্যবহার করার কথা ভাবতে পারেন। উদাহরণস্বরূপ, মেনু এবং টুলটিপের জন্য এটি সহায়ক।
সম্পদ
- পপওভার এপিআই চালু করা হচ্ছে
- পপওভার এবং ডায়ালগের মধ্যে পার্থক্য
- আপনি কি কোনো ত্রুটি জানাতে বা নতুন কোনো বৈশিষ্ট্যের জন্য অনুরোধ করতে চান? আমরা আপনার কথা শুনতে আগ্রহী ।
এই সিরিজের অন্যান্য নিবন্ধগুলি দেখুন, যেখানে আলোচনা করা হয়েছে কিভাবে ইকমার্স কোম্পানিগুলো স্ক্রল-ড্রাইভেন অ্যানিমেশন, পপওভার, কন্টেইনার কোয়েরি এবং has() সিলেক্টরের মতো নতুন CSS ও UI ফিচার ব্যবহার করে উপকৃত হয়েছে।