पॉप-अप: वे अपनी जगह बना रहे हैं!

Jhey Tompkins

Open UI initiative का मकसद, डेवलपर के लिए बेहतर उपयोगकर्ता अनुभव देना आसान बनाना है. इसके लिए, हम उन समस्याओं को हल करने की कोशिश कर रहे हैं जो डेवलपर को अक्सर होती हैं. हम बेहतर प्लैटफ़ॉर्म बिल्ट-इन एपीआई और कॉम्पोनेंट उपलब्ध कराकर ऐसा कर सकते हैं.

ऐसी ही एक समस्या पॉप-अप से जुड़ी है. Open UI में इन्हें "पॉपओवर" कहा जाता है.

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

पॉपओवर बनाते समय, अक्सर दो मुख्य समस्याएं आती हैं:

• यह पक्का करने का तरीका कि इसे आपके बाकी कॉन्टेंट के ऊपर, सही जगह पर रखा जाए.
• इसे सुलभ कैसे बनाया जाए (कीबोर्ड के हिसाब से, फ़ोकस करने लायक़ वगैरह).

Popover API में कई तरह के लक्ष्य शामिल हैं. इन सभी का मुख्य लक्ष्य यह है कि डेवलपर इस पैटर्न को आसानी से बना सकें. इन लक्ष्यों में से कुछ खास लक्ष्य ये हैं:

• इससे किसी एलिमेंट और उसके डिसेंडेंट को, दस्तावेज़ के बाकी कॉन्टेंट के ऊपर आसानी से दिखाया जा सकता है.
• इसे ऐक्सेस करने लायक बनाएं.
• ज़्यादातर सामान्य व्यवहारों के लिए JavaScript की ज़रूरत नहीं होती. जैसे, लाइट डिसमिस, सिंगलटन, स्टैकिंग वगैरह.

OpenUI साइट पर जाकर, पॉप-अप के बारे में पूरी जानकारी देखी जा सकती है.

ब्राउज़र के साथ काम करना

अब पहले से मौजूद Popover API का इस्तेमाल कहां किया जा सकता है? यह लेख लिखे जाने तक, Chrome Canary में "Experimental web platform features" फ़्लैग के पीछे काम करता है.

उस फ़्लैग को चालू करने के लिए, Chrome Canary खोलें और chrome://flags पर जाएं. इसके बाद, "एक्सपेरिमेंट के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं" फ़्लैग चालू करें.

डेवलपर के लिए ओरिजिन ट्रायल भी उपलब्ध है. इससे वे प्रोडक्शन एनवायरमेंट में इस सुविधा को आज़मा सकते हैं.

आखिर में, एपीआई के लिए पॉलीफ़िल डेवलप किया जा रहा है. github.com/oddbird/popup-polyfill पर जाकर, रिपो ज़रूर देखें.

इनके साथ पॉप-अप की सुविधा काम करती है:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

मौजूदा समाधान

फ़िलहाल, अपने कॉन्टेंट का प्रमोशन करने के लिए, आपको क्या करना चाहिए? अगर आपके ब्राउज़र पर यह सुविधा काम करती है, तो एचटीएमएल डायलॉग एलिमेंट का इस्तेमाल किया जा सकता है. आपको इसका इस्तेमाल "मोडल" फ़ॉर्म में करना होगा. इसका इस्तेमाल करने के लिए, JavaScript ज़रूरी है.

Dialog.showModal();

सुलभता से जुड़ी कुछ बातों का ध्यान रखना ज़रूरी है. हमारा सुझाव है कि अगर आपको Safari के 15.4 से पहले के वर्शन का इस्तेमाल करने वाले लोगों के लिए, सुलभता से जुड़ी सुविधाएं उपलब्ध करानी हैं, तो a11y-dialog का इस्तेमाल करें.

इसके अलावा, पॉपओवर, सूचना या टूलटिप पर आधारित कई लाइब्रेरी में से किसी एक का इस्तेमाल किया जा सकता है. इनमें से कई, एक ही तरीके से काम करते हैं.

• पॉपओवर दिखाने के लिए, कुछ कंटेनर को बॉडी में जोड़ें.
• इसे इस तरह स्टाइल करें कि यह बाकी सभी चीज़ों के ऊपर दिखे.
• पॉपओवर दिखाने के लिए, एक एलिमेंट बनाएं और उसे कंटेनर में जोड़ें.
• डीओएम से पॉपओवर एलिमेंट को हटाकर, इसे छिपाएं.

इसके लिए, डेवलपर को एक और डिपेंडेंसी की ज़रूरत होती है और उन्हें ज़्यादा फ़ैसले लेने पड़ते हैं. इसके अलावा, आपको ऐसी सेवा ढूंढनी होगी जो आपकी सभी ज़रूरतों को पूरा करती हो. इसके लिए, आपको रिसर्च भी करनी होगी. Popover API का इस्तेमाल कई तरह के कामों के लिए किया जा सकता है. जैसे, टूलटिप दिखाना. हमारा लक्ष्य, सभी सामान्य स्थितियों को कवर करना है, ताकि डेवलपर को कोई और फ़ैसला न लेना पड़े. इससे वे अपने ऐप्लिकेशन को बेहतर बनाने पर ध्यान दे पाएंगे.

आपका पहला पॉप-अप

आपको बस इतना ही करना है.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

लेकिन, यहां क्या हो रहा है?

• आपको पॉपओवर एलिमेंट को किसी कंटेनर या किसी अन्य चीज़ में रखने की ज़रूरत नहीं है. यह डिफ़ॉल्ट रूप से छिपा होता है.
• इसे दिखाने के लिए, आपको कोई JavaScript लिखने की ज़रूरत नहीं है. इसे popovertoggletarget एट्रिब्यूट मैनेज करता है.
• जब यह दिखता है, तो इसे सबसे ऊपर वाली लेयर पर प्रमोट कर दिया जाता है. इसका मतलब है कि इसे व्यूपोर्ट में document के ऊपर प्रमोट किया जाता है. आपको z-index को मैनेज करने या यह चिंता करने की ज़रूरत नहीं है कि आपका पॉपओवर DOM में कहां है. यह डीओएम में नेस्ट किया गया हो सकता है. साथ ही, इसमें क्लिप करने वाले एलिमेंट मौजूद हो सकते हैं. DevTools की मदद से, यह भी देखा जा सकता है कि फ़िलहाल कौनसे एलिमेंट सबसे ऊपर वाली लेयर में हैं. टॉप लेयर के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें.

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

पॉपओवर के साथ आपको और क्या-क्या मिलता है? आइए, इस उदाहरण को आगे बढ़ाते हैं. इस डेमो को देखें. इसमें पेज पर कुछ कॉन्टेंट मौजूद है.

फ़्लोटिंग ऐक्शन बटन की पोज़िशन तय होती है और इसका z-index ज़्यादा होता है.

.fab {
  position: fixed;
  z-index: 99999;
}

पॉपओवर का कॉन्टेंट, डीओएम में नेस्ट किया जाता है. हालांकि, पॉपओवर खोलने पर, उसे फ़िक्स्ड पोज़िशन वाले एलिमेंट के ऊपर प्रमोट किया जाता है. आपको कोई स्टाइल सेट करने की ज़रूरत नहीं है.

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

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

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

[popover] { display: block; }

पॉपओवर का प्रमोशन करने के तरीके से कोई फ़र्क़ नहीं पड़ता. हालांकि, टॉप लेयर पर पॉपओवर का प्रमोशन करने के बाद, आपको उसे लेआउट करना या उसकी पोज़िशन सेट करनी पड़ सकती है. टॉप लेयर को टारगेट नहीं किया जा सकता. जैसे,

:open {
  display: grid;
  place-items: center;
}

