پاپاوورها در همه جای وب وجود دارند. میتوانید آنها را در منوها، کلیدهای میانبر و پنجرههای محاورهای که برای ویژگیهایی مانند تنظیمات حساب، ویجتهای افشا و پیشنمایش کارتهای محصول استفاده میشوند، مشاهده کنید. با وجود اینکه این اجزا چقدر رایج هستند، ساخت آنها در مرورگرها هنوز به طرز شگفتآوری دشوار است. برای حل این مشکل، مجموعهای جدید از APIهای HTML اعلانی برای ساخت پاپاوورها به مرورگرها میآیند که اولین آنها Popover API است.
یک پنجرهی پاپاوور (popover) معمولاً با یک پنجرهی محاورهای (dialog) اشتباه گرفته میشود. با این حال، تفاوتهای کلیدی در رفتار آنها وجود دارد. یک عنصر dialog که با dialog.showModal (یک پنجرهی محاورهای مودال) باز میشود، تجربهای است که برای بستن پنجرهی محاورهای نیاز به تعامل صریح کاربر دارد. یک popover از قابلیت «رد کردن با نور» (light-dismiss) پشتیبانی میکند. یک dialog مودال این قابلیت را ندارد. یک پنجرهی محاورهای مودال بقیهی صفحه را غیرفعال میکند. یک popover این قابلیت را ندارد. در مورد تفاوتها بیشتر بخوانید .
این مقاله بخشی از مجموعهای است که در مورد چگونگی بهبود وبسایت شرکتهای تجارت الکترونیک با استفاده از ویژگیهای جدید CSS و UI بحث میکند. در این مقاله، نحوه پیادهسازی و بهرهمندی Tokopedia از Popover API را بررسی کنید.
توکوپدیا
استفاده از ویژگیهای popover تا ۷۰٪ خطوط کد را در React کاهش میدهد. میتوان modal را به صورت بومی توسط HTML کنترل کرد، به جای اینکه نیاز به مدیریت رویداد در جاوا اسکریپت باشد و از
React.createPortalبرای انتقال DOM modal به انتهایdocument.bodyاستفاده کنیم. همچنین میتوانیم از@starting-styleبرای انیمیشنسازی باز و بسته شدن popover استفاده کنیم . — اندی ویهالیم ، مهندس ارشد نرمافزار، توکوپدیا .
صفحات جزئیات محصول (PDP) توکوپدیا شامل چندین تصویر محصول برای هر محصول است. وقتی روی تصویر کوچک محصول کلیک میشود، یک پنجرهی کوچک برای نمایش تصویر بزرگشده باز میشود. این یک الگوی رایج در وبسایتهای تجارت الکترونیک است.
کد
توکوپدیا از React برای توسعهی frontend خود استفاده میکند. قبل از پیادهسازی API مربوط به popover برای این modal، آنها از یک modal در DOM و یک دکمه استفاده میکردند. دکمه، حالت React را برای باز کردن modal تغییر میداد. با استفاده از API مربوط به popover، آنها یک ویژگی popovertarget را در عنصری مشخص میکنند که popover را با مقداری مشابه با شناسهی عنصر popover باز میکند.
با این پیادهسازی اولیه، پنجرهی popover کار میکند اما بدون هیچ انیمیشنی ظاهر و ناپدید میشود. برای ایجاد یک انیمیشن ورود و خروج روان برای پنجرهی popover، از :popover-open و @starting-style استفاده کنید و انیمیشن ویژگیهای گسسته را مجاز کنید. در مثال کد زیر، پنجرهی popover با استفاده از ویژگی transform: 'scale()' به داخل و خارج تغییر اندازه میدهد.
این نمونه کد نحوه پیادهسازی انیمیشنهای ورود و خروج را برای API مربوط به popover نشان میدهد.
<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,
},
},
});
برای پاسخگویی به مرورگرهایی که از API popover پشتیبانی نمیکنند، Tokopedia از popover-polyfill توسط oddbird استفاده کرد که با فشردهسازی gzip تنها ۳.۲ کیلوبایت حجم دارد. آنها از polyfill راضی بودند زیرا به خوبی کار میکرد و باعث پسرفت عملکرد نمیشد. در مجموع، آنها توانستند با API popover تا ۷۰٪ خطوط کد را در React کاهش دهند.
نکاتی که باید هنگام استفاده از Popover API در نظر بگیرید
توکوپدیا از ریاکت استفاده میکند و تیم با جدا کردن کامپوننت popover برای صفحاتی که از آن استفاده نمیکنند و سپس انجام تقسیم کد برای محتوای popover، به تقسیم کد دست یافته است. به این ترتیب، آنها اندازه درخواست اولیه خود را کاهش دادند.
ترکیب پاپاوورها با موقعیتیابی لنگر CSS ( بهزودی برای کروم ) را در نظر بگیرید تا آنها را نسبت به سایر عناصر قرار دهید. این برای مثال برای منوها و راهنماهای ابزار مفید است.
منابع
- معرفی API مربوط به popover
- تفاوت بین پنجرهی پاپاوور و پنجرهی محاورهای
- آیا میخواهید یک اشکال را گزارش دهید یا ویژگی جدیدی را درخواست کنید؟ ما مشتاق شنیدن نظرات شما هستیم .
مقالات دیگر این مجموعه را که در مورد چگونگی بهرهمندی شرکتهای تجارت الکترونیک از ویژگیهای جدید CSS و UI مانند انیمیشنهای Scroll-driven، popover، کوئریهای container و انتخابگر has() صحبت میکنند، بررسی کنید.