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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

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

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

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

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

संसाधन

• पेश है popover API
• पॉपओवर और डायलॉग बॉक्स के बीच का अंतर
• क्या आपको किसी गड़बड़ी की शिकायत करनी है या किसी नई सुविधा का अनुरोध करना है? हम आपकी राय जानना चाहते हैं.

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

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