डिफ़ॉल्ट रूप से, पॉपओवर को margin: auto का इस्तेमाल करके व्यूपोर्ट के बीच में लेआउट किया जाएगा. हालांकि, कुछ मामलों में आपको एलिमेंट की पोज़िशन के बारे में साफ़ तौर पर बताना पड़ सकता है. उदाहरण के लिए:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

अगर आपको सीएसएस ग्रिड या फ़्लेक्सबॉक्स का इस्तेमाल करके, अपने पॉपओवर में कॉन्टेंट को लेआउट करना है, तो इसे किसी एलिमेंट में रैप करना बेहतर हो सकता है. इसके अलावा, आपको एक अलग नियम तय करना होगा, जो पॉपओवर के टॉप लेयर में आने के बाद display को बदलता है. इसे डिफ़ॉल्ट रूप से सेट करने पर, यह display: none को बदलकर डिफ़ॉल्ट रूप से दिखने लगेगा.

[popover]:open {
 display: flex;
}

अगर आपने डेमो आज़माया है, तो आपको दिखेगा कि पॉपओवर अब ट्रांज़िशन हो रहा है. :open स्यूडो-सिलेक्टर का इस्तेमाल करके, पॉपओवर को अंदर और बाहर ट्रांज़िशन किया जा सकता है. :open छद्म-चुनने वाला यह पॉपओवर से मेल खाता है. यह पॉपओवर दिख रहा होता है और इसलिए, सबसे ऊपर वाली लेयर में होता है.

इस उदाहरण में, ट्रांज़िशन को मैनेज करने के लिए कस्टम प्रॉपर्टी का इस्तेमाल किया गया है. साथ ही, पॉपओवर के ::backdrop पर भी ट्रांज़िशन लागू किया जा सकता है.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

यहां एक सुझाव यह है कि मोशन के लिए, ट्रांज़िशन और ऐनिमेशन को मीडिया क्वेरी के तहत ग्रुप करें. इससे आपको समय पर दवा लेने में भी मदद मिल सकती है. ऐसा इसलिए है, क्योंकि कस्टम प्रॉपर्टी के ज़रिए popover और ::backdrop के बीच वैल्यू शेयर नहीं की जा सकती.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

अब तक, आपने पॉपओवर दिखाने के लिए popovertoggletarget का इस्तेमाल देखा है. इसे खारिज करने के लिए, हम "लाइट डिसमिस" का इस्तेमाल कर रहे हैं. हालांकि, आपको popovershowtarget और popoverhidetarget एट्रिब्यूट भी मिलते हैं, जिनका इस्तेमाल किया जा सकता है. आइए, पॉपओवर में एक बटन जोड़ते हैं. यह बटन, पॉपओवर को छिपाता है. साथ ही, टॉगल बटन को बदलकर popovershowtarget का इस्तेमाल करते हैं.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

जैसा कि पहले बताया गया है, Popover API, पॉप-अप के बारे में हमारी पुरानी सोच से ज़्यादा चीज़ों को कवर करता है. सूचनाएं, मेन्यू, टूलटिप वगैरह जैसे सभी तरह के उदाहरणों के लिए, इसे बनाया जा सकता है.

इनमें से कुछ स्थितियों में, इंटरैक्शन के अलग-अलग पैटर्न की ज़रूरत होती है. इंटरैक्शन, जैसे कि कर्सर घुमाना. popoverhovertarget एट्रिब्यूट का इस्तेमाल करने के लिए एक्सपेरिमेंट किया गया था, लेकिन फ़िलहाल इसे लागू नहीं किया गया है.

<div popoverhovertarget="hover-popover">Hover for Code</div>

इसका मतलब है कि टारगेट दिखाने के लिए, किसी एलिमेंट पर कर्सर घुमाएं. इस व्यवहार को सीएसएस प्रॉपर्टी के ज़रिए कॉन्फ़िगर किया जा सकता है. ये सीएसएस प्रॉपर्टी, किसी एलिमेंट पर होवर करने और होवर हटाने के लिए समय की अवधि तय करती हैं. इसी अवधि के दौरान, पॉपओवर दिखता है. एक्सपेरिमेंट में इस्तेमाल किए गए डिफ़ॉल्ट तरीके में, :hover के 0.5s के बाद पॉपओवर दिखता है. इसके बाद, इसे खारिज करने के लिए, लाइट डिसमिस या किसी दूसरे पॉपओवर को खोलने की ज़रूरत होगी. इसके बारे में ज़्यादा जानकारी यहां दी गई है. ऐसा इसलिए हुआ, क्योंकि पॉपओवर को छिपाने की अवधि Infinity पर सेट की गई थी.

