توجد النوافذ المنبثقة في كل مكان على الويب. يمكنك الاطّلاع عليها في القوائم ونصائح التبديل ومربعات الحوار المستخدَمة لميزات مثل إعدادات الحساب، والتطبيقات المصغّرة للإفصاح، ومعاينات بطاقات المنتج. وعلى الرغم من مدى انتشار هذه المكونات، إلا أن إنشائها في المتصفحات لا يزال مرهقًا على نحو مدهش. لحل هذه المشكلة، ستتوفّر مجموعة جديدة من واجهات برمجة تطبيقات HTML التعريفية لإنشاء نوافذ منبثقة في المتصفّحات، وأولها هذه الواجهات هي Popover API.
"النافذة المنبثقة" هي جزء من المواد المرجعية المتاحة حديثًا.
غالبًا ما يتم الخلط بين النافذة المنبثقة ومربع الحوار. ومع ذلك، هناك بعض الاختلافات
الرئيسية في سلوكهم. العنصر dialog الذي يتم فتحه باستخدام dialog.showModal
(مربّع حوار نمطي)، هو تجربة تتطلّب تفاعلاً صريحًا من المستخدم
لإغلاق النافذة المشروطة. تتيح popover ميزة "إغلاق الشاشة". ولا ينطبق ذلك على شكل dialog المشروط.
يجعل مربّع الحوار المشروط باقي الصفحة غير نشِطة. ولا ينطبق ذلك على السمة popover.
مزيد من المعلومات عن الاختلافات
هذه المقالة جزء من سلسلة تناقش كيف حسّنت شركات التجارة الإلكترونية مواقعها الإلكترونية باستخدام الميزات الجديدة في CSS وواجهة المستخدم. في هذه المقالة، اكتشِف كيف نفّذت Tokopedia واجهة برمجة التطبيقات Popover API والاستفادة منها.
توكوبيديا
يؤدي استخدام سمات النوافذ المنبثقة إلى تقليل ما يصل إلى 70% من أسطر الرمز في React. يمكن التحكّم في النمط بشكل أساسي من خلال HTML بدلاً من اشتراط معالجة الأحداث في JavaScript واستخدام
React.createPortalلنقل نموذج DOM المشروط إلى نهايةdocument.body. يمكننا أيضًا استخدام@starting-styleلتحريك فتح النافذة المنبثقة وإغلاقها.—آندي فيهاليم، مهندس برامج أول في Tokopedia.
تحتوي صفحات تفاصيل المنتج (PDP) من Tokopedia على صور منتج متعددة لكل منتج. عند النقر على الصورة المصغّرة للمنتج، يتم فتح نمط لعرض الصورة الكبيرة. هذا نمط شائع يستخدم في مواقع التجارة الإلكترونية.
الرمز
تستخدم Tokopedia React في تطوير الواجهة الأمامية. قبل تنفيذ واجهة برمجة التطبيقات المنبثقة
لهذه النافذة المشروطة، استخدما نمط DOM وزرًا. غيَّر الزر حالة التفاعل لفتح النافذة المشروطة. باستخدام واجهة برمجة التطبيقات المنبثقة، يتم تحديد سمة 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',
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
transform: 'scale(0.8)',
opacity: 0,
'&:popover-open': {
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
transform: 'scale(1)',
opacity: 1,
},
});
لتلبية متطلبات المتصفّحات التي لا تتوافق مع واجهة برمجة التطبيقات المنبثقة، نفّذت Tokopedia popover-polyfill من oddbird، وحجمه 3.2 كيلوبايت فقط من خلال ضغط gzip. وكانوا راضين عن polyfill حيث أنه يعمل بشكل جيد ولم يتسبب في تراجع الأداء. بشكل عام، تمكّنا من تقليل ما يصل إلى 70% من أسطر الرمز في React باستخدام واجهة برمجة التطبيقات المنبثقة.
أمور يجب مراعاتها عند استخدام واجهة برمجة التطبيقات Popover API
تستخدم شركة Tokopedia ميزة React التي تستخدمها، ونجح الفريق في تقسيم الرموز البرمجية من خلال إلغاء تثبيت المكوّن المنبثقة في الصفحات التي لا تستخدمها، ثم تقسيم الرمز الخاص بالمحتوى المنبثقة. وبهذه الطريقة، قاموا بتقليل حجم طلبهم الأولي.
يمكنك دمج النوافذ المنبثقة مع تحديد موضع إعلان CSS الثابت (قريبًا على Chrome) لترتيبها بالنسبة إلى العناصر الأخرى. ويكون هذا مفيدًا للقوائم والتلميحات على سبيل المثال.
المراجع
- مقدمة حول واجهة برمجة التطبيقات المنبثقة
- الفرق بين النافذة المنبثقة ومربّع الحوار
- هل تريد الإبلاغ عن خطأ أو طلب ميزة جديدة؟ يهمّنا أن نعرف رأيك.
اطّلِع على المقالات الأخرى في هذه السلسلة التي تتناول كيفية استفادة شركات التجارة الإلكترونية من استخدام الميزات الجديدة في CSS وواجهة المستخدم، مثل الصور المتحركة التي تعتمد على الانتقال للأعلى أو للأسفل، والنافذة المنبثقة، وطلبات البحث التي تحتوي على حاويات، وأداة اختيار has().