mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-01-13 19:50:34 +00:00
Compare commits
6 Commits
4822f6ec02
...
ff1bcb40f3
| Author | SHA1 | Date | |
|---|---|---|---|
|
ff1bcb40f3 | ||
|
|
d298b200dc | ||
|
|
660d7ebc99 | ||
|
|
df33c7b36d | ||
|
bf8b22fb58 | ||
|
|
b216ad8a40 |
@ -1,192 +0,0 @@
|
||||
class ConcordanceQueryBuilder {
|
||||
|
||||
constructor() {
|
||||
this.elements = new ElementReferencesQueryBuilder();
|
||||
this.generalFunctions = new GeneralQueryBuilderFunctions(this.elements);
|
||||
this.tokenAttributeBuilderFunctions = new TokenAttributeBuilderFunctions(this.elements);
|
||||
this.structuralAttributeBuilderFunctions = new StructuralAttributeBuilderFunctions(this.elements);
|
||||
|
||||
this.incidenceModifierEventListeners();
|
||||
this.nAndMInputSubmitEventListeners();
|
||||
|
||||
let queryBuilderDisplay = document.querySelector("#corpus-analysis-concordance-query-builder-display");
|
||||
let expertModeDisplay = document.querySelector("#corpus-analysis-concordance-expert-mode-display");
|
||||
let expertModeSwitch = document.querySelector("#corpus-analysis-concordance-expert-mode-switch");
|
||||
|
||||
expertModeSwitch.addEventListener("change", () => {
|
||||
const isChecked = expertModeSwitch.checked;
|
||||
if (isChecked) {
|
||||
queryBuilderDisplay.classList.add("hide");
|
||||
expertModeDisplay.classList.remove("hide");
|
||||
this.switchToExpertModeParser();
|
||||
} else {
|
||||
queryBuilderDisplay.classList.remove("hide");
|
||||
expertModeDisplay.classList.add("hide");
|
||||
this.switchToQueryBuilderParser();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
incidenceModifierEventListeners() {
|
||||
// Eventlisteners for the incidence modifiers. There are two different types of incidence modifiers: token and character incidence modifiers.
|
||||
document.querySelectorAll('.incidence-modifier-selection').forEach(button => {
|
||||
let dropdownId = button.parentNode.parentNode.id;
|
||||
if (dropdownId === 'corpus-analysis-concordance-token-incidence-modifiers-dropdown') {
|
||||
button.addEventListener('click', () => this.generalFunctions.tokenIncidenceModifierHandler(button.dataset.token, button.innerHTML));
|
||||
} else if (dropdownId === 'corpus-analysis-concordance-character-incidence-modifiers-dropdown') {
|
||||
button.addEventListener('click', () => this.tokenAttributeBuilderFunctions.characterIncidenceModifierHandler(button));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
nAndMInputSubmitEventListeners() {
|
||||
// Eventlisteners for the submit of n- and m-values of the incidence modifier modal for "exactly n" or "between n and m".
|
||||
document.querySelectorAll('.n-m-submit-button').forEach(button => {
|
||||
let modalId = button.dataset.modalId;
|
||||
if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') {
|
||||
button.addEventListener('click', () => this.generalFunctions.tokenNMSubmitHandler(modalId));
|
||||
} else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') {
|
||||
button.addEventListener('click', () => this.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
switchToExpertModeParser() {
|
||||
let expertModeInputField = document.querySelector('#corpus-analysis-concordance-form-query');
|
||||
expertModeInputField.value = '';
|
||||
let queryBuilderInputFieldValue = Utils.unescape(document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim());
|
||||
if (queryBuilderInputFieldValue !== "" && queryBuilderInputFieldValue !== ";") {
|
||||
expertModeInputField.value = queryBuilderInputFieldValue;
|
||||
}
|
||||
}
|
||||
|
||||
switchToQueryBuilderParser() {
|
||||
this.generalFunctions.resetQueryInputField();
|
||||
let expertModeInputFieldValue = document.querySelector('#corpus-analysis-concordance-form-query').value;
|
||||
let chipElements = this.parseTextToChip(expertModeInputFieldValue);
|
||||
let closingTagElements = ['end-sentence', 'end-entity'];
|
||||
let editableElements = ['start-entity', 'text-annotation', 'token'];
|
||||
for (let chipElement of chipElements) {
|
||||
let isClosingTag = closingTagElements.includes(chipElement['type']);
|
||||
let isEditable = editableElements.includes(chipElement['type']);
|
||||
if (chipElement['query'] === '[]'){
|
||||
isEditable = false;
|
||||
}
|
||||
this.generalFunctions.submitQueryChipElement(chipElement['type'], chipElement['pretty'], chipElement['query'], null, isClosingTag, isEditable);
|
||||
}
|
||||
}
|
||||
|
||||
parseTextToChip(query) {
|
||||
const parsingElementDict = {
|
||||
'<s>': {
|
||||
pretty: 'Sentence Start',
|
||||
type: 'start-sentence'
|
||||
},
|
||||
'<\/s>': {
|
||||
pretty: 'Sentence End',
|
||||
type: 'end-sentence'
|
||||
},
|
||||
'<ent>': {
|
||||
pretty: 'Entity Start',
|
||||
type: 'start-empty-entity'
|
||||
},
|
||||
'<ent_type="([A-Z]+)">': {
|
||||
pretty: '',
|
||||
type: 'start-entity'
|
||||
},
|
||||
'<\\\/ent(_type)?>': {
|
||||
pretty: 'Entity End',
|
||||
type: 'end-entity'
|
||||
},
|
||||
':: ?match\\.text_[A-Za-z]+="[^"]+"': {
|
||||
pretty: '',
|
||||
type: 'text-annotation'
|
||||
},
|
||||
'\\[(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?((\\&|\\|) ?(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?)*\\]': {
|
||||
pretty: '',
|
||||
type: 'token'
|
||||
},
|
||||
'\\[\\]': {
|
||||
pretty: 'Empty Token',
|
||||
type: 'token'
|
||||
},
|
||||
'(?<!\\[) ?\\+ ?(?![^\\]]\\])': {
|
||||
pretty: ' one or more (+)',
|
||||
type: 'token-incidence-modifier'
|
||||
},
|
||||
'(?<!\\[) ?\\* ?(?![^\\]]\\])': {
|
||||
pretty: 'zero or more (*)',
|
||||
type: 'token-incidence-modifier'
|
||||
},
|
||||
'(?<!\\[) ?\\? ?(?![^\\]]\\])': {
|
||||
pretty: 'zero or one (?)',
|
||||
type: 'token-incidence-modifier'
|
||||
},
|
||||
'(?<!\\[) ?\\{[0-9]+} ?(?![^\\]]\\])': {
|
||||
pretty: '',
|
||||
type: 'token-incidence-modifier'
|
||||
},
|
||||
'(?<!\\[) ?\\{[0-9]+(,[0-9]+)?} ?(?![^\\]]\\])': {
|
||||
pretty: '',
|
||||
type: 'token-incidence-modifier'
|
||||
}
|
||||
}
|
||||
|
||||
let chipElements = [];
|
||||
let regexPattern = Object.keys(parsingElementDict).map(pattern => `(${pattern})`).join('|');
|
||||
const regex = new RegExp(regexPattern, 'gi');
|
||||
let match;
|
||||
|
||||
while ((match = regex.exec(query)) !== null) {
|
||||
// this is necessary to avoid infinite loops with zero-width matches
|
||||
if (match.index === regex.lastIndex) {
|
||||
regex.lastIndex++;
|
||||
}
|
||||
let stringElement = match[0];
|
||||
for (let [pattern, chipElement] of Object.entries(parsingElementDict)) {
|
||||
const parsingRegex = new RegExp(pattern, 'gi');
|
||||
if (parsingRegex.exec(stringElement)) {
|
||||
// Creating the pretty text for the chip element
|
||||
let prettyText;
|
||||
switch (pattern) {
|
||||
case '<ent_type="([A-Z]+)">':
|
||||
prettyText = `Entity Type=${stringElement.replace(/<ent_type="|">/g, '')}`;
|
||||
break;
|
||||
case ':: ?match\\.text_[A-Za-z]+="[^"]+"':
|
||||
prettyText = stringElement.replace(/:: ?match\.text_|"|"/g, '');
|
||||
break;
|
||||
case '\\[(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?((\\&|\\|) ?(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?)*\\]':
|
||||
let doubleQuotes = /(word|lemma|pos|simple_pos)="[^"]+"/gi;
|
||||
let singleQuotes = /(word|lemma|pos|simple_pos)='[^']+'/gi;
|
||||
if (doubleQuotes.exec(stringElement)) {
|
||||
prettyText = stringElement.replace(/^\[|\]$|"/g, '');
|
||||
} else if (singleQuotes.exec(stringElement)) {
|
||||
prettyText = stringElement.replace(/^\[|\]$|'/g, '');
|
||||
}
|
||||
prettyText = prettyText.replace(/\&/g, ' and ').replace(/\|/g, ' or ');
|
||||
break;
|
||||
case '(?<!\\[) ?\\{[0-9]+} ?(?![^\\]]\\])':
|
||||
prettyText = `exactly ${stringElement.replace(/{|}/g, '')} (${stringElement})`;
|
||||
break;
|
||||
case '(?<!\\[) ?\\{[0-9]+(,[0-9]+)?} ?(?![^\\]]\\])':
|
||||
prettyText = `between${stringElement.replace(/{|}/g, ' ').replace(',', ' and ')}(${stringElement})`;
|
||||
break;
|
||||
default:
|
||||
prettyText = chipElement.pretty;
|
||||
break;
|
||||
}
|
||||
chipElements.push({
|
||||
type: chipElement.type,
|
||||
pretty: prettyText,
|
||||
query: stringElement
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return chipElements;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,98 +0,0 @@
|
||||
class StructuralAttributeBuilderFunctions extends GeneralQueryBuilderFunctions {
|
||||
constructor(elements) {
|
||||
super(elements);
|
||||
|
||||
this.structuralAttrModalEventlisteners();
|
||||
|
||||
document.querySelector('#corpus-analysis-concordance-text-annotation-submit').addEventListener('click', () => this.textAnnotationSubmitHandler());
|
||||
|
||||
this.elements.structuralAttrModal = M.Modal.init(
|
||||
document.querySelector('#corpus-analysis-concordance-structural-attr-modal'),
|
||||
{
|
||||
onCloseStart: () => {
|
||||
this.resetStructuralAttrModal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
structuralAttrModalEventlisteners() {
|
||||
document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
this.actionButtonInStrucAttrModalHandler(button.dataset.structuralAttrModalActionButton);
|
||||
});
|
||||
});
|
||||
document.querySelector('.ent-type-selection-action[data-ent-type="any"]').addEventListener('click', () => {
|
||||
this.submitQueryChipElement('start-empty-entity', 'Entity Start', '<ent>');
|
||||
this.submitQueryChipElement('end-entity', 'Entity End', '</ent>', null, true);
|
||||
this.elements.structuralAttrModal.close();
|
||||
});
|
||||
document.querySelector('.ent-type-selection-action[data-ent-type="english"]').addEventListener('change', (event) => {
|
||||
this.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true);
|
||||
if (!this.elements.editingModusOn) {
|
||||
this.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
|
||||
}
|
||||
this.elements.structuralAttrModal.close();
|
||||
});
|
||||
document.querySelector('.ent-type-selection-action[data-ent-type="german"]').addEventListener('change', (event) => {
|
||||
this.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true);
|
||||
if (!this.elements.editingModusOn) {
|
||||
this.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
|
||||
}
|
||||
this.elements.structuralAttrModal.close();
|
||||
});
|
||||
}
|
||||
|
||||
resetStructuralAttrModal() {
|
||||
this.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]);
|
||||
this.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address');
|
||||
this.elements.textAnnotationInput.value = '';
|
||||
|
||||
this.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add');
|
||||
this.toggleEditingAreaStructuralAttrModal('remove');
|
||||
this.elements.editingModusOn = false;
|
||||
this.elements.editedQueryChipElementIndex = undefined;
|
||||
}
|
||||
|
||||
actionButtonInStrucAttrModalHandler(action) {
|
||||
switch (action) {
|
||||
case 'sentence':
|
||||
this.submitQueryChipElement('start-sentence', 'Sentence Start', '<s>');
|
||||
this.submitQueryChipElement('end-sentence', 'Sentence End', '</s>', null, true);
|
||||
this.elements.structuralAttrModal.close();
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
textAnnotationSubmitHandler() {
|
||||
let noValueMetadataMessage = document.querySelector('#corpus-analysis-concordance-no-value-metadata-message');
|
||||
let textAnnotationSubmit = document.querySelector('#corpus-analysis-concordance-text-annotation-submit');
|
||||
let textAnnotationInput = document.querySelector('#corpus-analysis-concordance-text-annotation-input');
|
||||
let textAnnotationOptions = document.querySelector('#corpus-analysis-concordance-text-annotation-options');
|
||||
|
||||
if (textAnnotationInput.value === '') {
|
||||
textAnnotationSubmit.classList.add('red');
|
||||
noValueMetadataMessage.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
textAnnotationSubmit.classList.remove('red');
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
noValueMetadataMessage.classList.add('hide');
|
||||
}, 3000);
|
||||
} else {
|
||||
let queryText = `:: match.text_${textAnnotationOptions.value}="${textAnnotationInput.value}"`;
|
||||
this.submitQueryChipElement('text-annotation', `${textAnnotationOptions.value}=${textAnnotationInput.value}`, queryText, null, false, true);
|
||||
this.elements.structuralAttrModal.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,182 +0,0 @@
|
||||
class TokenAttributeBuilderFunctions extends GeneralQueryBuilderFunctions {
|
||||
constructor(elements) {
|
||||
super(elements);
|
||||
|
||||
this.elements.positionalAttrSelection.addEventListener('change', () => {
|
||||
this.preparePositionalAttrModal();
|
||||
});
|
||||
|
||||
// Options for positional attribute selection
|
||||
document.querySelectorAll('.positional-attr-options-action-button[data-options-action]').forEach(button => {
|
||||
button.addEventListener('click', () => {this.actionButtonInOptionSectionHandler(button.dataset.optionsAction);});
|
||||
});
|
||||
|
||||
this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
|
||||
|
||||
this.elements.positionalAttrModal = M.Modal.init(
|
||||
document.querySelector('#corpus-analysis-concordance-positional-attr-modal'),
|
||||
{
|
||||
onOpenStart: () => {
|
||||
this.preparePositionalAttrModal();
|
||||
},
|
||||
onCloseStart: () => {
|
||||
this.resetPositionalAttrModal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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.elements.tokenBuilderContent.innerHTML = '';
|
||||
this.toggleClass(['input-field-options'], 'hide', 'remove');
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
this.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
|
||||
this.elements.ignoreCaseCheckbox.checked = false;
|
||||
this.elements.editingModusOn = false;
|
||||
this.elements.editedQueryChipElementIndex = undefined;
|
||||
}
|
||||
|
||||
actionButtonInOptionSectionHandler(elem) {
|
||||
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
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 'wildcard-char':
|
||||
input.value += '.';
|
||||
break;
|
||||
case 'and':
|
||||
this.conditionHandler('and');
|
||||
break;
|
||||
case 'or':
|
||||
this.conditionHandler('or');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.optionToggleHandler();
|
||||
}
|
||||
|
||||
characterIncidenceModifierHandler(elem) {
|
||||
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
input.value += elem.dataset.token;
|
||||
}
|
||||
|
||||
characterNMSubmitHandler(modalId) {
|
||||
let modal = document.querySelector(`#${modalId}`);
|
||||
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;
|
||||
input_m = input_m !== undefined ? ',' + input_m.value : '';
|
||||
let input = `${input_n}${input_m}`;
|
||||
|
||||
let instance = M.Modal.getInstance(modal);
|
||||
instance.close();
|
||||
let tokenInput = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
tokenInput.value += '{' + input + '}';
|
||||
}
|
||||
|
||||
conditionHandler(conditionText) {
|
||||
let tokenQueryTemplateClone = this.elements.tokenQueryTemplate.content.cloneNode(true);
|
||||
tokenQueryTemplateClone.querySelector('.token-query-template-content').appendChild(this.elements.tokenBuilderContent.firstElementChild);
|
||||
let notSelectedButton = tokenQueryTemplateClone.querySelector(`[data-condition-pretty-text]:not([data-condition-pretty-text="${conditionText}"])`);
|
||||
let deleteButton = tokenQueryTemplateClone.querySelector(`[data-token-query-content-action="delete"]`);
|
||||
deleteButton.addEventListener('click', (event) => {
|
||||
this.deleteTokenQueryRow(event.target);
|
||||
});
|
||||
notSelectedButton.parentNode.removeChild(notSelectedButton);
|
||||
this.elements.tokenQuery.appendChild(tokenQueryTemplateClone);
|
||||
|
||||
// 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') {
|
||||
switch (this.elements.positionalAttrSelection.value) {
|
||||
case 'english-pos' || 'german-pos':
|
||||
optionDeleteList.push('english-pos', 'german-pos');
|
||||
break;
|
||||
default:
|
||||
optionDeleteList.push(this.elements.positionalAttrSelection.value);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
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>
|
||||
`;
|
||||
this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
|
||||
M.FormSelect.init(this.elements.positionalAttrSelection);
|
||||
}
|
||||
let lastTokenQueryRow = this.elements.tokenQuery.lastElementChild;
|
||||
if(lastTokenQueryRow.querySelector('[data-kind-of-token="word"]') || lastTokenQueryRow.querySelector('[data-kind-of-token="lemma"]')) {
|
||||
this.appendIgnoreCaseCheckbox(lastTokenQueryRow.querySelector('.token-query-template-content'), this.elements.ignoreCaseCheckbox.checked);
|
||||
}
|
||||
this.elements.ignoreCaseCheckbox.checked = false;
|
||||
this.setTokenSelection(selectionDefault, optionDeleteList);
|
||||
}
|
||||
|
||||
deleteTokenQueryRow(deleteButton) {
|
||||
let deletedRow = deleteButton.closest('.row');
|
||||
let condition = deletedRow.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
|
||||
if (condition === 'and') {
|
||||
let kindOfToken = deletedRow.querySelector('[data-kind-of-token]').dataset.kindOfToken;
|
||||
switch (kindOfToken) {
|
||||
case 'english-pos' || 'german-pos':
|
||||
this.createOptionElementForPosAttrSelection('english-pos');
|
||||
this.createOptionElementForPosAttrSelection('german-pos');
|
||||
break;
|
||||
default:
|
||||
this.createOptionElementForPosAttrSelection(kindOfToken);
|
||||
break;
|
||||
}
|
||||
M.FormSelect.init(this.elements.positionalAttrSelection);
|
||||
}
|
||||
deletedRow.remove();
|
||||
}
|
||||
|
||||
createOptionElementForPosAttrSelection(kindOfToken) {
|
||||
let option = document.createElement('option');
|
||||
option.value = kindOfToken;
|
||||
option.text = kindOfToken;
|
||||
this.elements.positionalAttrSelection.appendChild(option);
|
||||
}
|
||||
|
||||
appendIgnoreCaseCheckbox(parentElement, checked = false) {
|
||||
let ignoreCaseCheckboxClone = document.querySelector('#ignore-case-checkbox-template').content.cloneNode(true);
|
||||
parentElement.appendChild(ignoreCaseCheckboxClone);
|
||||
M.Tooltip.init(parentElement.querySelectorAll('.tooltipped'));
|
||||
if (checked) {
|
||||
parentElement.querySelector('input[type="checkbox"]').checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
setTokenSelection(selection, optionDeleteList) {
|
||||
optionDeleteList.forEach(option => {
|
||||
if (this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`) !== null) {
|
||||
this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
|
||||
}
|
||||
});
|
||||
|
||||
this.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
|
||||
this.preparePositionalAttrModal();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
class CorpusAnalysisApp {
|
||||
nopaque.corpus_analysis.App = class App {
|
||||
constructor(corpusId) {
|
||||
this.corpusId = corpusId;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
class CorpusAnalysisConcordance {
|
||||
nopaque.corpus_analysis.ConcordanceExtension = class ConcordanceExtension {
|
||||
name = 'Concordance';
|
||||
|
||||
constructor(app) {
|
||||
@ -1,4 +1,4 @@
|
||||
class ElementReferencesQueryBuilder {
|
||||
nopaque.corpus_analysis.query_builder.ElementReferences = class ElementReferences {
|
||||
constructor() {
|
||||
// General Elements
|
||||
this.queryInputField = document.querySelector('#corpus-analysis-concordance-query-builder-input-field');
|
||||
@ -25,4 +25,4 @@ class ElementReferencesQueryBuilder {
|
||||
|
||||
this.ignoreCaseCheckbox = document.querySelector('#corpus-analysis-concordance-ignore-case-checkbox');
|
||||
}
|
||||
}
|
||||
};
|
||||
1
app/static/js/corpus-analysis/query-builder/index.js
Normal file
1
app/static/js/corpus-analysis/query-builder/index.js
Normal file
@ -0,0 +1 @@
|
||||
nopaque.corpus_analysis.query_builder = {};
|
||||
@ -1,9 +1,34 @@
|
||||
class GeneralQueryBuilderFunctions {
|
||||
constructor(elements) {
|
||||
this.elements = elements;
|
||||
nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
|
||||
constructor() {
|
||||
this.elements = new nopaque.corpus_analysis.query_builder.ElementReferences();
|
||||
|
||||
this.incidenceModifierEventListeners();
|
||||
this.nAndMInputSubmitEventListeners();
|
||||
|
||||
let queryBuilderDisplay = document.querySelector("#corpus-analysis-concordance-query-builder-display");
|
||||
let expertModeDisplay = document.querySelector("#corpus-analysis-concordance-expert-mode-display");
|
||||
let expertModeSwitch = document.querySelector("#corpus-analysis-concordance-expert-mode-switch");
|
||||
|
||||
expertModeSwitch.addEventListener("change", () => {
|
||||
const isChecked = expertModeSwitch.checked;
|
||||
if (isChecked) {
|
||||
queryBuilderDisplay.classList.add("hide");
|
||||
expertModeDisplay.classList.remove("hide");
|
||||
this.switchToExpertModeParser();
|
||||
} else {
|
||||
queryBuilderDisplay.classList.remove("hide");
|
||||
expertModeDisplay.classList.add("hide");
|
||||
this.switchToQueryBuilderParser();
|
||||
}
|
||||
});
|
||||
|
||||
this.extensions = {
|
||||
structuralAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions(this),
|
||||
tokenAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions(this),
|
||||
};
|
||||
}
|
||||
|
||||
toggleClass(elements, className, action){
|
||||
toggleClass(elements, className, action) {
|
||||
elements.forEach(element => {
|
||||
document.querySelector(`[data-toggle-area="${element}"]`).classList[action](className);
|
||||
});
|
||||
@ -21,7 +46,7 @@ class GeneralQueryBuilderFunctions {
|
||||
}
|
||||
|
||||
removePlaceholder() {
|
||||
let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder');
|
||||
let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder');
|
||||
if (placeholder && this.elements.queryInputField !== undefined) {
|
||||
this.elements.queryInputField.innerHTML = '';
|
||||
}
|
||||
@ -115,8 +140,8 @@ class GeneralQueryBuilderFunctions {
|
||||
this.lockClosingChipElement(queryChipElement);
|
||||
}
|
||||
});
|
||||
// });
|
||||
}
|
||||
// });
|
||||
}
|
||||
|
||||
editChipElement(queryChipElement) {
|
||||
@ -124,114 +149,28 @@ class GeneralQueryBuilderFunctions {
|
||||
this.elements.editedQueryChipElementIndex = Array.from(this.elements.queryInputField.children).indexOf(queryChipElement);
|
||||
switch (queryChipElement.dataset.type) {
|
||||
case 'start-entity':
|
||||
this.editStartEntityChipElement(queryChipElement);
|
||||
this.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement);
|
||||
break;
|
||||
case 'text-annotation':
|
||||
this.editTextAnnotationChipElement(queryChipElement);
|
||||
this.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement);
|
||||
break;
|
||||
case 'token':
|
||||
let queryElementsContent = this.prepareQueryElementsContent(queryChipElement);
|
||||
this.editTokenChipElement(queryElementsContent);
|
||||
let queryElementsContent = this.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement);
|
||||
this.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
editStartEntityChipElement(queryChipElement) {
|
||||
this.elements.structuralAttrModal.open();
|
||||
this.toggleClass(['entity-builder'], 'hide', 'remove');
|
||||
this.toggleEditingAreaStructuralAttrModal('add');
|
||||
let entType = queryChipElement.dataset.query.replace(/<ent_type="|">/g, '');
|
||||
let isEnglishEntType = this.elements.englishEntTypeSelection.querySelector(`option[value=${entType}]`) !== null;
|
||||
let selection = isEnglishEntType ? this.elements.englishEntTypeSelection : this.elements.germanEntTypeSelection;
|
||||
this.resetMaterializeSelection([selection], entType);
|
||||
}
|
||||
|
||||
editTextAnnotationChipElement(queryChipElement) {
|
||||
this.elements.structuralAttrModal.open();
|
||||
this.toggleClass(['text-annotation-builder'], 'hide', 'remove');
|
||||
this.structuralAttributeBuilderFunctions.toggleEditingAreaStructuralAttrModal('add');
|
||||
let [textAnnotationSelection, textAnnotationContent] = queryChipElement.dataset.query
|
||||
.replace(/:: ?match\.text_|"|"/g, '')
|
||||
.split('=');
|
||||
this.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection);
|
||||
this.elements.textAnnotationInput.value = textAnnotationContent;
|
||||
}
|
||||
|
||||
prepareQueryElementsContent(queryChipElement) {
|
||||
//this regex searches for word or lemma or pos or simple_pos="any string within single or double quotes" followed by one or no ignore case markers, followed by one or no condition characters.
|
||||
let regex = new RegExp('(word|lemma|pos|simple_pos)=(("[^"]+")|(\\\\u0027[^\\\\u0027]+\\\\u0027)) ?(%c)? ?(\\&|\\|)?', 'gm');
|
||||
let m;
|
||||
let queryElementsContent = [];
|
||||
while ((m = regex.exec(queryChipElement.dataset.query)) !== null) {
|
||||
// this is necessary to avoid infinite loops with zero-width matches
|
||||
if (m.index === regex.lastIndex) {
|
||||
regex.lastIndex++;
|
||||
}
|
||||
let tokenAttr = m[1];
|
||||
// Passes english-pos by default so that the template is added. In editTokenChipElement it is then checked whether it is english-pos or german-pos.
|
||||
if (tokenAttr === 'pos') {
|
||||
tokenAttr = 'english-pos';
|
||||
}
|
||||
let tokenValue = m[2].replace(/"|'/g, '');
|
||||
let ignoreCase = false;
|
||||
let condition = undefined;
|
||||
m.forEach((match) => {
|
||||
if (match === "%c") {
|
||||
ignoreCase = true;
|
||||
} else if (match === "&") {
|
||||
condition = "and";
|
||||
} else if (match === "|") {
|
||||
condition = "or";
|
||||
}
|
||||
});
|
||||
queryElementsContent.push({tokenAttr: tokenAttr, tokenValue: tokenValue, ignoreCase: ignoreCase, condition: condition});
|
||||
}
|
||||
return queryElementsContent;
|
||||
}
|
||||
|
||||
editTokenChipElement(queryElementsContent) {
|
||||
this.elements.positionalAttrModal.open();
|
||||
queryElementsContent.forEach((queryElement) => {
|
||||
this.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
|
||||
this.preparePositionalAttrModal();
|
||||
switch (queryElement.tokenAttr) {
|
||||
case 'word':
|
||||
case 'lemma':
|
||||
this.elements.tokenBuilderContent.querySelector('input').value = queryElement.tokenValue;
|
||||
break;
|
||||
case 'english-pos':
|
||||
// English-pos is selected by default. Then it is checked whether the passed token value occurs in the english-pos selection. If not, the selection is reseted and changed to german-pos.
|
||||
let selection = this.elements.tokenBuilderContent.querySelector('select');
|
||||
queryElement.tokenAttr = selection.querySelector(`option[value=${queryElement.tokenValue}]`) ? 'english-pos' : 'german-pos';
|
||||
this.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
|
||||
this.preparePositionalAttrModal();
|
||||
this.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
|
||||
break;
|
||||
case 'simple_pos':
|
||||
this.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (queryElement.ignoreCase) {
|
||||
this.elements.ignoreCaseCheckbox.checked = true;
|
||||
}
|
||||
if (queryElement.condition !== undefined) {
|
||||
this.conditionHandler(queryElement.condition, true);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
lockClosingChipElement(queryChipElement) {
|
||||
queryChipElement.dataset.closingTag = 'false';
|
||||
let lockIcon = queryChipElement.querySelector('[data-chip-action="lock"]');
|
||||
lockIcon.textContent = 'lock';
|
||||
//TODO: Write unlock-Function?
|
||||
// TODO: Write unlock-Function?
|
||||
lockIcon.dataset.chipAction = 'unlock';
|
||||
}
|
||||
|
||||
|
||||
deleteChipElement(attr) {
|
||||
let elementIndex = Array.from(this.elements.queryInputField.children).indexOf(attr);
|
||||
switch (attr.dataset.type) {
|
||||
@ -385,111 +324,164 @@ class GeneralQueryBuilderFunctions {
|
||||
this.tokenIncidenceModifierHandler(input, pretty_input);
|
||||
}
|
||||
|
||||
//#region Functions from other classes
|
||||
|
||||
//TODO: Move these functions back to their og classes and make it work.
|
||||
|
||||
toggleEditingAreaStructuralAttrModal(action) {
|
||||
// If the user edits a query chip element, the corresponding editing area is displayed and the other areas are hidden or disabled.
|
||||
this.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action);
|
||||
incidenceModifierEventListeners() {
|
||||
// Eventlisteners for the incidence modifiers. There are two different types of incidence modifiers: token and character incidence modifiers.
|
||||
document.querySelectorAll('.incidence-modifier-selection').forEach(button => {
|
||||
let dropdownId = button.parentNode.parentNode.id;
|
||||
if (dropdownId === 'corpus-analysis-concordance-token-incidence-modifiers-dropdown') {
|
||||
button.addEventListener('click', () => this.tokenIncidenceModifierHandler(button.dataset.token, button.innerHTML));
|
||||
} else if (dropdownId === 'corpus-analysis-concordance-character-incidence-modifiers-dropdown') {
|
||||
button.addEventListener('click', () => this.characterIncidenceModifierHandler(button));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
preparePositionalAttrModal() {
|
||||
let selection = this.elements.positionalAttrSelection.value;
|
||||
if (selection !== 'empty-token') {
|
||||
let selectionTemplate = document.querySelector(`.token-builder-section[data-token-builder-section="${selection}"]`);
|
||||
let selectionTemplateClone = selectionTemplate.content.cloneNode(true);
|
||||
|
||||
this.elements.tokenBuilderContent.innerHTML = '';
|
||||
this.elements.tokenBuilderContent.appendChild(selectionTemplateClone);
|
||||
if (this.elements.tokenBuilderContent.querySelector('select') !== null) {
|
||||
let selectElement = this.elements.tokenBuilderContent.querySelector('select');
|
||||
M.FormSelect.init(selectElement);
|
||||
selectElement.addEventListener('change', () => {this.optionToggleHandler();});
|
||||
} else {
|
||||
this.elements.tokenBuilderContent.querySelector('input').addEventListener('input', () => {this.optionToggleHandler();});
|
||||
nAndMInputSubmitEventListeners() {
|
||||
// Eventlisteners for the submit of n- and m-values of the incidence modifier modal for "exactly n" or "between n and m".
|
||||
document.querySelectorAll('.n-m-submit-button').forEach(button => {
|
||||
let modalId = button.dataset.modalId;
|
||||
if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') {
|
||||
button.addEventListener('click', () => this.tokenNMSubmitHandler(modalId));
|
||||
} else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') {
|
||||
button.addEventListener('click', () => this.extensions.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
switchToExpertModeParser() {
|
||||
let expertModeInputField = document.querySelector('#corpus-analysis-concordance-form-query');
|
||||
expertModeInputField.value = '';
|
||||
let queryBuilderInputFieldValue = nopaque.Utils.unescape(document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim());
|
||||
if (queryBuilderInputFieldValue !== "" && queryBuilderInputFieldValue !== ";") {
|
||||
expertModeInputField.value = queryBuilderInputFieldValue;
|
||||
}
|
||||
}
|
||||
|
||||
switchToQueryBuilderParser() {
|
||||
this.resetQueryInputField();
|
||||
let expertModeInputFieldValue = document.querySelector('#corpus-analysis-concordance-form-query').value;
|
||||
let chipElements = this.parseTextToChip(expertModeInputFieldValue);
|
||||
let closingTagElements = ['end-sentence', 'end-entity'];
|
||||
let editableElements = ['start-entity', 'text-annotation', 'token'];
|
||||
for (let chipElement of chipElements) {
|
||||
let isClosingTag = closingTagElements.includes(chipElement['type']);
|
||||
let isEditable = editableElements.includes(chipElement['type']);
|
||||
if (chipElement['query'] === '[]'){
|
||||
isEditable = false;
|
||||
}
|
||||
this.submitQueryChipElement(chipElement['type'], chipElement['pretty'], chipElement['query'], null, isClosingTag, isEditable);
|
||||
}
|
||||
}
|
||||
|
||||
parseTextToChip(query) {
|
||||
const parsingElementDict = {
|
||||
'<s>': {
|
||||
pretty: 'Sentence Start',
|
||||
type: 'start-sentence'
|
||||
},
|
||||
'<\/s>': {
|
||||
pretty: 'Sentence End',
|
||||
type: 'end-sentence'
|
||||
},
|
||||
'<ent>': {
|
||||
pretty: 'Entity Start',
|
||||
type: 'start-empty-entity'
|
||||
},
|
||||
'<ent_type="([A-Z]+)">': {
|
||||
pretty: '',
|
||||
type: 'start-entity'
|
||||
},
|
||||
'<\\\/ent(_type)?>': {
|
||||
pretty: 'Entity End',
|
||||
type: 'end-entity'
|
||||
},
|
||||
':: ?match\\.text_[A-Za-z]+="[^"]+"': {
|
||||
pretty: '',
|
||||
type: 'text-annotation'
|
||||
},
|
||||
'\\[(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?((\\&|\\|) ?(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?)*\\]': {
|
||||
pretty: '',
|
||||
type: 'token'
|
||||
},
|
||||
'\\[\\]': {
|
||||
pretty: 'Empty Token',
|
||||
type: 'token'
|
||||
},
|
||||
'(?<!\\[) ?\\+ ?(?![^\\]]\\])': {
|
||||
pretty: ' one or more (+)',
|
||||
type: 'token-incidence-modifier'
|
||||
},
|
||||
'(?<!\\[) ?\\* ?(?![^\\]]\\])': {
|
||||
pretty: 'zero or more (*)',
|
||||
type: 'token-incidence-modifier'
|
||||
},
|
||||
'(?<!\\[) ?\\? ?(?![^\\]]\\])': {
|
||||
pretty: 'zero or one (?)',
|
||||
type: 'token-incidence-modifier'
|
||||
},
|
||||
'(?<!\\[) ?\\{[0-9]+} ?(?![^\\]]\\])': {
|
||||
pretty: '',
|
||||
type: 'token-incidence-modifier'
|
||||
},
|
||||
'(?<!\\[) ?\\{[0-9]+(,[0-9]+)?} ?(?![^\\]]\\])': {
|
||||
pretty: '',
|
||||
type: 'token-incidence-modifier'
|
||||
}
|
||||
}
|
||||
this.optionToggleHandler();
|
||||
|
||||
if (selection === 'word' || selection === 'lemma') {
|
||||
this.toggleClass(['input-field-options'], 'hide', 'remove');
|
||||
} else if (selection === 'empty-token'){
|
||||
this.addTokenToQuery();
|
||||
} else {
|
||||
this.toggleClass(['input-field-options'], 'hide', 'add');
|
||||
}
|
||||
}
|
||||
|
||||
tokenInputCheck(elem) {
|
||||
return elem.querySelector('select') !== null ? elem.querySelector('select') : elem.querySelector('input');
|
||||
}
|
||||
|
||||
optionToggleHandler() {
|
||||
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
if (input.value === '' && this.elements.editingModusOn === false) {
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
} else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) {
|
||||
this.toggleClass(['and'], 'disabled', 'add');
|
||||
this.toggleClass(['or'], 'disabled', 'remove');
|
||||
} else {
|
||||
this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
|
||||
}
|
||||
}
|
||||
|
||||
addTokenToQuery() {
|
||||
let tokenQueryPrettyText = '';
|
||||
let tokenQueryCQLText = '';
|
||||
let input;
|
||||
let kindOfToken = this.kindOfTokenCheck(this.elements.positionalAttrSelection.value);
|
||||
|
||||
// Takes all rows of the token query (if there is a query concatenation).
|
||||
// Adds their contents to tokenQueryPrettyText and tokenQueryCQLText, which will later be expanded with the current input field.
|
||||
let tokenQueryRows = this.elements.tokenQuery.querySelectorAll('.row');
|
||||
tokenQueryRows.forEach(row => {
|
||||
let ignoreCaseCheckbox = row.querySelector('input[type="checkbox"]');
|
||||
let c = ignoreCaseCheckbox !== null && ignoreCaseCheckbox.checked ? ' %c' : '';
|
||||
let tokenQueryRowInput = this.tokenInputCheck(row.querySelector('.token-query-template-content'));
|
||||
let tokenQueryKindOfToken = this.kindOfTokenCheck(tokenQueryRowInput.closest('.input-field').dataset.kindOfToken);
|
||||
let tokenConditionPrettyText = row.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
|
||||
let tokenConditionCQLText = row.querySelector('[data-condition-cql-text]').dataset.conditionCqlText;
|
||||
tokenQueryPrettyText += `${tokenQueryKindOfToken}=${tokenQueryRowInput.value}${c} ${tokenConditionPrettyText} `;
|
||||
tokenQueryCQLText += `${tokenQueryKindOfToken}="${tokenQueryRowInput.value}"${c} ${tokenConditionCQLText}`;
|
||||
});
|
||||
if (kindOfToken === 'empty-token') {
|
||||
tokenQueryPrettyText += 'empty token';
|
||||
} else {
|
||||
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
|
||||
input = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
tokenQueryPrettyText += `${kindOfToken}=${input.value}${c}`;
|
||||
tokenQueryCQLText += `${kindOfToken}="${input.value}"${c}`;
|
||||
}
|
||||
// isTokenQueryInvalid looks if a valid value is passed. If the input fields/dropdowns are empty (isTokenQueryInvalid === true), no token is added.
|
||||
if (this.elements.positionalAttrSelection.value !== 'empty-token' && input.value === '') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryCQLText = `[${tokenQueryCQLText}]`;
|
||||
this.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true);
|
||||
this.elements.positionalAttrModal.close();
|
||||
}
|
||||
}
|
||||
|
||||
kindOfTokenCheck(kindOfToken) {
|
||||
return kindOfToken === 'english-pos' || kindOfToken === 'german-pos' ? 'pos' : kindOfToken;
|
||||
let chipElements = [];
|
||||
let regexPattern = Object.keys(parsingElementDict).map(pattern => `(${pattern})`).join('|');
|
||||
const regex = new RegExp(regexPattern, 'gi');
|
||||
let match;
|
||||
|
||||
while ((match = regex.exec(query)) !== null) {
|
||||
// this is necessary to avoid infinite loops with zero-width matches
|
||||
if (match.index === regex.lastIndex) {
|
||||
regex.lastIndex++;
|
||||
}
|
||||
let stringElement = match[0];
|
||||
for (let [pattern, chipElement] of Object.entries(parsingElementDict)) {
|
||||
const parsingRegex = new RegExp(pattern, 'gi');
|
||||
if (parsingRegex.exec(stringElement)) {
|
||||
// Creating the pretty text for the chip element
|
||||
let prettyText;
|
||||
switch (pattern) {
|
||||
case '<ent_type="([A-Z]+)">':
|
||||
prettyText = `Entity Type=${stringElement.replace(/<ent_type="|">/g, '')}`;
|
||||
break;
|
||||
case ':: ?match\\.text_[A-Za-z]+="[^"]+"':
|
||||
prettyText = stringElement.replace(/:: ?match\.text_|"|"/g, '');
|
||||
break;
|
||||
case '\\[(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?((\\&|\\|) ?(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?)*\\]':
|
||||
let doubleQuotes = /(word|lemma|pos|simple_pos)="[^"]+"/gi;
|
||||
let singleQuotes = /(word|lemma|pos|simple_pos)='[^']+'/gi;
|
||||
if (doubleQuotes.exec(stringElement)) {
|
||||
prettyText = stringElement.replace(/^\[|\]$|"/g, '');
|
||||
} else if (singleQuotes.exec(stringElement)) {
|
||||
prettyText = stringElement.replace(/^\[|\]$|'/g, '');
|
||||
}
|
||||
prettyText = prettyText.replace(/\&/g, ' and ').replace(/\|/g, ' or ');
|
||||
break;
|
||||
case '(?<!\\[) ?\\{[0-9]+} ?(?![^\\]]\\])':
|
||||
prettyText = `exactly ${stringElement.replace(/{|}/g, '')} (${stringElement})`;
|
||||
break;
|
||||
case '(?<!\\[) ?\\{[0-9]+(,[0-9]+)?} ?(?![^\\]]\\])':
|
||||
prettyText = `between${stringElement.replace(/{|}/g, ' ').replace(',', ' and ')}(${stringElement})`;
|
||||
break;
|
||||
default:
|
||||
prettyText = chipElement.pretty;
|
||||
break;
|
||||
}
|
||||
chipElements.push({
|
||||
type: chipElement.type,
|
||||
pretty: prettyText,
|
||||
query: stringElement
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return chipElements;
|
||||
}
|
||||
|
||||
disableTokenSubmit() {
|
||||
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);
|
||||
}
|
||||
|
||||
//#endregion Functions from other classes
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
@ -0,0 +1,125 @@
|
||||
nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions = class StructuralAttributeBuilderFunctions {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
this.elements = app.elements;
|
||||
|
||||
this.structuralAttrModalEventlisteners();
|
||||
|
||||
document.querySelector('#corpus-analysis-concordance-text-annotation-submit').addEventListener('click', () => this.textAnnotationSubmitHandler());
|
||||
|
||||
this.elements.structuralAttrModal = M.Modal.init(
|
||||
document.querySelector('#corpus-analysis-concordance-structural-attr-modal'),
|
||||
{
|
||||
onCloseStart: () => {
|
||||
this.resetStructuralAttrModal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
structuralAttrModalEventlisteners() {
|
||||
document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
this.actionButtonInStrucAttrModalHandler(button.dataset.structuralAttrModalActionButton);
|
||||
});
|
||||
});
|
||||
document.querySelector('.ent-type-selection-action[data-ent-type="any"]').addEventListener('click', () => {
|
||||
this.app.submitQueryChipElement('start-empty-entity', 'Entity Start', '<ent>');
|
||||
this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent>', null, true);
|
||||
this.elements.structuralAttrModal.close();
|
||||
});
|
||||
document.querySelector('.ent-type-selection-action[data-ent-type="english"]').addEventListener('change', (event) => {
|
||||
this.app.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true);
|
||||
if (!this.elements.editingModusOn) {
|
||||
this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
|
||||
}
|
||||
this.elements.structuralAttrModal.close();
|
||||
});
|
||||
document.querySelector('.ent-type-selection-action[data-ent-type="german"]').addEventListener('change', (event) => {
|
||||
this.app.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true);
|
||||
if (!this.elements.editingModusOn) {
|
||||
this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
|
||||
}
|
||||
this.elements.structuralAttrModal.close();
|
||||
});
|
||||
}
|
||||
|
||||
resetStructuralAttrModal() {
|
||||
this.app.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]);
|
||||
this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address');
|
||||
this.elements.textAnnotationInput.value = '';
|
||||
|
||||
this.app.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add');
|
||||
this.toggleEditingAreaStructuralAttrModal('remove');
|
||||
this.elements.editingModusOn = false;
|
||||
this.elements.editedQueryChipElementIndex = undefined;
|
||||
}
|
||||
|
||||
actionButtonInStrucAttrModalHandler(action) {
|
||||
switch (action) {
|
||||
case 'sentence':
|
||||
this.app.submitQueryChipElement('start-sentence', 'Sentence Start', '<s>');
|
||||
this.app.submitQueryChipElement('end-sentence', 'Sentence End', '</s>', null, true);
|
||||
this.elements.structuralAttrModal.close();
|
||||
break;
|
||||
case 'entity':
|
||||
this.app.toggleClass(['entity-builder'], 'hide', 'toggle');
|
||||
this.app.toggleClass(['text-annotation-builder'], 'hide', 'add');
|
||||
break;
|
||||
case 'meta-data':
|
||||
this.app.toggleClass(['text-annotation-builder'], 'hide', 'toggle');
|
||||
this.app.toggleClass(['entity-builder'], 'hide', 'add');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
toggleEditingAreaStructuralAttrModal(action) {
|
||||
// If the user edits a query chip element, the corresponding editing area is displayed and the other areas are hidden or disabled.
|
||||
this.app.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action);
|
||||
}
|
||||
|
||||
textAnnotationSubmitHandler() {
|
||||
let noValueMetadataMessage = document.querySelector('#corpus-analysis-concordance-no-value-metadata-message');
|
||||
let textAnnotationSubmit = document.querySelector('#corpus-analysis-concordance-text-annotation-submit');
|
||||
let textAnnotationInput = document.querySelector('#corpus-analysis-concordance-text-annotation-input');
|
||||
let textAnnotationOptions = document.querySelector('#corpus-analysis-concordance-text-annotation-options');
|
||||
|
||||
if (textAnnotationInput.value === '') {
|
||||
textAnnotationSubmit.classList.add('red');
|
||||
noValueMetadataMessage.classList.remove('hide');
|
||||
setTimeout(() => {
|
||||
textAnnotationSubmit.classList.remove('red');
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
noValueMetadataMessage.classList.add('hide');
|
||||
}, 3000);
|
||||
} else {
|
||||
let queryText = `:: match.text_${textAnnotationOptions.value}="${textAnnotationInput.value}"`;
|
||||
this.app.submitQueryChipElement('text-annotation', `${textAnnotationOptions.value}=${textAnnotationInput.value}`, queryText, null, false, true);
|
||||
this.elements.structuralAttrModal.close();
|
||||
}
|
||||
}
|
||||
|
||||
editStartEntityChipElement(queryChipElement) {
|
||||
this.elements.structuralAttrModal.open();
|
||||
this.app.toggleClass(['entity-builder'], 'hide', 'remove');
|
||||
this.toggleEditingAreaStructuralAttrModal('add');
|
||||
let entType = queryChipElement.dataset.query.replace(/<ent_type="|">/g, '');
|
||||
let isEnglishEntType = this.elements.englishEntTypeSelection.querySelector(`option[value=${entType}]`) !== null;
|
||||
let selection = isEnglishEntType ? this.elements.englishEntTypeSelection : this.elements.germanEntTypeSelection;
|
||||
this.app.resetMaterializeSelection([selection], entType);
|
||||
}
|
||||
|
||||
editTextAnnotationChipElement(queryChipElement) {
|
||||
this.elements.structuralAttrModal.open();
|
||||
this.app.toggleClass(['text-annotation-builder'], 'hide', 'remove');
|
||||
this.toggleEditingAreaStructuralAttrModal('add');
|
||||
let [textAnnotationSelection, textAnnotationContent] = queryChipElement.dataset.query
|
||||
.replace(/:: ?match\.text_|"|"/g, '')
|
||||
.split('=');
|
||||
this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection);
|
||||
this.elements.textAnnotationInput.value = textAnnotationContent;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,343 @@
|
||||
nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions = class TokenAttributeBuilderFunctions {
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
this.elements = app.elements;
|
||||
|
||||
this.elements.positionalAttrSelection.addEventListener('change', () => {
|
||||
this.preparePositionalAttrModal();
|
||||
});
|
||||
|
||||
// Options for positional attribute selection
|
||||
document.querySelectorAll('.positional-attr-options-action-button[data-options-action]').forEach(button => {
|
||||
button.addEventListener('click', () => {this.actionButtonInOptionSectionHandler(button.dataset.optionsAction);});
|
||||
});
|
||||
|
||||
this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
|
||||
|
||||
this.elements.positionalAttrModal = M.Modal.init(
|
||||
document.querySelector('#corpus-analysis-concordance-positional-attr-modal'),
|
||||
{
|
||||
onOpenStart: () => {
|
||||
this.preparePositionalAttrModal();
|
||||
},
|
||||
onCloseStart: () => {
|
||||
this.resetPositionalAttrModal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
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.elements.tokenBuilderContent.innerHTML = '';
|
||||
this.app.toggleClass(['input-field-options'], 'hide', 'remove');
|
||||
this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
|
||||
this.elements.ignoreCaseCheckbox.checked = false;
|
||||
this.elements.editingModusOn = false;
|
||||
this.elements.editedQueryChipElementIndex = undefined;
|
||||
}
|
||||
|
||||
actionButtonInOptionSectionHandler(elem) {
|
||||
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
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 'wildcard-char':
|
||||
input.value += '.';
|
||||
break;
|
||||
case 'and':
|
||||
this.conditionHandler('and');
|
||||
break;
|
||||
case 'or':
|
||||
this.conditionHandler('or');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.optionToggleHandler();
|
||||
}
|
||||
|
||||
characterIncidenceModifierHandler(elem) {
|
||||
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
input.value += elem.dataset.token;
|
||||
}
|
||||
|
||||
characterNMSubmitHandler(modalId) {
|
||||
let modal = document.querySelector(`#${modalId}`);
|
||||
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;
|
||||
input_m = input_m !== undefined ? ',' + input_m.value : '';
|
||||
let input = `${input_n}${input_m}`;
|
||||
|
||||
let instance = M.Modal.getInstance(modal);
|
||||
instance.close();
|
||||
let tokenInput = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
tokenInput.value += '{' + input + '}';
|
||||
}
|
||||
|
||||
conditionHandler(conditionText) {
|
||||
let tokenQueryTemplateClone = this.elements.tokenQueryTemplate.content.cloneNode(true);
|
||||
tokenQueryTemplateClone.querySelector('.token-query-template-content').appendChild(this.elements.tokenBuilderContent.firstElementChild);
|
||||
let notSelectedButton = tokenQueryTemplateClone.querySelector(`[data-condition-pretty-text]:not([data-condition-pretty-text="${conditionText}"])`);
|
||||
let deleteButton = tokenQueryTemplateClone.querySelector(`[data-token-query-content-action="delete"]`);
|
||||
deleteButton.addEventListener('click', (event) => {
|
||||
this.deleteTokenQueryRow(event.target);
|
||||
});
|
||||
notSelectedButton.parentNode.removeChild(notSelectedButton);
|
||||
this.elements.tokenQuery.appendChild(tokenQueryTemplateClone);
|
||||
|
||||
// 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') {
|
||||
switch (this.elements.positionalAttrSelection.value) {
|
||||
case 'english-pos' || 'german-pos':
|
||||
optionDeleteList.push('english-pos', 'german-pos');
|
||||
break;
|
||||
default:
|
||||
optionDeleteList.push(this.elements.positionalAttrSelection.value);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
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>
|
||||
`;
|
||||
this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
|
||||
M.FormSelect.init(this.elements.positionalAttrSelection);
|
||||
}
|
||||
let lastTokenQueryRow = this.elements.tokenQuery.lastElementChild;
|
||||
if(lastTokenQueryRow.querySelector('[data-kind-of-token="word"]') || lastTokenQueryRow.querySelector('[data-kind-of-token="lemma"]')) {
|
||||
this.appendIgnoreCaseCheckbox(lastTokenQueryRow.querySelector('.token-query-template-content'), this.elements.ignoreCaseCheckbox.checked);
|
||||
}
|
||||
this.elements.ignoreCaseCheckbox.checked = false;
|
||||
this.setTokenSelection(selectionDefault, optionDeleteList);
|
||||
}
|
||||
|
||||
deleteTokenQueryRow(deleteButton) {
|
||||
let deletedRow = deleteButton.closest('.row');
|
||||
let condition = deletedRow.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
|
||||
if (condition === 'and') {
|
||||
let kindOfToken = deletedRow.querySelector('[data-kind-of-token]').dataset.kindOfToken;
|
||||
switch (kindOfToken) {
|
||||
case 'english-pos' || 'german-pos':
|
||||
this.createOptionElementForPosAttrSelection('english-pos');
|
||||
this.createOptionElementForPosAttrSelection('german-pos');
|
||||
break;
|
||||
default:
|
||||
this.createOptionElementForPosAttrSelection(kindOfToken);
|
||||
break;
|
||||
}
|
||||
M.FormSelect.init(this.elements.positionalAttrSelection);
|
||||
}
|
||||
deletedRow.remove();
|
||||
}
|
||||
|
||||
createOptionElementForPosAttrSelection(kindOfToken) {
|
||||
let option = document.createElement('option');
|
||||
option.value = kindOfToken;
|
||||
option.text = kindOfToken;
|
||||
this.elements.positionalAttrSelection.appendChild(option);
|
||||
}
|
||||
|
||||
appendIgnoreCaseCheckbox(parentElement, checked = false) {
|
||||
let ignoreCaseCheckboxClone = document.querySelector('#ignore-case-checkbox-template').content.cloneNode(true);
|
||||
parentElement.appendChild(ignoreCaseCheckboxClone);
|
||||
M.Tooltip.init(parentElement.querySelectorAll('.tooltipped'));
|
||||
if (checked) {
|
||||
parentElement.querySelector('input[type="checkbox"]').checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
setTokenSelection(selection, optionDeleteList) {
|
||||
optionDeleteList.forEach(option => {
|
||||
if (this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`) !== null) {
|
||||
this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
|
||||
}
|
||||
});
|
||||
|
||||
this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
|
||||
this.preparePositionalAttrModal();
|
||||
}
|
||||
|
||||
preparePositionalAttrModal() {
|
||||
let selection = this.elements.positionalAttrSelection.value;
|
||||
if (selection !== 'empty-token') {
|
||||
let selectionTemplate = document.querySelector(`.token-builder-section[data-token-builder-section="${selection}"]`);
|
||||
let selectionTemplateClone = selectionTemplate.content.cloneNode(true);
|
||||
|
||||
this.elements.tokenBuilderContent.innerHTML = '';
|
||||
this.elements.tokenBuilderContent.appendChild(selectionTemplateClone);
|
||||
if (this.elements.tokenBuilderContent.querySelector('select') !== null) {
|
||||
let selectElement = this.elements.tokenBuilderContent.querySelector('select');
|
||||
M.FormSelect.init(selectElement);
|
||||
selectElement.addEventListener('change', () => {this.optionToggleHandler();});
|
||||
} else {
|
||||
this.elements.tokenBuilderContent.querySelector('input').addEventListener('input', () => {this.optionToggleHandler();});
|
||||
}
|
||||
}
|
||||
this.optionToggleHandler();
|
||||
|
||||
if (selection === 'word' || selection === 'lemma') {
|
||||
this.app.toggleClass(['input-field-options'], 'hide', 'remove');
|
||||
} else if (selection === 'empty-token'){
|
||||
this.addTokenToQuery();
|
||||
} else {
|
||||
this.app.toggleClass(['input-field-options'], 'hide', 'add');
|
||||
}
|
||||
}
|
||||
|
||||
tokenInputCheck(elem) {
|
||||
return elem.querySelector('select') !== null ? elem.querySelector('select') : elem.querySelector('input');
|
||||
}
|
||||
|
||||
optionToggleHandler() {
|
||||
let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
if (input.value === '' && this.elements.editingModusOn === false) {
|
||||
this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
|
||||
} else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) {
|
||||
this.app.toggleClass(['and'], 'disabled', 'add');
|
||||
this.app.toggleClass(['or'], 'disabled', 'remove');
|
||||
} else {
|
||||
this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
|
||||
}
|
||||
}
|
||||
|
||||
addTokenToQuery() {
|
||||
let tokenQueryPrettyText = '';
|
||||
let tokenQueryCQLText = '';
|
||||
let input;
|
||||
let kindOfToken = this.kindOfTokenCheck(this.elements.positionalAttrSelection.value);
|
||||
|
||||
// Takes all rows of the token query (if there is a query concatenation).
|
||||
// Adds their contents to tokenQueryPrettyText and tokenQueryCQLText, which will later be expanded with the current input field.
|
||||
let tokenQueryRows = this.elements.tokenQuery.querySelectorAll('.row');
|
||||
tokenQueryRows.forEach(row => {
|
||||
let ignoreCaseCheckbox = row.querySelector('input[type="checkbox"]');
|
||||
let c = ignoreCaseCheckbox !== null && ignoreCaseCheckbox.checked ? ' %c' : '';
|
||||
let tokenQueryRowInput = this.tokenInputCheck(row.querySelector('.token-query-template-content'));
|
||||
let tokenQueryKindOfToken = this.kindOfTokenCheck(tokenQueryRowInput.closest('.input-field').dataset.kindOfToken);
|
||||
let tokenConditionPrettyText = row.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
|
||||
let tokenConditionCQLText = row.querySelector('[data-condition-cql-text]').dataset.conditionCqlText;
|
||||
tokenQueryPrettyText += `${tokenQueryKindOfToken}=${tokenQueryRowInput.value}${c} ${tokenConditionPrettyText} `;
|
||||
tokenQueryCQLText += `${tokenQueryKindOfToken}="${tokenQueryRowInput.value}"${c} ${tokenConditionCQLText}`;
|
||||
});
|
||||
if (kindOfToken === 'empty-token') {
|
||||
tokenQueryPrettyText += 'empty token';
|
||||
} else {
|
||||
let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
|
||||
input = this.tokenInputCheck(this.elements.tokenBuilderContent);
|
||||
tokenQueryPrettyText += `${kindOfToken}=${input.value}${c}`;
|
||||
tokenQueryCQLText += `${kindOfToken}="${input.value}"${c}`;
|
||||
}
|
||||
// isTokenQueryInvalid looks if a valid value is passed. If the input fields/dropdowns are empty (isTokenQueryInvalid === true), no token is added.
|
||||
if (this.elements.positionalAttrSelection.value !== 'empty-token' && input.value === '') {
|
||||
this.disableTokenSubmit();
|
||||
} else {
|
||||
tokenQueryCQLText = `[${tokenQueryCQLText}]`;
|
||||
this.app.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true);
|
||||
this.elements.positionalAttrModal.close();
|
||||
}
|
||||
}
|
||||
|
||||
kindOfTokenCheck(kindOfToken) {
|
||||
return kindOfToken === 'english-pos' || kindOfToken === 'german-pos' ? 'pos' : kindOfToken;
|
||||
}
|
||||
|
||||
disableTokenSubmit() {
|
||||
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);
|
||||
}
|
||||
|
||||
editTokenChipElement(queryElementsContent) {
|
||||
this.elements.positionalAttrModal.open();
|
||||
queryElementsContent.forEach((queryElement) => {
|
||||
this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
|
||||
this.preparePositionalAttrModal();
|
||||
switch (queryElement.tokenAttr) {
|
||||
case 'word':
|
||||
case 'lemma':
|
||||
this.elements.tokenBuilderContent.querySelector('input').value = queryElement.tokenValue;
|
||||
break;
|
||||
case 'english-pos':
|
||||
// English-pos is selected by default. Then it is checked whether the passed token value occurs in the english-pos selection. If not, the selection is reseted and changed to german-pos.
|
||||
let selection = this.elements.tokenBuilderContent.querySelector('select');
|
||||
queryElement.tokenAttr = selection.querySelector(`option[value=${queryElement.tokenValue}]`) ? 'english-pos' : 'german-pos';
|
||||
this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
|
||||
this.preparePositionalAttrModal();
|
||||
this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
|
||||
break;
|
||||
case 'simple_pos':
|
||||
this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (queryElement.ignoreCase) {
|
||||
this.elements.ignoreCaseCheckbox.checked = true;
|
||||
}
|
||||
if (queryElement.condition !== undefined) {
|
||||
this.conditionHandler(queryElement.condition, true);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
prepareTokenQueryElementsContent(queryChipElement) {
|
||||
//this regex searches for word or lemma or pos or simple_pos="any string within single or double quotes" followed by one or no ignore case markers, followed by one or no condition characters.
|
||||
let regex = new RegExp('(word|lemma|pos|simple_pos)=(("[^"]+")|(\\\\u0027[^\\\\u0027]+\\\\u0027)) ?(%c)? ?(\\&|\\|)?', 'gm');
|
||||
let m;
|
||||
let queryElementsContent = [];
|
||||
while ((m = regex.exec(queryChipElement.dataset.query)) !== null) {
|
||||
// this is necessary to avoid infinite loops with zero-width matches
|
||||
if (m.index === regex.lastIndex) {
|
||||
regex.lastIndex++;
|
||||
}
|
||||
let tokenAttr = m[1];
|
||||
// Passes english-pos by default so that the template is added. In editTokenChipElement it is then checked whether it is english-pos or german-pos.
|
||||
if (tokenAttr === 'pos') {
|
||||
tokenAttr = 'english-pos';
|
||||
}
|
||||
let tokenValue = m[2].replace(/"|'/g, '');
|
||||
let ignoreCase = false;
|
||||
let condition = undefined;
|
||||
m.forEach((match) => {
|
||||
if (match === "%c") {
|
||||
ignoreCase = true;
|
||||
} else if (match === "&") {
|
||||
condition = "and";
|
||||
} else if (match === "|") {
|
||||
condition = "or";
|
||||
}
|
||||
});
|
||||
queryElementsContent.push({tokenAttr: tokenAttr, tokenValue: tokenValue, ignoreCase: ignoreCase, condition: condition});
|
||||
}
|
||||
return queryElementsContent;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
class CorpusAnalysisReader {
|
||||
nopaque.corpus_analysis.ReaderExtension = class ReaderExtension {
|
||||
name = 'Reader';
|
||||
|
||||
constructor(app) {
|
||||
@ -1,4 +1,4 @@
|
||||
class CorpusAnalysisStaticVisualization {
|
||||
nopaque.corpus_analysis.StaticVisualizationExtension = class StaticVisualizationExtension {
|
||||
name = 'Static Visualization (beta)';
|
||||
|
||||
constructor(app) {
|
||||
@ -76,28 +76,28 @@
|
||||
{%- assets
|
||||
filters='rjsmin',
|
||||
output='gen/corpus-analysis.%(version)s.js',
|
||||
'js/CorpusAnalysis/index.js',
|
||||
'js/CorpusAnalysis/cqi/index.js',
|
||||
'js/CorpusAnalysis/cqi/constants.js',
|
||||
'js/CorpusAnalysis/cqi/errors.js',
|
||||
'js/CorpusAnalysis/cqi/status.js',
|
||||
'js/CorpusAnalysis/cqi/api/index.js',
|
||||
'js/CorpusAnalysis/cqi/api/client.js',
|
||||
'js/CorpusAnalysis/cqi/models/index.js',
|
||||
'js/CorpusAnalysis/cqi/models/resource.js',
|
||||
'js/CorpusAnalysis/cqi/models/attributes.js',
|
||||
'js/CorpusAnalysis/cqi/models/subcorpora.js',
|
||||
'js/CorpusAnalysis/cqi/models/corpora.js',
|
||||
'js/CorpusAnalysis/cqi/client.js',
|
||||
'js/CorpusAnalysis/query-builder/index.js',
|
||||
'js/CorpusAnalysis/query-builder/element-references.js',
|
||||
'js/CorpusAnalysis/query-builder/general-query-builder-functions.js',
|
||||
'js/CorpusAnalysis/query-builder/structural-attribute-builder-functions.js',
|
||||
'js/CorpusAnalysis/query-builder/token-attribute-builder-functions.js',
|
||||
'js/CorpusAnalysis/CorpusAnalysisApp.js',
|
||||
'js/CorpusAnalysis/CorpusAnalysisConcordance.js',
|
||||
'js/CorpusAnalysis/CorpusAnalysisReader.js',
|
||||
'js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js'
|
||||
'js/corpus-analysis/index.js',
|
||||
'js/corpus-analysis/cqi/index.js',
|
||||
'js/corpus-analysis/cqi/constants.js',
|
||||
'js/corpus-analysis/cqi/errors.js',
|
||||
'js/corpus-analysis/cqi/status.js',
|
||||
'js/corpus-analysis/cqi/api/index.js',
|
||||
'js/corpus-analysis/cqi/api/client.js',
|
||||
'js/corpus-analysis/cqi/models/index.js',
|
||||
'js/corpus-analysis/cqi/models/resource.js',
|
||||
'js/corpus-analysis/cqi/models/attributes.js',
|
||||
'js/corpus-analysis/cqi/models/subcorpora.js',
|
||||
'js/corpus-analysis/cqi/models/corpora.js',
|
||||
'js/corpus-analysis/cqi/client.js',
|
||||
'js/corpus-analysis/query-builder/index.js',
|
||||
'js/corpus-analysis/query-builder/element-references.js',
|
||||
'js/corpus-analysis/query-builder/query-builder.js',
|
||||
'js/corpus-analysis/query-builder/structural-attribute-builder-functions.js',
|
||||
'js/corpus-analysis/query-builder/token-attribute-builder-functions.js',
|
||||
'js/corpus-analysis/app.js',
|
||||
'js/corpus-analysis/concordance-extension.js',
|
||||
'js/corpus-analysis/reader-extension.js',
|
||||
'js/corpus-analysis/static-visualization-extension.js'
|
||||
%}
|
||||
<script src="{{ ASSET_URL }}"></script>
|
||||
{%- endassets %}
|
||||
|
||||
@ -1,29 +1,21 @@
|
||||
<ul class="sidenav sidenav-fixed" id="sidenav">
|
||||
<li>
|
||||
<div class="user-view" style="padding-top: 1px; padding-left: 20px !important; padding-right: 20px !important; height: 112px;">
|
||||
<div class="user-view">
|
||||
<div class="background primary-color"></div>
|
||||
<div class="row">
|
||||
<div class="col s5">
|
||||
<a href="{{ url_for('users.user', user_id=current_user.id) }}">
|
||||
<img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="user-image" class="circle responsive-img" style="height:80%; margin-top: 22px;">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col s5" style="word-wrap: break-word; margin-left:-10px;">
|
||||
<span class="white-text name">
|
||||
{% if current_user.username|length > 18 %}
|
||||
{{ current_user.username[:15] + '...' }}
|
||||
<span class="white-text name">
|
||||
{% if current_user.username|length > 32 %}
|
||||
{{ current_user.username[:29] + '...' }}
|
||||
{% else %}
|
||||
{{ current_user.username }}
|
||||
{{ current_user.username }}
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="white-text email" style="padding-top:5px;">
|
||||
</span>
|
||||
<span class="white-text email">
|
||||
{% if current_user.email|length > 32 %}
|
||||
{{ current_user.email[:29] + '...' }}
|
||||
{% else %}
|
||||
{{ current_user.email }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -128,7 +128,7 @@
|
||||
{# The extension scripts #}
|
||||
{% macro scripts() %}
|
||||
<script>
|
||||
const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
|
||||
const concordanceQueryBuilder = new ConcordanceQueryBuilder();
|
||||
const corpusAnalysisConcordance = new nopaque.corpus_analysis.ConcordanceExtension(corpusAnalysisApp);
|
||||
const concordanceQueryBuilder = new nopaque.corpus_analysis.query_builder.QueryBuilder();
|
||||
</script>
|
||||
{% endmacro %}
|
||||
|
||||
@ -79,6 +79,6 @@
|
||||
{# The extension scripts #}
|
||||
{% macro scripts() %}
|
||||
<script>
|
||||
const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
|
||||
const corpusAnalysisReader = new nopaque.corpus_analysis.ReaderExtension(corpusAnalysisApp);
|
||||
</script>
|
||||
{% endmacro %}
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
|
||||
{% macro scripts() %}
|
||||
<script>
|
||||
const corpusAnalysisStaticVisualization = new CorpusAnalysisStaticVisualization(corpusAnalysisApp);
|
||||
const corpusAnalysisStaticVisualization = new nopaque.corpus_analysis.StaticVisualizationExtension(corpusAnalysisApp);
|
||||
</script>
|
||||
{% endmacro %}
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
|
||||
const corpusAnalysisApp = new nopaque.corpus_analysis.App({{ corpus.hashid|tojson }});
|
||||
</script>
|
||||
|
||||
{{ concordance_extension.scripts() }}
|
||||
|
||||
@ -198,7 +198,7 @@
|
||||
|
||||
function mastodonStatusToElement(status) {
|
||||
let date = new Date(status.created_at).toLocaleString('en-US');
|
||||
let newsElement = Utils.HTMLToElement(
|
||||
let newsElement = nopaque.Utils.HTMLToElement(
|
||||
`
|
||||
<div class="row">
|
||||
<div class="col s11">
|
||||
@ -222,7 +222,7 @@
|
||||
|
||||
function bisBlogsEntryToElement(entry) {
|
||||
let date = new Date(entry.published).toLocaleString('en-US');
|
||||
let newsElement = Utils.HTMLToElement(
|
||||
let newsElement = nopaque.Utils.HTMLToElement(
|
||||
`
|
||||
<div class="row">
|
||||
<div class="col s1">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user