पेश है पॉपओवर एपीआई

Una Kravets

पॉपओवर, वेब पर हर जगह मौजूद होते हैं. इन्हें मेन्यू, टॉगलटिप, और डायलॉग में देखा जा सकता है. ये खाता सेटिंग, जानकारी ज़ाहिर करने वाले विजेट, और प्रॉडक्ट कार्ड की झलक के तौर पर दिख सकते हैं. ये कॉम्पोनेंट ज़्यादा लोकप्रिय होने के बाद भी, ब्राउज़र में इन्हें बनाना काफ़ी मुश्किल काम है. फ़ोकस, खोलने और बंद करने की स्थितियों को मैनेज करने के लिए, आपको स्क्रिप्टिंग जोड़नी होगी. साथ ही, कॉम्पोनेंट में ऐक्सेस किए जा सकने वाले हुक, एक्सपीरियंस में शामिल होने और उससे बाहर निकलने के लिए कीबोर्ड बाइंडिंग जोड़नी होंगी. यह सब, पॉपओवर की काम की, यूनीक, और मुख्य सुविधाएं बनाने से पहले करना होगा.

इस समस्या को हल करने के लिए, पॉपओवर बनाने के लिए डिक्लेरेटिव एचटीएमएल एपीआई का नया सेट, ब्राउज़र पर उपलब्ध होगा. इसकी शुरुआत Chromium 114 में popover एपीआई से होगी.

पॉपओवर एट्रिब्यूट

सभी जटिलता को खुद मैनेज करने के बजाय, ब्राउज़र को popover एट्रिब्यूट और बाद की सुविधाओं के सेट का इस्तेमाल करके इसे मैनेज करने दें. एचटीएमएल पॉपओवर के साथ काम करता है:

• टॉप लेयर का प्रमोशन. पॉपओवर, पेज के बाकी हिस्से के ऊपर एक अलग लेयर पर दिखेंगे, ताकि आपको z-इंडेक्स होने की ज़रूरत न पड़े.
• खारिज करने की सुविधा को हल्के से इस्तेमाल करना. पॉपओवर एरिया के बाहर क्लिक करने से, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• फ़ोकस मैनेजमेंट की डिफ़ॉल्ट सेटिंग. पॉपओवर खोलने पर, अगला टैब स्टॉप, पॉपओवर में दिखता है.
• सुलभ कीबोर्ड बाइंडिंग. esc बटन दबाने पर, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• ऐक्सेस किए जा सकने वाले कॉम्पोनेंट बाइंडिंग. किसी पॉपओवर एलिमेंट को, पॉपओवर ट्रिगर से सेमेटिक तरीके से कनेक्ट करना.

अब JavaScript का इस्तेमाल किए बिना, इन सभी सुविधाओं वाले पॉपओवर बनाए जा सकते हैं. किसी बुनियादी पॉपओवर के लिए, ये तीन चीज़ें ज़रूरी हैं:

• पॉपओवर वाले एलिमेंट पर popover एट्रिब्यूट.
• पॉपओवर वाले एलिमेंट पर मौजूद id.
• पॉपओवर खोलने वाले एलिमेंट पर, पॉपओवर के id की वैल्यू वाला popovertarget.

<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 वाले पॉपओवर:

• किसी भी अन्य तरह के एलिमेंट को ज़बरदस्ती बंद न करें.
• लाइट को बंद न करें. टॉगल या बंद करने की कार्रवाई का इस्तेमाल करके उन्हें बंद करें.

पॉपओवर स्टाइल करना

अब तक, आपने एचटीएमएल में बुनियादी पॉपओवर के बारे में जाना है. हालांकि, popover के साथ कुछ अच्छी स्टाइलिंग भी मिलती हैं. इनमें से एक सुविधा है, ::backdrop को स्टाइल देना.

auto पॉपओवर में, यह ऊपरी लेयर (जहां पॉपओवर होता है) के ठीक नीचे की एक लेयर होती है. यह लेयर, पेज के बाकी हिस्से के ऊपर मौजूद होती है. नीचे दिए गए उदाहरण में, ::backdrop को सेमी-ट्रांसफ़रेंट रंग दिया गया है:

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

popover और dialog के बीच का अंतर

ध्यान रखें कि popover एट्रिब्यूट अपने-आप सेमेटिक्स नहीं देता. अब popover="auto" का इस्तेमाल करके, मॉडल डायलॉग जैसे अनुभव बनाए जा सकते हैं. हालांकि, इन दोनों के बीच कुछ मुख्य अंतर हैं:

dialog.showModal (मॉडल डायलॉग) से खुलने वाला dialog एलिमेंट, एक ऐसा अनुभव है जिसमें मॉडल को बंद करने के लिए, उपयोगकर्ता के इंटरैक्शन की ज़रूरत होती है. 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 का इस्तेमाल करने की सुविधा की मदद से, बदलाव से पहले और बाद में बदलाव करने के स्टाइल सेट अप किए जा सकेंगे. इससे पॉपओवर खोलते और बंद करते समय, ट्रांज़िशन में कोई रुकावट नहीं आएगी. पिछला उदाहरण देखें. इसे ऐनिमेट करना ज़्यादा आसान होता है. साथ ही, इससे उपयोगकर्ताओं को बेहतर अनुभव मिलता है:

ऐंकर पोज़िशन

जब आपको व्यूपोर्ट के आधार पर सूचना, मॉडल या सूचना को पोज़िशन करना हो, तब पॉपओवर का इस्तेमाल करना बेहतर होता है. हालांकि, पॉपओवर मेन्यू, टूलटिप, और ऐसे अन्य एलिमेंट के लिए भी काम के होते हैं जिन्हें अन्य एलिमेंट के साथ रखा जाना चाहिए. ऐसे में, सीएसएस ऐंकरिंग की सुविधा काम आती है.

यहां दिए गए रेडियल मेन्यू के डेमो में, सीएसएस ऐंकर पोज़िशनिंग के साथ-साथ पॉपओवर एपीआई का इस्तेमाल किया गया है. इससे यह पक्का होता है कि पॉपओवर #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;
}

अब आपके पास पूरी तरह से काम करने वाला पॉपओवर मेन्यू है, जो टॉगल बटन के साथ लगा है. साथ ही, इसमें पॉपओवर की सभी पहले से मौजूद सुविधाएं मौजूद हैं. इसके लिए, किसी JavaScript की ज़रूरत नहीं है!

नतीजा

पॉपओवर एपीआई, नई सुविधाओं की सीरीज़ का पहला चरण है. इससे, वेब ऐप्लिकेशन को मैनेज करना आसान हो जाता है और वे डिफ़ॉल्ट रूप से ज़्यादा से ज़्यादा लोगों तक पहुंच पाते हैं. हमें यह देखने का इंतज़ार रहेगा कि आप पॉपओवर का इस्तेमाल कैसे करते हैं!

अतिरिक्त रीडिंग

• डायलॉग और पॉपओवर एक जैसे लगते हैं. इनमें क्या अंतर है?
• सेमेटिक्स और पॉपओवर एट्रिब्यूट
• पॉपओवर के बारे में MDN दस्तावेज़
• OpenUI पॉपओवर के बारे में जानकारी