diff --git a/src/core/js/tour.js b/src/core/js/tour.js index 39275276d8723e61ea81c92cbed7655b2e0609ff..723a46cc6580dc39e4c42c55f9034fe3337521fb 100644 --- a/src/core/js/tour.js +++ b/src/core/js/tour.js @@ -105,7 +105,7 @@ var tour = new function() { }; this.PageSet = class { - constructor(parent_set, config) { + constructor(parent_set, config, idx) { if(typeof parent_set === "undefined") { throw new Error("param `parent_set` must not be undefined"); } @@ -114,12 +114,13 @@ var tour = new function() { } this.parent_set = parent_set; + this.idx = idx this.config = config; this._elements = new Array(); this.active = false; for (const element of config.elements) { - const next = tour.add_tour_element(element, this); + const next = tour.add_tour_element(element, this, this._elements.length); this._elements.push(next); } @@ -172,10 +173,8 @@ var tour = new function() { create_menu_entry() { if (this.elements) { // create sub menu - console.log("sub menu:"+this.name); var menuid = 'tour-submenu-'+this.name var page_set_entry = $("<li class='mb-1 list-group-item caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-pageset'/><button class='btn btn-link btn-toggle align-items-center rounded collapsed' data-toggle='collapse' data-target='#"+menuid+"' aria-expanded='false'>" + this.name + "</button><div id='"+menuid+"'class='collapse show'><ul class='btn-toggle-nav list-unstyled fw-normal pb-1 small'></ul></div></li>"); - console.log(page_set_entry); var elements_list = page_set_entry.find("ul")[0]; var collapse_div = page_set_entry.find("div")[0]; this.menu_entry = collapse_div ; @@ -188,10 +187,12 @@ var tour = new function() { return page_set_entry; } else { + // TODO ever reached? + console.log("YEEEESSSSS reached.") // create single menu entry - console.log("ssingleentry:"+this.name); var entry = $("<li class='caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-pageset'></li>"); - var link = $("<a class='link-dark rounded'/>"+this.name+"</a>")[0]; + + var link = $("<a class='link-dark rounded' href='"+this.config.href+"'/>"+this.name+"</a>")[0]; // TODO What for? this.menu_entry = link; link.addEventListener("click", () => {this.activate();}); @@ -226,6 +227,9 @@ var tour = new function() { $(this.menu_entry).toggleClass("caosdb-v-tour-menu-entry-highlight", false); } + /** + * _activate PageSet + */ _activate() { if (!this.active) { tour.debug("PageSet._activate tour element '" + this.full_name + "'."); @@ -239,6 +243,9 @@ var tour = new function() { } } + /** + * _on_activation PageSet + */ _on_activation() { let hiding = this.config.on_activation_hide; if (hiding) { @@ -303,7 +310,7 @@ var tour = new function() { } this.Page = class { - constructor(parent_set, config) { + constructor(parent_set, config, idx) { if(typeof parent_set === "undefined") { throw new Error("param `parent_set` must not be undefined"); } @@ -312,9 +319,10 @@ var tour = new function() { } this.active = false; + this.idx = idx this.parent_set = parent_set; this.config = config; - this.button = this._create_tour_button(config.page, config.content, config.title, config.id, config.button_size, config.css); + this.button = this._create_tour_button(config.page, config.content, config.title, config.id, config.button_size, this, config.css); this._activate_button(this.button, config.activation, config.deactivation); this._position_button(this.button, config.target, config.button_position); @@ -334,6 +342,12 @@ var tour = new function() { if (typeof this.config.old_state_active === "undefined") { this.config.old_state_active = this.config.active; } + if (typeof this.config.href === "undefined") { + this.config.href = "/"; + } + if (typeof this.config.id === "undefined") { + this.config.id = "tour-ps"+this.parent_set.idx+"-p"+this.idx + } } _activate_by_id(id) { @@ -343,7 +357,7 @@ var tour = new function() { // TODO duplicate name create_menu_entry() { var entry = $("<li class='list-group-item caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-page' />"); - var link = $("<a class='btn btn-link'>" + this.name + "</a>")[0]; + var link = $("<a class='btn btn-link' href='"+this.config.href+"'>" + this.name + "</a>")[0]; link.addEventListener("click", () => {this.activate();}); entry.append(link); return entry[0]; @@ -372,6 +386,9 @@ var tour = new function() { return this.parent_set.full_name + ":" + this.name; } + /* + * Page init_activation + */ init_activation(restore_old_state=false) { tour.debug("Page.init_activation button '" + this.full_name + "'."); if (restore_old_state) { @@ -383,6 +400,9 @@ var tour = new function() { } } + /* + * Page activate + */ activate() { if (!this.active) { tour.info("Page.activate button '" + this.full_name + "'."); @@ -393,6 +413,9 @@ var tour = new function() { this.parent_set._activate() $(this.button).show(); + console.log(this.button.classList) + this.button.dispatchEvent(tour.open_page_event) + //$(this.button).click(); } } @@ -412,7 +435,10 @@ var tour = new function() { this.active = false; $(this.button).hide(); $(this.button).popover("hide"); + console.log("in deactivate page") + console.log("remove f tour open") $(this.button).toggleClass("caosdb-f-tour-open-page", false); + console.log(this.button.classList) } } @@ -576,6 +602,27 @@ var tour = new function() { }) } + get_previous() { + if (this.idx>0){ + return this.parent_set._elements[this.idx-1]; + } else if (this.parent_set.idx>0) { + pps =tour._instance.elements[this.parent_set.idx-1]; + return pps._elements[pps._elements.length-1]; + } else { + return null; + } + } + get_next() { + if (this.idx<this.parent_set._elements.length-1){ + return this.parent_set._elements[this.idx+1]; + } else if (this.parent_set.idx<tour._instance.elements.length-1) { + pps =tour._instance.elements[this.parent_set.idx+1]; + return pps._elements[0]; + } else { + return null; + } + } + _apply_highlighters(button, highlighters) { if (typeof button === "undefined") { throw new Error("button was undefined"); @@ -604,7 +651,7 @@ var tour = new function() { } } - _create_tour_button(name, content, title, id, size, css={}, + _create_tour_button(name, content, title, id, size, page, css={}, placement="auto") { if (typeof name === "undefined") { throw new Error("name was undefined"); @@ -637,7 +684,7 @@ var tour = new function() { let popover_template = '<div class="popover" role="tooltip" style="' + popover_style + '"><div class="arrow"></div><h3 class="popover-header"></h3>' - + '<div class="popover-body popover-content"></div></div>'; + + '<div class="popover-body popover-content"></div><button data-role="prev">Previous</button><button data-role="next">Next</button></div>'; button.popover({ title: title, @@ -655,7 +702,6 @@ var tour = new function() { } else { this.dispatchEvent(tour.open_page_event); } - $(this).toggleClass("caosdb-f-tour-open-page"); // clicks on the tour button should not trigger any other action e.preventDefault(); @@ -663,10 +709,16 @@ var tour = new function() { }); button[0].addEventListener("close.tour.page", function() { + console.log("in close event cb") + console.log(button.classList) + $(button).toggleClass("caosdb-f-tour-open-page"); button.popover("hide"); }); button[0].addEventListener("open.tour.page", function() { + console.log("in open event cb") + console.log(button.classList) + $(button).toggleClass("caosdb-f-tour-open-page"); var p_id = button.popover("show")[0].getAttribute("aria-describedby"); var popover = $("#" + p_id); @@ -676,8 +728,28 @@ var tour = new function() { $(this).popover("hide"); } }); + $("#" + p_id).find("button[data-role=next]").on("click", function(e) { + var pn= page.get_next() + pn.activate(); + if (($("#"+pn.config.id)).length==0){ + window.location=pn.config.href + } + //page.get_next().button.dispatchEvent(tour.open_page_event); + }); + $("#" + p_id).find("button[data-role=prev]").on("click", function(e) { + var pp= page.get_previous() + pp.activate(); + if (($("#"+pp.config.id)).length==0){ + window.location=pp.config.href + } + //page.get_next().button.dispatchEvent(tour.open_page_event); + }); }); + //button[0].addEventListener('show', function(){ + //console.log("in cb") + //}); + if(id) { button.attr("id", id); } @@ -763,19 +835,19 @@ var tour = new function() { - this.add_tour_element = function(element, parent_set) { + this.add_tour_element = function(element, parent_set, idx) { if (element.page_set) { // it's a page_set - return tour.add_tour_page_set(element, parent_set); + return tour.add_tour_page_set(element, parent_set, idx); } else { // it's a page - return tour.add_tour_page(element, parent_set); + return tour.add_tour_page(element, parent_set, idx); } } - this.add_tour_page_set = function(config, parent_set) { - return new tour.PageSet(parent_set, config); + this.add_tour_page_set = function(config, parent_set, idx) { + return new tour.PageSet(parent_set, config, idx); } this.Tour = class { @@ -788,7 +860,7 @@ var tour = new function() { this.reset_tour_button = $('<a class="btn btn-link disabled" id="caosdb-tour-reset-btn">Reset Tour</a>'); this.active = false; for (const element of this.config.elements) { - const next = tour.add_tour_element(element, this); + const next = tour.add_tour_element(element, this, this.elements.length); this.elements.push(next); } @@ -902,11 +974,8 @@ var tour = new function() { tour.debug("Tour._deactivate tour"); this.old_state_active = false; this.active = false; - console.log("deactivate"); $("#tour-toc").toggleClass("hidden"); - console.log($("#caosdb-tour-start-btn")[0].classList) $("#caosdb-tour-start-btn").removeClass("disabled"); - console.log($("#caosdb-tour-start-btn")[0].classList) $("#caosdb-tour-reset-btn").addClass("disabled"); $("#caosdb-tour-leave-btn").addClass("disabled"); this.update(); @@ -921,10 +990,7 @@ var tour = new function() { this.old_state_active = true; this.active = true; $("#tour-toc").toggleClass("hidden"); - console.log("activate"); - console.log($("#caosdb-tour-start-btn")[0].classList) $("#caosdb-tour-start-btn").addClass("disabled"); - console.log($("#caosdb-tour-start-btn")[0].classList) $("#caosdb-tour-reset-btn").removeClass("disabled"); $("#caosdb-tour-leave-btn").removeClass("disabled"); this.update(); @@ -1038,8 +1104,8 @@ var tour = new function() { this.log(message, INFO); } - this.add_tour_page = function(config, parent_set) { - return new tour.Page(parent_set, config); + this.add_tour_page = function(config, parent_set, idx) { + return new tour.Page(parent_set, config, idx); } this.markdown_to_html = function(content) {