Widget-Definitionen

Auf dieser Seite finden Sie alle Definitionen der Basisklasse, von der Kindklassen erben können, um ein ngSurvey-Widget zu werden.

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

  /* HTML-Template, das generiert wird, bevor die Klasse erstellt wird
     Alle IDs und CSS-Klassennamen werden mit der uniqueId angehängt
     die bei der Erstellung des Widgets bereitgestellt wird */
  static get template() {}

  /* Das HTML-Template wird während der Entwurfszeit des Formulars verwendet
     Wenn null, wird das eigentliche Widget-Template gerendert */
  static get designTimeTemplate() {}

  /* Das HTML-Template wird verwendet, wenn das Formular zum Drucken angezeigt wird */
  static get printTemplate() {}

  /* Inline-CSS-Style, der zur Seite hinzugefügt wird
     beachten Sie, dass Stilklassen-Namen in einen Gültigkeitsbereich gesetzt werden
     zur eindeutigen ID des Widgets 
  */
  static get style() {}

  /* Inline-JavaScript-Code, der hinzugefügt wird 
     zur Seite, solange das Widget vorhanden ist */
  static get script() {}

  static get selectionWidget() {
    return true;
  }

  /* Unterstützt dieses Widget ein Label? Das Label ist der Text, den ein Formular
  Administrator über das Formulardesign eingeben kann und der angezeigt wird
  vor dem Widget-Template */
  static get hasLabel() {
    return true;
  }

  /* Zeigt die native ngSurvey-Fehlermeldungsbox an 
     unter dem Control
  */
  static get displayErrorMessage() {
    return true;
  }

  /* Setzt allen CSS-Klassen aus dem Widget-Style
     einen eindeutigen Wert voran, um Konflikte zu vermeiden, wenn andere Komponenten 
     diese Klassen unter demselben Namen registriert haben.
     Beachten Sie, dass externe CSS-Abhängigkeiten nicht geparst werden.
     0 : Keine Kapselung
     1 : Shadow CSS - nativer ngSurvey-Präfix-Processor
  */
  static get encapsulationMode() {
    return 1;
  }

  /* Ermöglicht, die Antwort als erforderlich oder nicht erforderlich festzulegen
   über die Antwort-Einstellungsseite, um
   die Widget-Antwort während der Umfrage als erforderlich zu markieren
  */
  static get required() {
    return false;
  }

  /* Eigenschaften, die im Formulardesigner für jede
   Antwort festgelegt werden können, die dieses Widget als Antworttyp in den Antwort-Einstellungen verwendet */
  static get propertiesDef() {}

  /* Externe JavaScript-Code-Abhängigkeiten, die geladen werden
   bevor das Widget erstellt wird */
  static get jsDependencies() {}

  /* Externe CSS-Code-Abhängigkeiten, die geladen werden
   bevor das Widget erstellt wird */
  static get cssDependencies() {}

  /*
    setAnswer; // Callback-Funktion, um einen Wert vom Widget zu übergeben, z. B.: answerPosted(widgetAnswerValue)
    valueChanges$; // Observable, das den Wert des Widgets zurückgibt
      containerElement;
      labelElement;
      respondentAnswers = [];
      uniqueId;
      answerContext;
      formContext;
      sectionIndex;
      properties;
      initialValue;
      label;
    */

  /* containerElement: DOM-Element, das das Template enthält
     labelElement: DOM-Element, das das Label enthält
     answerContext: Answer-Kontext, der Hilfsmethoden zum Arbeiten mit der Antwort bereitstellt
     formContext: Form-Kontext, der Hilfsmethoden zum Arbeiten mit dem Formular bereitstellt
     uniqueId: muss als Suffix verwendet werden, um die Element-IDs oder CSS-Klassen des Templates abzufragen
     properties: instanzspezifische Eigenschaftswerte
     setAnswer: Funktion, die den angegebenen Textwert des Widgets setzt setAnswer(textVal) 
     valueChanges: überwacht alle Wertänderungen des Widgets
     */
  constructor(containerElement, labelElement, answerContext, formContext,
    sectionIndex, uniqueId, properties, setAnswerCallback, valueChanges$) {
  }

  /* Das Widget wurde per Template erstellt, aber noch nicht zum DOM hinzugefügt
     doch seine Eigenschaften wurden bereits gesetzt 
  */
  build() {}

  /* Das Widget wurde per Template erstellt, zum DOM hinzugefügt
     und seine Eigenschaften wurden gesetzt 
  */
  init() {}

  /* Abonniert das Observable und behält
     eine Referenz, um es automatisch abzumelden
     wenn das Widget entsorgt wird
  */
  safeSubscribe(obs, next, error, complete);

  // Beta Nicht für die Produktion
  remoteValidate();

  // Beta Nicht für die Produktion
  remoteValidateProd();

  getValidationParam(name, value);

  /* 
    gibt die Eigenschaften des Widgets zurück 
    im Callback
  */
  getProperties$(propsCallback);

  getLabel$(labelCallback);

  getValue$(valueCallback);

  isDisabled$(stateCallback);

  isSelected$(selectionCallback);

  getRenderMode$(renderModeCallback);

  getLanguage$(languageCallback);

  getRespondentAnswers$(respondentAnswersCallBack);

  getAnswers$(answersCallBack);

  getQuestions$(questionsCallBack);

  /* Wird vom Formular aufgerufen, um zu prüfen, ob der Wert gültig ist
     Wenn nicht gültig, muss '' zurückgegeben werden (keine Fehlermeldung anzeigen) oder die anzuzeigende Fehlermeldung
     Wenn gültig, null zurückgeben */
  isValid();

  /* Gibt das HTML-Element aus dem DOM zurück, das generiert wurde 
     aus dem Widget-Template und entspricht den angehängten IDs des 
     Widget-Templates
  */
  getWidgetElementById(id);

  /*
    Queryselector nur im Container des Widgets.
    Fügt den eindeutigen Widget-Wert den IDs (#) hinzu, um sie an 
    die angehängten lokalen IDs des Widget-Templates anzupassen 
  */
  widgetQuerySelector(selector);

  /*
    QueryselectorAll nur im Container des Widgets.
    Fügt den eindeutigen Widget-Wert den IDs (#) hinzu, um sie an 
    die angehängten lokalen IDs des Widget-Templates anzupassen 
  */
  widgetQuerySelectorAll(selector);
  }


  submitForm();
  nextPage();
  previousPage();
  nextQuestion();
  previousQuestion();
  saveProgress(silent);

  /* Bereinigt alle Dinge, die bereinigt werden müssen
     bevor das Widget aus dem DOM entfernt wird */
  dispose() {}

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

  /* Verknüpft die Widget-Ereignisse, um ihren 
    Status synchron zu halten */
  _hookEvents() {}

  /* Interne Methode darf nicht überschrieben werden */
  _dispose() {}

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

