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
Stage: linting
Stage: test
Stage: deploy
Show whitespace changes
Inline Side-by-side
Showing
with 92 additions and 26 deletions
src/core/js/tour.js
+ 92
− 26
View file @ dec00fbd
......@@ -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,7 +728,27 @@ 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) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment