Skip to content
Snippets Groups Projects
Commit dec00fbd authored by Henrik tom Wörden's avatar Henrik tom Wörden
Browse files

Merge branch 'f-tour-menu-tmp' into 'f-tour-menu'

F tour menu tmp

See merge request !11
parents 70271e65 fc1ac230
No related branches found
No related tags found
5 merge requests!36merge f-boot-tour to dev,!31remove xs,!16F tmp,!12WIP: ENH: add a tour menu and p/n buttons,!11F tour menu tmp
Pipeline #6176 passed
...@@ -105,7 +105,7 @@ var tour = new function() { ...@@ -105,7 +105,7 @@ var tour = new function() {
}; };
this.PageSet = class { this.PageSet = class {
constructor(parent_set, config) { constructor(parent_set, config, idx) {
if(typeof parent_set === "undefined") { if(typeof parent_set === "undefined") {
throw new Error("param `parent_set` must not be undefined"); throw new Error("param `parent_set` must not be undefined");
} }
...@@ -114,12 +114,13 @@ var tour = new function() { ...@@ -114,12 +114,13 @@ var tour = new function() {
} }
this.parent_set = parent_set; this.parent_set = parent_set;
this.idx = idx
this.config = config; this.config = config;
this._elements = new Array(); this._elements = new Array();
this.active = false; this.active = false;
for (const element of config.elements) { 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); this._elements.push(next);
} }
...@@ -172,10 +173,8 @@ var tour = new function() { ...@@ -172,10 +173,8 @@ var tour = new function() {
create_menu_entry() { create_menu_entry() {
if (this.elements) { if (this.elements) {
// create sub menu // create sub menu
console.log("sub menu:"+this.name);
var menuid = 'tour-submenu-'+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>"); 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 elements_list = page_set_entry.find("ul")[0];
var collapse_div = page_set_entry.find("div")[0]; var collapse_div = page_set_entry.find("div")[0];
this.menu_entry = collapse_div ; this.menu_entry = collapse_div ;
...@@ -188,10 +187,12 @@ var tour = new function() { ...@@ -188,10 +187,12 @@ var tour = new function() {
return page_set_entry; return page_set_entry;
} else { } else {
// TODO ever reached?
console.log("YEEEESSSSS reached.")
// create single menu entry // 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 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? // TODO What for?
this.menu_entry = link; this.menu_entry = link;
link.addEventListener("click", () => {this.activate();}); link.addEventListener("click", () => {this.activate();});
...@@ -226,6 +227,9 @@ var tour = new function() { ...@@ -226,6 +227,9 @@ var tour = new function() {
$(this.menu_entry).toggleClass("caosdb-v-tour-menu-entry-highlight", false); $(this.menu_entry).toggleClass("caosdb-v-tour-menu-entry-highlight", false);
} }
/**
* _activate PageSet
*/
_activate() { _activate() {
if (!this.active) { if (!this.active) {
tour.debug("PageSet._activate tour element '" + this.full_name + "'."); tour.debug("PageSet._activate tour element '" + this.full_name + "'.");
...@@ -239,6 +243,9 @@ var tour = new function() { ...@@ -239,6 +243,9 @@ var tour = new function() {
} }
} }
/**
* _on_activation PageSet
*/
_on_activation() { _on_activation() {
let hiding = this.config.on_activation_hide; let hiding = this.config.on_activation_hide;
if (hiding) { if (hiding) {
...@@ -303,7 +310,7 @@ var tour = new function() { ...@@ -303,7 +310,7 @@ var tour = new function() {
} }
this.Page = class { this.Page = class {
constructor(parent_set, config) { constructor(parent_set, config, idx) {
if(typeof parent_set === "undefined") { if(typeof parent_set === "undefined") {
throw new Error("param `parent_set` must not be undefined"); throw new Error("param `parent_set` must not be undefined");
} }
...@@ -312,9 +319,10 @@ var tour = new function() { ...@@ -312,9 +319,10 @@ var tour = new function() {
} }
this.active = false; this.active = false;
this.idx = idx
this.parent_set = parent_set; this.parent_set = parent_set;
this.config = config; 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._activate_button(this.button, config.activation, config.deactivation);
this._position_button(this.button, config.target, config.button_position); this._position_button(this.button, config.target, config.button_position);
...@@ -334,6 +342,12 @@ var tour = new function() { ...@@ -334,6 +342,12 @@ var tour = new function() {
if (typeof this.config.old_state_active === "undefined") { if (typeof this.config.old_state_active === "undefined") {
this.config.old_state_active = this.config.active; 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) { _activate_by_id(id) {
...@@ -343,7 +357,7 @@ var tour = new function() { ...@@ -343,7 +357,7 @@ var tour = new function() {
// TODO duplicate name // TODO duplicate name
create_menu_entry() { create_menu_entry() {
var entry = $("<li class='list-group-item caosdb-f-tour-overview-entry caosdb-v-tour-overview-entry-page' />"); 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();}); link.addEventListener("click", () => {this.activate();});
entry.append(link); entry.append(link);
return entry[0]; return entry[0];
...@@ -372,6 +386,9 @@ var tour = new function() { ...@@ -372,6 +386,9 @@ var tour = new function() {
return this.parent_set.full_name + ":" + this.name; return this.parent_set.full_name + ":" + this.name;
} }
/*
* Page init_activation
*/
init_activation(restore_old_state=false) { init_activation(restore_old_state=false) {
tour.debug("Page.init_activation button '" + this.full_name + "'."); tour.debug("Page.init_activation button '" + this.full_name + "'.");
if (restore_old_state) { if (restore_old_state) {
...@@ -383,6 +400,9 @@ var tour = new function() { ...@@ -383,6 +400,9 @@ var tour = new function() {
} }
} }
/*
* Page activate
*/
activate() { activate() {
if (!this.active) { if (!this.active) {
tour.info("Page.activate button '" + this.full_name + "'."); tour.info("Page.activate button '" + this.full_name + "'.");
...@@ -393,6 +413,9 @@ var tour = new function() { ...@@ -393,6 +413,9 @@ var tour = new function() {
this.parent_set._activate() this.parent_set._activate()
$(this.button).show(); $(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() { ...@@ -412,7 +435,10 @@ var tour = new function() {
this.active = false; this.active = false;
$(this.button).hide(); $(this.button).hide();
$(this.button).popover("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); $(this.button).toggleClass("caosdb-f-tour-open-page", false);
console.log(this.button.classList)
} }
} }
...@@ -576,6 +602,27 @@ var tour = new function() { ...@@ -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) { _apply_highlighters(button, highlighters) {
if (typeof button === "undefined") { if (typeof button === "undefined") {
throw new Error("button was undefined"); throw new Error("button was undefined");
...@@ -604,7 +651,7 @@ var tour = new function() { ...@@ -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") { placement="auto") {
if (typeof name === "undefined") { if (typeof name === "undefined") {
throw new Error("name was undefined"); throw new Error("name was undefined");
...@@ -637,7 +684,7 @@ var tour = new function() { ...@@ -637,7 +684,7 @@ var tour = new function() {
let popover_template = '<div class="popover" role="tooltip" style="' let popover_template = '<div class="popover" role="tooltip" style="'
+ popover_style + popover_style
+ '"><div class="arrow"></div><h3 class="popover-header"></h3>' + '"><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({ button.popover({
title: title, title: title,
...@@ -655,7 +702,6 @@ var tour = new function() { ...@@ -655,7 +702,6 @@ var tour = new function() {
} else { } else {
this.dispatchEvent(tour.open_page_event); this.dispatchEvent(tour.open_page_event);
} }
$(this).toggleClass("caosdb-f-tour-open-page");
// clicks on the tour button should not trigger any other action // clicks on the tour button should not trigger any other action
e.preventDefault(); e.preventDefault();
...@@ -663,10 +709,16 @@ var tour = new function() { ...@@ -663,10 +709,16 @@ var tour = new function() {
}); });
button[0].addEventListener("close.tour.page", 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.popover("hide");
}); });
button[0].addEventListener("open.tour.page", function() { 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 p_id = button.popover("show")[0].getAttribute("aria-describedby");
var popover = $("#" + p_id); var popover = $("#" + p_id);
...@@ -676,7 +728,27 @@ var tour = new function() { ...@@ -676,7 +728,27 @@ var tour = new function() {
$(this).popover("hide"); $(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) { if(id) {
button.attr("id", id); button.attr("id", id);
...@@ -763,19 +835,19 @@ var tour = new function() { ...@@ -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) { if (element.page_set) {
// it's a 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 { } else {
// it's a page // 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) { this.add_tour_page_set = function(config, parent_set, idx) {
return new tour.PageSet(parent_set, config); return new tour.PageSet(parent_set, config, idx);
} }
this.Tour = class { this.Tour = class {
...@@ -788,7 +860,7 @@ var tour = new function() { ...@@ -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.reset_tour_button = $('<a class="btn btn-link disabled" id="caosdb-tour-reset-btn">Reset Tour</a>');
this.active = false; this.active = false;
for (const element of this.config.elements) { 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); this.elements.push(next);
} }
...@@ -902,11 +974,8 @@ var tour = new function() { ...@@ -902,11 +974,8 @@ var tour = new function() {
tour.debug("Tour._deactivate tour"); tour.debug("Tour._deactivate tour");
this.old_state_active = false; this.old_state_active = false;
this.active = false; this.active = false;
console.log("deactivate");
$("#tour-toc").toggleClass("hidden"); $("#tour-toc").toggleClass("hidden");
console.log($("#caosdb-tour-start-btn")[0].classList)
$("#caosdb-tour-start-btn").removeClass("disabled"); $("#caosdb-tour-start-btn").removeClass("disabled");
console.log($("#caosdb-tour-start-btn")[0].classList)
$("#caosdb-tour-reset-btn").addClass("disabled"); $("#caosdb-tour-reset-btn").addClass("disabled");
$("#caosdb-tour-leave-btn").addClass("disabled"); $("#caosdb-tour-leave-btn").addClass("disabled");
this.update(); this.update();
...@@ -921,10 +990,7 @@ var tour = new function() { ...@@ -921,10 +990,7 @@ var tour = new function() {
this.old_state_active = true; this.old_state_active = true;
this.active = true; this.active = true;
$("#tour-toc").toggleClass("hidden"); $("#tour-toc").toggleClass("hidden");
console.log("activate");
console.log($("#caosdb-tour-start-btn")[0].classList)
$("#caosdb-tour-start-btn").addClass("disabled"); $("#caosdb-tour-start-btn").addClass("disabled");
console.log($("#caosdb-tour-start-btn")[0].classList)
$("#caosdb-tour-reset-btn").removeClass("disabled"); $("#caosdb-tour-reset-btn").removeClass("disabled");
$("#caosdb-tour-leave-btn").removeClass("disabled"); $("#caosdb-tour-leave-btn").removeClass("disabled");
this.update(); this.update();
...@@ -1038,8 +1104,8 @@ var tour = new function() { ...@@ -1038,8 +1104,8 @@ var tour = new function() {
this.log(message, INFO); this.log(message, INFO);
} }
this.add_tour_page = function(config, parent_set) { this.add_tour_page = function(config, parent_set, idx) {
return new tour.Page(parent_set, config); return new tour.Page(parent_set, config, idx);
} }
this.markdown_to_html = function(content) { this.markdown_to_html = function(content) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment