mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 09:15:41 +00:00
972 lines
39 KiB
JavaScript
972 lines
39 KiB
JavaScript
class ConcordanceQueryBuilder {
|
|
|
|
constructor() {
|
|
|
|
|
|
this.elements = {
|
|
|
|
counter: 0,
|
|
yourQueryContent: [],
|
|
queryContent:[],
|
|
concordanceQueryBuilder: document.querySelector('#concordance-query-builder'),
|
|
concordanceQueryBuilderButton: document.querySelector('#concordance-query-builder-button'),
|
|
closeQueryBuilder: document.querySelector('#close-query-builder'),
|
|
queryBuilderTutorialModal: document.querySelector('#query-builder-tutorial-modal'),
|
|
valueValidator: true,
|
|
|
|
//#region QueryBuilder Elements
|
|
|
|
positionalAttrButton: document.querySelector('#positional-attr-button'),
|
|
positionalAttrArea: document.querySelector('#positional-attr'),
|
|
positionalAttr: document.querySelector('#token-attr'),
|
|
structuralAttrButton: document.querySelector('#structural-attr-button'),
|
|
structuralAttrArea: document.querySelector('#structural-attr'),
|
|
queryContainer: document.querySelector('#query-container'),
|
|
buttonPreparer: document.querySelector('#button-preparer'),
|
|
yourQuery: document.querySelector('#your-query'),
|
|
insertQueryButton: document.querySelector('#insert-query-button'),
|
|
queryPreview: document.querySelector('#query-preview'),
|
|
tokenQuery: document.querySelector('#token-query'),
|
|
tokenBuilderContent: document.querySelector('#token-builder-content'),
|
|
tokenSubmitButton: document.querySelector('#token-submit'),
|
|
extFormQuery: document.querySelector('#concordance-extension-form-query'),
|
|
dropButton: '',
|
|
|
|
queryBuilderTutorialInfoIcon: document.querySelector('#query-builder-tutorial-info-icon'),
|
|
tokenTutorialInfoIcon: document.querySelector('#token-tutorial-info-icon'),
|
|
editTokenTutorialInfoIcon: document.querySelector('#edit-options-tutorial-info-icon'),
|
|
structuralAttributeTutorialInfoIcon: document.querySelector('#add-structural-attribute-tutorial-info-icon'),
|
|
generalOptionsQueryBuilderTutorialInfoIcon: document.querySelector('#general-options-query-builder-tutorial-info-icon'),
|
|
|
|
|
|
//#endregion QueryBuilder Elements
|
|
|
|
//#region Strucutral Attributes
|
|
|
|
sentence:document.querySelector('#sentence'),
|
|
entity: document.querySelector('#entity'),
|
|
textAnnotation: document.querySelector('#text-annotation'),
|
|
|
|
entityBuilder: document.querySelector('#entity-builder'),
|
|
englishEntType: document.querySelector('#english-ent-type'),
|
|
germanEntType: document.querySelector('#german-ent-type'),
|
|
emptyEntity: document.querySelector('#empty-entity'),
|
|
entityAnyType: false,
|
|
|
|
textAnnotationBuilder: document.querySelector('#text-annotation-builder'),
|
|
textAnnotationOptions: document.querySelector('#text-annotation-options'),
|
|
textAnnotationInput: document.querySelector('#text-annotation-input'),
|
|
textAnnotationSubmit: document.querySelector('#text-annotation-submit'),
|
|
noValueMetadataMessage: document.querySelector('#no-value-metadata-message'),
|
|
//#endregion Structural Attributes
|
|
|
|
//#region Token Attributes
|
|
tokenQueryFilled: false,
|
|
|
|
lemma: document.querySelector('#lemma'),
|
|
emptyToken: document.querySelector('#empty-token'),
|
|
word: document.querySelector('#word'),
|
|
lemma: document.querySelector('#lemma'),
|
|
pos: document.querySelector('#pos'),
|
|
simplePosButton: document.querySelector('#simple-pos-button'),
|
|
incidenceModifiers: document.querySelector('[data-target="incidence-modifiers"]'),
|
|
or: document.querySelector('#or'),
|
|
and: document.querySelector('#and'),
|
|
|
|
//#region Word and Lemma Elements
|
|
wordBuilder: document.querySelector('#word-builder'),
|
|
lemmaBuilder: document.querySelector('#lemma-builder'),
|
|
inputOptions: document.querySelector('#input-options'),
|
|
incidenceModifiersButton: document.querySelector('#incidence-modifiers-button'),
|
|
conditionContainer: document.querySelector('#condition-container'),
|
|
wordInput: document.querySelector('#word-input'),
|
|
lemmaInput: document.querySelector('#lemma-input'),
|
|
ignoreCaseCheckbox : document.querySelector('#ignore-case-checkbox'),
|
|
ignoreCase: document.querySelector('input[type="checkbox"]'),
|
|
wildcardChar: document.querySelector('#wildcard-char'),
|
|
optionGroup: document.querySelector('#option-group'),
|
|
//#endregion Word and Lemma Elements
|
|
|
|
//#region posBuilder Elements
|
|
englishPosBuilder: document.querySelector('#english-pos-builder'),
|
|
englishPos: document.querySelector('#english-pos'),
|
|
germanPosBuilder: document.querySelector('#german-pos-builder'),
|
|
germanPos: document.querySelector('#german-pos'),
|
|
//#endregion posBuilder Elements
|
|
|
|
//#region simple_posBuilder Elements
|
|
simplePosBuilder: document.querySelector('#simplepos-builder'),
|
|
simplePos: document.querySelector('#simple-pos'),
|
|
//#endregion simple_posBuilder Elements
|
|
|
|
//#region incidence modifiers
|
|
oneOrMore: document.querySelector('#one-or-more'),
|
|
zeroOrMore: document.querySelector('#zero-or-more'),
|
|
zeroOrOne: document.querySelector('#zero-or-one'),
|
|
exactlyN: document.querySelector('#exactlyN'),
|
|
betweenNM: document.querySelector('#betweenNM'),
|
|
nInput: document.querySelector('#n-input'),
|
|
nSubmit: document.querySelector('#n-submit'),
|
|
nmInput: document.querySelector('#n-m-input'),
|
|
mInput: document.querySelector('#m-input'),
|
|
nmSubmit: document.querySelector('#n-m-submit'),
|
|
//#endregion incidence modifiers
|
|
|
|
cancelBool: false,
|
|
noValueMessage: document.querySelector('#no-value-message'),
|
|
//#endregion Token Attributes
|
|
}
|
|
|
|
this.elements.closeQueryBuilder.addEventListener('click', () => {this.closeQueryBuilderModal(this.elements.concordanceQueryBuilder);});
|
|
this.elements.concordanceQueryBuilderButton.addEventListener('click', () => {this.clearAll();});
|
|
this.elements.insertQueryButton.addEventListener('click', () => {this.insertQuery();});
|
|
this.elements.positionalAttrButton.addEventListener('click', () => {this.showPositionalAttrArea();});
|
|
this.elements.structuralAttrButton.addEventListener('click', () => {this.showStructuralAttrArea();});
|
|
|
|
//#region Structural Attribute Event Listeners
|
|
this.elements.sentence.addEventListener('click', () => {this.addSentence();});
|
|
this.elements.entity.addEventListener('click', () => {this.addEntity();});
|
|
this.elements.textAnnotation.addEventListener('click', () => {this.addTextAnnotation();});
|
|
|
|
this.elements.englishEntType.addEventListener('change', () => {this.englishEntTypeHandler();});
|
|
this.elements.germanEntType.addEventListener('change', () => {this.germanEntTypeHandler();});
|
|
this.elements.emptyEntity.addEventListener('click', () => {this.emptyEntityButton();});
|
|
|
|
this.elements.textAnnotationSubmit.addEventListener('click', () => {this.textAnnotationSubmitHandler();});
|
|
|
|
//#endregion
|
|
|
|
//#region Token Attribute Event Listeners
|
|
this.elements.queryBuilderTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#query-builder-tutorial-start');});
|
|
this.elements.tokenTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#add-new-token-tutorial');});
|
|
this.elements.editTokenTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#edit-options-tutorial');});
|
|
this.elements.structuralAttributeTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#add-structural-attribute-tutorial');});
|
|
this.elements.generalOptionsQueryBuilderTutorialInfoIcon.addEventListener('click', () => {this.tutorialIconHandler('#general-options-query-builder');});
|
|
|
|
this.elements.positionalAttr.addEventListener('change', () => {this.tokenTypeSelector();});
|
|
this.elements.tokenSubmitButton.addEventListener('click', () => {this.addToken();});
|
|
|
|
|
|
this.elements.ignoreCase.addEventListener('change', () => {this.inputOptionHandler(this.elements.ignoreCase);});
|
|
this.elements.wildcardChar.addEventListener('click', () => {this.inputOptionHandler(this.elements.wildcardChar);});
|
|
this.elements.optionGroup.addEventListener('click', () => {this.inputOptionHandler(this.elements.optionGroup);});
|
|
|
|
this.elements.oneOrMore.addEventListener('click', () => {this.incidenceModifiersHandler(this.elements.oneOrMore);});
|
|
this.elements.zeroOrMore.addEventListener('click', () => {this.incidenceModifiersHandler(this.elements.zeroOrMore);});
|
|
this.elements.zeroOrOne.addEventListener('click', () => {this.incidenceModifiersHandler(this.elements.zeroOrOne);});
|
|
this.elements.nSubmit.addEventListener('click', () => {this.nSubmitHandler();});
|
|
this.elements.nmSubmit.addEventListener('click', () => {this.nmSubmitHandler();});
|
|
|
|
this.elements.or.addEventListener('click', () => {this.orHandler();});
|
|
this.elements.and.addEventListener('click', () => {this.andHandler();});
|
|
|
|
|
|
//#endregion Token Attribute Event Listeners
|
|
|
|
}
|
|
|
|
|
|
|
|
// ##########################################################################
|
|
// #################### General Functions ###################################
|
|
// ##########################################################################
|
|
|
|
//#region General Functions
|
|
|
|
closeQueryBuilderModal(closeInstance) {
|
|
let instance = M.Modal.getInstance(closeInstance);
|
|
instance.close();
|
|
}
|
|
|
|
showPositionalAttrArea() {
|
|
this.elements.positionalAttrArea.classList.remove('hide');
|
|
this.elements.wordBuilder.classList.remove('hide');
|
|
this.elements.inputOptions.classList.remove('hide');
|
|
this.elements.incidenceModifiersButton.classList.remove('hide');
|
|
this.elements.conditionContainer.classList.remove('hide');
|
|
this.elements.ignoreCaseCheckbox.classList.remove('hide');
|
|
this.elements.structuralAttrArea.classList.add('hide');
|
|
this.elements.lemmaBuilder.classList.add('hide');
|
|
this.elements.englishPosBuilder.classList.add('hide');
|
|
this.elements.germanPosBuilder.classList.add('hide');
|
|
this.elements.simplePosBuilder.classList.add('hide');
|
|
|
|
this.elements.tokenQueryFilled = false;
|
|
|
|
window.location.href = '#token-builder-content';
|
|
|
|
// Resets materialize select field to default value
|
|
let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr);
|
|
SelectInstance.input.value = 'word';
|
|
this.elements.positionalAttr.value = 'word';
|
|
}
|
|
|
|
showStructuralAttrArea() {
|
|
this.elements.positionalAttrArea.classList.add('hide');
|
|
this.elements.structuralAttrArea.classList.remove('hide');
|
|
}
|
|
|
|
buttonfactory(dataType, prettyText, queryText) {
|
|
window.location.href = '#query-container';
|
|
this.elements.counter += 1;
|
|
queryText = encodeURI(queryText);
|
|
let buttonElement = Utils.elementFromString(
|
|
`
|
|
<div class='chip' data-type='${dataType}' data-query='${queryText}' draggable='true' style='cursor:pointer;' ondragstart='concordanceQueryBuilder.dragStartHandler(event)' ondragend='concordanceQueryBuilder.dragEndHandler(event)'>
|
|
${prettyText}
|
|
<i class='material-icons close'>close</i>
|
|
</div>
|
|
`
|
|
);
|
|
buttonElement.addEventListener('click', () => {this.deleteAttr(buttonElement);});
|
|
|
|
// Ensures that metadata is always at the end of the query:
|
|
if (this.elements.yourQuery.lastChild === null || this.elements.yourQuery.lastChild.dataset.type !== 'text-annotation') {
|
|
this.elements.yourQuery.appendChild(buttonElement);
|
|
} else if (this.elements.yourQuery.lastChild.dataset.type === 'text-annotation') {
|
|
this.elements.yourQuery.insertBefore(buttonElement, this.elements.yourQuery.lastChild);
|
|
}
|
|
this.elements.queryContainer.classList.remove('hide');
|
|
this.queryPreviewBuilder();
|
|
|
|
// Opens a hint about the possible functions for editing the query when the first chip is added. It is displayed for 5 seconds and then deleted.
|
|
if (this.elements.yourQuery.classList.contains('tooltipped')) {
|
|
let tooltipInstance = M.Tooltip.getInstance(this.elements.yourQuery);
|
|
tooltipInstance.tooltipEl.style.background = '#98ACD2';
|
|
tooltipInstance.tooltipEl.style.borderTop = 'solid 4px #0064A3'
|
|
tooltipInstance.tooltipEl.style.padding = '10px';
|
|
tooltipInstance.tooltipEl.style.color = 'black';
|
|
|
|
if (tooltipInstance !== undefined) {
|
|
setTimeout(() => {
|
|
tooltipInstance.open();
|
|
setTimeout(() => {
|
|
tooltipInstance.destroy();
|
|
}, 5000);
|
|
}, 500);
|
|
}
|
|
this.elements.yourQuery.classList.remove('tooltipped');
|
|
}
|
|
}
|
|
|
|
//#region Drag&Drop Events
|
|
dragStartHandler(event) {
|
|
// Creates element with the class 'target' and all necessary drop functions, in which drop content can be released
|
|
this.elements.dropButton = event.target;
|
|
let targetChip = `
|
|
<div class='chip target' ondragover='concordanceQueryBuilder.dragOverHandler(event)' ondragenter='concordanceQueryBuilder.dragEnterHandler(event)' ondragleave='concordanceQueryBuilder.dragLeaveHandler(event)' ondrop='concordanceQueryBuilder.dropHandler(event)'>
|
|
Drop here
|
|
</div>
|
|
`.trim();
|
|
// selects all nodes without target class
|
|
let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)');
|
|
|
|
// Adds a target chip in front of all draggable childnodes
|
|
setTimeout(() => {
|
|
for (let element of childNodes) {
|
|
if (element === this.elements.dropButton) {
|
|
// If the dragged element is not at the very end, a target chip is also inserted at the end
|
|
if (childNodes[childNodes.length - 1] !== element) {
|
|
childNodes[childNodes.length - 1].insertAdjacentHTML('afterend', targetChip);
|
|
}
|
|
} else if (element === this.elements.dropButton.nextSibling) {
|
|
continue;
|
|
} else {
|
|
element.insertAdjacentHTML('beforebegin', targetChip)
|
|
}
|
|
}
|
|
},0);
|
|
}
|
|
|
|
dragOverHandler(event) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
dragEnterHandler(event) {
|
|
event.preventDefault();
|
|
event.target.style.borderStyle = 'solid dotted';
|
|
}
|
|
|
|
dragLeaveHandler(event) {
|
|
event.preventDefault();
|
|
event.target.style.borderStyle = 'hidden';
|
|
}
|
|
|
|
dragEndHandler(event) {
|
|
let targets = document.querySelectorAll('.target');
|
|
for (let target of targets) {
|
|
target.remove();
|
|
}
|
|
}
|
|
|
|
dropHandler(event) {
|
|
let dropzone = event.target;
|
|
dropzone.parentElement.replaceChild(this.elements.dropButton, dropzone);
|
|
this.queryPreviewBuilder();
|
|
}
|
|
//#endregion Drag&Drop Events
|
|
|
|
queryPreviewBuilder() {
|
|
this.elements.yourQueryContent = [];
|
|
for (let element of this.elements.yourQuery.childNodes) {
|
|
let queryElement = decodeURI(element.dataset.query);
|
|
if (queryElement.includes('<')) {
|
|
queryElement = queryElement.replace('<', '<');
|
|
}
|
|
if (queryElement.includes('>')) {
|
|
queryElement = queryElement.replace('>', '>');
|
|
}
|
|
if (queryElement !== 'undefined') {
|
|
this.elements.yourQueryContent.push(queryElement);
|
|
}
|
|
}
|
|
|
|
let queryString = this.elements.yourQueryContent.join(' ');
|
|
queryString += ';';
|
|
this.elements.queryPreview.innerHTML = queryString;
|
|
}
|
|
|
|
|
|
deleteAttr(attr) {
|
|
this.elements.yourQuery.removeChild(attr);
|
|
|
|
this.elements.counter -= 1;
|
|
if (this.elements.counter === 0) {
|
|
this.elements.queryContainer.classList.add('hide');
|
|
}
|
|
|
|
this.queryPreviewBuilder();
|
|
}
|
|
|
|
insertQuery() {
|
|
this.elements.yourQueryContent = [];
|
|
this.validateValue();
|
|
if (this.elements.valueValidator === true) {
|
|
for (let element of this.elements.yourQuery.childNodes) {
|
|
let queryElement = decodeURI(element.dataset.query);
|
|
if (queryElement !== 'undefined') {
|
|
this.elements.yourQueryContent.push(queryElement);
|
|
}
|
|
}
|
|
|
|
let queryString = this.elements.yourQueryContent.join(' ');
|
|
queryString += ';';
|
|
|
|
this.elements.concordanceQueryBuilder.classList.add('modal-close');
|
|
this.elements.extFormQuery.value = queryString;
|
|
}
|
|
}
|
|
|
|
validateValue() {
|
|
this.elements.valueValidator = true;
|
|
let sentenceCounter = 0;
|
|
let sentenceEndCounter = 0;
|
|
let entityCounter = 0;
|
|
let entityEndCounter = 0;
|
|
for (let element of this.elements.yourQuery.childNodes) {
|
|
if (element.dataset.type === 'start-sentence') {
|
|
sentenceCounter += 1;
|
|
}else if (element.dataset.type === 'end-sentence') {
|
|
sentenceEndCounter += 1;
|
|
}else if (element.dataset.type === 'start-entity' || element.dataset.type === 'start-empty-entity') {
|
|
entityCounter += 1;
|
|
}else if (element.dataset.type === 'end-entity') {
|
|
entityEndCounter += 1;
|
|
}
|
|
}
|
|
if (sentenceCounter !== sentenceEndCounter) {
|
|
app.flash('Please add a closing sentence tag', 'error');
|
|
this.elements.valueValidator = false;
|
|
}
|
|
if (entityCounter !== entityEndCounter) {
|
|
app.flash('Please add a closing entity tag', 'error');
|
|
this.elements.valueValidator = false;
|
|
}
|
|
}
|
|
|
|
clearAll() {
|
|
// Everything is reset. After 5 seconds for 5 seconds (with 'instance'), a message is displayed indicating that further information can be obtained via the question mark icon
|
|
let instance = M.Tooltip.getInstance(this.elements.queryBuilderTutorialInfoIcon);
|
|
|
|
this.hideEverything();
|
|
this.elements.counter = 0;
|
|
this.elements.concordanceQueryBuilder.classList.remove('modal-close');
|
|
this.elements.positionalAttrArea.classList.add('hide');
|
|
this.elements.structuralAttrArea.classList.add('hide');
|
|
this.elements.yourQuery.innerHTML = '';
|
|
this.elements.queryContainer.classList.add('hide');
|
|
|
|
instance.tooltipEl.style.background = '#98ACD2';
|
|
instance.tooltipEl.style.borderTop = 'solid 4px #0064A3';
|
|
instance.tooltipEl.style.padding = '10px';
|
|
instance.tooltipEl.style.color = 'black';
|
|
|
|
setTimeout(() => {
|
|
instance.open();
|
|
setTimeout(() => {
|
|
instance.close();
|
|
}, 5000);
|
|
}, 5000);
|
|
|
|
}
|
|
|
|
tutorialIconHandler(id) {
|
|
setTimeout(() => {
|
|
window.location.href= id;
|
|
}, 0);
|
|
|
|
}
|
|
|
|
//#endregion General Functions
|
|
|
|
|
|
|
|
|
|
// ##########################################################################
|
|
// ############## Token Attribute Builder Functions #########################
|
|
// ##########################################################################
|
|
|
|
//#region Token Attribute Builder Functions
|
|
|
|
//#region General functions of the Token Builder
|
|
tokenTypeSelector() {
|
|
this.hideEverything();
|
|
switch (this.elements.positionalAttr.value) {
|
|
case 'word':
|
|
this.wordBuilder();
|
|
break;
|
|
case 'lemma':
|
|
this.lemmaBuilder();
|
|
break;
|
|
case 'english-pos':
|
|
this.englishPosHandler();
|
|
break;
|
|
case 'german-pos':
|
|
this.germanPosHandler();
|
|
break;
|
|
case 'simple-pos-button':
|
|
this.simplePosBuilder();
|
|
break;
|
|
case 'empty-token':
|
|
this.emptyTokenHandler();
|
|
break;
|
|
default:
|
|
this.wordBuilder();
|
|
break;
|
|
}
|
|
}
|
|
|
|
hideEverything() {
|
|
|
|
this.elements.wordBuilder.classList.add('hide');
|
|
this.elements.lemmaBuilder.classList.add('hide');
|
|
this.elements.ignoreCaseCheckbox.classList.add('hide');
|
|
this.elements.inputOptions.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
this.elements.conditionContainer.classList.add('hide');
|
|
this.elements.englishPosBuilder.classList.add('hide');
|
|
this.elements.germanPosBuilder.classList.add('hide');
|
|
this.elements.simplePosBuilder.classList.add('hide');
|
|
this.elements.entityBuilder.classList.add('hide');
|
|
this.elements.textAnnotationBuilder.classList.add('hide');
|
|
|
|
}
|
|
|
|
tokenButtonfactory(prettyText, tokenText) {
|
|
tokenText = encodeURI(tokenText);
|
|
let builderElement;
|
|
let buttonElement;
|
|
builderElement = document.createElement('div');
|
|
builderElement.innerHTML = `
|
|
<div class='chip col s2 l2' style='margin-top:20px;' data-tokentext='${tokenText}'>
|
|
${prettyText}
|
|
<i class='material-icons close'>close</i>
|
|
</div>`;
|
|
buttonElement = builderElement.firstElementChild;
|
|
buttonElement.addEventListener('click', () => {this.deleteTokenAttr(buttonElement);});
|
|
this.elements.tokenQuery.appendChild(buttonElement);
|
|
}
|
|
|
|
deleteTokenAttr(attr) {
|
|
if (this.elements.tokenQuery.childNodes.length < 2) {
|
|
this.elements.tokenQuery.removeChild(attr);
|
|
this.wordBuilder();
|
|
} else {
|
|
this.elements.tokenQuery.removeChild(attr);
|
|
}
|
|
|
|
}
|
|
|
|
addToken() {
|
|
let c;
|
|
let tokenQueryContent = ''; //for ButtonFactory(prettyText)
|
|
let tokenQueryText = ''; //for ButtonFactory(queryText)
|
|
this.elements.cancelBool = false;
|
|
let emptyTokenCheck = false;
|
|
|
|
if (this.elements.ignoreCase.checked) {
|
|
c = ' %c';
|
|
} else {
|
|
c = '';
|
|
}
|
|
|
|
|
|
for (let element of this.elements.tokenQuery.childNodes) {
|
|
tokenQueryContent += ' ' + element.firstChild.data + ' ';
|
|
tokenQueryText += decodeURI(element.dataset.tokentext);
|
|
if (element.innerText.indexOf('empty token') !== -1) {
|
|
emptyTokenCheck = true;
|
|
}
|
|
}
|
|
|
|
if (this.elements.tokenQueryFilled === false) {
|
|
switch (this.elements.positionalAttr.value) {
|
|
case 'word':
|
|
if (this.elements.wordInput.value === '') {
|
|
this.disableTokenSubmit();
|
|
} else {
|
|
tokenQueryContent += `word=${this.elements.wordInput.value}${c}`;
|
|
tokenQueryText += `word="${this.elements.wordInput.value}"${c}`;
|
|
this.elements.wordInput.value = '';
|
|
}
|
|
break;
|
|
case 'lemma':
|
|
if (this.elements.lemmaInput.value === '') {
|
|
this.disableTokenSubmit();
|
|
} else {
|
|
tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`;
|
|
tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`;
|
|
this.elements.lemmaInput.value = '';
|
|
}
|
|
break;
|
|
case 'english-pos':
|
|
if (this.elements.englishPos.value === 'default') {
|
|
this.disableTokenSubmit();
|
|
} else {
|
|
tokenQueryContent += `pos=${this.elements.englishPos.value}`;
|
|
tokenQueryText += `pos="${this.elements.englishPos.value}"`;
|
|
this.elements.englishPos.value = '';
|
|
}
|
|
break;
|
|
case 'german-pos':
|
|
if (this.elements.germanPos.value === 'default') {
|
|
this.disableTokenSubmit();
|
|
} else {
|
|
tokenQueryContent += `pos=${this.elements.germanPos.value}`;
|
|
tokenQueryText += `pos="${this.elements.germanPos.value}"`;
|
|
this.elements.germanPos.value = '';
|
|
}
|
|
break;
|
|
case 'simple-pos-button':
|
|
if (this.elements.simplePos.value === 'default') {
|
|
this.disableTokenSubmit();
|
|
} else {
|
|
tokenQueryContent += `simple_pos=${this.elements.simplePos.value}`;
|
|
tokenQueryText += `simple_pos="${this.elements.simplePos.value}"`;
|
|
this.elements.simplePos.value = '';
|
|
}
|
|
break;
|
|
default:
|
|
this.wordBuilder();
|
|
break;
|
|
}
|
|
}
|
|
|
|
// cancelBool looks in disableTokenSubmit() whether a value is passed. If the input fields/dropdowns are empty (cancelBool === true), no token is added.
|
|
if (this.elements.cancelBool === false) {
|
|
// Square brackets are added only if it is not an empty token (where they are already present).
|
|
if (emptyTokenCheck === false) {
|
|
tokenQueryText = '[' + tokenQueryText + ']';
|
|
}
|
|
this.buttonfactory('token', tokenQueryContent, tokenQueryText);
|
|
this.hideEverything();
|
|
this.elements.positionalAttrArea.classList.add('hide');
|
|
this.elements.tokenQuery.innerHTML = '';
|
|
}
|
|
|
|
}
|
|
|
|
disableTokenSubmit() {
|
|
this.elements.cancelBool = true;
|
|
this.elements.tokenSubmitButton.classList.add('red');
|
|
this.elements.noValueMessage.classList.remove('hide');
|
|
setTimeout(() => {
|
|
this.elements.tokenSubmitButton.classList.remove('red');
|
|
}, 500);
|
|
setTimeout(() => {
|
|
this.elements.noValueMessage.classList.add('hide');
|
|
}, 3000);
|
|
}
|
|
|
|
//#endregion General functions of the Token Builder
|
|
|
|
//#region Dropdown Select Handler
|
|
wordBuilder() {
|
|
this.hideEverything();
|
|
this.elements.wordInput.value = '';
|
|
this.elements.wordBuilder.classList.remove('hide');
|
|
this.elements.inputOptions.classList.remove('hide');
|
|
this.elements.incidenceModifiersButton.classList.remove('hide');
|
|
this.elements.conditionContainer.classList.remove('hide');
|
|
this.elements.ignoreCaseCheckbox.classList.remove('hide');
|
|
|
|
// Resets materialize select field to default value
|
|
let SelectInstance = M.FormSelect.getInstance(this.elements.positionalAttr);
|
|
SelectInstance.input.value = 'word';
|
|
this.elements.positionalAttr.value = 'word';
|
|
|
|
}
|
|
|
|
lemmaBuilder() {
|
|
this.hideEverything();
|
|
this.elements.lemmaBuilder.classList.remove('hide');
|
|
this.elements.inputOptions.classList.remove('hide');
|
|
this.elements.incidenceModifiersButton.classList.remove('hide');
|
|
this.elements.conditionContainer.classList.remove('hide');
|
|
this.elements.ignoreCaseCheckbox.classList.remove('hide');
|
|
}
|
|
|
|
englishPosHandler() {
|
|
this.hideEverything();
|
|
this.elements.englishPosBuilder.classList.remove('hide');
|
|
this.elements.incidenceModifiersButton.classList.remove('hide');
|
|
this.elements.conditionContainer.classList.remove('hide');
|
|
|
|
// Resets materialize select dropdown
|
|
let selectInstance = M.FormSelect.getInstance(this.elements.englishPos);
|
|
selectInstance.input.value = 'English pos tagset';
|
|
this.elements.englishPos.value = 'default';
|
|
}
|
|
|
|
germanPosHandler() {
|
|
this.hideEverything();
|
|
this.elements.germanPosBuilder.classList.remove('hide');
|
|
this.elements.incidenceModifiersButton.classList.remove('hide');
|
|
this.elements.conditionContainer.classList.remove('hide');
|
|
|
|
// Resets materialize select dropdown
|
|
let selectInstance = M.FormSelect.getInstance(this.elements.germanPos);
|
|
selectInstance.input.value = 'German pos tagset';
|
|
this.elements.germanPos.value = 'default';
|
|
}
|
|
|
|
simplePosBuilder() {
|
|
this.hideEverything();
|
|
this.elements.simplePosBuilder.classList.remove('hide');
|
|
this.elements.incidenceModifiersButton.classList.remove('hide');
|
|
this.elements.conditionContainer.classList.remove('hide');
|
|
this.elements.simplePos.selectedIndex = 0;
|
|
|
|
// Resets materialize select dropdown
|
|
let selectInstance = M.FormSelect.getInstance(this.elements.simplePos);
|
|
selectInstance.input.value = 'simple_pos tagset';
|
|
this.elements.simplePos.value = 'default';
|
|
}
|
|
|
|
emptyTokenHandler() {
|
|
this.tokenButtonfactory('empty token', '[]');
|
|
this.elements.tokenQueryFilled = true;
|
|
this.hideEverything();
|
|
this.elements.incidenceModifiersButton.classList.remove('hide');
|
|
}
|
|
//#endregion Dropdown Select Handler
|
|
|
|
//#region Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or'
|
|
|
|
inputOptionHandler(elem) {
|
|
let input;
|
|
|
|
if (this.elements.wordBuilder.classList.contains('hide') === false) {
|
|
input = this.elements.wordInput;
|
|
} else {
|
|
input = this.elements.lemmaInput;
|
|
}
|
|
|
|
if (elem === this.elements.optionGroup) {
|
|
input.value += '( option1 | option2 )';
|
|
let firstIndex = input.value.indexOf('option1');
|
|
let lastIndex = firstIndex + 'option1'.length;
|
|
input.focus();
|
|
input.setSelectionRange(firstIndex, lastIndex);
|
|
} else if (elem === this.elements.wildcardChar) {
|
|
input.value += '.';
|
|
}
|
|
}
|
|
|
|
nSubmitHandler() {
|
|
let instance = M.Modal.getInstance(this.elements.exactlyN);
|
|
instance.close();
|
|
|
|
switch (this.elements.positionalAttr.value) {
|
|
case 'word':
|
|
this.elements.wordInput.value += ' {' + this.elements.nInput.value + '}';
|
|
break;
|
|
case 'lemma':
|
|
this.elements.lemmaInput.value += ' {' + this.elements.nInput.value + '}';
|
|
break;
|
|
case 'english-pos':
|
|
this.elements.tokenQueryFilled = true;
|
|
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
|
this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
|
this.elements.englishPosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
break;
|
|
case 'german-pos':
|
|
this.elements.tokenQueryFilled = true;
|
|
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
|
this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
|
this.elements.germanPosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
break;
|
|
case 'simple-pos-button':
|
|
this.elements.tokenQueryFilled = true;
|
|
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
|
this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
|
this.elements.simplePosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
break;
|
|
case 'empty-token':
|
|
this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
nmSubmitHandler() {
|
|
let instance = M.Modal.getInstance(this.elements.betweenNM);
|
|
instance.close();
|
|
|
|
switch (this.elements.positionalAttr.value) {
|
|
case 'word':
|
|
this.elements.wordInput.value += `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`;
|
|
break;
|
|
case 'lemma':
|
|
this.elements.lemmaInput.value += `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`;
|
|
break;
|
|
case 'english-pos':
|
|
this.elements.tokenQueryFilled = true;
|
|
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
|
this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
|
this.elements.englishPosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
break;
|
|
case 'german-pos':
|
|
this.elements.tokenQueryFilled = true;
|
|
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
|
this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
|
this.elements.germanPosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
break;
|
|
case 'simple-pos-button':
|
|
this.elements.tokenQueryFilled = true;
|
|
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
|
this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
|
this.elements.simplePosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
break;
|
|
case 'empty-token':
|
|
this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
incidenceModifiersHandler(elem) {
|
|
// For word and lemma, the incidence modifiers are inserted in the input field. For the others, one or two chips are created which contain the respective value of the token and the incidence modifier.
|
|
if (this.elements.positionalAttr.value === 'empty-token') {
|
|
this.tokenButtonfactory(elem.innerText, elem.dataset.token);
|
|
} else if (this.elements.positionalAttr.value === 'english-pos') {
|
|
this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
|
|
this.tokenButtonfactory(elem.innerText, elem.dataset.token);
|
|
this.elements.englishPosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
this.elements.tokenQueryFilled = true;
|
|
} else if (this.elements.positionalAttr.value === 'german-pos') {
|
|
this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
|
|
this.tokenButtonfactory(elem.innerText, elem.dataset.token);
|
|
this.elements.germanPosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
this.elements.tokenQueryFilled = true;
|
|
} else if (this.elements.positionalAttr.value === 'simple-pos-button') {
|
|
this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
|
|
this.tokenButtonfactory(elem.innerText, elem.dataset.token);
|
|
this.elements.simplePosBuilder.classList.add('hide');
|
|
this.elements.incidenceModifiersButton.classList.add('hide');
|
|
this.elements.tokenQueryFilled = true;
|
|
} else {
|
|
let input;
|
|
|
|
if (this.elements.wordBuilder.classList.contains('hide') === false) {
|
|
input = this.elements.wordInput;
|
|
} else {
|
|
input = this.elements.lemmaInput;
|
|
}
|
|
|
|
input.value += ' ' + elem.dataset.token;
|
|
}
|
|
|
|
}
|
|
|
|
orHandler() {
|
|
this.conditionHandler('or', ' | ');
|
|
}
|
|
|
|
andHandler() {
|
|
this.conditionHandler('and', ' & ');
|
|
}
|
|
|
|
conditionHandler(conditionText, conditionQueryContent) {
|
|
this.hideEverything();
|
|
let tokenQueryContent;
|
|
let tokenQueryText;
|
|
let c;
|
|
|
|
if (this.elements.ignoreCase.checked) {
|
|
c = ' %c';
|
|
} else {
|
|
c = '';
|
|
}
|
|
|
|
switch (this.elements.positionalAttr.value) {
|
|
case 'word':
|
|
tokenQueryContent = `word=${this.elements.wordInput.value}${c}`;
|
|
tokenQueryText = `word="${this.elements.wordInput.value}"${c}`;
|
|
this.elements.wordInput.value = '';
|
|
break;
|
|
case 'lemma':
|
|
tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`;
|
|
tokenQueryText = `lemma="${this.elements.lemmaInput.value}"${c}`;
|
|
this.elements.lemmaInput.value = '';
|
|
break;
|
|
case 'english-pos':
|
|
tokenQueryContent = `pos=${this.elements.englishPos.value}`;
|
|
tokenQueryText = `pos="${this.elements.englishPos.value}"`;
|
|
this.elements.englishPos.value = '';
|
|
break;
|
|
case 'german-pos':
|
|
tokenQueryContent = `pos=${this.elements.germanPos.value}`;
|
|
tokenQueryText = `pos="${this.elements.germanPos.value}"`;
|
|
this.elements.germanPos.value = '';
|
|
break;
|
|
case 'simple-pos-button':
|
|
tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`;
|
|
tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`;
|
|
this.elements.simplePos.value = '';
|
|
break;
|
|
default:
|
|
this.wordBuilder();
|
|
break;
|
|
}
|
|
|
|
this.tokenButtonfactory(tokenQueryContent, tokenQueryText);
|
|
this.tokenButtonfactory(conditionText, conditionQueryContent);
|
|
this.wordBuilder();
|
|
}
|
|
|
|
//#endregion Options to edit your token - Wildcard Charakter, Option Group, Incidence Modifiers, Ignore Case, 'and', 'or'
|
|
|
|
//#endregion Token Attribute Builder Functions
|
|
|
|
|
|
|
|
|
|
// ##########################################################################
|
|
// ############ Structural Attribute Builder Functions ######################
|
|
// ##########################################################################
|
|
|
|
//#region Structural Attribute Builder Functions
|
|
addSentence() {
|
|
this.hideEverything();
|
|
if (this.elements.sentence.text === 'End Sentence') {
|
|
this.buttonfactory('end-sentence', 'Sentence End', '</s>');
|
|
this.elements.sentence.innerHTML = 'Sentence';
|
|
} else {
|
|
this.buttonfactory('start-sentence', 'Sentence Start', '<s>');
|
|
this.elements.queryContent.push('sentence');
|
|
this.elements.sentence.innerHTML = 'End Sentence';
|
|
}
|
|
}
|
|
|
|
addEntity() {
|
|
if (this.elements.entity.text === 'End Entity') {
|
|
let queryText;
|
|
if (this.elements.entityAnyType === false) {
|
|
queryText = '</ent_type>';
|
|
} else {
|
|
queryText = '</ent>';
|
|
}
|
|
this.buttonfactory('end-entity', 'Entity End', queryText);
|
|
this.elements.entity.innerHTML = 'Entity';
|
|
} else {
|
|
this.hideEverything();
|
|
this.elements.entityBuilder.classList.remove('hide');
|
|
window.location.href = '#entity-builder';
|
|
}
|
|
}
|
|
|
|
englishEntTypeHandler() {
|
|
this.buttonfactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, '<ent_type="' + this.elements.englishEntType.value + '">');
|
|
this.elements.entity.innerHTML = 'End Entity';
|
|
this.hideEverything();
|
|
this.elements.entityAnyType = false;
|
|
|
|
// Resets materialize select dropdown
|
|
let SelectInstance = M.FormSelect.getInstance(this.elements.englishEntType);
|
|
SelectInstance.input.value = 'English ent_type';
|
|
this.elements.englishEntType.value = 'default';
|
|
}
|
|
|
|
germanEntTypeHandler() {
|
|
this.buttonfactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, '<ent_type="' + this.elements.germanEntType.value + '">');
|
|
this.elements.entity.innerHTML = 'End Entity';
|
|
this.hideEverything();
|
|
this.elements.entityAnyType = false;
|
|
|
|
// Resets materialize select dropdown
|
|
let SelectInstance = M.FormSelect.getInstance(this.elements.germanEntType);
|
|
SelectInstance.input.value = 'German ent_type';
|
|
this.elements.germanEntType.value = 'default';
|
|
}
|
|
|
|
emptyEntityButton() {
|
|
this.buttonfactory('start-empty-entity', 'Entity Start', '<ent>');
|
|
this.elements.entity.innerHTML = 'End Entity';
|
|
this.hideEverything();
|
|
this.elements.entityAnyType = true;
|
|
}
|
|
|
|
addTextAnnotation() {
|
|
this.hideEverything();
|
|
this.elements.textAnnotationBuilder.classList.remove('hide');
|
|
window.location.href = '#text-annotation-builder';
|
|
|
|
// Resets materialize select dropdown
|
|
let SelectInstance = M.FormSelect.getInstance(this.elements.textAnnotationOptions);
|
|
SelectInstance.input.value = 'address';
|
|
this.elements.textAnnotationOptions.value = 'address';
|
|
this.elements.textAnnotationInput.value= '';
|
|
}
|
|
|
|
textAnnotationSubmitHandler() {
|
|
if (this.elements.textAnnotationInput.value === '') {
|
|
this.elements.textAnnotationSubmit.classList.add('red');
|
|
this.elements.noValueMetadataMessage.classList.remove('hide');
|
|
setTimeout(() => {
|
|
this.elements.textAnnotationSubmit.classList.remove('red');
|
|
}, 500);
|
|
setTimeout(() => {
|
|
this.elements.noValueMetadataMessage.classList.add('hide');
|
|
}, 3000);
|
|
} else {
|
|
let queryText = `:: match.text_${this.elements.textAnnotationOptions.value}='${this.elements.textAnnotationInput.value}'`;
|
|
this.buttonfactory('text-annotation', `${this.elements.textAnnotationOptions.value}=${this.elements.textAnnotationInput.value}`, queryText);
|
|
this.hideEverything();
|
|
}
|
|
}
|
|
//#endregion Structural Attribute Builder Functions
|
|
|
|
}
|