mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-15 18:40:40 +00:00
Update Positional Attribute Modal Query Builder
This commit is contained in:
Inga Kirschnick
@ -75,16 +75,20 @@
|
||||
color: black;
|
||||
}
|
||||
|
||||
#corpus-analysis-concordance-incidence-modifiers-button a{
|
||||
background-color: #2FBBAB;
|
||||
[data-toggle-area="input-field-options"] a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#corpus-analysis-concordance-ignore-case-checkbox {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#corpus-analysis-concordance-incidence-modifiers-dropdown a{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#corpus-analysis-concordance-ignore-case-checkbox {
|
||||
margin-left: 5px;
|
||||
[data-target="corpus-analysis-concordance-incidence-modifiers-dropdown"] {
|
||||
background-color: #2FBBAB;
|
||||
}
|
||||
|
||||
#corpus-analysis-concordance-or, #corpus-analysis-concordance-and {
|
||||
|
||||
@ -93,7 +93,6 @@ class CorpusAnalysisApp {
|
||||
actionElement.disabled = true;
|
||||
break;
|
||||
case 'SELECT':
|
||||
console.log(actionElement);
|
||||
actionElement.parentNode.querySelector('input.select-dropdown').disabled = true;
|
||||
break;
|
||||
default:
|
||||
|
||||
@ -78,10 +78,7 @@ class CorpusAnalysisConcordance {
|
||||
});
|
||||
this.elements.userInterfaceForm.addEventListener('change', (event) => {
|
||||
if (event.target === this.elements.userInterfaceForm['context']) {
|
||||
console.log(this.settings.context);
|
||||
console.log(parseInt(this.elements.userInterfaceForm['context'].value));
|
||||
this.settings.context = parseInt(this.elements.userInterfaceForm['context'].value);
|
||||
console.log(this.settings.context);
|
||||
this.submitForm();
|
||||
}
|
||||
if (event.target === this.elements.userInterfaceForm['per-page']) {
|
||||
|
||||
@ -4,32 +4,42 @@ class ConcordanceQueryBuilder {
|
||||
|
||||
this.elements = new ElementReferencesQueryBuilder();
|
||||
this.generalFunctions = new GeneralFunctionsQueryBuilder(this.elements);
|
||||
this.tokenAttributeBuilder = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements);
|
||||
this.structuralAttributeBuilder = new StructuralAttributeBuilderFunctionsQueryBuilder(this.elements);
|
||||
this.tokenAttributeBuilderFunctions = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements);
|
||||
this.structuralAttributeBuilderFunctions = 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);
|
||||
this.structuralAttributeBuilderFunctions.actionButtonInStrucAttrModalHandler(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');
|
||||
if (event.target.value !== 'empty-token') {
|
||||
this.generalFunctions.toggleClass([event.target.value], 'hide', 'remove');
|
||||
this.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
this.tokenAttributeBuilderFunctions.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
|
||||
}
|
||||
if (event.target.value === 'word' || event.target.value === 'lemma') {
|
||||
this.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove');
|
||||
} else if (event.target.value === 'empty-token'){
|
||||
this.tokenAttributeBuilderFunctions.addTokenToQuery();
|
||||
} else {
|
||||
this.generalFunctions.toggleClass(['input-field-options'], 'hide', '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);});
|
||||
button.addEventListener('click', () => {this.tokenAttributeBuilderFunctions.actionButtonInOptionSectionHandler(button.dataset.optionsAction);});
|
||||
});
|
||||
document.querySelectorAll('.incidence-modifier-selection[data-incidence-modifier]').forEach(button => {
|
||||
button.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifierHandler(button);});
|
||||
button.addEventListener('click', () => {this.tokenAttributeBuilderFunctions.incidenceModifierHandler(button);});
|
||||
});
|
||||
document.querySelectorAll('.n-m-submit-button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
this.tokenAttributeBuilder.nmSubmitHandler(button.dataset.modalId);
|
||||
this.tokenAttributeBuilderFunctions.nmSubmitHandler(button.dataset.modalId);
|
||||
});
|
||||
});
|
||||
|
||||
@ -46,7 +56,7 @@ class ConcordanceQueryBuilder {
|
||||
document.querySelector('#corpus-analysis-concordance-positional-attr-modal'),
|
||||
{
|
||||
onOpenStart: () => {
|
||||
this.tokenAttributeBuilder.optionToggleHandler();
|
||||
this.tokenAttributeBuilderFunctions.optionToggleHandler();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -22,76 +22,60 @@ class GeneralFunctionsQueryBuilder {
|
||||
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.queryInputField.querySelectorAll('.query-component');
|
||||
|
||||
// Adds a target chip in front of all draggable childnodes
|
||||
setTimeout(() => {
|
||||
let targetChipElement = Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
|
||||
for (let element of queryChips) {
|
||||
if (element === queryChipElement.nextSibling) {continue;}
|
||||
let targetChipClone = targetChipElement.cloneNode(true);
|
||||
if (element === queryChipElement) {
|
||||
// If the dragged element is not at the very end, a target chip is also inserted at the end
|
||||
if (queryChips[queryChips.length - 1] !== element) {
|
||||
queryChips[queryChips.length - 1].insertAdjacentElement('afterend', targetChipClone);
|
||||
}
|
||||
} else {
|
||||
element.insertAdjacentElement('beforebegin', targetChipClone);
|
||||
}
|
||||
targetChipClone.addEventListener('dragover', (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
targetChipClone.addEventListener('dragenter', (event) => {
|
||||
event.preventDefault();
|
||||
event.target.style.borderStyle = 'solid dotted';
|
||||
});
|
||||
targetChipClone.addEventListener('dragleave', (event) => {
|
||||
event.preventDefault();
|
||||
event.target.style.borderStyle = 'hidden';
|
||||
});
|
||||
targetChipClone.addEventListener('drop', (event) => {
|
||||
let dropzone = event.target;
|
||||
dropzone.parentElement.replaceChild(queryChipElement, dropzone);
|
||||
this.queryPreviewBuilder();
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
|
||||
queryChipElement.addEventListener('dragend', (event) => {
|
||||
let targets = document.querySelectorAll('.drop-target');
|
||||
for (let target of targets) {
|
||||
target.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Ensures that metadata is always at the end of the query:
|
||||
// const lastChild = this.elements.queryInputFieldInstance.lastChild;
|
||||
// const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation';
|
||||
// console.log(isLastChildTextAnnotation);
|
||||
// console.log(lastChild);
|
||||
|
||||
// if (!isLastChildTextAnnotation) {
|
||||
// this.elements.queryInputFieldInstance.appendChild(queryChipElement);
|
||||
// } else {
|
||||
// this.elements.queryInputFieldInstance.insertBefore(queryChipElement, lastChild);
|
||||
// }
|
||||
queryChipElement.addEventListener('click', () => this.deleteAttr(queryChipElement));
|
||||
queryChipElement.addEventListener('dragstart', this.handleDragStart.bind(this, queryChipElement));
|
||||
queryChipElement.addEventListener('dragend', this.handleDragEnd);
|
||||
|
||||
this.queryPreviewBuilder();
|
||||
}
|
||||
|
||||
// Shows a hint about possible functions for editing the query at the first added element in the query
|
||||
// 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.');
|
||||
// }
|
||||
handleDragStart(queryChipElement, event) {
|
||||
let queryChips = this.elements.queryInputField.querySelectorAll('.query-component');
|
||||
setTimeout(() => {
|
||||
let targetChipElement = Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
|
||||
for (let element of queryChips) {
|
||||
if (element === queryChipElement.nextSibling) {continue;}
|
||||
let targetChipClone = targetChipElement.cloneNode(true);
|
||||
if (element === queryChipElement && queryChips[queryChips.length - 1] !== element) {
|
||||
queryChips[queryChips.length - 1].insertAdjacentElement('afterend', targetChipClone);
|
||||
} else {
|
||||
element.insertAdjacentElement('beforebegin', targetChipClone);
|
||||
}
|
||||
this.addDragDropListeners(targetChipClone, queryChipElement);
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
handleDragEnd(event) {
|
||||
document.querySelectorAll('.drop-target').forEach(target => target.remove());
|
||||
}
|
||||
|
||||
addDragDropListeners(targetChipClone, queryChipElement) {
|
||||
targetChipClone.addEventListener('dragover', (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
targetChipClone.addEventListener('dragenter', (event) => {
|
||||
event.preventDefault();
|
||||
event.target.style.borderStyle = 'solid dotted';
|
||||
});
|
||||
targetChipClone.addEventListener('dragleave', (event) => {
|
||||
event.preventDefault();
|
||||
event.target.style.borderStyle = 'hidden';
|
||||
});
|
||||
targetChipClone.addEventListener('drop', (event) => {
|
||||
let dropzone = event.target;
|
||||
dropzone.parentElement.replaceChild(queryChipElement, dropzone);
|
||||
this.elements.queryInputFieldInstance.$chips = Array.from(this.elements.queryInputField.querySelectorAll('.chip'));
|
||||
this.queryPreviewBuilder();
|
||||
});
|
||||
}
|
||||
|
||||
queryPreviewBuilder() {
|
||||
let queryPreview = document.querySelector('#corpus-analysis-concordance-query-preview');
|
||||
let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips));
|
||||
queryChipElements.pop();
|
||||
if (!isNaN(queryChipElements[queryChipElements.length - 1])) {
|
||||
queryChipElements.pop();
|
||||
}
|
||||
this.elements.queryInputFieldContent = [];
|
||||
queryChipElements.forEach(element => {
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQu
|
||||
this.elements = elements;
|
||||
}
|
||||
|
||||
actionButtonHandler(action) {
|
||||
actionButtonInStrucAttrModalHandler(action) {
|
||||
switch (action) {
|
||||
case 'sentence':
|
||||
break;
|
||||
|
||||
@ -6,24 +6,34 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
|
||||
this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();});
|
||||
this.elements.lemmaInput.addEventListener('input', () => {this.optionToggleHandler();});
|
||||
this.elements.englishPosSelection.addEventListener('change', () => {this.optionToggleHandler();});
|
||||
this.elements.germanPosSelection.addEventListener('change', () => {this.optionToggleHandler();});
|
||||
this.elements.simplePosSelection.addEventListener('change', () => {this.optionToggleHandler();});
|
||||
}
|
||||
|
||||
lemmaOrWordInputCheck() {
|
||||
tokenInputCheck() {
|
||||
let input;
|
||||
|
||||
if (document.querySelector('[data-toggle-area="word"]').classList.contains('hide') === false) {
|
||||
if (!document.querySelector('[data-toggle-area="word"]').classList.contains('hide')) {
|
||||
input = this.elements.wordInput;
|
||||
} else {
|
||||
} else if (!document.querySelector('[data-toggle-area="lemma"]').classList.contains('hide')){
|
||||
input = this.elements.lemmaInput;
|
||||
} else if (!document.querySelector('[data-toggle-area="english-pos"]').classList.contains('hide')){
|
||||
input = this.elements.englishPosSelection;
|
||||
} else if (!document.querySelector('[data-toggle-area="german-pos"]').classList.contains('hide')){
|
||||
input = this.elements.germanPosSelection;
|
||||
} else if (!document.querySelector('[data-toggle-area="simple-pos"]').classList.contains('hide')){
|
||||
input = this.elements.simplePosSelection;
|
||||
}
|
||||
|
||||
return input;
|
||||
}
|
||||
|
||||
optionToggleHandler() {
|
||||
let input = this.lemmaOrWordInputCheck()
|
||||
let input;
|
||||
input = this.tokenInputCheck();
|
||||
|
||||
if (input.value === '') {
|
||||
if (input.value === '' || input.value === 'default') {
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
} else {
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
|
||||
@ -58,17 +68,13 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
|
||||
addTokenToQuery() {
|
||||
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
|
||||
let tokenQueryContent = '';
|
||||
let tokenQueryText = '';
|
||||
let tokenQueryPrettyText = '';
|
||||
let tokenQueryCQLText = '';
|
||||
this.elements.isTokenQueryInvalid = false;
|
||||
let tokenIsEmpty = false;
|
||||
|
||||
this.elements.tokenQuery.childNodes.forEach(element => {
|
||||
tokenQueryContent += ' ' + element.firstChild.data + ' ';
|
||||
tokenQueryText += decodeURI(element.dataset.tokentext);
|
||||
if (element.innerText.indexOf('empty token') !== -1) {
|
||||
tokenIsEmpty = true;
|
||||
}
|
||||
tokenQueryPrettyText += ' ' + element.firstChild.data + ' ';
|
||||
tokenQueryCQLText += decodeURI(element.dataset.tokentext);
|
||||
});
|
||||
|
||||
switch (this.elements.positionalAttrSelection.value) {
|
||||
@ -76,8 +82,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
if (this.elements.wordInput.value === '') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryText += `word="${this.elements.wordInput.value}"${c}`;
|
||||
tokenQueryPrettyText += `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryCQLText += `word="${this.elements.wordInput.value}"${c}`;
|
||||
this.elements.wordInput.value = '';
|
||||
}
|
||||
break;
|
||||
@ -85,17 +91,17 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
if (this.elements.lemmaInput.value === '') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`;
|
||||
tokenQueryPrettyText += `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryCQLText += `lemma="${this.elements.lemmaInput.value}"${c}`;
|
||||
this.elements.lemmaInput.value = '';
|
||||
}
|
||||
break;
|
||||
case 'english-pos':
|
||||
if (this.elements.englishPos.value === 'default') {
|
||||
if (this.elements.englishPosSelection.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `pos=${this.elements.englishPosSelection.value}`;
|
||||
tokenQueryText += `pos="${this.elements.englishPosSelection.value}"`;
|
||||
tokenQueryPrettyText += `pos=${this.elements.englishPosSelection.value}`;
|
||||
tokenQueryCQLText += `pos="${this.elements.englishPosSelection.value}"`;
|
||||
this.elements.englishPosSelection.value = '';
|
||||
}
|
||||
break;
|
||||
@ -103,8 +109,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
if (this.elements.germanPosSelection.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `pos=${this.elements.germanPosSelection.value}`;
|
||||
tokenQueryText += `pos="${this.elements.germanPosSelection.value}"`;
|
||||
tokenQueryPrettyText += `pos=${this.elements.germanPosSelection.value}`;
|
||||
tokenQueryCQLText += `pos="${this.elements.germanPosSelection.value}"`;
|
||||
this.elements.germanPosSelection.value = '';
|
||||
}
|
||||
break;
|
||||
@ -112,53 +118,28 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
if (this.elements.simplePosSelection.value === 'default') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryContent += `simple_pos=${this.elements.simplePosSelection.value}`;
|
||||
tokenQueryText += `simple_pos="${this.elements.simplePosSelection.value}"`;
|
||||
tokenQueryPrettyText += `simple_pos=${this.elements.simplePosSelection.value}`;
|
||||
tokenQueryCQLText += `simple_pos="${this.elements.simplePosSelection.value}"`;
|
||||
this.elements.simplePosSelection.value = '';
|
||||
}
|
||||
break;
|
||||
case 'empty-token':
|
||||
tokenQueryPrettyText += 'empty token';
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
// 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);
|
||||
tokenQueryCQLText = '[' + tokenQueryCQLText + ']';
|
||||
this.queryChipFactory('token', tokenQueryPrettyText, tokenQueryCQLText);
|
||||
this.resetPositionalAttrModal();
|
||||
this.elements.positionalAttrModal.close();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
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('#corpus-analysis-concordance-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');
|
||||
|
||||
document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value="word"]`).selected = true;
|
||||
|
||||
let instance = M.FormSelect.getInstance(document.getElementById('positional-attr-selection'));
|
||||
instance.destroy();
|
||||
M.FormSelect.init(document.getElementById('positional-attr-selection'));
|
||||
}
|
||||
|
||||
actionButtonHandler(elem) {
|
||||
let input = this.lemmaOrWordInputCheck();
|
||||
actionButtonInOptionSectionHandler(elem) {
|
||||
let input = this.tokenInputCheck();
|
||||
switch (elem) {
|
||||
case 'option-group':
|
||||
input.value += '(option1|option2)';
|
||||
@ -189,31 +170,32 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
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(`pos=${this.elements.englishPosSelection.value}`, `pos="${this.elements.englishPosSelection.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(`pos=${this.elements.germanPosSelection.value}`, `pos="${this.elements.germanPosSelection.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(`simple_pos=${this.elements.simplePosSelection.value}`, `simple_pos="${this.elements.simplePosSelection.value}"`);
|
||||
this.tokenChipFactory(elem.innerText, elem.dataset.token);
|
||||
this.elements.tokenQueryFilled = true;
|
||||
break;
|
||||
default:
|
||||
let input = this.lemmaOrWordInputCheck();
|
||||
let input = this.tokenInputCheck();
|
||||
input.value += elem.dataset.token;
|
||||
break;
|
||||
}
|
||||
|
||||
if (this.elements.positionalAttrSelection.value !== "word" && this.elements.positionalAttrSelection.value !== "lemma") {
|
||||
this.toggleClass([this.elements.positionalAttrSelection.value], "hide", "add");
|
||||
}
|
||||
}
|
||||
|
||||
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_m = modalId === 'corpus-analysis-concordance-between-nm-modal' ? ',' + modal.querySelector('.n-m-input[data-value-type="m"]').value : '';
|
||||
let input = `${input_n}${input_m}`;
|
||||
|
||||
let instance = M.Modal.getInstance(modal);
|
||||
@ -232,69 +214,107 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
|
||||
}
|
||||
|
||||
conditionHandler(conditionText, conditionQueryContent) {
|
||||
let tokenQueryContent;
|
||||
let tokenQueryText;
|
||||
let tokenQueryPrettyText;
|
||||
let tokenQueryCQLText;
|
||||
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
|
||||
let selectionDefault = "word";
|
||||
let optionDeleteList = [];
|
||||
|
||||
switch (this.elements.positionalAttrSelection.value) {
|
||||
case 'word':
|
||||
tokenQueryContent = `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryText = `word="${this.elements.wordInput.value}"${c}`;
|
||||
tokenQueryPrettyText = `word=${this.elements.wordInput.value}${c}`;
|
||||
tokenQueryCQLText = `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}`;
|
||||
tokenQueryPrettyText = `lemma=${this.elements.lemmaInput.value}${c}`;
|
||||
tokenQueryCQLText = `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}`;
|
||||
tokenQueryText = `pos="${this.elements.englishPos.value}"`;
|
||||
this.elements.englishPos.value = '';
|
||||
tokenQueryPrettyText = `pos=${this.elements.englishPosSelection.value}`;
|
||||
tokenQueryCQLText = `pos="${this.elements.englishPosSelection.value}"`;
|
||||
this.elements.englishPosSelection.value = '';
|
||||
break;
|
||||
case 'german-pos':
|
||||
tokenQueryContent = `pos=${this.elements.germanPos.value}`;
|
||||
tokenQueryText = `pos="${this.elements.germanPos.value}"`;
|
||||
this.elements.germanPos.value = '';
|
||||
tokenQueryPrettyText = `pos=${this.elements.germanPosSelection.value}`;
|
||||
tokenQueryCQLText = `pos="${this.elements.germanPosSelection.value}"`;
|
||||
this.elements.germanPosSelection.value = '';
|
||||
break;
|
||||
case 'simple-pos':
|
||||
tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`;
|
||||
tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`;
|
||||
this.elements.simplePos.value = '';
|
||||
tokenQueryPrettyText = `simple_pos=${this.elements.simplePosSelection.value}`;
|
||||
tokenQueryCQLText = `simple_pos="${this.elements.simplePosSelection.value}"`;
|
||||
this.elements.simplePosSelection.value = '';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.tokenChipFactory(tokenQueryContent, tokenQueryText);
|
||||
// Deleting the options which do not make sense in the context of the condition like "word" AND "word". Also sets selection default.
|
||||
let selectionDefault = "word";
|
||||
let optionDeleteList = ['empty-token'];
|
||||
if (conditionText === 'and') {
|
||||
if (this.elements.positionalAttrSelection.value === 'word' || this.elements.positionalAttrSelection.value === 'lemma') {
|
||||
selectionDefault = "english-pos";
|
||||
optionDeleteList.push('word', 'lemma');
|
||||
} else if (this.elements.positionalAttrSelection.value === 'english-pos' || this.elements.positionalAttrSelection.value === 'german-pos') {
|
||||
optionDeleteList.push('english-pos', 'german-pos');
|
||||
} else {
|
||||
optionDeleteList.push('simple-pos');
|
||||
}
|
||||
}
|
||||
|
||||
this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
|
||||
|
||||
this.tokenChipFactory(tokenQueryPrettyText, tokenQueryCQLText);
|
||||
this.tokenChipFactory(conditionText, conditionQueryContent);
|
||||
this.setTokenSelection(selectionDefault, optionDeleteList);
|
||||
}
|
||||
|
||||
setTokenSelection(selection, optionDeleteList) {
|
||||
optionDeleteList.forEach(option => {
|
||||
document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value=${option}]`).remove();
|
||||
this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
|
||||
});
|
||||
|
||||
document.querySelector(`#corpus-analysis-concordance-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.resetMaterializeSelection([this.elements.positionalAttrSelection], 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');
|
||||
if (selection === "word" || selection === "lemma") {
|
||||
this.toggleClass(['input-field-options'], 'hide', 'remove');
|
||||
} else {
|
||||
this.toggleClass(['input-field-options'], 'hide', 'add');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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>
|
||||
`;
|
||||
this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
|
||||
this.elements.tokenQuery.innerHTML = '';
|
||||
this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
|
||||
this.toggleClass(['word', 'input-field-options'], 'hide', 'remove');
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
|
||||
document.querySelector('#corpus-analysis-concordance-positional-attr-selection option[value="word"]').selected = true;
|
||||
|
||||
this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
|
||||
this.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
|
||||
}
|
||||
|
||||
resetMaterializeSelection(selectionElements, value = "default") {
|
||||
selectionElements.forEach(selectionElement => {
|
||||
selectionElement.querySelector(`option[value=${value}]`).selected = true;
|
||||
let instance = M.FormSelect.getInstance(selectionElement);
|
||||
instance.destroy();
|
||||
M.FormSelect.init(selectionElement);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user