From 8d96c1ee4187779b54cbeb7b76a1ba4f3b6fbb65 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Fri, 10 Jul 2020 11:39:16 +0200
Subject: [PATCH] Tooltips everywhere!
---
web/app/static/js/nopaque.js | 26 +++++++++++++----
web/app/static/js/nopaque.lists.js | 34 +++++++++++++++++++++--
web/app/templates/admin/index.html.j2 | 1 +
web/app/templates/corpora/corpus.html.j2 | 1 +
web/app/templates/jobs/job.html.j2 | 1 +
web/app/templates/results/results.html.j2 | 1 +
6 files changed, 55 insertions(+), 9 deletions(-)
diff --git a/web/app/static/js/nopaque.js b/web/app/static/js/nopaque.js
index 7677b06d..a8cad6ae 100644
--- a/web/app/static/js/nopaque.js
+++ b/web/app/static/js/nopaque.js
@@ -32,8 +32,13 @@ nopaque.socket.init = function() {
// Add event handlers
nopaque.socket.on("user_data_stream_init", function(msg) {
nopaque.user = JSON.parse(msg);
- for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.user.corpora);}
- for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.user.jobs);}
+ for (let subscriber of nopaque.corporaSubscribers) {
+ subscriber._init(nopaque.user.corpora);
+ }
+ for (let subscriber of nopaque.jobsSubscribers) {
+ subscriber._init(nopaque.user.jobs);
+ }
+ RessourceList.modifyTooltips(false)
});
nopaque.socket.on("user_data_stream_update", function(msg) {
@@ -43,8 +48,12 @@ nopaque.socket.init = function() {
nopaque.user = jsonpatch.apply_patch(nopaque.user, patch);
corpora_patch = patch.filter(operation => operation.path.startsWith("/corpora"));
jobs_patch = patch.filter(operation => operation.path.startsWith("/jobs"));
- for (let subscriber of nopaque.corporaSubscribers) {subscriber._update(corpora_patch);}
- for (let subscriber of nopaque.jobsSubscribers) {subscriber._update(jobs_patch);}
+ for (let subscriber of nopaque.corporaSubscribers) {
+ subscriber._update(corpora_patch);
+ }
+ for (let subscriber of nopaque.jobsSubscribers) {
+ subscriber._update(jobs_patch);
+ }
if (["all", "end"].includes(nopaque.user.settings.job_status_site_notifications)) {
for (operation of jobs_patch) {
/* "/jobs/{jobId}/..." -> ["{jobId}", ...] */
@@ -59,8 +68,13 @@ nopaque.socket.init = function() {
nopaque.socket.on("foreign_user_data_stream_init", function(msg) {
nopaque.foreignUser = JSON.parse(msg);
- for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignUser.corpora);}
- for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignUser.jobs);}
+ for (let subscriber of nopaque.foreignCorporaSubscribers) {
+ subscriber._init(nopaque.foreignUser.corpora);
+ }
+ for (let subscriber of nopaque.foreignJobsSubscribers) {
+ subscriber._init(nopaque.foreignUser.jobs);
+ }
+ RessourceList.modifyTooltips(false)
});
nopaque.socket.on("foreign_user_data_stream_update", function(msg) {
diff --git a/web/app/static/js/nopaque.lists.js b/web/app/static/js/nopaque.lists.js
index 2fad01ab..2cfb6fd9 100644
--- a/web/app/static/js/nopaque.lists.js
+++ b/web/app/static/js/nopaque.lists.js
@@ -60,9 +60,28 @@ class RessourceList extends List {
addRessources(ressources) {
this.add(ressources.map(x => RessourceList.dataMapper[this.type](x)));
}
+
+ // Use this to modify tooltips to show after 750ms. If loaded is set to
+ // true (default) tooltips will only be initialized if DOMContentLoaded event
+ // triggered. If you do not want to wait for this event set pass false.
+ static modifyTooltips(waitForDOMContentLoaded=true) {
+ if (waitForDOMContentLoaded) {
+ document.addEventListener('DOMContentLoaded', function() {
+ var elems = document.querySelectorAll('.tooltipped');
+ console.log(elems);
+ var instances = M.Tooltip.init(elems, {enterDelay: 750});
+ });
+ } else {
+ var elems = document.querySelectorAll('.tooltipped');
+ console.log(elems);
+ var instances = M.Tooltip.init(elems, {enterDelay: 750});
+ }
+ }
}
+
+
RessourceList.dataMapper = {
// ### Mapping Genera Info
//The Mapping describes entitys rendered per row. One key value pair holds
@@ -163,10 +182,16 @@ RessourceList.options = {
</span>
</td>
<td class="actions right-align">
- <a class="btn-floating edit-link waves-effect waves-light" data-tooltip="Edit">
+ <a class="btn-floating tooltipped edit-link waves-effect
+ waves-light"
+ data-position="top"
+ data-tooltip="Edit">
<i class="material-icons">edit</i>
</a>
- <a class="btn-floating analyse-link waves-effect waves-light">
+ <a class="btn-floating tooltipped analyse-link
+ waves-effect waves-light"
+ data-position="top"
+ data-tooltip="Analyse">
<i class="material-icons">search</i>
</a>
</td>
@@ -233,7 +258,10 @@ RessourceList.options = {
<span class="badge new status" data-badge-caption=""></span>
</td>
<td class="actions right-align">
- <a class="btn-floating link waves-effect waves-light">
+ <a class="btn-floating tooltipped link waves-effect
+ waves-light"
+ data-position="top"
+ data-tooltip="Go to Job">
<i class="material-icons">send</i>
</a>
</td>
diff --git a/web/app/templates/admin/index.html.j2 b/web/app/templates/admin/index.html.j2
index 0117caff..ca9c6858 100644
--- a/web/app/templates/admin/index.html.j2
+++ b/web/app/templates/admin/index.html.j2
@@ -36,5 +36,6 @@
var ressources = {{ users|tojson|safe }};
var userList = new RessourceList('users', null, "user");
userList.addRessources(ressources);
+ RessourceList.modifyTooltips();
</script>
{% endblock %}
diff --git a/web/app/templates/corpora/corpus.html.j2 b/web/app/templates/corpora/corpus.html.j2
index fdbe2b8b..1733ace5 100644
--- a/web/app/templates/corpora/corpus.html.j2
+++ b/web/app/templates/corpora/corpus.html.j2
@@ -126,6 +126,7 @@
var ressources = {{ corpus_files|tojson|safe }};
var corpusFilesList = new RessourceList("corpus-files", null, "corpus_file");
corpusFilesList.addRessources(ressources);
+ RessourceList.modifyTooltips();
class InformationUpdater {
constructor(corpusId, foreignCorpusFlag) {
diff --git a/web/app/templates/jobs/job.html.j2 b/web/app/templates/jobs/job.html.j2
index e839f90c..5f2f36c9 100644
--- a/web/app/templates/jobs/job.html.j2
+++ b/web/app/templates/jobs/job.html.j2
@@ -162,6 +162,7 @@
var ressources = {{ job_inputs|tojson|safe }};
var jobInputsList = new RessourceList("inputs", null, "job_input");
jobInputsList.addRessources(ressources);
+ RessourceList.modifyTooltips();
class InformationUpdater {
constructor(jobId, foreignJobFlag) {
diff --git a/web/app/templates/results/results.html.j2 b/web/app/templates/results/results.html.j2
index c5d44d18..0577a1c8 100644
--- a/web/app/templates/results/results.html.j2
+++ b/web/app/templates/results/results.html.j2
@@ -66,5 +66,6 @@
var ressources = {{ results|tojson|safe }};
var importedResultsList = new RessourceList("results", null, "result");
importedResultsList.addRessources(ressources);
+RessourceList.modifyTooltips();
</script>
{% endblock %}
--
GitLab