引导"Tour"启动时的错误 [英] Bootstrap "Tour" bug when I start it
问题描述
我有一个用Drupal 8和Bootstrap 3构建的网站.当用户访问该站点时，Tour会自动启动. Tour完成后，会在访问者的浏览器中放置一个cookie，这样当用户重新加载页面时Tour将不会启动.
I have a site built with Drupal 8 and Bootstrap 3. When a user visited the site, Tour starts automatically. When Tour is finished, a cookie is placed in the browser of the visitor so that Tour will not start when the user reloads the page.
我的问题:
我在左侧菜单Commencer la visite中创建了一个按钮，以便用户手动访问Tour.
I created a button on the left menu Commencer la visite, so that users access the Tour manually.
每次我手动重新启动Tour时，都会不时出现错误.必须在其他页面上将其重新启动几次才能看到该错误.
Every time I restart the Tour manually, a bug will appear from time to time. It must be restarted several times on a different page to see the bug.
该如何纠正?
这是我在bs-tour.js文件末尾添加的代码:
Here is the code I added at the end of my bs-tour.js file :
// Restart the tour
var startTour = $('#bs-tour-restart');
startTour.click(function (event) {
event.preventDefault();
var tourObject = drupalSettings.bs_tour.currentTour;
if (tourObject && tourObject._options.steps.length) {
tourObject.start(true);
}
});
// Close collapse navigation
$('#bs-tour-restart').click(function () {
$('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
});
这是我的bs-tour.js文件:
Here is my bs-tour.js file :
(function ($, _, Drupal, drupalSettings) {
'use strict';
Drupal.behaviors.bsTour = {
attach: function (context, settings) {
$(window).on('load', function (event) {
try
{
var tourOptions = $(drupalSettings.bs_tour.tour)[0];
var tips = tourOptions.steps;
var keyboard = tourOptions.keyboard;
var debug = tourOptions.debug;
var steps = [];
for (var i = 0; i < tips.length; i++) {
if ($(tips[i].element).length > 0) {
tips[i].backdropPadding.top = parseInt(tips[i].backdropPadding.top);
tips[i].backdropPadding.right = parseInt(tips[i].backdropPadding.right);
tips[i].backdropPadding.bottom = parseInt(tips[i].backdropPadding.bottom);
tips[i].backdropPadding.left = parseInt(tips[i].backdropPadding.left);
switch (tips[i].backdrop) {
case "0":
tips[i].backdrop = false;
break;
case "1":
tips[i].backdrop = true;
break;
}
steps.push(tips[i]);
}
}
if (steps.length) {
var tour = new Tour({
debug: debug,
keyboard: keyboard,
template: "<div class='popover tour'>\
<div class='arrow'></div>\
<h3 class='popover-title'></h3>\
<div class='popover-content'></div>\
<div class='popover-navigation'>\
<button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\
<span data-role='separator'>|</span>\
<button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
<button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
</div>\
</div>",
});
// Add steps to the tour
tour.addSteps(steps);
// Initialize the tour
tour.init();
// Start the tour
tour.start();
// Restart the tour
var startTour = $('#bs-tour-restart');
startTour.click(function (event) {
event.preventDefault();
var tourObject = drupalSettings.bs_tour.currentTour;
if (tourObject && tourObject._options.steps.length) {
tourObject.start(true);
}
});
// Close collapse navigation
$('#bs-tour-restart').click(function () {
$('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
});
// Add tour object to drupalSettings to allow manipulating tour from other modules.
// Example: drupalSettings.bs_tour.currentTour.end();
drupalSettings.bs_tour.currentTour = tour;
}
} catch (e) {
// catch any fitvids errors
window.console && console.warn('Bootstrap tour stopped with the following exception');
window.console && console.error(e);
}
});
}
};
})(window.jQuery, window._, window.Drupal, window.drupalSettings);
当我启动Tour时，背景是黑色的:
When I start the Tour, the background is black :
推荐答案
我不确定，但是当我发起访问时，我认为访问已在菜单右"中完成.
I'm not sure, but when I launched the visit, I thought that it finish in the 'menu right'.
我调查了您的js，发现还有其他步骤，恰好是8. 一件事是，您应该实现滚动功能，以针对打开的步骤为目标.
I looked into your js and I've seen that there were other steps, exactly 8. One thing is that you should implement a scroll to function that target the opened step.
所以我滚动到底部，然后看到下一个按钮为灰色，浏览结束，并且无法重现您的问题时，我完成了浏览.
So I scrolled to bottom, and then I finish the tour when I see that the next button was grey, the tour is finish, and I can't reproduce your issue.
我认为您应该使用'onShown'选项( http://bootstraptour.com/api/)，以使窗口滚动到目标元素.
I think you should use the 'onShown' option (http://bootstraptour.com/api/) to make the window scroll to the targeted element.
最后(我认为)是您的问题仅是由于巡回演出未完成而引起的??
Finally (I think) is that your issue is just caused because the tour is not finish ??
也许您可以使用这样的代码进行测试，虽然尚未测试，但类似.
Maybe you can test with a code like this, It's not tested but it's something similar.
var tour = new Tour({
debug: debug,
onShown: function(tour){
var target = tour._options.steps[tour.getCurrentStep()].element;
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
},
keyboard: keyboard,
template: "<div class='popover tour'>\
<div class='arrow'></div>\
<h3 class='popover-title'></h3>\
<div class='popover-content'></div>\
<div class='popover-navigation'>\
<button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\
<span data-role='separator'>|</span>\
<button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
<button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
</div>\
</div>",
});
这篇关于引导"Tour"启动时的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
