Better integration of bootstrap tour tooltips

This commit is contained in:
Manuel Cillero 2017-08-31 16:10:17 +02:00
parent e5f2b64d98
commit 23a195c38b
6 changed files with 154 additions and 148 deletions

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,4 @@
'use strict';
$jq(document).ready(function ($) {
$jq(function () {
// Bind to scroll.
$(window).scroll(function () {
@ -13,7 +11,7 @@ $jq(document).ready(function ($) {
});
// Function for scrolling to top.
$('#scroll-top-link').click(function () {
$('#scroll-top-link').click(function (e) {
$("html, body").animate({
scrollTop: 0
}, 600);

View file

@ -1,72 +1,79 @@
$jq(function() {
var path, prev, next, endtour, tour, cookie_tour, cookie_value;
// Destination, relative path starting with a slash.
var path = '/';
path = location.pathname.substring(0, 8);
if (path != "/en" && path != "/en/") path = "/";
var langPath = location.pathname.replace(/^\/+/, '') + '/';
var basePath = Drupal.settings.basePath ? Drupal.settings.basePath : '';
basePath = basePath == '/' ? '' : basePath;
if (basePath.length > 0 && langPath.indexOf(basePath) == 0) {
langPath = langPath.substring(basePath.length);
}
langPath = langPath.substring(0, langPath.indexOf('/'));
path = langPath.length == 2 ? basePath + '/' + langPath + path : basePath + path;
prev = Drupal.t("« Prev");
next = Drupal.t("Next »");
endtour = Drupal.t("End Tour");
var prev = Drupal.t("« Prev");
var next = Drupal.t("Next »");
var endtour = Drupal.t("End Tour");
tour = new Tour({
template: "<div class='popover'> \
<div class='arrow'></div> \
<h3 class='popover-title' style='font-weight: bold;'></h3> \
<div class='popover-content small'></div> \
<div class='popover-navigation'> \
<div class='btn-group'> \
<button class='btn btn-sm btn-default' data-role='prev'>" + prev + "</button> \
<button class='btn btn-sm btn-default' data-role='next'>" + next + "</button> \
var tour = new Tour({
template: '<div class="popover"> \
<div class="arrow"></div> \
<h3 class="popover-title" style="font-weight: bold;"></h3> \
<div class="popover-content" style="font-size: 80%;"></div> \
<div class="popover-navigation"> \
<div class="btn-group"> \
<button class="btn btn-sm btn-default" data-role="prev">' + prev + '</button> \
<button class="btn btn-sm btn-default" data-role="next">' + next + '</button> \
</div> \
<button class='btn btn-sm btn-default' data-role='end'>" + endtour + "</button> \
<button class="btn btn-sm btn-default" data-role="end">' + endtour + '</button> \
</div> \
</div>",
</div>',
steps: [
{
element: "#user-options",
placement: "left",
title: Drupal.t("Welcome!"),
content: Drupal.t("Remember, here you can see your user profile and main options.")
} , {
path: path,
element: "li.suitedesk",
element: "#logo",
placement: "bottom",
title: Drupal.t("What is SuiteDesk?"),
content: Drupal.t("SuiteDesk is a web based software useful for project management, planning, personal productivity, communication between project stakeholders, collaboration, customers support, documentation, cost control and change management.")
} , {
path: path,
element: "#stormprojects",
element: "#main-content ul.tabs li:last-child",
placement: "bottom",
title: Drupal.t("Welcome!"),
content: Drupal.t("Remember, here you can see your user profile and main options.")
} , {
path: path,
element: "#stormproject-item a:first-child",
placement: "top",
title: Drupal.t("Active projects"),
content: Drupal.t("Here you can see your projects. At the most basic level, SuiteDesk will help to track projects from start to finish, allows for the creation, assignment and control of tasks and deadlines, and let project stakeholders at different levels to have an input into the process.")
} , {
path: path,
element: "#stormtickets",
placement: "bottom",
title: Drupal.t("An issue tracking system"),
content: Drupal.t("SuiteDesk facilitates the reporting, notifying, updating, and viewing of issues like bugs, errors and new features. If you want to notify a bug or track an issue, here you can do it. A support ticket should include vital information for the account involved and the issue encountered.")
} , {
path: path,
element: "#storminvoices",
placement: "bottom",
title: Drupal.t("Easy invoice tracking"),
content: Drupal.t("SuiteDesk give you total control of the invoicing and payment activities of projects you are involved with.")
} , {
path: path,
element: "#stormdok",
placement: "bottom",
element: "#stormdok-item a:first-child",
placement: "top",
title: Drupal.t("Sharing project documents"),
content: Drupal.t("It is vital to keep all participants up to date on what is going on. Document sharing and collaboration is essentially a document repository that all project stakeholders have access to.")
} , {
path: path,
element: "#stormfaq",
placement: "bottom",
element: "#stormticket-item a:first-child",
placement: "top",
title: Drupal.t("An issue tracking system"),
content: Drupal.t("SuiteDesk facilitates the reporting, notifying, updating, and viewing of issues like bugs, errors and new features. If you want to notify a bug or track an issue, here you can do it. A support ticket should include vital information for the account involved and the issue encountered.")
} , {
path: path,
element: "#storminvoice-item a:first-child",
placement: "top",
title: Drupal.t("Easy invoice tracking"),
content: Drupal.t("SuiteDesk give you total control of the invoicing and payment activities of projects you are involved with.")
} , {
path: path,
element: "#stormfaq-item a:first-child",
placement: "top",
title: Drupal.t("Frequently Asked Questions"),
content: Drupal.t("A compilation of questions and answers commonly asked by a new customer, user or project member. Before asking a question make sure that you've checked out this list.")
} , {
path: path,
element: "#stormwatcher",
placement: "bottom",
element: "#stormwatcher-item a:first-child",
placement: "top",
title: Drupal.t("Watch content for changes"),
content: Drupal.t("SuiteDesk lets users a way to easily watch tickets for changes or new comments without having to post themselves. Supports email notifications being sent when both or either of the above occurs.")
} , {
@ -83,9 +90,14 @@ $jq(function() {
content: Drupal.t("And this block displays the last updated contents of your projects in SuiteDesk.")
}
]
}).init().start(true);
});
if (decodeURI((RegExp('tour=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]) == 'suitedesk') {
tour.goTo(1);
}
});
tour.init();
tour.start();
$('#menu-help a').click(function (e) {
e.preventDefault();
tour.restart();
});
});