इस दौरान, JavaScript का इस्तेमाल करके उस सुविधा को पॉलीफ़िल किया जा सकता है.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopover();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

किसी आइटम को साफ़ तौर पर दिखने वाली होवर विंडो के तौर पर सेट करने का फ़ायदा यह है कि इससे यह पक्का किया जा सकता है कि उपयोगकर्ता ने जान-बूझकर कोई कार्रवाई की है. उदाहरण के लिए, कोई उपयोगकर्ता अपने पॉइंटर को किसी टारगेट पर ले जाता है. हम तब तक पॉप-अप नहीं दिखाना चाहते, जब तक कि उपयोगकर्ता ऐसा न चाहे.

इस डेमो को आज़माएं. इसमें, 0.5s पर सेट की गई विंडो की मदद से टारगेट पर कर्सर घुमाया जा सकता है.

इस्तेमाल के कुछ सामान्य उदाहरणों के बारे में जानने से पहले, आइए कुछ बातों पर एक नज़र डालें.

पॉपओवर के टाइप

हमने गैर-JavaScript इंटरैक्शन के व्यवहार के बारे में बताया है. हालांकि, पॉपओवर के व्यवहार के बारे में क्या कहा जा सकता है. अगर आपको "लाइट डिसमिस" सुविधा का इस्तेमाल नहीं करना है, तो क्या करें? इसके अलावा, क्या आपको अपने पॉपओवर पर सिंगलटन पैटर्न लागू करना है?

Popover API की मदद से, तीन तरह के पॉपओवर तय किए जा सकते हैं. इनका व्यवहार अलग-अलग होता है.

[popover=auto]/[popover]:

• नेस्टिंग की सुविधा. इसका मतलब सिर्फ़ DOM में नेस्ट किया गया कॉन्टेंट नहीं है. ऐन्सेस्ट्रल पॉपओवर की परिभाषा यह है कि वह:
  • डीओएम पोज़िशन (चाइल्ड) के हिसाब से एक-दूसरे से जुड़े हों.
  • popovertoggletarget, popovershowtarget वगैरह जैसे चाइल्ड एलिमेंट पर ट्रिगर करने वाले एट्रिब्यूट से जुड़े होते हैं.
  • anchor एट्रिब्यूट से जुड़े हैं. (सीएसएस ऐंकरिंग एपीआई अभी डेवलपमेंट के चरण में है).
• हल्का खारिज करें.
• इसे खोलने पर, ऐंसस्ट्रल पॉपओवर के अलावा अन्य पॉपओवर बंद हो जाते हैं. नीचे दिए गए डेमो को आज़माएं. इसमें बताया गया है कि पैरंट पॉपओवर के साथ नेस्टिंग कैसे काम करती है. देखें कि popoverhidetarget/popovershowtarget के कुछ उदाहरणों को popovertoggletarget में बदलने से क्या बदलाव होते हैं.
• किसी सूचना को खारिज करने पर, सभी सूचनाएं खारिज हो जाती हैं. हालांकि, स्टैक में मौजूद किसी सूचना को खारिज करने पर, स्टैक में मौजूद सिर्फ़ वे सूचनाएं खारिज होती हैं जो उसके ऊपर मौजूद होती हैं.

[popover=manual]:

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

JavaScript API

जब आपको अपने पॉपओवर पर ज़्यादा कंट्रोल चाहिए, तो JavaScript का इस्तेमाल किया जा सकता है. आपको showPopover और hidePopover, दोनों तरीके मिलते हैं. आपको popovershow और popoverhide इवेंट के लिए भी सुनना होगा:

पॉपओवर दिखाना js popoverElement.showPopover() पॉपओवर छिपाना:

popoverElement.hidePopover()

पॉपओवर दिखाए जाने पर सुनें:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

पॉपओवर दिखाए जाने पर सुनें और उसे दिखाए जाने से रोकें:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

पॉपओवर के छिपाए जाने पर सूचना पाने के लिए:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

छिपाए जा रहे पॉपओवर को रद्द नहीं किया जा सकता:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

देखें कि पॉपओवर टॉप लेयर में है या नहीं:

popoverElement.matches(':open')

इससे कुछ खास स्थितियों में ज़्यादा पावर मिलती है. उदाहरण के लिए, कुछ समय तक कोई गतिविधि न होने पर पॉपओवर दिखाएं.

इस डेमो में, पॉपओवर में सुनाई देने वाली आवाज़ें हैं. इसलिए, ऑडियो चलाने के लिए हमें JavaScript की ज़रूरत होगी. क्लिक करने पर, हम पॉपओवर को छिपा रहे हैं, ऑडियो चला रहे हैं, और फिर उसे दोबारा दिखा रहे हैं.

सुलभता

Popover API को बनाते समय, सुलभता को सबसे ज़्यादा प्राथमिकता दी गई है. सुलभता मैपिंग, ज़रूरत के मुताबिक पॉपओवर को ट्रिगर करने वाले एलिमेंट से जोड़ती हैं. इसका मतलब है कि अगर आपने popovertoggletarget जैसे किसी ट्रिगरिंग एट्रिब्यूट का इस्तेमाल किया है, तो आपको aria-* एट्रिब्यूट जैसे aria-haspopup एट्रिब्यूट के बारे में जानकारी देने की ज़रूरत नहीं है.

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

इसे काम करते हुए देखने के लिए, आपको इस डेमो का "फ़ुल स्क्रीन वर्शन" खोलना होगा.

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

ऐंकरिंग (इस पर काम जारी है)

पॉपओवर के मामले में, एलिमेंट को उसके ट्रिगर से ऐंकर करना एक मुश्किल पैटर्न है. उदाहरण के लिए, अगर किसी टूलटिप को उसके ट्रिगर के ऊपर दिखाने के लिए सेट किया गया है, लेकिन दस्तावेज़ स्क्रोल हो जाता है. ऐसा हो सकता है कि व्यूपोर्ट की वजह से टूलटिप पूरी न दिखे. इस समस्या को हल करने के लिए, JavaScript के मौजूदा ऑफ़र उपलब्ध हैं. जैसे, "Floating UI". वे टूलटिप को फिर से व्यवस्थित करेंगे, ताकि ऐसा न हो. साथ ही, वे टूलटिप को आपकी पसंद के क्रम में रखेंगे.

हालांकि, हम चाहते हैं कि आप इसे अपनी स्टाइल के हिसाब से तय कर सकें. इस समस्या को हल करने के लिए, Popover API के साथ-साथ एक कंपैनियन एपीआई भी डेवलप किया जा रहा है. "सीएसएस ऐंकर पोज़िशनिंग" एपीआई की मदद से, एलिमेंट को दूसरे एलिमेंट से जोड़ा जा सकेगा. साथ ही, यह एलिमेंट को इस तरह से फिर से पोज़िशन करेगा कि वे व्यूपोर्ट से कट न जाएं.

यह डेमो, Anchoring API का इस्तेमाल उसकी मौजूदा स्थिति में करता है. बोट की पोज़िशन, व्यूपोर्ट में ऐंकर की पोज़िशन के हिसाब से बदलती है.

यहां सीएसएस का एक स्निपेट दिया गया है, जिसकी मदद से यह डेमो काम कर रहा है. इसके लिए, JavaScript की ज़रूरत नहीं है.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

यहां इसकी खास बातें देखी जा सकती हैं. इस एपीआई के लिए पॉलीफ़िल भी उपलब्ध होगा.

उदाहरण

अब आपको पता चल गया है कि पॉपओवर क्या है और यह कैसे काम करता है. आइए, अब कुछ उदाहरणों पर नज़र डालते हैं.

सूचनाएं

इस डेमो में, "क्लिपबोर्ड पर कॉपी करें" सूचना दिखाई गई है.

• [popover=manual] का इस्तेमाल करता है.
• कार्रवाई पर, showPopover के साथ पॉपओवर दिखाएं.
• 2000ms के टाइम आउट होने के बाद, इसे hidePopover की मदद से छिपाएं.

तोस्ट

इस डेमो में, सूचनाएं दिखाने के लिए टॉप लेयर का इस्तेमाल किया गया है.

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

नेस्ट किया गया मेन्यू

इस डेमो में दिखाया गया है कि नेस्ट किया गया नेविगेशन मेन्यू कैसे काम कर सकता है.

• [popover=auto] का इस्तेमाल करें, क्योंकि इससे नेस्ट किए गए पॉपओवर इस्तेमाल किए जा सकते हैं.
• कीबोर्ड से नेविगेट करने के लिए, हर ड्रॉपडाउन के पहले लिंक पर autofocus का इस्तेमाल करें.
• यह CSS ऐंकरिंग एपीआई के लिए एक बेहतरीन उदाहरण है. हालांकि, इस डेमो के लिए कस्टम प्रॉपर्टी का इस्तेमाल करके, पोज़िशन अपडेट करने के लिए JavaScript के छोटे से कोड का इस्तेमाल किया जा सकता है.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

ध्यान दें, इस डेमो में autofocus का इस्तेमाल किया गया है. इसलिए, कीबोर्ड से नेविगेट करने के लिए, इसे "फ़ुल स्क्रीन व्यू" में खोलना होगा.

मीडिया पॉपओवर

इस डेमो में, मीडिया को पॉप-अप करने का तरीका दिखाया गया है.

• यह कुकी, लाइट डिसमिस के लिए [popover=auto] का इस्तेमाल करती है.
• JavaScript, वीडियो के play इवेंट को मॉनिटर करता है और वीडियो को पॉप-अप करता है.
• पॉपओवर popoverhide इवेंट से वीडियो रुक जाता है.

विकी स्टाइल वाले पॉपओवर

इस डेमो में, मीडिया वाले इनलाइन कॉन्टेंट टूलटिप बनाने का तरीका दिखाया गया है.

• [popover=auto] का इस्तेमाल करता है. एक को दिखाने पर, बाकी छिप जाते हैं. ऐसा इसलिए होता है, क्योंकि वे पूर्वज नहीं हैं.
• JavaScript की मदद से, pointerenter पर दिखाया जाता है.
• CSS ऐंकरिंग API के लिए एक और बेहतरीन उम्मीदवार.

मार्गदर्शक ड्रॉवर

इस डेमो में, पॉपओवर का इस्तेमाल करके नेविगेशन ड्रॉअर बनाया गया है.

• यह कुकी, लाइट डिसमिस के लिए [popover=auto] का इस्तेमाल करती है.
• यह कुकी, पहले नेविगेशन आइटम पर फ़ोकस करने के लिए autofocus का इस्तेमाल करती है.

बैकड्रॉप मैनेज करना

इस डेमो में दिखाया गया है कि एक से ज़्यादा पॉपओवर के लिए बैकड्रॉप कैसे मैनेज किए जा सकते हैं. ऐसा तब किया जाता है, जब आपको सिर्फ़ एक ::backdrop दिखाना हो.

• JavaScript का इस्तेमाल करके, दिखने वाले पॉपओवर की सूची बनाए रखें.
• सबसे ऊपर वाली लेयर में मौजूद सबसे नीचे वाले पॉपओवर पर क्लास का नाम लागू करें.

कस्टम कर्सर पॉपओवर

