HowTo कॉम्पोनेंट – कैसे करें-चेकबॉक्स

Ewa Gasperowicz
X
Rob Dodson
Surma

खास जानकारी

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

एलिमेंट, role="checkbox" एट्रिब्यूट को खुद लागू करने की कोशिश करता है और पहली बार बनाए जाने पर tabindex="0". role एट्रिब्यूट, सहायक स्क्रीन रीडर जैसी टेक्नोलॉजी से उपयोगकर्ता को पता चलता है कि यह किस तरह का कंट्रोल है. tabindex एट्रिब्यूट, एलिमेंट को टैब के क्रम में चुनता है, ताकि वह कीबोर्ड बन जाए फ़ोकस करने लायक और इस्तेमाल करने लायक. इन दो विषयों के बारे में ज़्यादा जानने के लिए, यहां जाएं: ARIA क्या कर सकता है? और Tabindex का इस्तेमाल करना.

चेकबॉक्स पर सही का निशान लगाने पर, यह checked बूलियन एट्रिब्यूट जोड़ता है और true के लिए संबंधित checked प्रॉपर्टी. इसके अलावा, एलिमेंट aria-checked एट्रिब्यूट, "true" या "false" को एट्रिब्यूट करता है. यह इस पर निर्भर करता है कि राज्य. माउस या स्पेस बार वाले चेकबॉक्स पर क्लिक करने से, ये टॉगल होते हैं राज्यों को चुना गया है.

यह चेकबॉक्स disabled की स्थिति के साथ भी काम करता है. अगर disabled प्रॉपर्टी को सही पर सेट किया जाता है या disabled विशेषता लागू की जाती है, तो चेकबॉक्स सेट होता है aria-disabled="true", tabindex एट्रिब्यूट हटा देता है और फ़ोकस दिखाता है अगर चेकबॉक्स मौजूदा activeElement है, तो दस्तावेज़ में जोड़ दें.

चेकबॉक्स को howto-label एलिमेंट से जोड़ा गया है, ताकि यह पक्का किया जा सके कि इसमें ऐक्सेस किया जा सकने वाला नाम.

रेफ़रंस

डेमो

GitHub पर लाइव डेमो देखें

इस्तेमाल से जुड़ा उदाहरण

<style>
  howto-checkbox {
    vertical-align: middle;
  }
  howto-label {
    vertical-align: middle;
    display: inline-block;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 20px;
    margin-left: 8px;
  }
</style>

<howto-checkbox id="join-checkbox"></howto-checkbox>
<howto-label for="join-checkbox">Join Newsletter</howto-label>

कोड

(function() {

कीबोर्ड इवेंट को मैनेज करने में मदद पाने के लिए, मुख्य कोड तय करें.

  const KEYCODE = {
    SPACE: 32,
  };

innerHTML के मुकाबले <template> एलिमेंट से कॉन्टेंट को क्लोनिंग करना बेहतर होता है, क्योंकि यह एचटीएमएल पार्स करने की अतिरिक्त लागत से बचाता है.

  const template = document.createElement('template');

  template.innerHTML = `
    <style>
      :host {
        display: inline-block;
        background: url('../images/unchecked-checkbox.svg') no-repeat;
        background-size: contain;
        width: 24px;
        height: 24px;
      }
      :host([hidden]) {
        display: none;
      }
      :host([checked]) {
        background: url('../images/checked-checkbox.svg') no-repeat;
        background-size: contain;
      }
      :host([disabled]) {
        background:
          url('../images/unchecked-checkbox-disabled.svg') no-repeat;
        background-size: contain;
      }
      :host([checked][disabled]) {
        background:
          url('../images/checked-checkbox-disabled.svg') no-repeat;
        background-size: contain;
      }
    </style>
  `;


  class HowToCheckbox extends HTMLElement {
    static get observedAttributes() {
      return ['checked', 'disabled'];
    }

नया इंस्टेंस बनाए जाने पर एलिमेंट का कंस्ट्रक्टर चलाया जाता है. इंस्टेंस या तो एचटीएमएल को पार्स करके, document.createElement('howto-checkbox' को कॉल करके) या नए HowToCheckbox() को कॉल करके बनाए जाते हैं; शैडो डीओएम बनाने के लिए कंस्ट्रक्टर एक अच्छी जगह है, हालांकि आपको किसी भी एट्रिब्यूट या लाइट डीओएम चाइल्ड को छूने से बचना चाहिए, क्योंकि हो सकता है कि वे अभी उपलब्ध न हों.

    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

एलिमेंट को डीओएम में डालने पर connectedCallback() फ़ायर होता है. शुरुआत में role, tabindex, और इंटरनल स्थिति सेट करने के साथ-साथ, इवेंट लिसनर इंस्टॉल करने के लिए यह अच्छी जगह है.

    connectedCallback() {
      if (!this.hasAttribute('role'))
        this.setAttribute('role', 'checkbox');
      if (!this.hasAttribute('tabindex'))
        this.setAttribute('tabindex', 0);

उपयोगकर्ता किसी एलिमेंट के इंस्टेंस पर प्रॉपर्टी सेट कर सकता है, लेकिन इसके प्रोटोटाइप को इस क्लास से कनेक्ट किया जाता है. _upgradeProperty() तरीका, किसी भी इंस्टेंस प्रॉपर्टी की जांच करेगा और उन्हें सही क्लास सेटर के ज़रिए चलाएगा. ज़्यादा जानकारी के लिए, लेज़ी प्रॉपर्टी सेक्शन देखें.

      this._upgradeProperty('checked');
      this._upgradeProperty('disabled');

      this.addEventListener('keyup', this._onKeyUp);
      this.addEventListener('click', this._onClick);
    }

    _upgradeProperty(prop) {
      if (this.hasOwnProperty(prop)) {
        let value = this[prop];
        delete this[prop];
        this[prop] = value;
      }
    }

एलिमेंट को डीओएम से हटाए जाने पर disconnectedCallback() फ़ायर होता है. इस बेहतरीन जगह पर, पहचान फ़ाइलें रिलीज़ करने और इवेंट लिसनर हटाने जैसे काम किए जा सकते हैं.

    disconnectedCallback() {
      this.removeEventListener('keyup', this._onKeyUp);
      this.removeEventListener('click', this._onClick);
    }

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

    set checked(value) {
      const isChecked = Boolean(value);
      if (isChecked)
        this.setAttribute('checked', '');
      else
        this.removeAttribute('checked');
    }

    get checked() {
      return this.hasAttribute('checked');
    }

    set disabled(value) {
      const isDisabled = Boolean(value);
      if (isDisabled)
        this.setAttribute('disabled', '');
      else
        this.removeAttribute('disabled');
    }

    get disabled() {
      return this.hasAttribute('disabled');
    }

attributeChangedCallback() को तब कॉल किया जाता है, जब निगरानी वाले एट्रिब्यूट के कलेक्शन में मौजूद किसी एट्रिब्यूट में बदलाव किया जाता है. यह खराब असर को ठीक करने का अच्छा तरीका है, जैसे ARIA एट्रिब्यूट सेट करना.

    attributeChangedCallback(name, oldValue, newValue) {
      const hasValue = newValue !== null;
      switch (name) {
        case 'checked':
          this.setAttribute('aria-checked', hasValue);
          break;
        case 'disabled':
          this.setAttribute('aria-disabled', hasValue);

tabindex एट्रिब्यूट, किसी एलिमेंट से फ़ोकसेबिलिटी को पूरी तरह हटाने का तरीका नहीं बताता. tabindex=-1 वाले एलिमेंट पर, अब भी माउस से या focus() को कॉल करके फ़ोकस किया जा सकता है. यह पक्का करने के लिए कि कोई एलिमेंट बंद है और फ़ोकस नहीं किया जा सकता, tabindex एट्रिब्यूट को हटाएं.

          if (hasValue) {
            this.removeAttribute('tabindex');

अगर फ़ोकस अभी इस एलिमेंट पर है, तो HTMLElement.blur() तरीके को कॉल करके फ़ोकस हटाएं

            this.blur();
          } else {
            this.setAttribute('tabindex', '0');
          }
          break;
      }
    }

    _onKeyUp(event) {

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

      if (event.altKey)
        return;

      switch (event.keyCode) {
        case KEYCODE.SPACE:
          event.preventDefault();
          this._toggleChecked();
          break;

किसी भी दूसरी कुंजी को दबाए जाने पर, उसे अनदेखा कर दिया जाता है और उसे ब्राउज़र में वापस भेज दिया जाता है.

        default:
          return;
      }
    }

    _onClick(event) {
      this._toggleChecked();
    }

_toggleChecked() जांचे गए सेटर को कॉल करता है और उसकी स्थिति को पलट देता है. _toggleChecked() सिर्फ़ उपयोगकर्ता की कार्रवाई से जनरेट होता है. इसलिए, यह बदलाव से जुड़ा इवेंट भी भेजेगा. यह इवेंट बबल, <input type=checkbox> के नेटिव व्यवहार की नकल करने के लिए दिखता है.

    _toggleChecked() {
      if (this.disabled)
        return;
      this.checked = !this.checked;
      this.dispatchEvent(new CustomEvent('change', {
        detail: {
          checked: this.checked,
        },
        bubbles: true,
      }));
    }
  }

  customElements.define('howto-checkbox', HowToCheckbox);
})();