diff --git a/web/app/static/js/nopaque.InteractionElement.js b/web/app/static/js/nopaque.InteractionElement.js
index 5d8c1f05c65d82bd73c91f1bbc082b278e733924..b3f8ec606c3a5cb8837c13306bf2e8eacef573d6 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 9f849735dfc24132d9836f7147db9ec77b04bdd4..a6db9e946eb4639462a25c02d864fe196b3e1e69 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 150c6c781b44e2d3eaacccd6cc535e1a653b9709..64925d77e989ce90fc0327916a17074292bf09e3 100644
--- a/web/app/static/js/nopaque.lists.js
+++ b/web/app/static/js/nopaque.lists.js
@@ -86,11 +86,11 @@ RessourceList.options = {
</span>
</td>
<td class="right-align">
- <a class="btn-small edit-link waves-effect waves-light">
+ <a class="btn-floating edit-link waves-effect waves-light">
<i class="material-icons">edit</i>
</a>
- <a class="btn-small analyse-link waves-effect waves-light">
- Analyse<i class="material-icons right">search</i>
+ <a class="btn-floating analyse-link waves-effect waves-light">
+ <i class="material-icons right">search</i>
</a>
</td>
</tr>`,
@@ -113,8 +113,8 @@ RessourceList.options = {
<span class="badge new status" data-badge-caption=""></span>
</td>
<td class="right-align">
- <a class="btn-small link waves-effect waves-light">
- View<i class="material-icons right">send</i>
+ <a class="btn-floating link waves-effect waves-light">
+ <i class="material-icons right">send</i>
</a>
</td>
</tr>`,
@@ -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 = '<i class="material-icons">add</i>';
- addToSubResultsFromInspectElement.onclick= (event) => {this.addToSubResults(dataIndex)};
+ let addToSubResultsIdsBtn = document.createElement("a");
+ addToSubResultsIdsBtn.setAttribute("class", classes + ` add`);
+ addToSubResultsIdsBtn.innerHTML = '<i class="material-icons">add</i>';
+ 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 {
`<span class="token" data-cpos="${cpos}">${token.word} </span>`);
}
- // 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 = '<i class="material-icons">search</i>';
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 = '<i class="material-icons">add</i>';
- 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 7fa96309cede3bf1448a30abb31d4aff164f6297..341d3a1795f2997d67ee32af550a357a206d63a6 100644
--- a/web/app/templates/corpora/analyse_corpus.html.j2
+++ b/web/app/templates/corpora/analyse_corpus.html.j2
@@ -78,23 +78,23 @@
<h6 style="margin-top: 0px;">Export</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
- <div class="col">
+ <div class="col s12">
<button id="query-results-export"
class="waves-effect
waves-light
btn-flat
disabled"
- type="submit">Export Results
+ type="submit">Results
<i class="material-icons left">file_download</i>
</button>
</div>
- <div class="col">
+ <div class="col s12">
<button id="sub-results-export"
class="waves-effect
waves-light
btn-flat
disabled"
- type="submit">Export Sub-Results
+ type="submit">Sub-Results
<i class="material-icons left">file_download</i>
</button>
</div>
@@ -104,7 +104,7 @@
<h6 style="margin-top: 0px;">Create</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
- <div class="col">
+ <div class="col s12">
<div class="switch">
Sub-Results creation:
<label>
@@ -117,7 +117,7 @@
</label>
</div>
</div>
- <div class="col hide" id="sub-results-match-ids-div">
+ <div class="col s12 hide" id="sub-results-match-ids-div">
<div class="input-field">
<p>Marked matches for Sub-Results:</p>
<textarea id="sub-results-match-ids"
@@ -126,7 +126,7 @@
</textarea>
</div>
</div>
- <div class="col hide" id="sub-results-create-div">
+ <div class="col s12 hide" id="sub-results-create-div">
<button class="waves-effect
waves-light
btn-flat
@@ -141,7 +141,7 @@
<h6 style="margin-top: 0px;">Display</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
- <div class="col">
+ <div class="col s12">
<form id="display-options-form">
{{ M.render_field(display_options_form.results_per_page,
material_icon='format_list_numbered') }}
@@ -156,7 +156,7 @@
<h6 style="margin-top: 0px;">Analysis</h6>
<div class="divider" style="margin-bottom: 10px;"></div>
<div class="row">
- <div class="col">
+ <div class="col s12">
<button id="placeholder1"
class="waves-effect
waves-light
@@ -166,7 +166,7 @@
<i class="material-icons left">cloud</i>
</button>
</div>
- <div class="col">
+ <div class="col s12">
<button id="placeholder2"
class="waves-effect
waves-light
@@ -190,7 +190,8 @@
<th style="width: 2%">Nr.</th>
<th style="width: 3%">Title</th>
<th style="width: 25%">Left context</th>
- <th style="width: 45%">Match</th>
+ <th style="width: 35%">Match</th>
+ <th style="width: 10%">Actions</th>
<th style="width: 25%">Right Context</th>
</tr>
</thead>
@@ -567,17 +568,18 @@
});
}
+
+
// checks if a change for every interactionElement happens and executes
// the callbacks accordingly
for (let interaction of interactionElements) {
if (interaction.checkStatus) {
- let element = interaction.getElement()
- element.addEventListener("change", (event) => {
+ interaction.element.addEventListener("change", (event) => {
if (event.target.checked) {
let f_on = interaction.bindThisToCallback("on");
let args_on = interaction.callbacks.on.args;
f_on(...args_on);
- } else {
+ } else if (!event.target.checked){
let f_off = interaction.bindThisToCallback("off");
let args_off = interaction.callbacks.off.args;
f_off(...args_off);