पॉपओवर केस स्टडी

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

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

पॉपओवर को अक्सर डायलॉग समझ लिया जाता है. हालांकि, दोनों के काम करने के तरीके में कुछ अहम अंतर हैं. dialog.showModal (मॉडल डायलॉग) की मदद से खोला गया dialog एलिमेंट, एक ऐसा अनुभव है जिसमें मॉडल को बंद करने के लिए, उपयोगकर्ता के इंटरैक्शन की ज़रूरत होती है. popover में लाइट डिसमिस की सुविधा काम करती हो. मोडल dialog ऐसा नहीं करता. मॉडल डायलॉग की वजह से, पेज का बाकी हिस्सा काम नहीं करता. popover नहीं करता. दोनों के अंतर के बारे में ज़्यादा जानें.

के बाहर क्लिक किया जाता है

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

Tokopedia

पॉपओवर एट्रिब्यूट का इस्तेमाल करने से, React में कोड की लाइनें 70% तक कम हो गईं. मोडल को नेटिव तौर पर एचटीएमएल से कंट्रोल किया जा सकता है. इसके लिए, JavaScript में इवेंट हैंडलिंग की ज़रूरत नहीं होती. साथ ही, मोडल डीओएम को document.body के आखिर में ले जाने के लिए React.createPortal का इस्तेमाल करने की ज़रूरत नहीं होती. हम @starting-style का इस्तेमाल, पॉपओवर को ऐनिमेट करने के लिए भी कर सकते हैं.—एंड्री विहालिम, सीनियर सॉफ़्टवेयर इंजीनियर, Tokopedia.

Tokopedia के प्रॉडक्ट के बारे में ज़्यादा जानकारी वाले पेजों (पीडीपी) पर, हर प्रॉडक्ट के लिए कई इमेज मौजूद होती हैं. प्रॉडक्ट के थंबनेल पर क्लिक करने पर, एक मोडल खुलता है. इसमें बड़ी इमेज दिखती है. यह ई-कॉमर्स वेबसाइटों में इस्तेमाल किया जाने वाला एक सामान्य पैटर्न है.

कोड

Tokopedia, फ़्रंटएंड डेवलपमेंट के लिए React का इस्तेमाल करता है. इस मॉडल के लिए Popover API लागू करने से पहले, उन्होंने DOM मॉडल और बटन का इस्तेमाल किया था. बटन ने React की स्थिति को बदलकर, मॉडल को खोल दिया. पॉपओवर एपीआई की मदद से, वे उस एलिमेंट में popovertarget एट्रिब्यूट तय करते हैं जो पॉपओवर को खोलता है. इसकी वैल्यू, पॉपओवर एलिमेंट के आईडी के बराबर होती है.

इस बुनियादी तरीके से लागू करने पर, पॉपओवर काम करता है. हालांकि, यह बिना किसी ऐनिमेशन के दिखता और गायब हो जाता है. पॉपओवर के लिए, आसानी से दिखने और गायब होने वाला ऐनिमेशन बनाने के लिए, :popover-open और @starting-style का इस्तेमाल करें. साथ ही, अलग-अलग प्रॉपर्टी के ऐनिमेशन की अनुमति दें. यहां दिए गए कोड के उदाहरण में, transform: 'scale()' प्रॉपर्टी का इस्तेमाल करके पॉपओवर को छोटा और बड़ा किया गया है.

इस कोड के उदाहरण में, Popover API के लिए एंट्री और एग्ज़िट ऐनिमेशन लागू करने का तरीका बताया गया है.

<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,
    },
  },
});

ऐसे ब्राउज़र के लिए जिनमें Popover API काम नहीं करता, Tokopedia ने oddbird का popover-polyfill लागू किया है. यह gzip कंप्रेशन के साथ सिर्फ़ 3.2 केबी का है. वे पॉलीफ़िल से संतुष्ट थे, क्योंकि यह अच्छी तरह से काम करता था और इससे परफ़ॉर्मेंस में कोई गिरावट नहीं आई थी. कुल मिलाकर, उन्होंने Popover API की मदद से React में कोड की लाइनों को 70% तक कम कर दिया.

Popover API का इस्तेमाल करते समय ध्यान रखने वाली बातें

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

पॉपओवर को अन्य एलिमेंट के हिसाब से पोज़िशन करने के लिए, उन्हें सीएसएस ऐंकर पोज़िशनिंग (Chrome में जल्द ही उपलब्ध होगा) के साथ मिलाएं. यह मेन्यू और टूलटिप के लिए मददगार है.

संसाधन

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