diff --git a/web/app/static/js/nopaque.lists.js b/web/app/static/js/nopaque.lists.js index 556f686f..2f577e32 100644 --- a/web/app/static/js/nopaque.lists.js +++ b/web/app/static/js/nopaque.lists.js @@ -520,7 +520,7 @@ class ResultsList extends List { helperActivateBtn(btn) { btn.classList.remove("grey"); btn.classList.add("green"); - btn.innerText = "check"; + btn.textContent = "check"; } // Used in addToSubResults and inspect to toggle the design of the check @@ -528,7 +528,7 @@ class ResultsList extends List { helperDeactivateBtn(btn) { btn.classList.remove("green"); btn.classList.add("grey"); - btn.innerText = "add"; + btn.textContent = "add"; } // Either adds or removes a match to the sub-results. For this it checks @@ -544,16 +544,16 @@ class ResultsList extends List { this.helperActivateBtn(event.target); this.addToSubResultsStatus[dataIndex] = true; // sets status to true this.addToSubResultsIdsToShow.add(dataIndex + 1); // + 1 because user does not see zero indexd data indexes - textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order + textarea.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually - nrMarkedMatches.innerText = [...this.addToSubResultsIdsToShow].length; + nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length; } else if (this.addToSubResultsStatus[dataIndex]) { // add button is deactivated because status is true this.helperDeactivateBtn(event.target); this.addToSubResultsStatus[dataIndex] = false; // sets status to false this.addToSubResultsIdsToShow.delete(dataIndex + 1); // + 1 because user does not see zero indexd data indexes - textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order - nrMarkedMatches.innerText = [...this.addToSubResultsIdsToShow].length; + textarea.textContent = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); // automaticalle sorts ids into the textarea in ascending order + nrMarkedMatches.textContent = [...this.addToSubResultsIdsToShow].length; M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually } // Toggles the create button according to the number of ids in addToSubResultsIdsToShow @@ -633,6 +633,9 @@ class ResultsList extends List { // results to be able to inspect matches. createFakeResponse() { contextModal.open(); + // match nr for user to display derived from data_index + let contextMatchNrElement = document.getElementById("context-match-nr"); + contextMatchNrElement.textContent = this.contextId + 1; let cpos_lookup; let fake_response = {}; let contextResultsElement; @@ -640,6 +643,7 @@ class ResultsList extends List { // that is passed into the results.jsList.showMatchContext() function fake_response["payload"] = {}; let dataIndex = event.target.closest("tr").dataset.index; + this.contextId = dataIndex; fake_response.payload["matches"] = [results.data.matches[dataIndex]]; contextResultsElement = document.getElementById("context-results"); contextResultsElement.innerHTML = ""; @@ -667,16 +671,15 @@ class ResultsList extends List { // gets result cpos infos for one dataIndex (list of length 1) to send back to // the server inspect(dataIndex, type) { - let contextMatchNrElement; let contextResultsElement; // get result infos from server and show them in context modal this.contextId = dataIndex[0]; - // match nr for user to display derived from data_index - contextMatchNrElement = document.getElementById("context-match-nr"); - contextMatchNrElement.innerText = this.contextId + 1; contextResultsElement = document.getElementById("context-results"); contextResultsElement.innerHTML = ""; // clear it from old inspects this.getMatchWithContext(dataIndex, type); + // match nr for user to display derived from data_index + let contextMatchNrElement = document.getElementById("context-match-nr"); + contextMatchNrElement.textContent = this.contextId + 1; contextModal.open(); // add a button to add this match to sub results with onclick event let classes = `btn-floating btn waves-effect` + @@ -1046,18 +1049,6 @@ class ResultsList extends List { values = item.values(); let {lc, c, rc} = this.helperCreateCpos(chunk.cpos_ranges, values) - // if (chunk.cpos_ranges == true) { - // // python range like function from MDN - // // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range) - // const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); - // lc = range(values.lc[0], values.lc[1], 1) - // c = range(values.c[0], values.c[1], 1) - // rc = range(values.rc[0], values.rc[1], 1) - // } else { - // lc = values.lc; - // c = values.c; - // rc = values.rc; - // } // get infos for full match row matchRowElement = document.createElement("tr"); matchRowElement.setAttribute("data-index", values.index) @@ -1099,28 +1090,19 @@ class ResultsList extends List { inspectBtn.setAttribute("style", css); inspectBtn.setAttribute("class", classes + ` disabled inspect` ); - inspectBtn.innerHTML = 'search'; - if (imported) { - inspectBtn.onclick = () => { - fakeResponse = this.createFakeResponse(); - this.showMatchContext(fakeResponse); - }; - } else { - inspectBtn.onclick = () => {this.inspect([values.index], "inspect")}; - } + inspectBtn.innerHTML = 'search'; // # add btn to add matches to sub-results. hidden per default addToSubResultsBtn = document.createElement("a"); addToSubResultsBtn.setAttribute("style", css); addToSubResultsBtn.setAttribute("class", classes + ` hide add` ); - addToSubResultsBtn.innerHTML = 'add'; - addToSubResultsBtn.onclick = (event) => {this.addToSubResults(values.index)} + addToSubResultsBtn.innerHTML = 'add'; aCellElement.appendChild(inspectBtn); aCellElement.appendChild(addToSubResultsBtn); // add text titles at front as first td of one row - textTitlesCellElement.innerText = [...textTitles].join(", "); + textTitlesCellElement.textContent = [...textTitles].join(", "); matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML); - matchNrElement.innerText = values.index + 1; + matchNrElement.textContent = values.index + 1; matchRowElement.insertAdjacentHTML("afterbegin", matchNrElement.outerHTML); // get infos for right context of match diff --git a/web/app/templates/corpora/analyse_corpus.html.j2 b/web/app/templates/corpora/analyse_corpus.html.j2 index 97e2cd2d..1ca61ba3 100644 --- a/web/app/templates/corpora/analyse_corpus.html.j2 +++ b/web/app/templates/corpora/analyse_corpus.html.j2 @@ -55,6 +55,8 @@ + +{% include 'interactions/scroll_to_top.html.j2' %} {% include 'modals/show_metadata.html.j2' %} @@ -337,6 +339,20 @@ }); + // new insepct event listener makeing use of javascript bubbleing + let resultsTable = document.getElementById("query-results"); + console.log(resultsTable); + resultsTable.addEventListener("click", (event) => { + let dataIndex; + if (event.target.classList.contains("inspect-btn")) { + dataIndex = parseInt(event.target.closest("tr").dataset.index); + console.log(dataIndex); + results.jsList.inspect([dataIndex], "inspect"); + } else if (event.target.classList.contains("add-btn")) { + dataIndex = parseInt(event.target.closest("tr").dataset.index); + results.jsList.addToSubResults(dataIndex); + } + }) // ### Download events and sub-results creation ### var loadingSpinnerHTML = ` @@ -405,5 +421,20 @@ results.jsList.contextData, downloadInspectContextElement); }; + + // scroll to top button if user scrolled down the list + let headline = document.querySelector(".headline"); + let scrollToTop = document.querySelector("#menu-scroll-to-top-div"); + window.addEventListener("scroll", (event) => { + if (pageYOffset > 250) { + scrollToTop.classList.toggle("hide", false); + } else { + scrollToTop.classList.toggle("hide", true); + } + }); + scrollToTop.onclick = () => { + headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); + }; + {% endblock %} diff --git a/web/app/templates/interactions/scroll_to_top.html.j2 b/web/app/templates/interactions/scroll_to_top.html.j2 new file mode 100644 index 00000000..4e1c4971 --- /dev/null +++ b/web/app/templates/interactions/scroll_to_top.html.j2 @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2 index a9b589b1..8a9511ca 100644 --- a/web/app/templates/nopaque.html.j2 +++ b/web/app/templates/nopaque.html.j2 @@ -181,7 +181,7 @@
{% endif %}
-
+

{% if headline %} {{ headline }} diff --git a/web/app/templates/query_results/inspect.html.j2 b/web/app/templates/query_results/inspect.html.j2 index f16802b9..85f954da 100644 --- a/web/app/templates/query_results/inspect.html.j2 +++ b/web/app/templates/query_results/inspect.html.j2 @@ -45,6 +45,9 @@

+ +{% include 'interactions/scroll_to_top.html.j2' %} + {% include 'modals/show_metadata.html.j2' %} {% include 'modals/show_text_details.html.j2' %} @@ -192,8 +195,6 @@ // ### Show corpus Metadata showMetaDataButton.onclick = () => { - console.log(results.metaData); - console.log(results.data.text_lookup); metaDataModal.open(); }; @@ -203,6 +204,30 @@ // live update of lr context per item if context value is changed contextPerItemElement.onchange = results.jsList.changeContext; + + // new insepct event listener makeing use of javascript bubbleing + let resultsTable = document.getElementById("query-results"); + resultsTable.addEventListener("click", (event) => { + if (event.target.classList.contains("inspect-btn")) { + const dataIndex = event.target.closest("tr").dataset.index; + const fakeResponse = results.jsList.createFakeResponse(); + results.jsList.showMatchContext(fakeResponse); + } + }); + + // scroll to top button if user scrolled down the list + let headline = document.querySelector(".headline"); + let scrollToTop = document.querySelector("#menu-scroll-to-top-div"); + window.addEventListener("scroll", (event) => { + if (pageYOffset > 250) { + scrollToTop.classList.toggle("hide", false); + } else { + scrollToTop.classList.toggle("hide", true); + } + }); + scrollToTop.onclick = () => { + headline.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); + }; }); {% endblock %}