Date Material

Cet exemple intègre le sélecteur de date matériel JavaScript déjà existant suivant https://github.com/FreddyFY/material-datepicke et montre comment utiliser un JavaScript et un CSS externes pour obtenir la saisie du Répondant et valider la saisie avec prise en charge multilingue et style basé sur l'actuel ngSurvey thème choisi par le gestionnaire de Sondage.

class MaterialDateWidget extends NGSWidget {
    /* 
        Exemple qui montre comment intégrer une extension basée sur un JavaScript externe 
        comme un widget ngSurvey avec prise en charge des libellés.
        
        Cet exemple intègre le sélecteur de date material
        https://github.com/FreddyFY/material-datepicker

        Montre comment utiliser JavaScript et CSS externes pour obtenir la saisie du Répondant
        et valider la saisie avec prise en charge multilingue
    */

    /* Modèle HTML qui sera généré avant la création de la classe du widget
        Tous les id seront suffixés par l'uniqueId
        fourni lors de la création du widget */
    static get template() {
        return `<input class="ngs-question__answer-field ngs-question__answer-field-material-date" type="text" id="materialpicker001">`;
    }

    /* 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-question__answer-field-material-date {max-width:100px;}`
    }

    /* Permet de définir si la réponse est requise ou non
       depuis la page de paramètres de la réponse pour rendre
       la réponse du widget obligatoire pendant le Sondage
    */
    static get required() {
        return true;
    }

    /* Propriétés qui peuvent être définies depuis le concepteur de formulaire pour chaque
     réponse utilisant ce widget comme type de réponse dans les propriétés de réponse*/
    static get propertiesDef() {
        return [{
                id: 'color',
                label: 'color',
                defaultValue: 'var(--ngs-accent-color)',
                type: 'text'
            },
            {
                id: 'orientation',
                label: 'Orientation',
                defaultValue: 'portrait',
                type: 'list',
                list: [{
                        name: 'portrait',
                        value: 'portrait'
                    },
                    {
                        name: 'landscape',
                        value: 'landscape'
                    }
                ]
            }
        ];
    }

    /* Dépendances de code JavaScript externes qui seront chargées
     avant la création du widget */
    static get jsDependencies() {
        return [{
                id: 'moments',
                url: 'https://momentjs.com/downloads/moment-with-locales.min.js'
            },
            {
                id: 'materialdate',
                url: 'https://cdn.rawgit.com/FreddyFY/material-datepicker/master/dist/material-datepicker.min.js'
            }
        ];
    }

    /* Dépendances de code CSS externes qui seront chargées
       avant la création du widget */
    static get cssDependencies() {
        return [{
                id: 'googlefonts',
                url: 'https://fonts.googleapis.com/icon?family=Material+Icons'
            },
            {
                id: 'materialdatecss',
                url: 'https://cdn.rawgit.com/FreddyFY/material-datepicker/master/dist/material-datepicker.css'
            }
        ];
    }

    init() {
        var widget = this;
        // 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.inputField = this.getWidgetElementById('materialpicker001');

        this.getLanguage$(lang => {
            // Configurez le sélecteur de date, il est important de toujours suffixer tout id 
            // du modèle avec l'uniqueId du widget
            this.materialPicker001 = new MaterialDatepicker('#materialpicker001' + this.uniqueId, {
                lang: lang.languageCode,
                color: this.properties.color,
                orientation: this.properties.orientation,
                onNewDate: function(date) {
                    // Si l'utilisateur a sélectionné une date, publier la valeur dans le formulaire
                    widget.setAnswer(widget.inputField.value);
                }
            });

            if (this.materialPicker001) {

                // 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.inputField.disabled = disabled;
                });

                // Définir la valeur initiale lorsque le widget est créé
                if (this.answerContext.initialValue) {
                    this.inputField.value = this.answerContext.initialValue;
                } else if (this.inputField.value) {
                    this.setAnswer(this.inputField.value);
                }

                // Si l'utilisateur modifie le texte, assurez-vous d'enregistrer la valeur
                // dans le formulaire   
                this.inputField.addEventListener('input', (event) => {
                    this.textChange(this.inputField.value, this);
                });
            }
        });
    }

    // Poster la valeur dans le formulaire
    textChange(value, widget) {
        widget.setAnswer(this.inputField.value);
    }

    // Sera appelé par le formulaire
    // pour vérifier si la valeur est valide
    // Si non valide doit retourner '' (aucun message d'erreur affiché) ou le message d'erreur à afficher
    // Si c'est valide retourner null 
    isValid() {
        var date = new Date(this.inputField.value);
        if ((this.inputField.value && !(date instanceof Date && !isNaN(date.valueOf())))) {
            return 'InvalidDateDataTypeMessage';
        } else {
            return null;
        }
    }
}