mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-14 16:55:42 +00:00
Update Positional Attribute Modal Query Builder
This commit is contained in:
Inga Kirschnick
parent
1387d80a26
commit
3d38e550a0
@ -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');
|
||||
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,25 +22,35 @@ 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');
|
||||
queryChipElement.addEventListener('click', () => this.deleteAttr(queryChipElement));
|
||||
queryChipElement.addEventListener('dragstart', this.handleDragStart.bind(this, queryChipElement));
|
||||
queryChipElement.addEventListener('dragend', this.handleDragEnd);
|
||||
|
||||
// Adds a target chip in front of all draggable childnodes
|
||||
this.queryPreviewBuilder();
|
||||
}
|
||||
|
||||
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) {
|
||||
// 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) {
|
||||
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();
|
||||
});
|
||||
@ -55,43 +65,17 @@ class GeneralFunctionsQueryBuilder {
|
||||
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();
|
||||
});
|
||||
}
|
||||
}, 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);
|
||||
// }
|
||||
|
||||
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.');
|
||||
// }
|
||||
}
|
||||
|
||||
queryPreviewBuilder() {
|
||||
let queryPreview = document.querySelector('#corpus-analysis-concordance-query-preview');
|
||||
let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips));
|
||||
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);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<div class="col s1">
|
||||
<div class="col s2">
|
||||
<span class="card-title">Query <i class="material-icons left" style="font-size: inherit;">search</i></span>
|
||||
</div>
|
||||
<div class="col s2">
|
||||
@ -30,12 +30,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form id="corpus-analysis-concordance-form">
|
||||
<div id="corpus-analysis-concordance-expert-mode-display" class="hide">
|
||||
{{ expert_mode.card_content() }}
|
||||
</div>
|
||||
<div id="corpus-analysis-concordance-query-builder-display">
|
||||
{{ query_builder.card_content() }}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12 right-align">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit">
|
||||
Send
|
||||
<i class="material-icons right">send</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{% macro card_content(id_prefix) %}
|
||||
<div class="row">
|
||||
<form id="corpus-analysis-concordance-form">
|
||||
<div class="input-field col s12 m9">
|
||||
<i class="material-icons prefix">search</i>
|
||||
<input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"></input>
|
||||
@ -14,13 +13,5 @@
|
||||
<input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
|
||||
<label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label>
|
||||
</div>
|
||||
<div class="col s12 m3 l3 right-align">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit">
|
||||
Send
|
||||
<i class="material-icons right">send</i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{% macro card_content(id_prefix) %}
|
||||
<form id="corpus-analysis-concordance-form">
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col s9">
|
||||
<div class="chips" id="corpus-analysis-concordance-form-query-builder"></div>
|
||||
</div>
|
||||
@ -9,39 +8,29 @@
|
||||
<input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
|
||||
<label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
|
||||
<span> | </span>
|
||||
<a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12 hide">
|
||||
<p><i> Preview:</i></p>
|
||||
<p id="corpus-analysis-concordance-query-preview"></p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<p></p>
|
||||
<a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-positional-attr-modal" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
|
||||
<a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-structural-attr-modal" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12 right-align">
|
||||
<p class="hide-on-small-only"> </p>
|
||||
<button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit">
|
||||
Send
|
||||
<i class="material-icons right">send</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro structural_attribute_modal(id_prefix) %}
|
||||
@ -347,12 +336,20 @@
|
||||
</div>
|
||||
<p></p>
|
||||
<div class="row">
|
||||
<div id="corpus-analysis-concordance-input-options" class="col s5 m5 l5 xl4">
|
||||
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-toggle-area="wildcard-char" data-options-action="wildcard-char" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
|
||||
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-toggle-area="option-group" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
|
||||
</div>
|
||||
<div class="col s3 m3 l3 xl3" id="corpus-analysis-concordance-incidence-modifiers-button">
|
||||
<div class="col s6" data-toggle-area="input-field-options">
|
||||
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="wildcard-char" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
|
||||
<a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
|
||||
<a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-incidence-modifiers-dropdown" data-toggle-area="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
|
||||
<span data-toggle-area="ignore-case-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" id="corpus-analysis-concordance-ignore-case-checkbox"/>
|
||||
<span>Ignore Case</span>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col s2" data-toggle-area="condition-option-container">
|
||||
<a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="or" data-toggle-area="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
|
||||
<a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="and" data-toggle-area="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
|
||||
</div>
|
||||
|
||||
<ul id="corpus-analysis-concordance-incidence-modifiers-dropdown" class="dropdown-content">
|
||||
@ -363,18 +360,6 @@
|
||||
<li><a class="modal-trigger tooltipped" href="#corpus-analysis-concordance-between-nm-modal" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="col s2 m2 l2 xl2">
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox" class="filled-in" data-toggle-area="ignore-case-checkbox" id="corpus-analysis-concordance-ignore-case-checkbox"/>
|
||||
<span>Ignore Case</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col s2 m2 l2 xl2" id="corpus-analysis-concordance-condition-container">
|
||||
<a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="or" data-toggle-area="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
|
||||
<a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="and" data-toggle-area="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user