Définitions de Widgets

Dans cette page, vous trouverez toutes les définitions de la classe parente dont les enfants peuvent hériter pour devenir un widget ngSurvey.

class NGSWidget {
  static get type() {
    return "NGSWidget"
  }

  /* 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() {}

  /* Le modèle HTML est utilisé pendant le temps de conception du formulaire
     Si null, le modèle réel du widget sera rendu */
  static get designTimeTemplate() {}

  /* Modèle HTML utilisé lorsque le formulaire est affiché pour impression */
  static get printTemplate() {}

  /* Style CSS inline qui sera ajouté à la page
     notez que les noms des classes de style seront isolés
     sur l'identifiant unique du widget 
  */
  static get style() {}

  /* Code JavaScript inline qui sera ajouté à 
     la page tant que le widget existe */
  static get script() {}

  static get selectionWidget() {
    return true;
  }

  /* Est-ce que ce widget prend en charge le label, le label est le texte qu'un administrateur de
  l'administrateur peut entrer en utilisant la conception du formulaire et qui sera affiché
  avant le modèle du widget */
  static get hasLabel() {
    return true;
  }

  /* Affiche la boîte de message d'erreur native ngSurvey 
     sous le contrôle
  */
  static get displayErrorMessage() {
    return true;
  }

  /* Préfixera toutes les classes CSS du style du widget
     avec une valeur unique pour éviter les conflits si d'autres composants 
     ont enregistré ces classes sous le même nom.
     Notez que cela n'analysera pas les dépendances CSS externes.
     0 : Pas d'encapsulation
     1 : Shadow CSS - processeur de préfixe natif ngSurvey
  */
  static get encapsulationMode() {
    return 1;
  }

  /* 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 false;
  }

  /* Propriétés qui peuvent être définies depuis le concepteur de formulaire pour chaque
   répondre en utilisant ce widget comme type de réponse dans les paramètres de réponse */
  static get propertiesDef() {}

  /* Dépendances de code JavaScript externes qui seront chargées
   avant la création du widget */
  static get jsDependencies() {}

  /* Dépendances de code CSS externes qui seront chargées
   avant la création du widget */
  static get cssDependencies() {}

  /*
    setAnswer; // callback function pour poster une valeur depuis le widget ex : answerPosted(widgetAnswerValue)
    valueChanges$; // Observable qui retourne la valeur du widget
      containerElement;
      labelElement;
      respondentAnswers = [];
      uniqueId;
      answerContext;
      formContext;
      sectionIndex;
      properties;
      initialValue;
      label;
    */

  /* containerElement : élément DOM contenant le modèle
     labelElement : élément DOM contenant le label
     answerContext : Contexte de réponse qui fournit des méthodes d'aide pour interagir avec la réponse
     formContext : Contexte du formulaire qui fournit des méthodes d'aide pour interagir avec le formulaire
     uniqueId : doit être utilisé pour interroger en suffixe les id des éléments du modèle ou les classes css
     properties : valeurs de propriétés spécifiques à l'instance
     setAnswer : fonction qui définira la valeur textuelle donnée du widget setAnswer(textVal) 
     valueChanges : surveillez tout changement de valeur du widget
     */
  constructor(containerElement, labelElement, answerContext, formContext,
    sectionIndex, uniqueId, properties, setAnswerCallback, valueChanges$) {
    this._value = null;
    this._subscribers = [];
    this.containerElement = containerElement;
    this.labelElement = labelElement;
    this.uniqueId = uniqueId;
    this.formContext = formContext;
    this.sectionIndex = sectionIndex;
    this.properties = properties;
    this.answerContext = answerContext;
    this.initialValue = answerContext.initialValue;
    this.valueChanges$ = valueChanges$;
    this.setAnswer = (value) => {
      // Conserve une copie locale de la valeur définie
      this._value = value;

      setAnswerCallback(value);
    };

    this.getLabel$(label => {
      this.label = label;
    })

    this.getRespondentAnswers$(respondentAnswers => {
      this.respondentAnswers = respondentAnswers;
    });

    this.getAnswers$(answers => {
      this.answers = answers;
    });

    this.getQuestions$(questions => {
      this.questions = questions;
    });

  }

  /* Le modèle du widget n'a pas encore été ajouté au DOM
     mais ses propriétés ont déjà été définies 
  */
  build() {}

  /* Le modèle du widget a été ajouté au DOM
     et ses propriétés ont été définies 
  */
  init() {}

  /* S'abonner à l'observable et garder
     une référence pour se désabonner automatiquement
     lorsque le widget est supprimé
  */
  safeSubscribe(obs, next, error, complete) {
    // ajouter au tableau
    if (obs) {
      this._subscribers.push(obs.subscribe(next, error, complete));
    }
  }

  // Bêta - Pas pour la production
  remoteValidate() {
    var validationParams = [];
    for (var key in this.properties) {
      validationParams.push(this.getValidationParam(key, this.properties[key]));
    }
    validationParams.push(this.getValidationParam('secret', '6LeFY6QUAAAAAEwJvr1FYG16rVQpJJ1RQEGV19QM'));
    validationParams.push(this.getValidationParam('response', this._value));
    var remoteValidationParams = {
      validationParams
    }
    return this.formContext.answerService.validate(this.answerContext.answer.id, remoteValidationParams).subscribe(val => {
      console.log('validate')
    });
  }

  // Bêta - Pas pour la production
  remoteValidateProd() {
    var validationParams = [];
    validationParams.push(this.getValidationParam('secret', '6LeFY6QUAAAAAEwJvr1FYG16rVQpJJ1RQEGV19QM'));
    validationParams.push(this.getValidationParam('response', this._value));
    var remoteValidationParams = {
      validationParams
    }
    return this.formContext.answerService.validate(this.answerContext.answer.id, remoteValidationParams).subscribe(val => {
      console.log('validate')
    });
  }

  getValidationParam(name, value) {
    return {
      name,
      valeur
    }
  }

  /* 
    renvoie les propriétés du widget 
    dans le callback
  */
  getProperties$(propsCallback) {
    this.safeSubscribe(this.answerContext.propertie$, propsCallback, null, null)
  }

  getLabel$(labelCallback) {
    this.safeSubscribe(this.answerContext.label$, labelCallback, null, null)
  }

  getValue$(valueCallback) {
    this.safeSubscribe(this.valueChanges$, (value) => {
      // Callback uniquement si la valeur a changé
      if (value != this._value) {
        valueCallback(value);
      }
    }, null, null)
  }

  isDisabled$(stateCallback) {
    this.safeSubscribe(this.answerContext.disabled$, stateCallback, null, null)
  }

  isSelected$(selectionCallback) {
    this.safeSubscribe(this.answerContext.isSelected$, selectionCallback, null, null)
  }

  getRenderMode$(renderModeCallback) {
    this.safeSubscribe(this.answerContext.renderMode$, renderModeCallback, null, null)
  }

  getLanguage$(languageCallback) {
    this.safeSubscribe(this.formContext.language$, languageCallback, null, null)
  }

  getRespondentAnswers$(respondentAnswersCallBack) {
    this.safeSubscribe(this.formContext.respondentAnswers$, respondentAnswersCallBack, null, null)
  }

  getAnswers$(answersCallBack) {
    this.safeSubscribe(this.formContext.answers$, answersCallBack, null, null)
  }

  getQuestions$(questionsCallBack) {
    this.safeSubscribe(this.formContext.questions$, questionsCallBack, null, null)
  }

  /* 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() {
    return null;
  }

  /* Retourne l'élément HTML du DOM qui a été généré 
     à partir du modèle du widget correspondra aux id suffixés du 
     modèle du widget
  */
  getWidgetElementById(id) {
    return this.widgetQuerySelector('#' + id);
  }

  /*
    QuerySelector uniquement dans le conteneur du widget.
    Ajoute l'identifiant unique du widget aux ids (#) pour correspondre 
    aux ids locaux suffixés du modèle du widget 
  */
  widgetQuerySelector(selector) {
    // Ajoute le suffixe id avec l'identifiant unique du widget 
    if (selector.indexOf('#') >= 0) {
      selector += this.uniqueId;
    }
    return this.containerElement.querySelector(selector);
  }

  /*
    QuerySelectorAll uniquement dans le conteneur du widget.
    Ajoute l'identifiant unique du widget aux ids (#) pour correspondre 
    aux ids locaux suffixés du modèle du widget 
  */
  widgetQuerySelectorAll(selector) {
    // Ajoute le suffixe id avec l'identifiant unique du widget 
    if (selector.indexOf('#') >= 0) {
      selector += this.uniqueId;
    }
    return this.containerElement.querySelectorAll(selector);
  }


