لمحة عن واجهة برمجة التطبيقات المنبثقة

Una Kravets

النوافذ المنبثقة موجودة في كل مكان على الويب. ويمكنك الاطّلاع عليها في القوائم ونصائح التبديل ومربّعات الحوار التي يمكن أن تظهر في شكل إعدادات حساب وأدوات الإفصاح ومعاينات بطاقات المنتجات. وعلى الرغم من مدى انتشار هذه المكونات، إلا أن إنشائها في المتصفحات لا يزال أمرًا مرهقًا إلى حد مدهش. تحتاج أيضًا إلى إضافة النصوص البرمجية لإدارة التركيز، وحالة الفتح والإغلاق، وعناصر الجذب التي يمكن الوصول إليها في المكونات، وروابط لوحة المفاتيح للدخول إلى التجربة والخروج منها، وكل ذلك حتى قبل البدء في إنشاء الوظيفة الأساسية المفيدة والفريدة للنافذة المنبثقة.

لحلّ هذه المشكلة، ستتوفّر في المتصفّحات مجموعة جديدة من واجهات برمجة التطبيقات التعريفية لإنشاء النوافذ المنبثقة، بدءًا من واجهة برمجة التطبيقات popover في الإصدار 114 من Chromium.

سمة النافذة المنبثقة

بدلاً من إدارة كل التعقيد بنفسك، يمكنك السماح للمتصفّح بمعالجة ذلك باستخدام سمة popover ومجموعة الميزات اللاحقة. تتيح النوافذ المنبثقة بتنسيق HTML ما يلي:

• الترقية إلى الطبقة العليا: ستظهر النوافذ المنبثقة في طبقة منفصلة فوق بقية الصفحة، لذا لن يكون عليك إجراء تعديلات على z-index.
• وظيفة الإغلاق الخفيف: سيؤدي النقر خارج منطقة النافذة المنبثقة إلى إغلاق النافذة المنبثقة وإعادة التركيز.
• إدارة التركيز التلقائي: يؤدي فتح النافذة المنبثقة إلى إيقاف علامة التبويب التالية داخل النافذة المنبثقة.
• اختصارات لوحة مفاتيح يسهل استخدامها: سيؤدي الضغط على المفتاح esc إلى إغلاق النافذة المنبثقة وإعادة التركيز.
• عمليات ربط المكوّنات التي يمكن الوصول إليها: ربط عنصر النافذة المنبثقة بعامل تشغيل النافذة المنبثقة بشكل دلالي

يمكنك الآن إنشاء نوافذ منبثقة باستخدام كل هذه الميزات بدون استخدام JavaScript. تتطلب النافذة المنبثقة الأساسية ثلاثة أشياء:

• سمة popover في العنصر الذي يحتوي على النافذة المنبثقة
• تمثّل هذه السمة id على العنصر الذي يحتوي على النافذة المنبثقة.
• تمثّل هذه السمة popovertarget بقيمة id للنافذة المنبثقة على العنصر الذي يفتح النافذة المنبثقة.

<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

لديك الآن نافذة منبثقة أساسية تعمل بكامل طاقتها.

يمكن استخدام هذه النافذة المنبثقة لنقل معلومات إضافية أو كأداة للإفصاح.

الإعدادات التلقائية وعمليات الإلغاء

بشكلٍ تلقائي، كما هو الحال في مقتطف الرمز السابق، يعني إعداد نافذة منبثقة باستخدام popovertarget أنّ الزر أو العنصر الذي يفتح النافذة المنبثقة سيبدّل حالتها بين الفتح والإغلاق. ويمكنك أيضًا إنشاء نوافذ منبثقة فاضحة باستخدام popovertargetaction. ويؤدي هذا إلى إلغاء إجراء التبديل التلقائي. تشمل خيارات "popovertargetaction" ما يلي:

popovertargetaction="show": تعرِض هذه السمة النافذة المنبثقة. popovertargetaction="hide": لإخفاء النافذة المنبثقة.

باستخدام popovertargetaction="hide"، يمكنك إنشاء زر "إغلاق" داخل نافذة منبثقة، كما هو موضّح في المقتطف التالي:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

النوافذ المنبثقة التلقائية في مقابل النوافذ المنبثقة اليدوية

إنّ استخدام السمة popover وحدها هو اختصار لـ popover="auto". عند فتح الرمز التلقائي popover، سيتم إغلاق النوافذ المنبثقة التلقائية الأخرى بشكلٍ قسري، باستثناء النوافذ المنبثقة الأصل. يمكن إغلاقه من خلال الإغلاق الخفيف أو زر الإغلاق.

في المقابل، يؤدي ضبط popover=manual إلى إنشاء نوع آخر من النوافذ المنبثقة: نافذة منبثقة يدوية. ولا تفرض هذه العناصر إغلاق أي نوع آخر من العناصر ولا يتم إغلاقها من خلال ميزة "إغلاق سريع". ويجب إغلاقها من خلال موقّت أو إجراء إغلاق صريح. أنواع النوافذ المنبثقة المناسبة لتطبيق popover=manual هي العناصر التي تظهر وتختفي، ولكن يجب ألا تؤثر في بقية الصفحة، مثل إشعارات النوافذ المنبثقة.

إذا اطّلعت على العرض الترويجي أعلاه، يمكنك ملاحظة أنّ النقر خارج منطقة النافذة المنبثقة لا يؤدي إلى إغلاقها. بالإضافة إلى ذلك، إذا كانت هناك نوافذ منبثقة أخرى مفتوحة، فلن يتم إغلاقها.

