टोस्ट कॉम्पोनेंट बनाना

ज़रूरत के हिसाब से बदलने और सुलभता की सुविधाओं के साथ काम करने वाले टॉस्ट कॉम्पोनेंट बनाने का तरीका.

Adam Argyle

इस पोस्ट में, मैं टॉस्ट कॉम्पोनेंट बनाने का तरीका शेयर करना चाहता हूं. डेमो आज़माएं.

अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:

खास जानकारी

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

इंटरैक्शन

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

मार्कअप

<output> एलिमेंट, टॉस्ट के लिए एक अच्छा विकल्प है, क्योंकि स्क्रीन रीडर को इसकी सूचना दी जाती है. सही एचटीएमएल, हमें JavaScript और सीएसएस की मदद से बेहतर बनाने के लिए एक सुरक्षित आधार देता है. साथ ही, इसमें बहुत सारा JavaScript होगा.

टोस्ट

<output class="gui-toast">Item added to cart</output>

role="status" जोड़कर, इसे ज़्यादा समावेशी बनाया जा सकता है. अगर ब्राउज़र, स्पेसिफ़िकेशन के मुताबिक <output> एलिमेंट को इंप्लिसिट भूमिका नहीं देता है, तो यह फ़ॉलबैक के तौर पर काम करता है.

<output role="status" class="gui-toast">Item added to cart</output>

टोस्ट का कंटेनर

एक बार में एक से ज़्यादा टोस्ट दिखाए जा सकते हैं. एक से ज़्यादा टॉस्ट दिखाने के लिए, कंटेनर का इस्तेमाल किया जाता है. यह कंटेनर, स्क्रीन पर टॉस्ट की पोज़िशन को भी मैनेज करता है.

<section class="gui-toast-group">
  <output role="status">Wizard Rose added to cart</output>
  <output role="status">Self Watering Pot added to cart</output>
</section>

लेआउट

मैंने टॉस्ट को व्यूपोर्ट के inset-block-end पर पिन करने का विकल्प चुना है. अगर ज़्यादा टॉस्ट जोड़े जाते हैं, तो वे स्क्रीन के किनारे से स्टैक होते हैं.

जीयूआई कंटेनर

टोस्ट कंटेनर, टोस्ट पेश करने के लिए लेआउट का पूरा काम करते हैं. यह व्यूपोर्ट के लिए fixed है और लॉजिकल प्रॉपर्टी inset का इस्तेमाल करता है, ताकि यह तय किया जा सके कि किन किनारों को पिन करना है. साथ ही, उसी block-end किनारे से padding का कुछ हिस्सा.

.gui-toast-group {
  position: fixed;
  z-index: 1;
  inset-block-end: 0;
  inset-inline: 0;
  padding-block-end: 5vh;
}

टॉस्ट कंटेनर, व्यूपोर्ट में अपनी जगह तय करने के साथ-साथ एक ग्रिड कंटेनर भी होता है. इसमें टॉस्ट अलाइन और डिस्ट्रिब्यूट किए जा सकते हैं. आइटम को justify-content का इस्तेमाल करके एक ग्रुप के तौर पर और justify-items का इस्तेमाल करके अलग-अलग सेंटर किया जाता है. gap का इस्तेमाल करें, ताकि टोस्ट एक-दूसरे से न छुएं.

.gui-toast-group {
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 1vh;
}

जीयूआई टोस्ट

किसी एक टॉस्ट में कुछ padding, border-radius के साथ कुछ नरम कोने, और मोबाइल और डेस्कटॉप के साइज़ में मदद करने के लिए min() फ़ंक्शन होता है. यहां दी गई सीएसएस में रिस्पॉन्सिव साइज़, टॉस्ट को व्यूपोर्ट के 90% या 25ch से ज़्यादा चौड़ा होने से रोकता है.

