Tooltips everywhere!

This commit is contained in:
Stephan Porada 2020-07-10 11:39:16 +02:00
parent 5f7b846784
commit 8d96c1ee41
6 changed files with 55 additions and 9 deletions

View File

@ -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) {

View File

@ -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>

View File

@ -36,5 +36,6 @@
var ressources = {{ users|tojson|safe }};
var userList = new RessourceList('users', null, "user");
userList.addRessources(ressources);
RessourceList.modifyTooltips();
</script>
{% endblock %}

View File

@ -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) {

View File

@ -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) {

View File

@ -66,5 +66,6 @@
var ressources = {{ results|tojson|safe }};
var importedResultsList = new RessourceList("results", null, "result");
importedResultsList.addRessources(ressources);
RessourceList.modifyTooltips();
</script>
{% endblock %}