  /* Nettoie tout ce qui doit être nettoyé
     avant que le widget ne soit détruit du DOM */
  dispose() {}

  _disposeSubscribers() {
    if (this._subscribers) {
      this._subscribers.forEach(subscriber => {
        if (subscriber) {
          subscriber.unsubscribe();
        }
      })
      this._subscribers = [];
    }
  }

  /* Branche les événements du widget pour garder leur 
    état synchronisé */
  _hookEvents() {}

  /* Méthode interne ne doit pas être surchargée */
  _dispose() {
    this._disposeSubscribers();
    this.dispose();
  }

  /*  _value;
    _subscribers = [];*/
}

class NGSSelectionWidget extends NGSWidget {
  static get type() {
    return "NGSSelectionWidget"
  }
  /* containerElement : élément DOM contenant le modèle
     labelElement : élément DOM contenant le label
     answerContext : Contexte de réponse qui fournit des méthodes d'aide pour interagir avec la réponse
     formContext : Contexte du formulaire qui fournit des méthodes d'aide pour interagir avec le formulaire
     uniqueId : doit être utilisé pour interroger en suffixe les id des éléments du modèle ou les classes css
     selectionId : est l'identifiant unique du groupe de sélection
     selectAnswerCallback : fonction qui sera appelée lorsqu'une réponse doit être sélectionnée depuis le widget
     selected$ : observable qui retourne true / false lorsque la réponse est sélectionnée ou désélectionnée
     properties : valeurs de propriétés spécifiques à l'instance
     setAnswer : fonction qui définira la valeur textuelle donnée du widget setAnswer(textVal) */
  constructor(containerElement, labelElement, answerContext, formContext,
    sectionIndex, uniqueId, selectionId, selected, selectedAnswerCallback,
    selected$, properties, setAnswerCallback, valueChanges$) {
    super(containerElement, labelElement, answerContext,
      formContext, sectionIndex, uniqueId, properties, setAnswerCallback, valueChanges$)

    this.selectionId = selectionId;
    this.isSelected = selected;
    this.selected$ = selected$;

    this.selectAnswer = (selected) => {
      // Si ce sont des réponses textuelles, enregistrez la valeur localement (ex : pour les réponses « autre » avec champs et sélections)
      if ((selected !== false && selected !== true) || selected == null || selected.length == 0) {
        this._value = selected;
      }
      selectedAnswerCallback(selected);
    };

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

  isSelected$(selectionCallback) {
    this.safeSubscribe(this.selected$, selectionCallback, null, null)
  }
}

export class AnswerContext {
  constructor(
    // Réponse liée à ce widget
    private answer: Answer,
    // Propriétés personnalisées définies par l'utilisateur pour ce widget  
    private propertie$: Observable<any>,
    // Mode de rendu actuel du widget ex : DesignTime (design), Standard (exécution)
    private renderMode$: BehaviorSubject<ControlRenderMode>,
    // Le widget doit-il être désactivé ?
    private disabled$: BehaviorSubject<boolean>,
    // Le label est-il activé
    private showLabel: boolean,
    // Contrôle de formulaire Angular contenant la valeur de la
    private formControl: FormControl,
    // Valeur initiale de la réponse, peut être la valeur par défaut définie 
    // par l'administrateur du Sondage ou la réponse précédente du répondant si le Sondage
    // est repris par le répondant
    private initialValue: string,
    // Texte du label de la réponse, l'observable transmettra la nouvelle valeur
    // si la valeur change dans les sondages multilingues
    private label$: Observable<string>) { }
}

export class FormContext {
  constructor(
    // Répondant réel du Sondage
    private respondent$: Observable<Respondent>,
    // Réponses réelles du répondant au Sondage, l'observable 
    // transmettra toute nouvelle mise à jour de réponse en temps réel
    private respondentAnswers$: Observable<RespondentAnswer[]>,    
    // Réponses du Sondage
    private answers$: Observable<Answer[]>,
    // Questions du Sondage
    private questions$: Observable<Question[]>,
    // Langue réelle du répondant dans les sondages multilingues
    private language$: Observable<Language>,
    // Méthode d'aide pour accéder au client http Angular
    private httpClient: HttpClient,
    // services http internes de réponse ngSurvey
    private answerService: AnswerService) { }
}