From b29f2ca5eeb33aa486ba75644b13bb1d50716b09 Mon Sep 17 00:00:00 2001 From: Stephan Porada Date: Thu, 25 Jun 2020 17:44:55 +0200 Subject: [PATCH] Add cosmetics --- .../static/js/nopaque.InteractionElement.js | 27 +++--- web/app/static/js/nopaque.callbacks.js | 9 +- web/app/static/js/nopaque.lists.js | 92 +++++++++++++------ .../templates/corpora/analyse_corpus.html.j2 | 30 +++--- 4 files changed, 101 insertions(+), 57 deletions(-) diff --git a/web/app/static/js/nopaque.InteractionElement.js b/web/app/static/js/nopaque.InteractionElement.js index 5d8c1f05..b3f8ec60 100644 --- a/web/app/static/js/nopaque.InteractionElement.js +++ b/web/app/static/js/nopaque.InteractionElement.js @@ -5,25 +5,22 @@ class InteractionElement { disabledAfter=false, hideBefore=true, hideAfter=false) { - this.htmlId = htmlId; - this.checkStatus = checkStatus; - this.callbacks = {}; - this.disabledBefore = disabledBefore; - this.disabledAfter = disabledAfter; - this.hideBefore = hideBefore; - this.hideAfter = hideAfter; - } - - getElement() { - this.interactionStatusElement = document.getElementById(this.htmlId); - return this.interactionStatusElement; + this.htmlId = htmlId; + this.element = (htmlId) => {this.element = document.getElementById(htmlId);} + this.checkStatus = checkStatus; + this.callbacks = {}; + this.disabledBefore = disabledBefore; + this.disabledAfter = disabledAfter; + this.hideBefore = hideBefore; + this.hideAfter = hideAfter; + this.element(this.htmlId); } setCallback(trigger, callback, bindThis, args=[]) { this.callbacks[trigger] = { - "function": callback, - "bindThis": bindThis, - "args": args + "function": callback, + "bindThis": bindThis, + "args": args }; } diff --git a/web/app/static/js/nopaque.callbacks.js b/web/app/static/js/nopaque.callbacks.js index 9f849735..a6db9e94 100644 --- a/web/app/static/js/nopaque.callbacks.js +++ b/web/app/static/js/nopaque.callbacks.js @@ -18,7 +18,14 @@ function saveSubResultsChoices(response) { subResultsCreateElement.getElementsByClassName("button-icon-spinner")[0].remove(); subResultsCreateElement.getElementsByTagName("i")[0].classList.remove("hide"); subResultsCreateElement.firstElementChild.classList.add("disabled"); - subResultsExportElement.classList.remove("disabled"); + subResultsExportElement.classList.remove("disabled", "btn-flat"); + subResultsExportElement.classList.add("pulse", "btn-small"); + setTimeout(() => { + subResultsExportElement.classList.remove("pulse", "btn-small"); + subResultsExportElement.classList.add("btn-flat"); + clearTimeout(); + }, 3000) + } function querySetup(payload) { diff --git a/web/app/static/js/nopaque.lists.js b/web/app/static/js/nopaque.lists.js index 150c6c78..64925d77 100644 --- a/web/app/static/js/nopaque.lists.js +++ b/web/app/static/js/nopaque.lists.js @@ -86,11 +86,11 @@ RessourceList.options = { - + edit - - Analysesearch + + search `, @@ -113,8 +113,8 @@ RessourceList.options = { - - Viewsend + + send `, @@ -143,8 +143,7 @@ class ResultsList extends List { // get elements to check thier status for (let interaction of interactionElements) { if (interaction.checkStatus) { - let element = interaction.getElement(); - if (element.checked) { + if (interaction.element.checked) { let f_on = interaction.bindThisToCallback("on"); let args_on = interaction.callbacks.on.args; f_on(...args_on); @@ -198,17 +197,31 @@ class ResultsList extends List { addToSubResultsBtn.classList.add("hide"); } } + + helperActivateBtn(btn) { + console.log(btn); + btn.classList.remove("grey"); + btn.classList.add("green"); + btn.innerText = "check"; + } + + helperDeactivateBtn(btn) { + console.log(btn); + btn.classList.remove("green"); + btn.classList.add("grey"); + btn.innerText = "add"; + } + // add match id on click to a List of marked matches for SubSubcorpora // remove match id on click from same list - addToSubResults(dataIndex) { + addToSubResults(dataIndex, tableCall=true) { + console.log(event.target); let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0] if (!this.addToSubResultsStatus[dataIndex] || this.addToSubResultsStatus === undefined) { // add button is activated nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Results!`); - event.target.classList.remove("grey"); - event.target.classList.add("green"); - event.target.innerText = "check"; + this.helperActivateBtn(event.target); this.addToSubResultsStatus[dataIndex] = true; this.addToSubResultsIdsToShow.add(dataIndex + 1); textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); @@ -216,9 +229,7 @@ class ResultsList extends List { } else if (this.addToSubResultsStatus[dataIndex]) { // add button is deactivated nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-results!`); - event.target.classList.remove("green"); - event.target.classList.add("grey"); - event.target.innerText = "add"; + this.helperDeactivateBtn(event.target); this.addToSubResultsStatus[dataIndex] = false; this.addToSubResultsIdsToShow.delete(dataIndex + 1); textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", "); @@ -230,6 +241,16 @@ class ResultsList extends List { subResultsCreateElement.firstElementChild.classList.add("disabled"); } subResultsExportElement.classList.add("disabled"); + // also activate/deactivate buttons in the table accordingly if btn in inspect was activated/deactivated + if (!tableCall) { + let tableAddBtn = document.getElementById("query-results").querySelectorAll(`[data-index="${dataIndex}"]`)[0].getElementsByClassName('add')[0].firstElementChild; + console.log("TABLECALL", tableAddBtn); + if (this.addToSubResultsStatus[dataIndex]) { + this.helperActivateBtn(tableAddBtn); + } else { + this.helperDeactivateBtn(tableAddBtn); + } + } } // triggers emit to get full match context from server for a number of @@ -274,13 +295,26 @@ class ResultsList extends List { contextResultsElement.innerHTML = ""; // clear it from old inspects this.getMatchWithContext(dataIndex, type); contextModal.open(); - let css = `margin-right: 10px;` + // add a button to add this match to sub results let classes = `btn-floating btn waves-effect` + `waves-light grey right` - addToSubResultsFromInspectElement = document.createElement("a"); - addToSubResultsFromInspectElement.setAttribute("class", classes + `add`); - addToSubResultsFromInspectElement.innerHTML = 'add'; - addToSubResultsFromInspectElement.onclick= (event) => {this.addToSubResults(dataIndex)}; + let addToSubResultsIdsBtn = document.createElement("a"); + addToSubResultsIdsBtn.setAttribute("class", classes + ` add`); + addToSubResultsIdsBtn.innerHTML = 'add'; + addToSubResultsIdsBtn.onclick= (event) => {this.addToSubResults(dataIndex[0], false)}; + if (addToSubResultsFromInspectElement.children.length > 0) { + addToSubResultsFromInspectElement.firstElementChild.remove(); + } + if (this.addToSubResultsStatus[dataIndex[0]]) { + addToSubResultsIdsBtn.classList.remove("grey"); + addToSubResultsIdsBtn.classList.add("green"); + addToSubResultsIdsBtn.firstElementChild.innerText = "check"; + } else if (!this.addToSubResultsStatus[dataIndex[0]]) { + addToSubResultsIdsBtn.classList.remove("green"); + addToSubResultsIdsBtn.classList.add("grey"); + addToSubResultsIdsBtn.firstElementChild.innerText = "add"; + } + addToSubResultsFromInspectElement.appendChild(addToSubResultsIdsBtn); } // create Element from HTML String helper function @@ -624,6 +658,7 @@ class ResultsList extends List { } createResultRowElement(item, chunk) { + let aCellElement; let addToSubResultsBtn; let c; let cCellElement; @@ -665,8 +700,10 @@ class ResultsList extends List { `${token.word} `); } - // get infos for hit of match + // get infos for hit of match and set actions textTitles = new Set(); + aCellElement = document.createElement("td"); + aCellElement.classList.add("actions"); cCellElement = document.createElement("td"); cCellElement.classList.add("match-hit"); textTitlesCellElement = document.createElement("td"); @@ -674,6 +711,7 @@ class ResultsList extends List { matchNrElement = document.createElement("td"); matchNrElement.classList.add("match-nr"); matchRowElement.appendChild(cCellElement); + matchRowElement.appendChild(aCellElement); for (cpos of c) { token = chunk.cpos_lookup[cpos]; cCellElement.insertAdjacentHTML("beforeend", @@ -683,25 +721,25 @@ class ResultsList extends List { } // add some interaction buttons // # some btn css rules and classes - let css = `margin-right: 10px;` + let css = `margin-right: 5px; margin-bottom: 5px;` let classes = `btn-floating btn waves-effect` + - `waves-light grey right` + `waves-light grey` // # add button to trigger more context to every match td inspectBtn = document.createElement("a"); + inspectBtn.setAttribute("style", css); inspectBtn.setAttribute("class", classes + ` disabled inspect` ); - inspectBtn.setAttribute("style", css) inspectBtn.innerHTML = 'search'; inspectBtn.onclick = () => {this.inspect([values.index], "inspect")}; // # 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.setAttribute("style", css) addToSubResultsBtn.innerHTML = 'add'; - addToSubResultsBtn.onclick= (event) => {this.addToSubResults(values.index)} - cCellElement.appendChild(inspectBtn); - cCellElement.appendChild(addToSubResultsBtn); + addToSubResultsBtn.onclick = (event) => {this.addToSubResults(values.index)} + aCellElement.appendChild(addToSubResultsBtn); + aCellElement.appendChild(inspectBtn); // add text titles at front as first td of one row textTitlesCellElement.innerText = [...textTitles].join(", "); matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML); diff --git a/web/app/templates/corpora/analyse_corpus.html.j2 b/web/app/templates/corpora/analyse_corpus.html.j2 index 7fa96309..341d3a17 100644 --- a/web/app/templates/corpora/analyse_corpus.html.j2 +++ b/web/app/templates/corpora/analyse_corpus.html.j2 @@ -78,23 +78,23 @@
Export
-
+
-
+
@@ -104,7 +104,7 @@
Create
-
+
Sub-Results creation:
-
+

Marked matches for Sub-Results: