-
Notifications
You must be signed in to change notification settings - Fork 941
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
base: master
Are you sure you want to change the base?
Conversation
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.
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)
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
build/js/bootstrap-tour.js
Outdated
|
||
Tour.prototype.getStepCount = function() { | ||
return this._options.steps.length; | ||
} |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing semicolon.
build/js/bootstrap-tour.js
Outdated
var promise; | ||
promise = this.hideStep(this._current, this._current); | ||
return this._callOnPromiseDone(promise, this.showStep, this._current); | ||
} |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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; | ||
} |
There was a problem hiding this comment.
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; | ||
} |
There was a problem hiding this comment.
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; | ||
} |
There was a problem hiding this comment.
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; | ||
} |
There was a problem hiding this comment.
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) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing semicolon.
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. |
Can we highlight all steps with its tooltip at the start of the tour? |
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