Sélection de base

Exemple montrant comment intégrer un simple bouton de sélection radio avec prise en charge des étiquettes

class BasicSelectionExampleWidget extends NGSSelectionWidget {
    /* Exemple montrant comment intégrer un simple bouton de sélection radio
       avec prise en charge des étiquettes
  */

    /* Modèle HTML qui sera généré avant la création de la classe
        Tous les id et noms de classes CSS seront suffixés par l'uniqueId
        fourni lors de la création du widget */
    static get template() {
        return `<div class="ngs-widget-basic-radio-sample">
      <div>
         <input type="radio" id="radioButton">
      </div>
      <div>
         <ngs-label></ngs-label>
       </div>
       </div>`
    }

    /* Style qui sera attribué à ce widget, notez que tous les 
      noms de classes des éléments seront scindés à l'aide de l'identifiant unique du widget */  
    static get style() {
        return '.ngs-widget-basic-radio-sample { display:flex;flex-direction:row}';
    }

    init() {
        // Récupérer l'élément input depuis le modèle
        // il est important de toujours suffixer tout id 
        // du modèle avec l'uniqueId du widget
        this.radioButton = this.getWidgetElementById('radioButton');

        // Récupérer le mode de rendu actuel pour savoir comment nous devons
        // configurer l'état ici : le rendre désactivé si le 
        // widget est en mode lecture seule 
        this.isDisabled$(disabled => {
            this.radioButton.disabled = disabled;
        });

        this.isSelected$(selected => {
            this.radioButton.checked = selected;
        });

        this.radioButton.addEventListener('click', (event) => {
            this.radioChecked(this.radioButton.checked, this);
        });
    }

    // Poster la valeur dans le formulaire
    radioChecked(value, widget) {
        widget.selectAnswer(value);
    }
  }