nopaque/app/static/js/CorpusAnalysis/QueryBuilder.js

class ConcordanceQueryBuilder {

  constructor() {
    
    this.elements = new ElementReferencesQueryBuilder();
    this.generalFunctions = new GeneralFunctionsQueryBuilder(this.elements);
    this.tokenAttributeBuilder = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements);
    this.structuralAttributeBuilder = new StructuralAttributeBuilderFunctionsQueryBuilder(this.elements);

    // Event listener for structural attribute modal
    document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => {
      button.addEventListener('click', () => {
        this.structuralAttributeBuilder.actionButtonHandler(button.dataset.structuralAttrModalActionButton);
      });
    });

    // Event listener for token attribute modal
    this.elements.positionalAttrSelection.addEventListener('change', (event) => {
      this.generalFunctions.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
      this.generalFunctions.toggleClass([event.target.value], 'hide', 'remove');
      this.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
    });
    // Options for positional attribute selection
    document.querySelectorAll('.positional-attr-options-action-button[data-options-action]').forEach(button => {
      button.addEventListener('click', () => {this.tokenAttributeBuilder.actionButtonHandler(button.dataset.optionsAction);});
    });
    document.querySelectorAll('.incidence-modifier-selection[data-incidence-modifier]').forEach(button => {
      button.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifierHandler(button);});
    });
    document.querySelectorAll('.n-m-submit-button').forEach(button => {
      button.addEventListener('click', () => {
        this.tokenAttributeBuilder.nmSubmitHandler(button.dataset.modalId);
      });
    });

    // Initializing and styling the Materialize Chip components
    M.Chips.init(
      this.elements.queryInputField, 
      {
        placeholder: 'Add your query here'
      }
    );
    document.querySelector('#corpus-analysis-concordance-form-query-builder input').style.setProperty('width', '150px', 'important');

    this.elements.positionalAttrModal = M.Modal.init(
      document.querySelector('#corpus-analysis-concordance-positional-attr-modal'), 
      {
        onOpenStart: () => {
          this.tokenAttributeBuilder.optionToggleHandler();
        }
      }
    );
  }
}