.gui-toast {
  max-inline-size: min(25ch, 90vw);
  padding-block: .5ch;
  padding-inline: 1ch;
  border-radius: 3px;
  font-size: 1rem;
}

स्टाइल

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

टोस्ट कंटेनर

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

.gui-toast-group {
  pointer-events: none;
}

जीयूआई टोस्ट

कस्टम प्रॉपर्टी, एचएसएल, और प्राथमिकता वाली मीडिया क्वेरी की मदद से, टॉस्ट को हल्के या गहरे रंग वाली अडैप्टिव थीम दें.

.gui-toast {
  --_bg-lightness: 90%;

  color: black;
  background: hsl(0 0% var(--_bg-lightness) / 90%);
}

@media (prefers-color-scheme: dark) {
  .gui-toast {
    color: white;
    --_bg-lightness: 20%;
  }
}

ऐनिमेशन

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

यहां टॉस्ट ऐनिमेशन के लिए इस्तेमाल किए गए मुख्य फ़्रेम दिए गए हैं. सीएसएस, एक ही ऐनिमेशन में टॉस्ट के दिखने, रुकने, और हटने की प्रोसेस को कंट्रोल करेगी.

@keyframes fade-in {
  from { opacity: 0 }
}

@keyframes fade-out {
  to { opacity: 0 }
}

@keyframes slide-in {
  from { transform: translateY(var(--_travel-distance, 10px)) }
}

इसके बाद, टॉस्ट एलिमेंट वैरिएबल सेट अप करता है और मुख्य फ़्रेम को ऑर्केस्ट्रेट करता है.

.gui-toast {
  --_duration: 3s;
  --_travel-distance: 0;

  will-change: transform;
  animation: 
    fade-in .3s ease,
    slide-in .3s ease,
    fade-out .3s ease var(--_duration);
}

@media (prefers-reduced-motion: no-preference) {
  .gui-toast {
    --_travel-distance: 5vh;
  }
}

JavaScript

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

import Toast from './toast.js'

Toast('My first toast')

टॉस्ट ग्रुप और टॉस्ट बनाना

जब JavaScript से टॉस्ट मॉड्यूल लोड होता है, तो उसे एक टॉस्ट कंटेनर बनाना होगा और उसे पेज पर जोड़ना होगा. मैंने body से पहले एलिमेंट जोड़ने का विकल्प चुना है. इससे, z-index स्टैकिंग की समस्याएं नहीं होंगी, क्योंकि कंटेनर सभी बॉडी एलिमेंट के कंटेनर से ऊपर है.

const init = () => {
  const node = document.createElement('section')
  node.classList.add('gui-toast-group')

  document.firstElementChild.insertBefore(node, document.body)
  return node
}

init() फ़ंक्शन को मॉड्यूल में अंदरूनी तौर पर कॉल किया जाता है. इसमें एलिमेंट को Toaster के तौर पर स्टैश किया जाता है:

const Toaster = init()

createToast() फ़ंक्शन की मदद से, टॉस्ट एचटीएमएल एलिमेंट बनाया जाता है. इस फ़ंक्शन के लिए, टॉस्ट में कुछ टेक्स्ट की ज़रूरत होती है. यह <output> एलिमेंट बनाता है, उसे कुछ क्लास और एट्रिब्यूट से सजाता है, टेक्स्ट सेट करता है, और नोड दिखाता है.

const createToast = text => {
  const node = document.createElement('output')
  
  node.innerText = text
  node.classList.add('gui-toast')
  node.setAttribute('role', 'status')

  return node
}

एक या एक से ज़्यादा टॉस्ट मैनेज करना

JavaScript अब टॉस्ट को शामिल करने के लिए दस्तावेज़ में एक कंटेनर जोड़ता है और बनाए गए टॉस्ट जोड़ने के लिए तैयार है. addToast() फ़ंक्शन, एक या कई टॉस्ट को हैंडल करता है. सबसे पहले, टॉस्ट की संख्या और यह देखना कि मोशन ठीक है या नहीं. इसके बाद, इस जानकारी का इस्तेमाल करके टॉस्ट जोड़ें या कोई शानदार ऐनिमेशन बनाएं, ताकि अन्य टॉस्ट नए टॉस्ट के लिए "जगह बना सकें".