इस डेमो में दिखाया गया है कि popover का इस्तेमाल करके, canvas को सबसे ऊपर की लेयर पर कैसे प्रमोट किया जाता है. साथ ही, इसका इस्तेमाल कस्टम कर्सर दिखाने के लिए कैसे किया जाता है.

• showPopover और [popover=manual] की मदद से, canvas को टॉप लेयर पर प्रमोट करें.
• जब दूसरे पॉपओवर खुले हों, तब canvas पॉपओवर को छिपाएं और दिखाएं, ताकि यह पक्का किया जा सके कि यह सबसे ऊपर है.

ऐक्शनशीट पॉपओवर

इस डेमो में दिखाया गया है कि ऐक्शनशीट के तौर पर पॉपओवर का इस्तेमाल कैसे किया जा सकता है.

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

कीबोर्ड चालू होने पर दिखने वाला पॉपओवर

इस डेमो में दिखाया गया है कि कमांड पैलेट स्टाइल वाले यूज़र इंटरफ़ेस (यूआई) के लिए, पॉपओवर का इस्तेमाल कैसे किया जा सकता है.

• पॉपओवर दिखाने के लिए, cmd + j का इस्तेमाल करें.
• input पर autofocus के साथ फ़ोकस किया गया है.
• कॉम्बो बॉक्स, मुख्य इनपुट के नीचे मौजूद दूसरा popover होता है.
• अगर ड्रॉपडाउन मौजूद नहीं है, तो लाइट डिसमिस करने पर पैलेट बंद हो जाता है.
• Anchoring API के लिए दूसरा उम्मीदवार

तय समय पर दिखने वाला पॉपओवर

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

• JavaScript का इस्तेमाल करके, कुछ समय तक कोई गतिविधि न होने पर पॉपओवर दिखाएं.
• पॉपओवर दिखने पर, टाइमर रीसेट करें.

स्क्रीन सेवर

पिछले डेमो की तरह, अपनी साइट को मज़ेदार बनाने के लिए, इसमें स्क्रीनसेवर जोड़ा जा सकता है.

• JavaScript का इस्तेमाल करके, कुछ समय तक कोई गतिविधि न होने पर पॉपओवर दिखाएं.
• टाइमर को छिपाने और रीसेट करने के लिए, हल्के से खारिज करें.

कैरट फ़ॉलो

इस डेमो में दिखाया गया है कि पॉपओवर को इनपुट कैरेट के साथ कैसे फ़ॉलो किया जा सकता है.

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

फ़्लोटिंग ऐक्शन बटन मेन्यू

इस डेमो में दिखाया गया है कि JavaScript के बिना, फ़्लोटिंग ऐक्शन बटन मेन्यू को लागू करने के लिए पॉपओवर का इस्तेमाल कैसे किया जा सकता है.

• manual तरीके का इस्तेमाल करके, manual टाइप के पॉपओवर का प्रमोशन करें.showPopover यह मुख्य बटन है.
• मेन्यू एक और पॉपओवर है, जो मुख्य बटन का टारगेट है.
• popovertoggletarget की मदद से मेन्यू खोला गया.
• दिखाए जा रहे पहले मेन्यू आइटम पर फ़ोकस करने के लिए, autofocus का इस्तेमाल करें.
• लाइट डिसमिस करने पर, मेन्यू बंद हो जाता है.
• आइकॉन ट्विस्ट में :has() का इस्तेमाल किया जाता है. :has() के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें.

हो गया!

इसलिए, यह पॉपओवर का एक छोटा सा परिचय है. यह Open UI पहल के तहत जल्द ही उपलब्ध होगा. सही तरीके से इस्तेमाल करने पर, यह वेब प्लैटफ़ॉर्म के लिए एक बेहतरीन सुविधा साबित होगी.

ओपन यूज़र इंटरफ़ेस (यूआई) के बारे में ज़रूर जानें. एपीआई में बदलाव होने पर, पॉपओवर एक्सप्लैनर को अप-टू-डेट रखा जाता है. यहां सभी डेमो का कलेक्शन दिया गया है.

यहां आने के लिए धन्यवाद!