لمراجعة الاختلافات:

النوافذ المنبثقة مع popover=auto:

• عند فتح هذه النافذة، يمكنك فرض إغلاق النوافذ المنبثقة الأخرى.
• يمكن إغلاقها من خلال ضوء.

النوافذ المنبثقة التي تحتوي على popover=manual:

• عدم فرض إغلاق أي نوع عنصر آخر
• يُرجى عدم إغلاق الجهاز بالضوء. يمكنك إغلاقها باستخدام زر تبديل أو إجراء إغلاق.

تصميم النوافذ المنبثقة

لقد تعرّفت حتى الآن على أساسيات النوافذ المنبثقة في HTML. ولكن هناك أيضًا بعض ميزات التصميم الرائعة التي يوفّرها popover. ومن بين هذه الميزات إمكانية تصميم ::backdrop.

في النوافذ المنبثقة في auto، تكون هذه طبقة تحت الطبقة العلوية مباشرةً (حيث يوجد النافذة المنبثقة) التي تقع فوق بقية الصفحة. في المثال التالي، يتم إعطاء ::backdrop لونًا شبه شفاف:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

الفرق بين popover وdialog

يُرجى العلم أنّ سمة popover لا تقدّم دلالات بمفردها. وعلى الرغم من أنّه يمكنك الآن إنشاء تجارب نموذجية تشبه مربّعات الحوار باستخدام popover="auto"، هناك بعض الاختلافات الرئيسية بين الاثنين:

عنصر dialog الذي يتم فتحه باستخدام dialog.showModal (مربّع حوار مشروط) هو تجربة تتطلّب تفاعلًا واضحًا من المستخدِم لإغلاق مربّع الحوار المشروط. يتيح popover إغلاق النافذة من خلال لمسها. لا يفعل ذلك dialog. يؤدي مربّع الحوار المشروط إلى جعل بقية الصفحة غير نشطة. لا يفعل ذلك popover.

العرض الترويجي أعلاه هو مربّع حوار دلالي مع سلوك النافذة المنبثقة. وهذا يعني أن باقي الصفحة ليست غير نشطة وأن النافذة المنبثقة لمربّع الحوار تعرض سلوك إغلاق خفيف. يمكنك إنشاء مربع الحوار هذا بسلوك النافذة المنبثقة باستخدام التعليمة البرمجية التالية:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

قريبًا

الدخول والخروج التفاعلي

لا تتوفّر في المتصفّحات بعد إمكانية تحريك السمات المنفصلة، بما في ذلك الصور المتحركة من display: none وإليها وإضافة الصور المتحركة من وإلى الطبقة العليا. ومع ذلك، من المخطّط طرح هذه الميزات في إصدار قادم من Chromium بعد هذا الإصدار بوقت قصير.

من خلال إمكانية تحريك الخصائص المنفصلة واستخدام :popover-open و@starting-style، ستتمكّن من إعداد الأنماط قبل التغيير وبعد التغيير لتفعيل انتقالات سلسة عند فتح النوافذ المنبثقة وإغلاقها. لنأخذ المثال السابق. تبدو عملية عرض الإعلان واختفائه أكثر سلاسة، ما يساهم في توفير تجربة مستخدم أكثر سلاسة:

موضع الرابط

تكون النوافذ المنبثقة رائعة عندما تريد تحديد موضع تنبيه أو نافذة مشروطة أو إشعار استنادًا إلى إطار العرض. لكن النوافذ المنبثقة مفيدة أيضًا للقوائم والتلميحات والعناصر الأخرى التي يجب وضعها بالنسبة للعناصر الأخرى. هنا يأتي دور ارتساء CSS.

يستخدِم الإصدار التجريبي التالي من القائمة الشعاعية واجهة برمجة التطبيقات popover API مع تحديد موضع عنصر التثبيت في CSS لضمان تثبيت النافذة المنبثقة #menu-items دائمًا بعنصر التفعيل الذي يشغّلها أو يوقفها، وهو الزر #menu-toggle.

يشبه إعداد الإعلانات الثابتة إعداد النوافذ المنبثقة:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

يمكنك إعداد عنصر تثبيت من خلال منحه id (في هذا المثال، #menu-toggle)، ثم استخدام anchor="menu-toggle" لربط العنصرَين. يمكنك الآن استخدام anchor() لتنسيق النافذة المنبثقة. يمكن اختيار تصميم قائمة منبثقة وسطية مثبتة على خط الأساس لزر تبديل الارتساء على النحو التالي:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

لديك الآن قائمة popover تعمل بكامل طاقتها ومرتبطة بزر التبديل وتتضمّن جميع الميزات المضمّنة في popover، ولا يلزم استخدام JavaScript.

الخاتمة

واجهة برمجة التطبيقات popover API هي الخطوة الأولى في سلسلة من الإمكانات الجديدة التي تجعل من إنشاء تطبيقات الويب أكثر سهولة في الإدارة وأكثر سهولة في الوصول إليها تلقائيًا. أنا متحمس لمعرفة كيف تستخدم النوافذ المنبثقة!

موادّ إضافية للقراءة

• تبدو مربّعات الحوار والنوافذ المنبثقة متشابهة. ما هي أوجه الاختلاف بينهما؟
• الدلالة وسمة المنبثق
• مستندات MDN حول النافذة المنبثقة
• شرح نافذة منبثقة لواجهة OpenUI