sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-14 16:55:42 +00:00
Code Issues Projects Releases Wiki Activity

Bug Fixes

Browse Source
This commit is contained in:
Inga Kirschnick 2023-11-28 12:39:54 +01:00
parent 9be5ce6014
commit 0927edcceb
2 changed files with 49 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/static/js/corpus-analysis/query-builder/query-builder.js
View File

@ -7,13 +7,21 @@ nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
this.addEventListenersToNAndMInputSubmit(); this.addEventListenersToNAndMInputSubmit();
this.elements.deleteQueryButton.addEventListener('click', () => {this.resetQueryInputField()}); this.elements.deleteQueryButton.addEventListener('click', () => {this.resetQueryInputField()});
this.expertModeQueryBuilderSwitchHandler(); this.expertModeQueryBuilderSwitchHandler();
this.extensions = { this.extensions = {
structuralAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions(this), structuralAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions(this),
tokenAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions(this), tokenAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions(this),
}; };
this.dropdown = M.Dropdown.init(
document.querySelector('.dropdown-trigger[data-toggle-area="token-incidence-modifiers"]'),
{
onCloseStart: () => {
this.unselectChipElement(this.elements.queryInputField.querySelector('.chip.teal'));
}
}
)
} }
addEventListenersToQueryElementTarget() { addEventListenersToQueryElementTarget() {
@ -108,7 +116,7 @@ nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
prettyQueryText = nopaque.Utils.escape(prettyQueryText); prettyQueryText = nopaque.Utils.escape(prettyQueryText);
let queryChipElement = nopaque.Utils.HTMLToElement( let queryChipElement = nopaque.Utils.HTMLToElement(
` `
<span class="chip query-component" data-type="${dataType}" data-query="${queryText}" draggable="true" data-closing-tag="${isClosingTag}"> <span class="chip query-component" data-type="${dataType}" data-query="${queryText}" draggable="true"">
${prettyQueryText}${isEditable ? '<i class="material-icons chip-action-button" data-chip-action="edit" style="padding-left:5px; font-size:18px; cursor:pointer;">edit</i>': ''} ${prettyQueryText}${isEditable ? '<i class="material-icons chip-action-button" data-chip-action="edit" style="padding-left:5px; font-size:18px; cursor:pointer;">edit</i>': ''}
${isClosingTag ? '' : '<i class="material-icons close chip-action-button" data-chip-action="delete">close</i>'} ${isClosingTag ? '' : '<i class="material-icons close chip-action-button" data-chip-action="delete">close</i>'}
</span> </span>
@ -152,8 +160,6 @@ nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
this.deleteChipElement(queryChipElement); this.deleteChipElement(queryChipElement);
} else if (event.target.dataset.chipAction === 'edit') { } else if (event.target.dataset.chipAction === 'edit') {
this.editChipElement(queryChipElement); this.editChipElement(queryChipElement);
} else if (event.target.dataset.chipAction === 'lock') {
this.lockClosingChipElement(queryChipElement);
} }
}); });
}); });
@ -292,24 +298,36 @@ nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
} }
selectChipElement(attr) { selectChipElement(attr) {
document.querySelectorAll('.chip.teal').forEach(element => { if (attr.classList.contains('teal')) {
if (element !== attr) { return;
element.classList.remove('teal', 'lighten-2'); }
this.toggleClass(['token-incidence-modifiers'], 'disabled', 'add');
}
});
this.toggleClass(['token-incidence-modifiers'], 'disabled', 'toggle'); this.toggleClass(['token-incidence-modifiers'], 'disabled', 'toggle');
attr.classList.toggle('teal'); attr.classList.toggle('teal');
attr.classList.toggle('lighten-5'); attr.classList.toggle('lighten-5');
M.Dropdown.getInstance(document.querySelector('.dropdown-trigger[data-toggle-area="token-incidence-modifiers"]')).open();
} }
tokenIncidenceModifierHandler(incidenceModifier, incidenceModifierPretty) { unselectChipElement(attr) {
let nModalInstance = M.Modal.getInstance(document.querySelector('#corpus-analysis-concordance-exactly-n-token-modal'));
let nmModalInstance = M.Modal.getInstance(document.querySelector('#corpus-analysis-concordance-between-nm-token-modal'));
if (nModalInstance.isOpen || nmModalInstance.isOpen) {
return;
}
attr.classList.remove('teal', 'lighten-5');
this.toggleClass(['token-incidence-modifiers'], 'disabled', 'add');
}
tokenIncidenceModifierHandler(incidenceModifier, incidenceModifierPretty, nOrNM = false) {
// Adds a token incidence modifier to the query input field. // Adds a token incidence modifier to the query input field.
let selectedChip = this.elements.queryInputField.querySelector('.chip.teal'); let selectedChip = this.elements.queryInputField.querySelector('.chip.teal');
let selectedChipIndex = Array.from(this.elements.queryChipElements).indexOf(selectedChip); let selectedChipIndex = Array.from(this.elements.queryChipElements).indexOf(selectedChip);
if (nOrNM) {
this.unselectChipElement(selectedChip);
}
this.submitQueryChipElement('token-incidence-modifier', incidenceModifierPretty, incidenceModifier, selectedChipIndex); this.submitQueryChipElement('token-incidence-modifier', incidenceModifierPretty, incidenceModifier, selectedChipIndex);
this.selectChipElement(selectedChip);
} }
tokenNMSubmitHandler(modalId) { tokenNMSubmitHandler(modalId) {
@ -327,7 +345,7 @@ nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
let instance = M.Modal.getInstance(modal); let instance = M.Modal.getInstance(modal);
instance.close(); instance.close();
this.tokenIncidenceModifierHandler(input, pretty_input); this.tokenIncidenceModifierHandler(input, pretty_input, true);
} }
expertModeQueryBuilderSwitchHandler() { expertModeQueryBuilderSwitchHandler() {
@ -368,15 +386,13 @@ nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
this.resetQueryInputField(); this.resetQueryInputField();
let expertModeInputFieldValue = document.querySelector('#corpus-analysis-concordance-form-query').value; let expertModeInputFieldValue = document.querySelector('#corpus-analysis-concordance-form-query').value;
let chipElements = this.parseTextToChip(expertModeInputFieldValue); let chipElements = this.parseTextToChip(expertModeInputFieldValue);
let closingTagElements = ['end-sentence', 'end-entity'];
let editableElements = ['start-entity', 'token']; let editableElements = ['start-entity', 'token'];
for (let chipElement of chipElements) { for (let chipElement of chipElements) {
let isClosingTag = closingTagElements.includes(chipElement['type']);
let isEditable = editableElements.includes(chipElement['type']); let isEditable = editableElements.includes(chipElement['type']);
if (chipElement['query'] === '[]'){ if (chipElement['query'] === '[]'){
isEditable = false; isEditable = false;
} }
this.submitQueryChipElement(chipElement['type'], chipElement['pretty'], chipElement['query'], null, isClosingTag, isEditable); this.submitQueryChipElement(chipElement['type'], chipElement['pretty'], chipElement['query'], null, false, isEditable);
} }
} }

24
app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js
View File

@ -52,14 +52,14 @@ nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions = class Tok
let input = this.tokenInputCheck(this.elements.tokenBuilderContent); let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
switch (elem) { switch (elem) {
case 'option-group': case 'option-group':
input.value += '(option1|option2)'; this.cursorPositionInputfieldHandler(input, '(option1|option2)');
let firstIndex = input.value.indexOf('option1'); let firstIndex = input.value.indexOf('option1');
let lastIndex = firstIndex + 'option1'.length; let lastIndex = firstIndex + 'option1'.length;
input.focus();
input.setSelectionRange(firstIndex, lastIndex); input.setSelectionRange(firstIndex, lastIndex);
break; break;
case 'wildcard-char': case 'wildcard-char':
input.value += '.'; this.cursorPositionInputfieldHandler(input, '.');
input.focus();
break; break;
case 'and': case 'and':
this.conditionHandler('and'); this.conditionHandler('and');
@ -73,9 +73,19 @@ nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions = class Tok
this.optionToggleHandler(); this.optionToggleHandler();
} }
cursorPositionInputfieldHandler(input, addedInput) {
let cursorPosition = input.selectionStart;
let textBeforeCursor = input.value.substring(0, cursorPosition);
let textAfterCursor = input.value.substring(cursorPosition);
let newInputValue = textBeforeCursor + addedInput + textAfterCursor;
input.value = newInputValue;
let newCursorPosition = cursorPosition + addedInput.length;
input.setSelectionRange(newCursorPosition, newCursorPosition);
}
characterIncidenceModifierHandler(elem) { characterIncidenceModifierHandler(elem) {
let input = this.tokenInputCheck(this.elements.tokenBuilderContent); let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
input.value += elem.dataset.token; this.cursorPositionInputfieldHandler(input, elem.dataset.token);
} }
characterNMSubmitHandler(modalId) { characterNMSubmitHandler(modalId) {
@ -83,12 +93,12 @@ nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions = class Tok
let input_n = modal.querySelector('.n-m-input[data-value-type="n"]').value; let input_n = modal.querySelector('.n-m-input[data-value-type="n"]').value;
let input_m = modal.querySelector('.n-m-input[data-value-type="m"]') || undefined; let input_m = modal.querySelector('.n-m-input[data-value-type="m"]') || undefined;
input_m = input_m !== undefined ? ',' + input_m.value : ''; input_m = input_m !== undefined ? ',' + input_m.value : '';
let input = `${input_n}${input_m}`; let addedInput = `${input_n}${input_m}`;
let instance = M.Modal.getInstance(modal); let instance = M.Modal.getInstance(modal);
instance.close(); instance.close();
let tokenInput = this.tokenInputCheck(this.elements.tokenBuilderContent); let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
tokenInput.value += '{' + input + '}'; this.cursorPositionInputfieldHandler(input, `{${addedInput}}`);
} }
conditionHandler(conditionText) { conditionHandler(conditionText) {