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

onNext allows goTo, stays at current step following return false from callback. Added reflexOnly to force click to continue. #710

Open
wants to merge 11 commits into
base: master
Choose a base branch
from

Conversation

IGreatlyDislikeJavascript

Added:

New step option "reflexOnly". When step includes "reflexOnly: true" && "reflex: true", tour "Next" button will be hidden for this step and tour can only be continued after the specified reflex element is clicked.

Changes are to Tour.prototype._template = function (step, i)

onNext and onPrevious obey a FALSE return value from step callback, enabling tour.goTo() and other flow control methods to work correctly in the onNext and onPrevious handler. To use, create a function in the onNext/onPrevious tour steps, and simply return false to prevent the tour from moving to the next step automatically. See #709 for details.

Changes are to Tour.prototype._showNextStep = function () and showPrevStep

Added:

New step option "reflexOnly". When step includes "reflexOnly: true" && "reflex: true", tour "Next" button will be hidden for this step and tour can only be continued after the specified reflex element is clicked. 

onNext and onPrevious obey a FALSE return value from step callback, enabling tour.goTo() and other flow control methods to work correctly in the onNext and onPrevious handler. To use, create a function in the onNext/onPrevious tour steps, and simply return false to prevent the tour from moving to the next step automatically. See sorich87#709 for details.
build/js/bootstrap-tour.js Show resolved Hide resolved
build/js/bootstrap-tour.js Show resolved Hide resolved
build/js/bootstrap-tour.js Show resolved Hide resolved
build/js/bootstrap-tour.js Outdated Show resolved Hide resolved
build/js/bootstrap-tour.js Show resolved Hide resolved
build/js/bootstrap-tour.js Show resolved Hide resolved
build/js/bootstrap-tour.js Show resolved Hide resolved
build/js/bootstrap-tour.js Show resolved Hide resolved
build/js/bootstrap-tour.js Show resolved Hide resolved
build/js/bootstrap-tour.js Show resolved Hide resolved
@IGreatlyDislikeJavascript IGreatlyDislikeJavascript changed the title Add files via upload onNext allows goTo, stays at current step following return false from callback. Added reflexOnly to force click to continue. Nov 27, 2018
Step "element" can now use a function to dynamically select the DOM element for the step. Usage:

element: function() { return $(document.body).find(".my-dynamic-element"); },
title: "Dynamic!",
content: "This element was found by jquery",

Change to Tour.prototype.getStep = function (i)
@IGreatlyDislikeJavascript
Copy link
Author

Added ability to use function in step.element

element: function() { return $(document.body).find(); }

… 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

Tour.prototype.getStepCount = function() {
return this._options.steps.length;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

Bug in the last upload, uploaded wrong ver. tour.start() would never continue, now fixed.
Tour didn't start due to setCurrentStep returning null instead of first step if nothing was set in localstorage.
Full list of all features added below. Review comments in top of bootstrap-tour.js for full explanation and examples:

 1. onNext/onPrevious - prevent auto-move to next step, allow .goTo
 2. *** Do not call Tour.init *** - fixed tours with hidden elements on page reload
 3. Dynamically determine step element by function
 4. Only continue tour when reflex element is clicked using reflexOnly
 5. Call onElementUnavailable if step element is missing
 6. Scroll flicker/continual step reload fixed
 7. Magic progress bar and progress text, plus options to customize per step
 8. Prevent user interaction with element using preventInteraction
 9. Wait for arbitrary DOM element to be visible before showing tour step/crapping out due to missing element, using delayOnElement
 10. Handle bootstrap modal dialogs better - autodetect modals or children of modals, and call onModalHidden when user dismisses modal without following tour steps
 11. Automagically fixes drawing issues with Bootstrap Selectpicker (https://github.com/snapappointments/bootstrap-select/)
.toString.call(host) === '[object String]' && this._isHostDifferent(host, location)))) {
return true;
}
currentPath = [location.pathname, location.search, locatio

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

var promise;
promise = this.hideStep(this._current, this._current);
return this._callOnPromiseDone(promise, this.showStep, this._current);
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

.toString.call(host) === '[object String]' && this._isHostDifferent(host, location)))) {
return true;
}
currentPath = [location.pathname, location.search, locati

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

.toString.call(host) === '[object String]' && this._isHostDifferent(host, location)))) {
return true;
}
currentPath = [location.pathname, location.search, locati

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

READ COMMENT AT TOP OF JS FOR ALL DETAILS

 * Changes from 0.5:
 *	- Added "unfix" for bootstrap selectpicker to revert zindex after step that includes this plugin
 *  - Fixed issue with Bootstrap dialogs. Handling of dialogs is now robust
 *  - Fixed issue with BootstrapDialog plugin: https://nakupanda.github.io/bootstrap3-dialog/ . See notes below for help.
 *  - Improved the background overlay and scroll handling, unnecessary work removed
{
_this._debug("onModalHidden returned exactly false, tour step unchanged");
return;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

{
_this._debug("onModalHidden returned exactly false, tour step unchanged");
return;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

{
_this._debug("onModalHidden returned exactly false, tour step unchanged");
return;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'default parameters' is only available in ES6 (use 'esversion: 6').

{
_this._debug("onModalHidden returned exactly false, tour step unchanged");
return;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'default parameters' is only available in ES6 (use 'esversion: 6').

this._debug("Modal identified, onModalHidden callback available");

// store the modal element for other calls
this._setStepFlag(i, "elementModal", $modalObject)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon.

@IGreatlyDislikeJavascript
Copy link
Author

MegaChriz - thank you, I'm constrained by a) not having a clue how github works and b) knowing nothing about javascript. I had a look at the standalone version but there's almost an additional 1000 lines of code in there, so doesn't look easy to roll a standalone into my fork.

Nonetheless I've created a new repo for the fork of bootstrap-tour:

https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist

This should help avoid confusion in the fork etc.

@wahajahmed1
Copy link

Can we highlight all steps with its tooltip at the start of the tour?

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

Successfully merging this pull request may close these issues.

4 participants