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

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()'प्रॉपर्टी का इस्तेमाल करके, पॉपओवर को छोटा और बड़ा किया गया है.

इस कोड के उदाहरण में, 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 केबी का है. वे पॉलीफ़िल से संतुष्ट थे, क्योंकि यह अच्छी तरह से काम करता था और इसकी वजह से परफ़ॉर्मेंस में कोई गिरावट नहीं आई. कुल मिलाकर, वे पॉपओवर एपीआई की मदद से, React में कोड की 70% लाइनों को कम कर पाए.

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

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

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

संसाधन

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

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

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