mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-11-03 20:02:47 +00:00
First Query Builder/Expert Mode implementation
This commit is contained in:
Inga Kirschnick
@@ -1,42 +1,31 @@
|
||||
.modal-conent {
|
||||
.modal-content {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#concordance-query-builder {
|
||||
#positional-attr-modal, #structural-attr-modal {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#concordance-query-builder nav {
|
||||
background-color: #6B3F89;
|
||||
margin-top: -25px;
|
||||
margin-left: -25px;
|
||||
width: 105%;
|
||||
}
|
||||
|
||||
#query-builder-nav{
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#close-query-builder {
|
||||
margin-right: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#general-options-query-builder-tutorial-info-icon {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#your-query {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
#insert-query-button {
|
||||
background-color: #00426f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#structural-attr h6 {
|
||||
.attr-modal-header {
|
||||
background-color: #f2eff7;
|
||||
padding: 15px;
|
||||
padding-left: 25px;
|
||||
border-top: 10px solid #6B3F89;
|
||||
margin-left: -24px;
|
||||
margin-top: -24px;
|
||||
margin-right: -24px;
|
||||
}
|
||||
|
||||
.attr-modal-header h6 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@@ -44,16 +33,16 @@
|
||||
color: black;
|
||||
}
|
||||
|
||||
#sentence {
|
||||
background-color:#FD9720;
|
||||
[data-structural-attr-modal-action-button="sentence"]{
|
||||
background-color:#FD9720 !important;
|
||||
}
|
||||
|
||||
#entity {
|
||||
background-color: #A6E22D;
|
||||
[data-structural-attr-modal-action-button="entity"]{
|
||||
background-color: #A6E22D !important;
|
||||
}
|
||||
|
||||
#text-annotation {
|
||||
background-color: #2FBBAB;
|
||||
[data-structural-attr-modal-action-button="meta-data"]{
|
||||
background-color: #2FBBAB !important;
|
||||
}
|
||||
|
||||
#no-value-metadata-message {
|
||||
@@ -61,19 +50,12 @@
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#token-kind-selector {
|
||||
background-color: #f2eff7;
|
||||
padding: 15px;
|
||||
border-top-style: solid;
|
||||
border-color: #6B3F89;
|
||||
.attr-modal-header.input-field {
|
||||
margin-left: 41px;
|
||||
}
|
||||
|
||||
#token-kind-selector.s5 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#token-kind-selector h6 {
|
||||
margin-left: 15px;
|
||||
#token-attr {
|
||||
margin-left: 41px;
|
||||
}
|
||||
|
||||
#token-tutorial-info-icon {
|
||||
@@ -97,11 +79,11 @@
|
||||
background-color: #2FBBAB;
|
||||
}
|
||||
|
||||
#incidence-modifiers a{
|
||||
#incidence-modifiers-dropdown a{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#ignore-case {
|
||||
#ignore-case-checkbox {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
@@ -27,7 +27,6 @@ class CorpusAnalysisConcordance {
|
||||
textStyle: parseInt(this.elements.UIForm['text-style'].value),
|
||||
tokenRepresentation: this.elements.UIForm['token-representation'].value
|
||||
};
|
||||
console.log(this.settings);
|
||||
|
||||
this.app.registerExtension(this);
|
||||
}
|
||||
@@ -80,10 +79,7 @@ class CorpusAnalysisConcordance {
|
||||
});
|
||||
this.elements.UIForm.addEventListener('change', (event) => {
|
||||
if (event.target === this.elements.UIForm['context']) {
|
||||
console.log(this.settings.context);
|
||||
console.log(parseInt(this.elements.UIForm['context'].value));
|
||||
this.settings.context = parseInt(this.elements.UIForm['context'].value);
|
||||
console.log(this.settings.context);
|
||||
this.submitForm();
|
||||
}
|
||||
if (event.target === this.elements.UIForm['per-page']) {
|
||||
|
||||
@@ -1,69 +1,54 @@
|
||||
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);
|
||||
|
||||
this.elements.closeQueryBuilder.addEventListener('click', () => {this.generalFunctions.closeQueryBuilderModal(this.elements.concordanceQueryBuilder);});
|
||||
this.elements.concordanceQueryBuilderButton.addEventListener('click', () => {this.generalFunctions.clearAll();});
|
||||
this.elements.insertQueryButton.addEventListener('click', () => {this.generalFunctions.insertQuery();});
|
||||
this.elements.positionalAttrButton.addEventListener('click', () => {this.generalFunctions.showPositionalAttrArea();});
|
||||
this.elements.structuralAttrButton.addEventListener('click', () => {this.generalFunctions.showStructuralAttrArea();});
|
||||
|
||||
//#region Structural Attribute Event Listeners
|
||||
this.elements.sentence.addEventListener('click', () => {this.structuralAttributeBuilder.addSentence();});
|
||||
this.elements.entity.addEventListener('click', () => {this.structuralAttributeBuilder.addEntity();});
|
||||
this.elements.textAnnotation.addEventListener('click', () => {this.structuralAttributeBuilder.addTextAnnotation();});
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
|
||||
this.elements.englishEntType.addEventListener('change', () => {this.structuralAttributeBuilder.englishEntTypeHandler();});
|
||||
this.elements.germanEntType.addEventListener('change', () => {this.structuralAttributeBuilder.germanEntTypeHandler();});
|
||||
this.elements.emptyEntity.addEventListener('click', () => {this.structuralAttributeBuilder.emptyEntityButton();});
|
||||
|
||||
this.elements.textAnnotationSubmit.addEventListener('click', () => {this.structuralAttributeBuilder.textAnnotationSubmitHandler();});
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
|
||||
//#endregion
|
||||
|
||||
//#region Token Attribute Event Listeners
|
||||
this.elements.queryBuilderTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#query-builder-tutorial-start');});
|
||||
this.elements.tokenTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#add-new-token-tutorial');});
|
||||
this.elements.editTokenTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#edit-options-tutorial');});
|
||||
this.elements.structuralAttributeTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#add-structural-attribute-tutorial');});
|
||||
this.elements.generalOptionsQueryBuilderTutorialInfoIcon.addEventListener('click', () => {this.tokenAttributeBuilder.tutorialIconHandler('#general-options-query-builder');});
|
||||
|
||||
this.elements.positionalAttr.addEventListener('change', () => {this.tokenAttributeBuilder.tokenTypeSelector();});
|
||||
this.elements.tokenSubmitButton.addEventListener('click', () => {this.tokenAttributeBuilder.addTokenToQuery();});
|
||||
|
||||
this.elements.wordInput.addEventListener('input', () => {this.tokenAttributeBuilder.inputFieldHandler();});
|
||||
this.elements.lemmaInput.addEventListener('input', () => {this.tokenAttributeBuilder.inputFieldHandler();});
|
||||
this.elements.ignoreCase.addEventListener('change', () => {this.tokenAttributeBuilder.inputOptionHandler(this.elements.ignoreCase);});
|
||||
this.elements.wildcardChar.addEventListener('click', () => {this.tokenAttributeBuilder.inputOptionHandler(this.elements.wildcardChar);});
|
||||
this.elements.optionGroup.addEventListener('click', () => {this.tokenAttributeBuilder.inputOptionHandler(this.elements.optionGroup);});
|
||||
|
||||
this.elements.oneOrMore.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifiersHandler(this.elements.oneOrMore);});
|
||||
this.elements.zeroOrMore.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifiersHandler(this.elements.zeroOrMore);});
|
||||
this.elements.zeroOrOne.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifiersHandler(this.elements.zeroOrOne);});
|
||||
this.elements.nSubmit.addEventListener('click', () => {this.tokenAttributeBuilder.nSubmitHandler();});
|
||||
this.elements.nmSubmit.addEventListener('click', () => {this.tokenAttributeBuilder.nmSubmitHandler();});
|
||||
|
||||
this.elements.or.addEventListener('click', () => {this.tokenAttributeBuilder.orHandler();});
|
||||
this.elements.and.addEventListener('click', () => {this.tokenAttributeBuilder.andHandler();});
|
||||
|
||||
//#endregion Token Attribute Event Listeners
|
||||
let selectInstances = this.elements.concordanceQueryBuilder.querySelectorAll('select');
|
||||
M.FormSelect.init(
|
||||
selectInstances,
|
||||
// Initializing and styling the Materialize Chip components
|
||||
M.Chips.init(
|
||||
this.elements.queryInputField,
|
||||
{
|
||||
dropdownOptions: {
|
||||
alignment: 'bottom',
|
||||
coverTrigger: false
|
||||
placeholder: 'Add your query here'
|
||||
}
|
||||
);
|
||||
document.querySelector('#concordance-extension-form-query-builder input').style.setProperty('width', '150px', 'important');
|
||||
|
||||
this.elements.positionalAttrModal = M.Modal.init(
|
||||
document.querySelector('#positional-attr-modal'),
|
||||
{
|
||||
onOpenStart: () => {
|
||||
this.tokenAttributeBuilder.optionToggleHandler();
|
||||
}
|
||||
}
|
||||
)
|
||||
let dropdownContents = this.elements.concordanceQueryBuilder.querySelectorAll('.dropdown-content');
|
||||
dropdownContents.forEach((dropdownContent) => {
|
||||
dropdownContent.style.paddingBottom = '15px';
|
||||
});
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,90 +1,31 @@
|
||||
class ElementReferencesQueryBuilder {
|
||||
constructor() {
|
||||
|
||||
// General Elements
|
||||
this.counter = 0;
|
||||
this.yourQueryContent = [];
|
||||
this.concordanceQueryBuilder = document.querySelector('#concordance-query-builder');
|
||||
this.concordanceQueryBuilderButton = document.querySelector('#concordance-query-builder-button'); //nur Eventlistener
|
||||
this.closeQueryBuilder = document.querySelector('#close-query-builder'); //nur Eventlistener
|
||||
this.valueValidator = true;
|
||||
this.queryInputField = document.querySelector('#concordance-extension-form-query-builder');
|
||||
this.queryInputFieldInstance = M.Chips.getInstance(this.queryInputField);
|
||||
this.queryInputFieldContent = [];
|
||||
|
||||
// Structural Attribute Builder Elements
|
||||
this.structuralAttrModalInstance = document.querySelector('#structural-attr-modal');
|
||||
this.sentenceElement = document.querySelector('[data-structural-attr-modal-action-button="sentence"]');
|
||||
this.entityElement = document.querySelector('[data-structural-attr-modal-action-button="entity"]');
|
||||
this.textAnnotationElement = document.querySelector('[data-structural-attr-modal-action-button="text-annotation"]');
|
||||
|
||||
//#region QueryBuilder Elements
|
||||
this.positionalAttrButton = document.querySelector('#positional-attr-button'); //nur Eventlistener
|
||||
this.positionalAttrArea = document.querySelector('#positional-attr');
|
||||
this.positionalAttr = document.querySelector('#token-attr');
|
||||
this.structuralAttrButton = document.querySelector('#structural-attr-button'); //nur Eventlistener
|
||||
this.structuralAttrArea = document.querySelector('#structural-attr');
|
||||
this.queryContainer = document.querySelector('#query-container');
|
||||
this.yourQuery = document.querySelector('#your-query');
|
||||
this.insertQueryButton = document.querySelector('#insert-query-button'); //nur Eventlistener
|
||||
// Token Attribute Builder Elements
|
||||
this.positionalAttrModal = M.Modal.getInstance(document.querySelector('#positional-attr-modal'));
|
||||
this.positionalAttrSelection = document.querySelector('#positional-attr-selection');
|
||||
this.tokenQuery = document.querySelector('#token-query');
|
||||
this.tokenBuilderContent = document.querySelector('#token-builder-content');
|
||||
this.tokenSubmitButton = document.querySelector('#token-submit');
|
||||
// this.dropButton = '';
|
||||
|
||||
this.queryBuilderTutorialInfoIcon = document.querySelector('#query-builder-tutorial-info-icon');
|
||||
this.tokenTutorialInfoIcon = document.querySelector('#token-tutorial-info-icon'); // nur Eventlistener
|
||||
this.editTokenTutorialInfoIcon = document.querySelector('#edit-options-tutorial-info-icon'); // nur Eventlistener
|
||||
this.structuralAttributeTutorialInfoIcon = document.querySelector('#add-structural-attribute-tutorial-info-icon'); // nur Eventlistener
|
||||
this.generalOptionsQueryBuilderTutorialInfoIcon = document.querySelector('#general-options-query-builder-tutorial-info-icon'); // nur Eventlistener
|
||||
//#endregion QueryBuilder Elements
|
||||
this.noValueMessage = document.querySelector('#no-value-message');
|
||||
this.isTokenQueryInvalid = false;
|
||||
|
||||
//#region Strucutral Attributes
|
||||
this.sentence = document.querySelector('#sentence');
|
||||
this.entity = document.querySelector('#entity');
|
||||
this.textAnnotation = document.querySelector('#text-annotation');
|
||||
|
||||
this.entityBuilder = document.querySelector('#entity-builder');
|
||||
this.englishEntType = document.querySelector('#english-ent-type');
|
||||
this.germanEntType = document.querySelector('#german-ent-type');
|
||||
this.emptyEntity = document.querySelector('#empty-entity'); //nur Eventlistener
|
||||
this.entityAnyType = false;
|
||||
|
||||
this.textAnnotationBuilder = document.querySelector('#text-annotation-builder');
|
||||
this.textAnnotationOptions = document.querySelector('#text-annotation-options');
|
||||
this.textAnnotationInput = document.querySelector('#text-annotation-input');
|
||||
this.textAnnotationSubmit = document.querySelector('#text-annotation-submit');
|
||||
//#endregion Structural Attributes
|
||||
|
||||
//#region Token Attributes
|
||||
this.tokenQueryFilled = false;
|
||||
this.or = document.querySelector('#or');
|
||||
this.and = document.querySelector('#and');
|
||||
|
||||
this.wordBuilder = document.querySelector('#word-builder'); //nur hide/show
|
||||
this.lemmaBuilder = document.querySelector('#lemma-builder'); //nur hide/show
|
||||
this.inputOptions = document.querySelector('#input-options'); //nur hide/show
|
||||
this.incidenceModifiersButton = document.querySelector('#incidence-modifiers-button'); //nur hide/show
|
||||
this.conditionContainer = document.querySelector('#condition-container'); //nur hide/show
|
||||
this.wordInput = document.querySelector('#word-input');
|
||||
this.lemmaInput = document.querySelector('#lemma-input');
|
||||
this.ignoreCaseCheckbox = document.querySelector('#ignore-case-checkbox'); // nur hide/show
|
||||
this.ignoreCase = document.querySelector('input[type="checkbox"]');
|
||||
this.wildcardChar = document.querySelector('#wildcard-char');
|
||||
this.optionGroup = document.querySelector('#option-group');
|
||||
this.englishPosSelection = document.querySelector('#english-pos-selection');
|
||||
this.germanPosSelection = document.querySelector('#german-pos-selection');
|
||||
this.simplePosSelection = document.querySelector('#simple-pos-selection');
|
||||
|
||||
this.englishPosBuilder = document.querySelector('#english-pos-builder'); //nur hide/show
|
||||
this.englishPos = document.querySelector('#english-pos');
|
||||
this.germanPosBuilder = document.querySelector('#german-pos-builder'); //nur hide/show
|
||||
this.germanPos = document.querySelector('#german-pos');
|
||||
|
||||
this.simplePosBuilder = document.querySelector('#simplepos-builder'); //nur hide/show
|
||||
this.simplePos = document.querySelector('#simple-pos');
|
||||
|
||||
this.oneOrMore = document.querySelector('#one-or-more');
|
||||
this.zeroOrMore = document.querySelector('#zero-or-more');
|
||||
this.zeroOrOne = document.querySelector('#zero-or-one'); // die Incidence-Modifier evtl mit data-attributes abfragen?
|
||||
this.exactlyN = document.querySelector('#exactlyN');
|
||||
this.betweenNM = document.querySelector('#betweenNM');
|
||||
this.nInput = document.querySelector('#n-input');
|
||||
this.nSubmit = document.querySelector('#n-submit'); //nur Eventlistener
|
||||
this.nmInput = document.querySelector('#n-m-input');
|
||||
this.mInput = document.querySelector('#m-input');
|
||||
this.nmSubmit = document.querySelector('#n-m-submit'); //nur Eventlistener
|
||||
|
||||
this.cancelBool = false; //nur true/false
|
||||
this.noValueMessage = document.querySelector('#no-value-message'); //nur hide/show
|
||||
//#endregion Token Attributes
|
||||
this.ignoreCaseCheckbox = document.querySelector('#ignore-case-checkbox');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,69 +5,27 @@ class GeneralFunctionsQueryBuilder {
|
||||
|
||||
toggleClass(elements, className, action){
|
||||
elements.forEach(element => {
|
||||
element.classList[action](className);
|
||||
document.querySelector('[data-toggle-area="' + element + '"]').classList[action](className);
|
||||
});
|
||||
}
|
||||
|
||||
closeQueryBuilderModal(closeInstance) {
|
||||
let instance = M.Modal.getInstance(closeInstance);
|
||||
instance.close();
|
||||
}
|
||||
|
||||
showPositionalAttrArea() {
|
||||
// this.elements.positionalAttrArea.classList.remove('hide');
|
||||
// this.elements.structuralAttrArea.classList.add('hide');
|
||||
this.toggleClass([this.elements.positionalAttrArea], 'hide', 'remove');
|
||||
this.toggleClass([this.elements.structuralAttrArea], 'hide', 'add');
|
||||
this.wordBuilder();
|
||||
|
||||
this.elements.tokenQueryFilled = false;
|
||||
|
||||
window.location.href = '#token-builder-content';
|
||||
}
|
||||
|
||||
showStructuralAttrArea() {
|
||||
this.elements.positionalAttrArea.classList.add('hide');
|
||||
this.elements.structuralAttrArea.classList.remove('hide');
|
||||
}
|
||||
|
||||
wordBuilder() {
|
||||
this.hideEverything();
|
||||
this.elements.wordInput.value = '';
|
||||
this.elements.wordBuilder.classList.remove('hide');
|
||||
this.elements.inputOptions.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.classList.remove('hide');
|
||||
this.elements.conditionContainer.classList.remove('hide');
|
||||
this.elements.ignoreCaseCheckbox.classList.remove('hide');
|
||||
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled');
|
||||
this.elements.or.classList.add('disabled');
|
||||
this.elements.and.classList.add('disabled');
|
||||
|
||||
// Resets materialize select field to default value
|
||||
let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr);
|
||||
SelectInstance.input.value = 'word';
|
||||
this.elements.positionalAttr.value = 'word';
|
||||
|
||||
}
|
||||
|
||||
queryChipFactory(dataType, prettyQueryText, queryText) {
|
||||
this.elements.counter++;
|
||||
window.location.href = '#query-container';
|
||||
queryText = Utils.escape(queryText);
|
||||
prettyQueryText = Utils.escape(prettyQueryText);
|
||||
let queryChipElement = Utils.HTMLToElement(
|
||||
`
|
||||
<span class="chip query-component" data-type="${dataType}" data-query="${queryText}" draggable="true">
|
||||
${prettyQueryText}
|
||||
<i class="material-icons close">close</i>
|
||||
</span>
|
||||
`
|
||||
);
|
||||
this.elements.queryInputFieldInstance.addChip({
|
||||
tag: prettyQueryText
|
||||
});
|
||||
|
||||
let queryChipElementIndex = this.elements.queryInputFieldInstance.$chips.length - 1;
|
||||
let queryChipElement = this.elements.queryInputFieldInstance.$chips[queryChipElementIndex];
|
||||
queryChipElement.classList.add('query-component');
|
||||
queryChipElement.setAttribute('data-type', dataType);
|
||||
queryChipElement.setAttribute('data-query', queryText);
|
||||
queryChipElement.setAttribute('draggable', 'true');
|
||||
|
||||
queryChipElement.addEventListener('click', () => {this.deleteAttr(queryChipElement);});
|
||||
queryChipElement.addEventListener('dragstart', (event) => {
|
||||
// selects all nodes without target class
|
||||
let queryChips = this.elements.yourQuery.querySelectorAll('.query-component');
|
||||
let queryChips = this.elements.queryInputField.querySelectorAll('.query-component');
|
||||
|
||||
// Adds a target chip in front of all draggable childnodes
|
||||
setTimeout(() => {
|
||||
@@ -111,152 +69,57 @@ class GeneralFunctionsQueryBuilder {
|
||||
});
|
||||
|
||||
// Ensures that metadata is always at the end of the query:
|
||||
const lastChild = this.elements.yourQuery.lastChild;
|
||||
const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation';
|
||||
// const lastChild = this.elements.queryInputFieldInstance.lastChild;
|
||||
// const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation';
|
||||
// console.log(isLastChildTextAnnotation);
|
||||
// console.log(lastChild);
|
||||
|
||||
if (!isLastChildTextAnnotation) {
|
||||
this.elements.yourQuery.appendChild(queryChipElement);
|
||||
} else {
|
||||
this.elements.yourQuery.insertBefore(queryChipElement, lastChild);
|
||||
}
|
||||
// if (!isLastChildTextAnnotation) {
|
||||
// this.elements.queryInputFieldInstance.appendChild(queryChipElement);
|
||||
// } else {
|
||||
// this.elements.queryInputFieldInstance.insertBefore(queryChipElement, lastChild);
|
||||
// }
|
||||
|
||||
this.elements.queryContainer.classList.remove('hide');
|
||||
this.queryPreviewBuilder();
|
||||
|
||||
// Shows a hint about possible functions for editing the query at the first added element in the query
|
||||
if (this.elements.yourQuery.childNodes.length === 1) {
|
||||
app.flash('You can edit your query by deleting individual elements or moving them via drag and drop.');
|
||||
}
|
||||
// if (this.elements.queryInputFieldInstance.childNodes.length === 1) {
|
||||
// app.flash('You can edit your query by deleting individual elements or moving them via drag and drop.');
|
||||
// }
|
||||
}
|
||||
|
||||
queryPreviewBuilder() {
|
||||
let queryPreview = document.querySelector('#query-preview');
|
||||
this.elements.yourQueryContent = [];
|
||||
for (let element of this.elements.yourQuery.childNodes) {
|
||||
let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips));
|
||||
queryChipElements.pop();
|
||||
this.elements.queryInputFieldContent = [];
|
||||
queryChipElements.forEach(element => {
|
||||
|
||||
let queryElement = element.dataset.query;
|
||||
if (queryElement !== undefined) {
|
||||
queryElement = Utils.escape(queryElement);
|
||||
this.elements.yourQueryContent.push(queryElement);
|
||||
this.elements.queryInputFieldContent.push(queryElement);
|
||||
}
|
||||
}
|
||||
|
||||
let queryString = this.elements.yourQueryContent.join(' ');
|
||||
});
|
||||
|
||||
let queryString = this.elements.queryInputFieldContent.join(' ');
|
||||
queryString += ';';
|
||||
|
||||
|
||||
queryPreview.innerHTML = queryString;
|
||||
queryPreview.parentNode.classList.toggle('hide', queryString === ';');
|
||||
}
|
||||
|
||||
|
||||
deleteAttr(attr) {
|
||||
this.elements.yourQuery.removeChild(attr);
|
||||
if (attr.dataset.type === "start-sentence") {
|
||||
this.elements.sentence.innerHTML = 'Sentence';
|
||||
this.elements.sentenceElement.innerHTML = 'Sentence';
|
||||
} else if (attr.dataset.type === "start-entity" || attr.dataset.type === "start-empty-entity") {
|
||||
this.elements.entity.innerHTML = 'Entity';
|
||||
this.elements.entityElement.innerHTML = 'Entity';
|
||||
}
|
||||
let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips));
|
||||
queryChipElements.pop();
|
||||
this.elements.counter -= 1;
|
||||
if (this.elements.counter === 0) {
|
||||
this.elements.queryContainer.classList.add('hide');
|
||||
}
|
||||
this.elements.queryInputFieldInstance.deleteChip(queryChipElements.indexOf(attr));
|
||||
this.queryPreviewBuilder();
|
||||
}
|
||||
|
||||
insertQuery() {
|
||||
let extFormQuery= document.querySelector('#concordance-extension-form-query');
|
||||
this.elements.yourQueryContent = [];
|
||||
this.validateValue();
|
||||
if (this.elements.valueValidator) {
|
||||
for (let element of this.elements.yourQuery.childNodes) {
|
||||
let queryElement = element.dataset.query;
|
||||
if (queryElement !== 'undefined') {
|
||||
this.elements.yourQueryContent.push(queryElement);
|
||||
}
|
||||
}
|
||||
|
||||
let queryString = this.elements.yourQueryContent.join(' ');
|
||||
queryString += ';';
|
||||
|
||||
this.elements.concordanceQueryBuilder.classList.add('modal-close');
|
||||
extFormQuery.value = queryString;
|
||||
}
|
||||
}
|
||||
|
||||
validateValue() {
|
||||
this.elements.valueValidator = true;
|
||||
let sentenceCounter = 0;
|
||||
let sentenceEndCounter = 0;
|
||||
let entityCounter = 0;
|
||||
let entityEndCounter = 0;
|
||||
for (let element of this.elements.yourQuery.childNodes) {
|
||||
if (element.dataset.type === 'start-sentence') {
|
||||
sentenceCounter += 1;
|
||||
}else if (element.dataset.type === 'end-sentence') {
|
||||
sentenceEndCounter += 1;
|
||||
}else if (element.dataset.type === 'start-entity' || element.dataset.type === 'start-empty-entity') {
|
||||
entityCounter += 1;
|
||||
}else if (element.dataset.type === 'end-entity') {
|
||||
entityEndCounter += 1;
|
||||
}
|
||||
}
|
||||
// Checks if the same number of opening and closing tags (entity and sentence) are present. Depending on what is missing, the corresponding error message is ejected
|
||||
if (sentenceCounter > sentenceEndCounter) {
|
||||
app.flash('Please add the closing sentence tag', 'error');
|
||||
this.elements.valueValidator = false;
|
||||
} else if (sentenceCounter < sentenceEndCounter) {
|
||||
app.flash('Please remove the closing sentence tag', 'error');
|
||||
this.elements.valueValidator = false;
|
||||
}
|
||||
if (entityCounter > entityEndCounter) {
|
||||
app.flash('Please add the closing entity tag', 'error');
|
||||
this.elements.valueValidator = false;
|
||||
} else if (entityCounter < entityEndCounter) {
|
||||
app.flash('Please remove the closing entity tag', 'error');
|
||||
this.elements.valueValidator = false;
|
||||
}
|
||||
}
|
||||
|
||||
clearAll() {
|
||||
// Everything is reset.
|
||||
let instance = M.Tooltip.getInstance(this.elements.queryBuilderTutorialInfoIcon);
|
||||
|
||||
this.hideEverything();
|
||||
this.elements.counter = 0;
|
||||
this.elements.concordanceQueryBuilder.classList.remove('modal-close');
|
||||
this.elements.positionalAttrArea.classList.add('hide');
|
||||
this.elements.structuralAttrArea.classList.add('hide');
|
||||
this.elements.yourQuery.innerHTML = '';
|
||||
this.elements.queryContainer.classList.add('hide');
|
||||
this.elements.entity.innerHTML = 'Entity';
|
||||
this.elements.sentence.innerHTML = 'Sentence';
|
||||
|
||||
// If the Modal is open after 5 seconds for 5 seconds (with 'instance'), a message is displayed indicating that further information can be obtained via the question mark icon
|
||||
instance.tooltipEl.style.background = '#98ACD2';
|
||||
instance.tooltipEl.style.borderTop = 'solid 4px #0064A3';
|
||||
instance.tooltipEl.style.padding = '10px';
|
||||
instance.tooltipEl.style.color = 'black';
|
||||
|
||||
setTimeout(() => {
|
||||
let modalInstance = M.Modal.getInstance(this.elements.concordanceQueryBuilder);
|
||||
if (modalInstance.isOpen) {
|
||||
instance.open();
|
||||
setTimeout(() => {
|
||||
instance.close();
|
||||
}, 5000);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
|
||||
hideEverything() {
|
||||
let elementsToHide = ['wordBuilder', 'lemmaBuilder', 'ignoreCaseCheckbox', 'inputOptions', 'incidenceModifiersButton', 'conditionContainer', 'englishPosBuilder', 'germanPosBuilder', 'simplePosBuilder', 'entityBuilder', 'textAnnotationBuilder'];
|
||||
elementsToHide = elementsToHide.map(element => this.elements[element]);
|
||||
this.toggleClass(elementsToHide, 'hide', 'add');
|
||||
}
|
||||
|
||||
tutorialIconHandler(id) {
|
||||
setTimeout(() => {
|
||||
window.location.href= id;
|
||||
}, 0);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,92 +4,20 @@ class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQu
|
||||
this.elements = elements;
|
||||
}
|
||||
|
||||
addSentence() {
|
||||
this.hideEverything();
|
||||
if (this.elements.sentence.text === 'End Sentence') {
|
||||
this.queryChipFactory('end-sentence', 'Sentence End', '</s>');
|
||||
this.elements.sentence.innerHTML = 'Sentence';
|
||||
} else {
|
||||
this.queryChipFactory('start-sentence', 'Sentence Start', '<s>');
|
||||
this.elements.sentence.innerHTML = 'End Sentence';
|
||||
}
|
||||
}
|
||||
|
||||
addEntity() {
|
||||
if (this.elements.entity.text === 'End Entity') {
|
||||
let queryText;
|
||||
if (this.elements.entityAnyType === false) {
|
||||
queryText = '</ent_type>';
|
||||
} else {
|
||||
queryText = '</ent>';
|
||||
}
|
||||
this.queryChipFactory('end-entity', 'Entity End', queryText);
|
||||
this.elements.entity.innerHTML = 'Entity';
|
||||
} else {
|
||||
this.hideEverything();
|
||||
this.elements.entityBuilder.classList.remove('hide');
|
||||
window.location.href = '#entity-builder';
|
||||
}
|
||||
}
|
||||
|
||||
englishEntTypeHandler() {
|
||||
this.queryChipFactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, '<ent_type="' + this.elements.englishEntType.value + '">');
|
||||
this.elements.entity.innerHTML = 'End Entity';
|
||||
this.hideEverything();
|
||||
this.elements.entityAnyType = false;
|
||||
|
||||
// Resets materialize select dropdown
|
||||
let SelectInstance = M.FormSelect.getInstance(this.elements.englishEntType);
|
||||
SelectInstance.input.value = 'English ent_type';
|
||||
this.elements.englishEntType.value = 'default';
|
||||
}
|
||||
|
||||
germanEntTypeHandler() {
|
||||
this.queryChipFactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, '<ent_type="' + this.elements.germanEntType.value + '">');
|
||||
this.elements.entity.innerHTML = 'End Entity';
|
||||
this.hideEverything();
|
||||
this.elements.entityAnyType = false;
|
||||
|
||||
// Resets materialize select dropdown
|
||||
let SelectInstance = M.FormSelect.getInstance(this.elements.germanEntType);
|
||||
SelectInstance.input.value = 'German ent_type';
|
||||
this.elements.germanEntType.value = 'default';
|
||||
}
|
||||
|
||||
emptyEntityButton() {
|
||||
this.queryChipFactory('start-empty-entity', 'Entity Start', '<ent>');
|
||||
this.elements.entity.innerHTML = 'End Entity';
|
||||
this.hideEverything();
|
||||
this.elements.entityAnyType = true;
|
||||
}
|
||||
|
||||
addTextAnnotation() {
|
||||
this.hideEverything();
|
||||
this.elements.textAnnotationBuilder.classList.remove('hide');
|
||||
window.location.href = '#text-annotation-builder';
|
||||
|
||||
// Resets materialize select dropdown
|
||||
let SelectInstance = M.FormSelect.getInstance(this.elements.textAnnotationOptions);
|
||||
SelectInstance.input.value = 'address';
|
||||
this.elements.textAnnotationOptions.value = 'address';
|
||||
this.elements.textAnnotationInput.value= '';
|
||||
}
|
||||
|
||||
textAnnotationSubmitHandler() {
|
||||
let noValueMetadataMessage = document.querySelector('#no-value-metadata-message');
|
||||
if (this.elements.textAnnotationInput.value === '') {
|
||||
this.elements.textAnnotationSubmit.classList.add('red');
|
||||
noValueMetadataMessage.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
this.elements.textAnnotationSubmit.classList.remove('red');
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
noValueMetadataMessage.classList.add('hide');
|
||||
}, 3000);
|
||||
} else {
|
||||
let queryText = `:: match.text_${this.elements.textAnnotationOptions.value}="${this.elements.textAnnotationInput.value}"`;
|
||||
this.queryChipFactory('text-annotation', `${this.elements.textAnnotationOptions.value}=${this.elements.textAnnotationInput.value}`, queryText);
|
||||
this.hideEverything();
|
||||
actionButtonHandler(action) {
|
||||
switch (action) {
|
||||
case 'sentence':
|
||||
break;
|
||||
case 'entity':
|
||||
this.toggleClass(['entity-builder'], 'hide', 'toggle');
|
||||
this.toggleClass(['text-annotation-builder'], 'hide', 'add');
|
||||
break;
|
||||
case 'meta-data':
|
||||
this.toggleClass(['text-annotation-builder'], 'hide', 'toggle');
|
||||
this.toggleClass(['entity-builder'], 'hide', 'add');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,34 +2,44 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
constructor(elements) {
|
||||
super(elements);
|
||||
this.elements = elements;
|
||||
|
||||
this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
|
||||
this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();});
|
||||
this.elements.lemmaInput.addEventListener('input', () => {this.optionToggleHandler();});
|
||||
}
|
||||
|
||||
//#region General functions of the Token Builder
|
||||
tokenTypeSelector() {
|
||||
this.hideEverything();
|
||||
switch (this.elements.positionalAttr.value) {
|
||||
case 'word':
|
||||
this.wordBuilder();
|
||||
break;
|
||||
case 'lemma':
|
||||
this.lemmaBuilder();
|
||||
break;
|
||||
case 'english-pos':
|
||||
this.englishPosHandler();
|
||||
break;
|
||||
case 'german-pos':
|
||||
this.germanPosHandler();
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
this.simplePosBuilder();
|
||||
break;
|
||||
case 'empty-token':
|
||||
this.emptyTokenHandler();
|
||||
break;
|
||||
default:
|
||||
this.wordBuilder();
|
||||
break;
|
||||
lemmaOrWordInputCheck() {
|
||||
let input;
|
||||
|
||||
if (document.querySelector('[data-toggle-area="word"]').classList.contains('hide') === false) {
|
||||
input = this.elements.wordInput;
|
||||
} else {
|
||||
input = this.elements.lemmaInput;
|
||||
}
|
||||
|
||||
return input;
|
||||
}
|
||||
|
||||
optionToggleHandler() {
|
||||
let input = this.lemmaOrWordInputCheck()
|
||||
|
||||
if (input.value === '') {
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
} else {
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
|
||||
}
|
||||
}
|
||||
|
||||
disableTokenSubmit() {
|
||||
this.elements.isTokenQueryInvalid = true;
|
||||
this.elements.tokenSubmitButton.classList.add('red');
|
||||
this.elements.noValueMessage.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
this.elements.tokenSubmitButton.classList.remove('red');
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
this.elements.noValueMessage.classList.add('hide');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
tokenChipFactory(prettyQueryText, tokenText) {
|
||||
@@ -43,394 +53,209 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
<i class='material-icons close'>close</i>
|
||||
</div>`;
|
||||
queryChipElement = builderElement.firstElementChild;
|
||||
queryChipElement.addEventListener('click', () => {this.deleteTokenAttr(queryChipElement);});
|
||||
this.elements.tokenQuery.appendChild(queryChipElement);
|
||||
}
|
||||
|
||||
deleteTokenAttr(attr) {
|
||||
if (this.elements.tokenQuery.childNodes.length < 2) {
|
||||
this.elements.tokenQuery.removeChild(attr);
|
||||
this.wordBuilder();
|
||||
} else {
|
||||
this.elements.tokenQuery.removeChild(attr);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
addTokenToQuery() {
|
||||
let c;
|
||||
let tokenQueryContent = ''; //for ButtonFactory(prettyQueryText)
|
||||
let tokenQueryText = ''; //for ButtonFactory(queryText)
|
||||
this.elements.cancelBool = false;
|
||||
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
|
||||
let tokenQueryContent = '';
|
||||
let tokenQueryText = '';
|
||||
this.elements.isTokenQueryInvalid = false;
|
||||
let tokenIsEmpty = false;
|
||||
|
||||
if (this.elements.ignoreCase.checked) {
|
||||
c = ' %c';
|
||||
} else {
|
||||
c = '';
|
||||
}
|
||||
|
||||
for (let element of this.elements.tokenQuery.childNodes) {
|
||||
this.elements.tokenQuery.childNodes.forEach(element => {
|
||||
tokenQueryContent += ' ' + element.firstChild.data + ' ';
|
||||
tokenQueryText += decodeURI(element.dataset.tokentext);
|
||||
if (element.innerText.indexOf('empty token') !== -1) {
|
||||
tokenIsEmpty = true;
|
||||
}
|
||||
});
|
||||
|
||||
switch (this.elements.positionalAttrSelection.value) {
|
||||
case 'word':
|
||||
if (this.elements.wordInput.value === '') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryText += `word="${this.elements.wordInput.value}"${c}`;
|
||||
this.elements.wordInput.value = '';
|
||||
}
|
||||
break;
|
||||
case 'lemma':
|
||||
if (this.elements.lemmaInput.value === '') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`;
|
||||
this.elements.lemmaInput.value = '';
|
||||
}
|
||||
break;
|
||||
case 'english-pos':
|
||||
if (this.elements.englishPos.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `pos=${this.elements.englishPosSelection.value}`;
|
||||
tokenQueryText += `pos="${this.elements.englishPosSelection.value}"`;
|
||||
this.elements.englishPosSelection.value = '';
|
||||
}
|
||||
break;
|
||||
case 'german-pos':
|
||||
if (this.elements.germanPosSelection.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `pos=${this.elements.germanPosSelection.value}`;
|
||||
tokenQueryText += `pos="${this.elements.germanPosSelection.value}"`;
|
||||
this.elements.germanPosSelection.value = '';
|
||||
}
|
||||
break;
|
||||
case 'simple-pos':
|
||||
if (this.elements.simplePosSelection.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `simple_pos=${this.elements.simplePosSelection.value}`;
|
||||
tokenQueryText += `simple_pos="${this.elements.simplePosSelection.value}"`;
|
||||
this.elements.simplePosSelection.value = '';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.elements.tokenQueryFilled === false) {
|
||||
switch (this.elements.positionalAttr.value) {
|
||||
case 'word':
|
||||
if (this.elements.wordInput.value === '') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryText += `word="${this.elements.wordInput.value}"${c}`;
|
||||
this.elements.wordInput.value = '';
|
||||
}
|
||||
break;
|
||||
case 'lemma':
|
||||
if (this.elements.lemmaInput.value === '') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`;
|
||||
this.elements.lemmaInput.value = '';
|
||||
}
|
||||
break;
|
||||
case 'english-pos':
|
||||
if (this.elements.englishPos.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `pos=${this.elements.englishPos.value}`;
|
||||
tokenQueryText += `pos="${this.elements.englishPos.value}"`;
|
||||
this.elements.englishPos.value = '';
|
||||
}
|
||||
break;
|
||||
case 'german-pos':
|
||||
if (this.elements.germanPos.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `pos=${this.elements.germanPos.value}`;
|
||||
tokenQueryText += `pos="${this.elements.germanPos.value}"`;
|
||||
this.elements.germanPos.value = '';
|
||||
}
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
if (this.elements.simplePos.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `simple_pos=${this.elements.simplePos.value}`;
|
||||
tokenQueryText += `simple_pos="${this.elements.simplePos.value}"`;
|
||||
this.elements.simplePos.value = '';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
this.wordBuilder();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// cancelBool looks in disableTokenSubmit() whether a value is passed. If the input fields/dropdowns are empty (cancelBool === true), no token is added.
|
||||
if (this.elements.cancelBool === false) {
|
||||
// isTokenQueryInvalid looks if a valid value is passed. If the input fields/dropdowns are empty (isTokenQueryInvalid === true), no token is added.
|
||||
if (this.elements.isTokenQueryInvalid === false) {
|
||||
// Square brackets are added only if it is not an empty token (where they are already present).
|
||||
if (tokenIsEmpty === false) {
|
||||
tokenQueryText = '[' + tokenQueryText + ']';
|
||||
}
|
||||
this.queryChipFactory('token', tokenQueryContent, tokenQueryText);
|
||||
this.hideEverything();
|
||||
this.elements.positionalAttrArea.classList.add('hide');
|
||||
this.elements.tokenQuery.innerHTML = '';
|
||||
}
|
||||
this.resetPositionalAttrModal();
|
||||
this.elements.positionalAttrModal.close();
|
||||
|
||||
}
|
||||
|
||||
disableTokenSubmit() {
|
||||
this.elements.cancelBool = true;
|
||||
this.elements.tokenSubmitButton.classList.add('red');
|
||||
this.elements.noValueMessage.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
this.elements.tokenSubmitButton.classList.remove('red');
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
this.elements.noValueMessage.classList.add('hide');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
inputFieldHandler() {
|
||||
let input;
|
||||
|
||||
if (this.elements.wordBuilder.classList.contains('hide') === false) {
|
||||
input = this.elements.wordInput;
|
||||
} else {
|
||||
input = this.elements.lemmaInput;
|
||||
}
|
||||
|
||||
if (input.value === '') {
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled');
|
||||
this.elements.or.classList.add('disabled');
|
||||
this.elements.and.classList.add('disabled');
|
||||
} else {
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
|
||||
this.elements.or.classList.remove('disabled');
|
||||
this.elements.and.classList.remove('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
//#endregion General functions of the Token Builder
|
||||
resetPositionalAttrModal() {
|
||||
let originalSelectionList =
|
||||
`
|
||||
<option value="word" selected>word</option>
|
||||
<option value="lemma" >lemma</option>
|
||||
<option value="english-pos">english pos</option>
|
||||
<option value="german-pos">german pos</option>
|
||||
<option value="simple-pos">simple_pos</option>
|
||||
<option value="empty-token">empty token</option>
|
||||
`;
|
||||
document.querySelector('#positional-attr-selection').innerHTML = originalSelectionList;
|
||||
this.elements.tokenQuery.innerHTML = '';
|
||||
this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
|
||||
this.toggleClass(['word'], 'hide', 'remove');
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
|
||||
//#region Dropdown Select Handler
|
||||
document.querySelector(`#positional-attr-selection option[value="word"]`).selected = true;
|
||||
|
||||
lemmaBuilder() {
|
||||
this.hideEverything();
|
||||
this.elements.lemmaInput.value = '';
|
||||
this.elements.lemmaBuilder.classList.remove('hide');
|
||||
this.elements.inputOptions.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled');
|
||||
this.elements.conditionContainer.classList.remove('hide');
|
||||
this.elements.ignoreCaseCheckbox.classList.remove('hide');
|
||||
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.add('disabled');
|
||||
this.elements.or.classList.add('disabled');
|
||||
this.elements.and.classList.add('disabled');
|
||||
let instance = M.FormSelect.getInstance(document.getElementById('positional-attr-selection'));
|
||||
instance.destroy();
|
||||
M.FormSelect.init(document.getElementById('positional-attr-selection'));
|
||||
}
|
||||
|
||||
englishPosHandler() {
|
||||
this.hideEverything();
|
||||
this.elements.englishPosBuilder.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.classList.remove('hide');
|
||||
this.elements.conditionContainer.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
|
||||
this.elements.or.classList.remove('disabled');
|
||||
this.elements.and.classList.remove('disabled');
|
||||
|
||||
// Resets materialize select dropdown
|
||||
let selectInstance = M.FormSelect.getInstance(this.elements.englishPos);
|
||||
selectInstance.input.value = 'English pos tagset';
|
||||
this.elements.englishPos.value = 'default';
|
||||
}
|
||||
|
||||
germanPosHandler() {
|
||||
this.hideEverything();
|
||||
this.elements.germanPosBuilder.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.classList.remove('hide');
|
||||
this.elements.conditionContainer.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
|
||||
this.elements.or.classList.remove('disabled');
|
||||
this.elements.and.classList.remove('disabled');
|
||||
|
||||
// Resets materialize select dropdown
|
||||
let selectInstance = M.FormSelect.getInstance(this.elements.germanPos);
|
||||
selectInstance.input.value = 'German pos tagset';
|
||||
this.elements.germanPos.value = 'default';
|
||||
}
|
||||
|
||||
simplePosBuilder() {
|
||||
this.hideEverything();
|
||||
this.elements.simplePosBuilder.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.classList.remove('hide');
|
||||
this.elements.conditionContainer.classList.remove('hide');
|
||||
this.elements.simplePos.selectedIndex = 0;
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
|
||||
this.elements.or.classList.remove('disabled');
|
||||
this.elements.and.classList.remove('disabled');
|
||||
|
||||
// Resets materialize select dropdown
|
||||
let selectInstance = M.FormSelect.getInstance(this.elements.simplePos);
|
||||
selectInstance.input.value = 'simple_pos tagset';
|
||||
this.elements.simplePos.value = 'default';
|
||||
M.FormSelect.init(
|
||||
selectInstance,
|
||||
{
|
||||
dropdownOptions: {
|
||||
direction: 'bottom',
|
||||
coverTrigger: false
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
emptyTokenHandler() {
|
||||
this.tokenChipFactory('empty token', '[]');
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.hideEverything();
|
||||
this.elements.incidenceModifiersButton.classList.remove('hide');
|
||||
this.elements.incidenceModifiersButton.firstElementChild.classList.remove('disabled');
|
||||
|
||||
}
|
||||
//#endregion Dropdown Select Handler
|
||||
|
||||
//#region Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or'
|
||||
|
||||
inputOptionHandler(elem) {
|
||||
let input;
|
||||
|
||||
if (this.elements.wordBuilder.classList.contains('hide') === false) {
|
||||
input = this.elements.wordInput;
|
||||
} else {
|
||||
input = this.elements.lemmaInput;
|
||||
}
|
||||
|
||||
if (elem === this.elements.optionGroup) {
|
||||
input.value += '(option1|option2)';
|
||||
let firstIndex = input.value.indexOf('option1');
|
||||
let lastIndex = firstIndex + 'option1'.length;
|
||||
input.focus();
|
||||
input.setSelectionRange(firstIndex, lastIndex);
|
||||
} else if (elem === this.elements.wildcardChar) {
|
||||
input.value += '.';
|
||||
}
|
||||
this.inputFieldHandler();
|
||||
}
|
||||
|
||||
nSubmitHandler() {
|
||||
let instance = M.Modal.getInstance(this.elements.exactlyN);
|
||||
instance.close();
|
||||
|
||||
switch (this.elements.positionalAttr.value) {
|
||||
case 'word':
|
||||
this.elements.wordInput.value += ' {' + this.elements.nInput.value + '}';
|
||||
actionButtonHandler(elem) {
|
||||
let input = this.lemmaOrWordInputCheck();
|
||||
switch (elem) {
|
||||
case 'option-group':
|
||||
input.value += '(option1|option2)';
|
||||
let firstIndex = input.value.indexOf('option1');
|
||||
let lastIndex = firstIndex + 'option1'.length;
|
||||
input.focus();
|
||||
input.setSelectionRange(firstIndex, lastIndex);
|
||||
break;
|
||||
case 'lemma':
|
||||
this.elements.lemmaInput.value += ' {' + this.elements.nInput.value + '}';
|
||||
case 'wildcard-char':
|
||||
input.value += '.';
|
||||
break;
|
||||
case 'english-pos':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
||||
this.tokenChipFactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
||||
this.elements.englishPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
case 'and':
|
||||
this.conditionHandler('and', " & ");
|
||||
break;
|
||||
case 'german-pos':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
||||
this.tokenChipFactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
||||
this.elements.germanPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
||||
this.tokenChipFactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
||||
this.elements.simplePosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'empty-token':
|
||||
this.tokenChipFactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
||||
case 'or':
|
||||
this.conditionHandler('or', " | ");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.optionToggleHandler();
|
||||
}
|
||||
|
||||
nmSubmitHandler() {
|
||||
let instance = M.Modal.getInstance(this.elements.betweenNM);
|
||||
instance.close();
|
||||
|
||||
switch (this.elements.positionalAttr.value) {
|
||||
case 'word':
|
||||
this.elements.wordInput.value += `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`;
|
||||
break;
|
||||
case 'lemma':
|
||||
this.elements.lemmaInput.value += `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`;
|
||||
break;
|
||||
case 'english-pos':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
||||
this.tokenChipFactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
||||
this.elements.englishPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'german-pos':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
||||
this.tokenChipFactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
||||
this.elements.germanPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
this.elements.tokenQueryFilled = true;
|
||||
this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
||||
this.tokenChipFactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
||||
this.elements.simplePosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
break;
|
||||
case 'empty-token':
|
||||
this.tokenChipFactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
incidenceModifiersHandler(elem) {
|
||||
incidenceModifierHandler(elem) {
|
||||
// For word and lemma, the incidence modifiers are inserted in the input field. For the others, one or two chips are created which contain the respective value of the token and the incidence modifier.
|
||||
if (this.elements.positionalAttr.value === 'empty-token') {
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
} else if (this.elements.positionalAttr.value === 'english-pos') {
|
||||
this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.englishPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
this.elements.tokenQueryFilled = true;
|
||||
} else if (this.elements.positionalAttr.value === 'german-pos') {
|
||||
this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.germanPosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
this.elements.tokenQueryFilled = true;
|
||||
} else if (this.elements.positionalAttr.value === 'simple-pos-button') {
|
||||
this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.simplePosBuilder.classList.add('hide');
|
||||
this.elements.incidenceModifiersButton.classList.add('hide');
|
||||
this.elements.tokenQueryFilled = true;
|
||||
} else {
|
||||
let input;
|
||||
|
||||
if (this.elements.wordBuilder.classList.contains('hide') === false) {
|
||||
input = this.elements.wordInput;
|
||||
} else {
|
||||
input = this.elements.lemmaInput;
|
||||
}
|
||||
input.value += elem.dataset.token;
|
||||
switch (this.elements.positionalAttrSelection.value) {
|
||||
case 'empty-token':
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
break;
|
||||
case 'english-pos':
|
||||
this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.tokenQueryFilled = true;
|
||||
break;
|
||||
case 'german-pos':
|
||||
this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.tokenQueryFilled = true;
|
||||
break;
|
||||
case 'simple-pos':
|
||||
this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.tokenQueryFilled = true;
|
||||
break;
|
||||
default:
|
||||
let input = this.lemmaOrWordInputCheck();
|
||||
input.value += elem.dataset.token;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
orHandler() {
|
||||
this.conditionHandler('or', ' | ');
|
||||
}
|
||||
nmSubmitHandler(modalId) {
|
||||
let modal = document.querySelector(`#${modalId}`);
|
||||
let input_n = modal.querySelector('.n-m-input[data-value-type="n"]').value;
|
||||
let input_m = modalId === 'between-nm-modal' ? ',' + modal.querySelector('.n-m-input[data-value-type="m"]').value : '';
|
||||
let input = `${input_n}${input_m}`;
|
||||
|
||||
andHandler() {
|
||||
this.conditionHandler('and', ' & ');
|
||||
let instance = M.Modal.getInstance(modal);
|
||||
instance.close();
|
||||
|
||||
switch (this.elements.positionalAttrSelection.value) {
|
||||
case 'word':
|
||||
this.elements.wordInput.value += '{' + input + '}';
|
||||
break;
|
||||
case 'lemma':
|
||||
this.elements.lemmaInput.value += '{' + input + '}';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
conditionHandler(conditionText, conditionQueryContent) {
|
||||
this.hideEverything();
|
||||
let tokenQueryContent;
|
||||
let tokenQueryText;
|
||||
let c;
|
||||
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
|
||||
let selectionDefault = "word";
|
||||
let optionDeleteList = [];
|
||||
|
||||
if (this.elements.ignoreCase.checked) {
|
||||
c = ' %c';
|
||||
} else {
|
||||
c = '';
|
||||
}
|
||||
|
||||
switch (this.elements.positionalAttr.value) {
|
||||
switch (this.elements.positionalAttrSelection.value) {
|
||||
case 'word':
|
||||
tokenQueryContent = `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryText = `word="${this.elements.wordInput.value}"${c}`;
|
||||
this.elements.wordInput.value = '';
|
||||
if (conditionText === 'and') {
|
||||
selectionDefault = "english-pos";
|
||||
optionDeleteList = ['word', 'lemma', 'empty-token'];
|
||||
}
|
||||
break;
|
||||
case 'lemma':
|
||||
tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryText = `lemma="${this.elements.lemmaInput.value}"${c}`;
|
||||
this.elements.lemmaInput.value = '';
|
||||
if (conditionText === 'and') {
|
||||
selectionDefault = "english-pos";
|
||||
optionDeleteList = ['word', 'lemma', 'empty-token'];
|
||||
}
|
||||
break;
|
||||
case 'english-pos':
|
||||
tokenQueryContent = `pos=${this.elements.englishPos.value}`;
|
||||
@@ -442,20 +267,34 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
tokenQueryText = `pos="${this.elements.germanPos.value}"`;
|
||||
this.elements.germanPos.value = '';
|
||||
break;
|
||||
case 'simple-pos-button':
|
||||
case 'simple-pos':
|
||||
tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`;
|
||||
tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`;
|
||||
this.elements.simplePos.value = '';
|
||||
break;
|
||||
default:
|
||||
this.wordBuilder();
|
||||
break;
|
||||
}
|
||||
|
||||
this.tokenChipFactory(tokenQueryContent, tokenQueryText);
|
||||
this.tokenChipFactory(conditionText, conditionQueryContent);
|
||||
this.wordBuilder();
|
||||
this.setTokenSelection(selectionDefault, optionDeleteList);
|
||||
}
|
||||
|
||||
setTokenSelection(selection, optionDeleteList) {
|
||||
optionDeleteList.forEach(option => {
|
||||
document.querySelector(`#positional-attr-selection option[value=${option}]`).remove();
|
||||
});
|
||||
|
||||
document.querySelector(`#positional-attr-selection option[value=${selection}]`).selected = true;
|
||||
|
||||
let instance = M.FormSelect.getInstance(document.getElementById('positional-attr-selection'));
|
||||
instance.destroy();
|
||||
M.FormSelect.init(document.getElementById('positional-attr-selection'));
|
||||
|
||||
this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
|
||||
this.toggleClass([selection], 'hide', 'remove');
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
}
|
||||
|
||||
//#endregion Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user