diff --git a/src/core/css/tour.css b/src/core/css/tour.css
index 5809ded823d945516ab91df0f1c12c3fde46b01a..9a3fde12680b8ac536a122d6253f385f497d2bae 100644
--- a/src/core/css/tour.css
+++ b/src/core/css/tour.css
@@ -237,3 +237,16 @@ div.caosdb-v-tour-toc-show {
border: none;
z-index: 100000;
}
+
+.caosdb-v-tour-toc-detour {
+ font-size: 0.875em;
+ padding-left: 1em;
+}
+
+.caosdb-v-tour-toc-cur {
+ border: 1px dashed #e1eff0;
+}
+
+.caosdb-v-tour-toc-active-item.caosdb-v-tour-toc-cur {
+ border: none;
+}
diff --git a/src/core/css/webcaosdb.css b/src/core/css/webcaosdb.css
index 9174c141e9159b550a7593037a012acd253ef4d7..892c86b9cfe79f750307503a7973e58e5354ea93 100644
--- a/src/core/css/webcaosdb.css
+++ b/src/core/css/webcaosdb.css
@@ -701,11 +701,6 @@ details p {
padding: 0.2rem 0.5rem;
}
-.caosdb-v-tour-toc-detour {
- font-size: 0.875em;
- padding-left: 1em;
-}
-
.caosdb-f-edit {
display: none;
position: relative;
diff --git a/src/core/js/tour.js b/src/core/js/tour.js
index 5eebd0d543797ef253cd8490c6125e64f78ff37d..57ffe0f5192f6693e1e99319df0ab2109869b115 100644
--- a/src/core/js/tour.js
+++ b/src/core/js/tour.js
@@ -193,9 +193,9 @@ var tour = new function () {
for (const element of this.elements) {
const next = element.create_menu_entry();
- if (next) {
+ if (next) {
elements_list.append(next);
- }
+ }
}
return page_set_entry;
}
@@ -553,14 +553,17 @@ var tour = new function () {
create_menu_entry() {
const id_anchor = `#${this.config.id}`;
- if (this.config.do_not_show_in_toc) {
- return;
- }
- var detour = ""
+ if (this.config.do_not_show_in_toc) {
+ return;
+ }
+ var classes = ""
if (this.config.detour){
- detour = " caosdb-v-tour-toc-detour"
+ classes = " caosdb-v-tour-toc-detour"
+ }
+ if (sessionStorage["tour-page-open-cur"] == this.config.id) {
+ classes = classes + " caosdb-v-tour-toc-cur";
}
- var entry = $("<li class='caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-page"+detour+"' />");
+ var entry = $("<li class='caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-page" + classes + "' />");
var link = $("<a href='" + this.config.href + id_anchor + "'>" + this.name + "</a>")[0];
$(link).click((e) => {
@@ -620,6 +623,7 @@ var tour = new function () {
_highlight_menu() {
$(".caosdb-v-tour-toc-active-item").toggleClass("caosdb-v-tour-toc-active-item", false);
+ $(".caosdb-v-tour-toc-cur").toggleClass("caosdb-v-tour-toc-cur", false);
$(this.menu_entry).toggleClass("caosdb-v-tour-toc-active-item", true);
}
@@ -680,6 +684,7 @@ var tour = new function () {
_open() {
const button = $(this.button);
const target = $(this.config["target"])
+ sessionStorage["tour-page-open-cur"] = this.config.id;
if (button.is(".caosdb-f-tour-open-page")) {
return; // already open
}
@@ -687,8 +692,10 @@ var tour = new function () {
return; // element to attach to not available; can't open
}
if (this.get_next()) {
- logger.debug(`Set next page in session store to `, this.get_next().config.id);
- sessionStorage["tour-page-open-next"] = this.get_next().config.id
+ if ($(`#${this.get_next().config.id}`).length == 0) {
+ logger.debug(`Set next page in session store to `, this.get_next().config.id);
+ sessionStorage["tour-page-open-next"] = this.get_next().config.id
+ }
}
target.on('hidden.bs.popover', (e) => {
button[0].dispatchEvent(tour.close_page_event);
@@ -1195,11 +1202,9 @@ var tour = new function () {
this.id = config.id || "tour0";
this.config = config;
this.elements = new Array();
- this.start_tour_button = $('<a class="dropdown-item" id="caosdb-tour-start-btn">Start Tour</a>');
- this.leave_tour_button = $('<a class="dropdown-item disabled caosdb-f-leave-tour" id="caosdb-tour-leave-btn">Leave Tour</a>');
this.active = false;
- var menuitem = $(' <li class="dropdown" id="caosdb-navbar-tour"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#"> Tour <span class="caret"></span></a><ul class="dropdown-menu"></ul></li>')
+ var menuitem = $('<li class="nav-item" id="caosdb-navbar-tour"><a href="#" class="d-none nav-link caosdb-f-start-tour-btn" title="Start a Tour">Tour</a><a href="#" title="Leave the Tour" class="d-none caosdb-f-leave-tour-btn nav-link">Tour</a></li>')
$(".caosdb-navbar").append(menuitem);
for (const element of this.config.elements) {
@@ -1219,20 +1224,11 @@ var tour = new function () {
this.config.deactivate_other = true;
}
- menuitem.find("ul").append($(' <li> </li>').append(this.start_tour_button));
- menuitem.find("ul").append($(' <li> </li>').append(this.leave_tour_button));
- // TODO - move to tour-page href
- this.start_tour_button.on("click", () => {
- this.activate();
- });
- $(".caosdb-f-leave-tour").click((e) => {
+ $(".caosdb-f-leave-tour-btn").click((e) => {
this.deactivate();
- $(".caosdb-v-tour-toc-show").toggleClass("visible", false);
});
- $(".caosdb-f-tour-toc-toggle").click((e) => {
- $(".caosdb-v-tour-toc-sidebar").toggleClass("caosdb-v-tour-toc-hidden");
- $("body").toggleClass("tour-sidebar-visible");
- $(".caosdb-v-tour-toc-show").toggleClass("visible");
+ $(".caosdb-f-start-tour-btn").click((e) => {
+ this.activate();
});
this.update();
@@ -1241,7 +1237,12 @@ var tour = new function () {
this._elements_by_id = {};
this._tour_pages = [];
this._index_elements(this._elements_by_id, this._tour_pages, this);
+ this._toggle_tour_buttons();
+ }
+ _toggle_tour_buttons() {
+ $(".caosdb-f-leave-tour-btn").toggleClass("d-none", !this.active);
+ $(".caosdb-f-start-tour-btn").toggleClass("d-none", this.active);
}
_tour_active () {
@@ -1338,6 +1339,8 @@ var tour = new function () {
for (const element of this.elements) {
element._deactivate();
}
+
+ sessionStorage.removeItem("tour-page-open-next")
}
/**
@@ -1360,16 +1363,13 @@ var tour = new function () {
_deactivate() {
if (this.active) {
- this.set_tour_button_text("Start A Tour");
logger.debug("Tour._deactivate tour");
this.old_state_active = false;
this.active = false;
this._hide_tour_sidebar();
- $("#caosdb-tour-start-btn").removeClass("disabled");
- $("#caosdb-tour-leave-btn").addClass("disabled");
+ this._toggle_tour_buttons();
this.update();
}
- this.leave_tour_button.hide();
}
_hide_tour_sidebar() {
@@ -1382,16 +1382,13 @@ var tour = new function () {
_activate() {
if (!this.active) {
- this.set_tour_button_text("Tour");
logger.debug("Tour._activate tour");
this.old_state_active = true;
this.active = true;
this._show_tour_sidebar();
- $("#caosdb-tour-start-btn").addClass("disabled");
- $("#caosdb-tour-leave-btn").removeClass("disabled");
+ this._toggle_tour_buttons();
this.update();
}
- this.leave_tour_button.show();
}
/**
@@ -1418,10 +1415,6 @@ var tour = new function () {
}
}
- set_tour_button_text(text) {
- $("button.caosdb-f-tour-button").text(text);
- }
-
create_tour_overview_panel() {
var tour_overview = $('<ul class="list-unstyled caosdb-v-tour-overview"/>');
for (const element of this.elements) {
@@ -1467,7 +1460,8 @@ var tour = new function () {
}
if (typeof sessionStorage["tour-page-open-next"] === "undefined") {
- sessionStorage["tour-page-open-next"] = instance._tour_pages[0];
+ const next = sessionStorage["tour-page-open-cur"] || instance._tour_pages[0];
+ sessionStorage["tour-page-open-next"] = next
}
instance.init_activation(config.persistent_state);