sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-22 22:10:34 +00:00
Code Issues Projects Releases Wiki Activity

Update some html to element generation code

Browse Source
This commit is contained in:
Patrick Jentsch
2023-01-10 10:04:01 +01:00
parent 900ef1ad6d
commit 6facf133bc
3 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/static/js/CorpusAnalysis/QueryBuilder.js
View File

@ -209,15 +209,17 @@ class ConcordanceQueryBuilder {
window.location.href = '#query-container';
this.elements.counter += 1;
queryText = encodeURI(queryText);
let buttonElement = Utils.elementFromString(
let buttonElement = Utils.HTMLToElement(
`
<div class='chip' data-type='${dataType}' data-query='${queryText}' draggable='true' style='cursor:pointer;' ondragstart='concordanceQueryBuilder.dragStartHandler(event)' ondragend='concordanceQueryBuilder.dragEndHandler(event)'>
<div class="chip" data-type="${dataType}" data-query="${queryText}" draggable="true">
${prettyText}
<i class='material-icons close'>close</i>
<i class="material-icons close">close</i>
</div>
`
);
buttonElement.addEventListener('click', () => {this.deleteAttr(buttonElement);});
buttonElement.addEventListener('dragstart', (event) => {this.dragStartHandler(event);});
buttonElement.addEventListener('dragend', (event) => {this.dragEndHandler(event);});
// 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') {
@ -238,11 +240,11 @@ class ConcordanceQueryBuilder {
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();
let targetChipElement = Utils.HTMLToElement('<div class="chip target">Drop here</div>');
targetChipElement.addEventListener('dragover', (event) => {this.dragOverHandler(event);});
targetChipElement.addEventListener('dragenter', (event) => {this.dragEnterHandler(event);});
targetChipElement.addEventListener('dragleave', (event) => {this.dragLeaveHandler(event);});
targetChipElement.addEventListener('drop', (event) => {this.dropHandler(event);});
// selects all nodes without target class
let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)');
@ -252,15 +254,15 @@ class ConcordanceQueryBuilder {
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);
childNodes[childNodes.length - 1].insertAdjacentElement('afterend', targetChipElement);
}
} else if (element === this.elements.dropButton.nextSibling) {
continue;
} else {
element.insertAdjacentHTML('beforebegin', targetChip)
element.insertAdjacentElement('beforebegin', targetChipElement)
}
}
},0);
}, 0);
}
dragOverHandler(event) {