diff --git a/README.md b/README.md index 9ee6f38..8c780ed 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,7 @@ The entire purpose of Tourist is to add features and fixes, and migrate to nativ 12. Call onPreviouslyEnded if tour.start() is called for a tour that has previously ended (see docs) 13. Switch between Bootstrap 3 or 4 (popover template) automatically using tour options 14. Added sanitizeWhitelist and sanitizeFunction global options, fixed Bootstrap 3.4.1 breaking change + 15. Added support for changing button texts ## Added features & fixes: Documentation @@ -591,6 +592,34 @@ var Tour=new Tour({ }); ``` +### Change text for the buttons in the popup +You can now change the text displayed for the buttons used in the tour step popups. +For this, there is a new object you can pass to the options, called "localization": + +```javascript +var tour = new Tour({ + framework: "bootstrap3", // or "bootstrap4" depending on your version of bootstrap + steps: + [ + { + element: "#my-element", + title: "Title of my step", + content: "Content of my step" + }, + { + element: "#my-other-element", + title: "Title of my step", + content: "Content of my step" + } + ], + localization: + { + buttonTexts.nextButton: "Go", + buttonTexts.endTourButton: "Ok, enough" + } + }); +```` + ## Contributing Feel free to contribute with pull requests, bug reports or enhancement suggestions. diff --git a/bootstrap-tourist.js b/bootstrap-tourist.js index 13f0800..b23990d 100644 --- a/bootstrap-tourist.js +++ b/bootstrap-tourist.js @@ -1,6 +1,6 @@ /* ======================================================================== * - * Bootstrap Tourist v0.10 + * Bootstrap Tourist v0.11 * Copyright FFS 2019 * @ IGreatlyDislikeJavascript on Github * @@ -42,6 +42,10 @@ * * Updated for CS by FFS 2018 - v0.10 * + * + * Changes from 1.0: + * - added support for changing button texts + * * Changes from 0.9: * - smartPlacement option removed, deprecated * - default params compatibility for IE @@ -89,6 +93,7 @@ 12. Call onPreviouslyEnded if tour.start() is called for a tour that has previously ended (see docs) 13. Switch between Bootstrap 3 or 4 (popover methods and template) automatically using tour options 14. Added sanitizeWhitelist and sanitizeFunction global options + 15. Added support for changing button texts -------------- 1. Control flow from onNext() / onPrevious() options: @@ -116,6 +121,10 @@ var Tour=new Tour({ steps: tourSteps, framework: "bootstrap3", // or "bootstrap4" depending on your version of bootstrap + buttonTexts:{ // customize or localize button texts + nextButton:"go on", + endTourButton:"ok it's over", + } onNext: function(tour) { if(someVar = true) @@ -550,16 +559,10 @@ } })(window, function ($) { - var Tour, document, objTemplates; + var Tour, document, objTemplates, objTemplatesButtonTexts; document = window.document; - // SEARCH PLACEHOLDER: TEMPLATES LOCATION - objTemplates = { - bootstrap3 : '', - bootstrap4 : '', - }; - Tour = (function () { function Tour(options) @@ -574,6 +577,7 @@ storage = false; } + // take default options and overwrite with this tour options this._options = $.extend({ name: 'tour', @@ -617,13 +621,32 @@ onPreviouslyEnded: null, // function (tour) {}, onModalHidden: null, // function(tour, stepNumber) {} }, options); - if(this._options.framework !== "bootstrap3" && this._options.framework !== "bootstrap4") { this._debug('Invalid framework specified: ' + this._options.framework); throw "Bootstrap Tourist: Invalid framework specified"; } - + + + // create the templates + + // CUSTOMIZABLE TEXTES FOR BUTTONS + // set defaults + objTemplatesButtonTexts = { + prevButton: this._options.localization.buttonTexts.prevButton||"Prev", + nextButton: this._options.localization.buttonTexts.nextButton||"Next", + pauseButton: this._options.localization.buttonTexts.pauseButton||"Pause", + resumeButton: this._options.localization.buttonTexts.resumeButton||"Resume", + endTourButton: this._options.localization.buttonTexts.endTourButton||"End Tour", + } + + + // SEARCH PLACEHOLDER: TEMPLATES LOCATION + objTemplates = { + bootstrap3 : '', + bootstrap4 : '', + }; + // template option is default null. If not null after extend, caller has set a custom template, so don't touch it if(this._options.template === null) {