sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 01:05:42 +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
Show Stats 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'; window.location.href = '#query-container';
this.elements.counter += 1; this.elements.counter += 1;
queryText = encodeURI(queryText); 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} ${prettyText}
<i class='material-icons close'>close</i> <i class="material-icons close">close</i>
</div> </div>
` `
); );
buttonElement.addEventListener('click', () => {this.deleteAttr(buttonElement);}); 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: // 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') { if (this.elements.yourQuery.lastChild === null || this.elements.yourQuery.lastChild.dataset.type !== 'text-annotation') {
@ -238,11 +240,11 @@ class ConcordanceQueryBuilder {
dragStartHandler(event) { dragStartHandler(event) {
// Creates element with the class 'target' and all necessary drop functions, in which drop content can be released // Creates element with the class 'target' and all necessary drop functions, in which drop content can be released
this.elements.dropButton = event.target; this.elements.dropButton = event.target;
let targetChip = ` let targetChipElement = Utils.HTMLToElement('<div class="chip target">Drop here</div>');
<div class='chip target' ondragover='concordanceQueryBuilder.dragOverHandler(event)' ondragenter='concordanceQueryBuilder.dragEnterHandler(event)' ondragleave='concordanceQueryBuilder.dragLeaveHandler(event)' ondrop='concordanceQueryBuilder.dropHandler(event)'> targetChipElement.addEventListener('dragover', (event) => {this.dragOverHandler(event);});
Drop here targetChipElement.addEventListener('dragenter', (event) => {this.dragEnterHandler(event);});
</div> targetChipElement.addEventListener('dragleave', (event) => {this.dragLeaveHandler(event);});
`.trim(); targetChipElement.addEventListener('drop', (event) => {this.dropHandler(event);});
// selects all nodes without target class // selects all nodes without target class
let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)'); let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)');
@ -252,15 +254,15 @@ class ConcordanceQueryBuilder {
if (element === this.elements.dropButton) { 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 the dragged element is not at the very end, a target chip is also inserted at the end
if (childNodes[childNodes.length - 1] !== element) { 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) { } else if (element === this.elements.dropButton.nextSibling) {
continue; continue;
} else { } else {
element.insertAdjacentHTML('beforebegin', targetChip) element.insertAdjacentElement('beforebegin', targetChipElement)
} }
} }
},0); }, 0);
} }
dragOverHandler(event) { dragOverHandler(event) {

6
app/static/js/Forms/Form.js
View File

@ -32,7 +32,7 @@ class Form {
submit(event) { submit(event) {
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -71,7 +71,7 @@ class Form {
for (let selectElement of this.formElement.querySelectorAll('select')) { for (let selectElement of this.formElement.querySelectorAll('select')) {
if (selectElement.value === '') { if (selectElement.value === '') {
let inputFieldElement = selectElement.closest('.input-field'); let inputFieldElement = selectElement.closest('.input-field');
let errorHelperTextElement = Utils.elementFromString( let errorHelperTextElement = Utils.HTMLToElement(
'<span class="helper-text error-color-text" data-helper-text-type="error">Please select an option.</span>' '<span class="helper-text error-color-text" data-helper-text-type="error">Please select an option.</span>'
); );
inputFieldElement.appendChild(errorHelperTextElement); inputFieldElement.appendChild(errorHelperTextElement);
@ -98,7 +98,7 @@ class Form {
.querySelector(`input[name$="${inputName}"], select[name$="${inputName}"]`) .querySelector(`input[name$="${inputName}"], select[name$="${inputName}"]`)
.closest('.input-field'); .closest('.input-field');
for (let inputError of inputErrors) { for (let inputError of inputErrors) {
let errorHelperTextElement = Utils.elementFromString( let errorHelperTextElement = Utils.HTMLToElement(
`<span class="helper-text error-color-text" data-helper-type="error">${inputError}</span>` `<span class="helper-text error-color-text" data-helper-type="error">${inputError}</span>`
); );
inputFieldElement.appendChild(errorHelperTextElement); inputFieldElement.appendChild(errorHelperTextElement);

26
app/static/js/Utils.js
View File

@ -1,8 +1,8 @@
class Utils { class Utils {
static elementFromString(string) { static HTMLToElement(HTMLString) {
let tmpElement = document.createElement('div'); let templateElement = document.createElement('template');
tmpElement.innerHTML = string.trim(); templateElement.innerHTML = HTMLString.trim();
return tmpElement.firstChild; return templateElement.content.firstChild;
} }
static generateElementId(prefix='', suffix='') { static generateElementId(prefix='', suffix='') {
@ -87,7 +87,7 @@ class Utils {
corpus = {}; corpus = {};
} }
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -143,7 +143,7 @@ class Utils {
corpusFile = {}; corpusFile = {};
} }
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -199,7 +199,7 @@ class Utils {
spaCyNLPPipelineModel = {}; spaCyNLPPipelineModel = {};
} }
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -254,7 +254,7 @@ class Utils {
tesseractOCRPipelineModel = {}; tesseractOCRPipelineModel = {};
} }
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -302,7 +302,7 @@ class Utils {
static deleteProfileAvatarRequest(userId) { static deleteProfileAvatarRequest(userId) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -357,7 +357,7 @@ class Utils {
job = {}; job = {};
} }
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -420,7 +420,7 @@ class Utils {
) )
.then( .then(
(text) => { (text) => {
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -459,7 +459,7 @@ class Utils {
job = {}; job = {};
} }
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">
@ -516,7 +516,7 @@ class Utils {
user = {}; user = {};
} }
let modalElement = Utils.elementFromString( let modalElement = Utils.HTMLToElement(
` `
<div class="modal"> <div class="modal">
<div class="modal-content"> <div class="modal-content">