class NGSSelectionWidget extends NGSWidget {
  static get type() {
    return "NGSSelectionWidget"
  }
  /* containerElement: DOM-Element, das das Template enthält
     labelElement: DOM-Element, das das Label enthält
     answerContext: Answer-Kontext, der Hilfsmethoden zum Arbeiten mit der Antwort bereitstellt
     formContext: Form-Kontext, der Hilfsmethoden zum Arbeiten mit dem Formular bereitstellt
     uniqueId: muss als Suffix verwendet werden, um die Element-IDs oder CSS-Klassen des Templates abzufragen
     selectionId: ist die eindeutige ID der Auswahlgruppe
     selectAnswerCallback: Funktion, die aufgerufen wird, wenn eine Antwort im Widget ausgewählt werden muss
     selected$: Observable, das true / false zurückgibt, wenn eine Antwort ausgewählt oder abgewählt wird
     properties: instanzspezifische Eigenschaftswerte
     setAnswer: Funktion, die den angegebenen Textwert des Widgets setzt 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$)
}

export class AnswerContext {
  constructor(
    // Antwort, die mit diesem Widget verknüpft ist
    private answer: Answer,
    // Benutzerdefinierte Eigenschaften, die für dieses Widget festgelegt wurden  
    private propertie$: Observable<any>,
    // Aktueller Rendering-Modus des Widgets, z. B.: DesignTime (design), Standard (laufend)
    private renderMode$: BehaviorSubject<ControlRenderMode>,
    // Soll das Widget deaktiviert werden?
    private disabled$: BehaviorSubject<boolean>,
    // Ist das Label aktiviert
    private showLabel: boolean,
    // Angular-Formularsteuerelement, das den Wert des a enthält
    private formControl: FormControl,
    // Anfangswert der Antwort, könnte der Standardwert sein, der festgelegt wurde 
    // vom Umfrage-Administrator oder die vorherige Befragten-Antwort, falls die Umfrage
    // vom Befragten fortgesetzt wird
    private initialValue: string,
    // Labeltext der Antwort, das Observable streamt den neuen Wert
    // wenn sich der Wert in einer mehrsprachigen Umfrage ändert
    private label$: Observable<string>) { }
}

export class FormContext {
  constructor(
    // Tatsächlicher Befragter der Umfrage
    private respondent$: Observable<Respondent>,
    // Aktuelle Antworten des Befragten der Umfrage, Observable 
    // streamt jede neue Antwortaktualisierung in Echtzeit
    private respondentAnswers$: Observable<RespondentAnswer[]>,    
    // Umfrage-Antworten
    private answers$: Observable<Answer[]>,
    // Umfragefragen
    private questions$: Observable<Question[]>,
    // Aktuelle Sprache des Befragten in mehrsprachigen Umfragen
    private language$: Observable<Language>,
    // Hilfsmethode für den Zugriff auf den Angular-HTTP-Client
    private httpClient: HttpClient,
    // interne ngSurvey-Antwort-HTTP-Services
    private answerService: AnswerService) { }
}