const addToast = toast => {
  const { matches:motionOK } = window.matchMedia(
    '(prefers-reduced-motion: no-preference)'
  )

  Toaster.children.length && motionOK
    ? flipToast(toast)
    : Toaster.appendChild(toast)
}

पहला टॉस्ट जोड़ते समय, Toaster.appendChild(toast) पेज पर एक टॉस्ट जोड़ता है, जिससे सीएसएस ऐनिमेशन ट्रिगर होते हैं: ऐनिमेट इन, वेट 3s, ऐनिमेट आउट. flipToast() को तब कॉल किया जाता है, जब पहले से मौजूद टॉस्ट हों. इसके लिए, पॉल लुईस की FLIP तकनीक का इस्तेमाल किया जाता है. इसका मकसद, नए टॉस्ट को जोड़ने से पहले और बाद में, कंटेनर की पोज़िशन में हुए अंतर का हिसाब लगाना है. इसे इस तरह समझें कि टोस्टर अभी कहां है और कहां जाएगा. इसके बाद, जहां से वह था वहां से लेकर जहां वह है वहां तक ऐनिमेशन दिखाएं.

const flipToast = toast => {
  // FIRST
  const first = Toaster.offsetHeight

  // add new child to change container size
  Toaster.appendChild(toast)

  // LAST
  const last = Toaster.offsetHeight

  // INVERT
  const invert = last - first

  // PLAY
  const animation = Toaster.animate([
    { transform: `translateY(${invert}px)` },
    { transform: 'translateY(0)' }
  ], {
    duration: 150,
    easing: 'ease-out',
  })
}

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

सभी JavaScript को एक साथ जोड़ना

Toast('my first toast') को कॉल करने पर, एक टॉस्ट बनाया जाता है और उसे पेज पर जोड़ा जाता है. हो सकता है कि नए टॉस्ट को शामिल करने के लिए, कंटेनर को ऐनिमेशन दिया गया हो. इसके बाद, एक वाद दिया जाता है और बनाए गए टॉस्ट को देखा जाता है, ताकि वाद पूरा करने के लिए सीएसएस ऐनिमेशन पूरा हो जाए. इसमें तीन मुख्य फ़्रेम वाले ऐनिमेशन शामिल होते हैं.

const Toast = text => {
  let toast = createToast(text)
  addToast(toast)

  return new Promise(async (resolve, reject) => {
    await Promise.allSettled(
      toast.getAnimations().map(animation => 
        animation.finished
      )
    )
    Toaster.removeChild(toast)
    resolve() 
  })
}

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

export default Toast

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

टॉस्ट कॉम्पोनेंट का इस्तेमाल करना

टॉस्ट या टॉस्ट के डेवलपर अनुभव का इस्तेमाल करने के लिए, Toast फ़ंक्शन को इंपोर्ट करें और उसे मैसेज स्ट्रिंग के साथ कॉल करें.

import Toast from './toast.js'

Toast('Wizard Rose added to cart')

अगर डेवलपर को टॉस्ट दिखने के बाद, क्लीन अप वगैरह करना है, तो वह async और await का इस्तेमाल कर सकता है.

import Toast from './toast.js'

async function example() {
  await Toast('Wizard Rose added to cart')
  console.log('toast finished')
}

नतीजा

अब आपको पता है कि मैंने यह कैसे किया, तो आप कैसे करेंगे‽ 🙂

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

कम्यूनिटी रीमिक्स

• एचटीएमएल/सीएसएस/जेएस के साथ @_devit: डेमो और कोड
• एचटीएमएल/सीएसएस/JS के साथ Joost van der Schee: डेमो और कोड