Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popup flickering while scrolling #685

Open
camohub opened this issue May 14, 2018 · 1 comment
Open

Popup flickering while scrolling #685

camohub opened this issue May 14, 2018 · 1 comment

Comments

@camohub
Copy link

camohub commented May 14, 2018

I have working tour. BUT if I scroll the page popup flickers. Can you tell me how to fix it? Here is the code:

$(document).ready(function() {
	var steps = [
		{ // [0] index
			orphan: true,
			title: "Vítame Vás v Zákazkovníku!",
			content: "Průvodce můžete kdykoliv ukončit a nebo jej kdykoliv .....",
			pathCallback: function () {
				return basePath + '/overview';
			}
		},
		{ // [1]
			element: '.tour-workers',
			reflex: true,
			placement: 'bottom',
			title: "Pracovníci",
			content: "Jako první založíme Pracovníky, klikněte prosím v horním .....",
			pathCallback: function () {
				return basePath + '/overview';
			}
		},
		{ // [2]
			element: '.tour-create-worker',
			reflex: true,
			placement: 'left',
			title: "Pracovníci",
			content: "V každé sekci najdete základní ovládací prvky.....",
			pathCallback: function () {
				return basePath + '/worker';
			}
		}
	];


//// TOUR INIT ////////////////////////////////////////////////////////////////////////////////////////////////////
	var tour = new Tour({
		//debug: true,
		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">Zpět</button><span data-role="separator"> </span> ' +
				'<button class="btn btn-default" data-role="next">Dále</button> ' +
				'<button class="btn btn-default" data-role="end">Ukončit</button>' +
			'</div>',
		onEnd: function () {
			localStorage.removeItem( 'tour_end' );
			localStorage.removeItem( 'tour_current_step' );
			localStorage.removeItem( 'tour_redirect_to' );
			localStorage.removeItem( 'tour_commission_id' );

			document.location.href = basePath + '/overview/?stop=1&do=applicationGuide';
		}
	});

	for( var i = 0; i < steps.length; i++ )  // Dynamically created because of step.path attribute which causes redirect.
	{
		var step = {};
		step.orphan = true;

		if( steps[i].element ) step.element = steps[i].element;
		if( steps[i].reflex ) step.reflex = steps[i].reflex;
		if( steps[i].placement ) step.placement = steps[i].placement;
		if( steps[i].title ) step.title = steps[i].title;
		if( steps[i].content ) step.content = steps[i].content;
		if( steps[i].path ) step.path = steps[i].path;

		if( ! steps[i].pathCallback ) console.error('Step pathCallback is required parameter. Index ' + i);  // Debug

		var path = steps[i].pathCallback();
		var pathRegExp = new RegExp( path + '(/(\\?.+)?)?$', 'gi');
		if( ! document.location.href.match( pathRegExp ) )  // Sets path param only if next step needs redirect.
		{
			step.path = path;  // This param ALWAYS triggers a redirect. So we need to set it only if we need redirect.
		}

		if( steps[i].contentCallback )  // Some steps check errors and set the content to error message.
		{
			step.content = steps[i].contentCallback();
		}

		tour.addStep( step );
	}

	// Initialize the tour
	tour.init();

	// Start the tour
	tour.start();

});
IGreatlyDislikeJavascript added a commit to IGreatlyDislikeJavascript/bootstrap-tour that referenced this issue Nov 28, 2018
… added

Fixed flow issue with tour.init() especially where page contains hidden elements
- Do not call tour.init(). Create your new Tour({options}); then call Tour.start or .restart when you want to show the tour. (sorich87#700 


Fixed inefficient display of tour popover
- popovers do not constantly reload current step on scroll. Flickering/flashing resolved. (sorich87#685)
- element popovers don't move around the page as you scroll - this is a personal thing, but I didn't like the functionality where if you scroll the page so the element is no longer visible, the popover follows you around. Doesn't make much sense because the popover isn't visually attached to it's parent element. 
- orphan popovers stay stuck to the center of the screen no matter what


Added onElementUnavailable(tour, step) to global and step options
- Specify a function as normal (i.e.: same as onNext etc) with pattern above. Function will be called when the element of the step is unavailable == missing, hidden etc. "step" parameter indicates the step that is going to be skipped.


Added progress indicators and ability to dynamically change during tour:
- Global option "showProgressBar" : set to true to show a (bootstrap) progress bar, or false to hide it
- Step option "showProgressBar" will override global option, so you can turn on/off progress bars per step

Customise the progress bar using option getProgressBarHTML:
getProgressBarHTML: function(percentProgress) { return '<div class="progress"><div class="progress-bar progress-bar-striped" role="progressbar" style="width: ' + percentProgress + '%;"></div></div>'}


- Global and step option "showProgressText" shows a "N / X" tour step counter in the popover title bar

Customise the text using option getProgressTextHTML:
getProgressBarHTML: function(stepNumber, percentProgress, stepCount) { return '<span class="pull-right">' + stepNumber + '/' + stepCount + '</span>'; }

Based on sorich87#362
@MegaChriz
Copy link

There is an other ticket about this with a useful workaround: #658

Tour.prototype._onScroll = () => {}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants