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.

Sign up for GitHub

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

Jump to bottom

Added support for changing button texts #8

Merged
merged 4 commits into from
Jun 26, 2019
Merged

Added support for changing button texts #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e323b2a
Added support for changing the texts of the buttons
vneri Jun 21, 2019
6b1af2d
Merge pull request #1 from vneri/vneri-patch-1
vneri Jun 21, 2019
aa6ac0c
buttonTexts now in localization obj, corrected textes
vneri Jun 24, 2019
245595e
Updated info on new button changing options
vneri Jun 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down
43 changes: 33 additions & 10 deletions bootstrap-tourist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* ========================================================================
*
* Bootstrap Tourist v0.10
* Bootstrap Tourist v0.11
* Copyright FFS 2019
* @ IGreatlyDislikeJavascript on Github
*
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -550,16 +559,10 @@
}
})(window, function ($) {

var Tour, document, objTemplates;
var Tour, document, objTemplates, objTemplatesButtonTexts;

document = window.document;

// SEARCH PLACEHOLDER: TEMPLATES LOCATION
objTemplates = {
bootstrap3 : '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-default" data-role="prev">&laquo; Prev</button> <button class="btn btn-sm btn-default" data-role="next">Next &raquo;</button> <button class="btn btn-sm btn-default" data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">Pause</button> </div> <button class="btn btn-sm btn-default" data-role="end">End tour</button> </div> </div>',
bootstrap4 : '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-header"></h3> <div class="popover-body"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-outline-secondary" data-role="prev">&laquo; Prev</button> <button class="btn btn-sm btn-outline-secondary" data-role="next">Next &raquo;</button> <button class="btn btn-sm btn-outline-secondary" data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">Pause</button> </div> <button class="btn btn-sm btn-outline-secondary" data-role="end">End tour</button> </div> </div>',
};

Tour = (function () {

function Tour(options)
Expand All @@ -574,6 +577,7 @@
storage = false;
}


// take default options and overwrite with this tour options
this._options = $.extend({
name: 'tour',
Expand Down Expand Up @@ -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 : '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-default" data-role="prev">&laquo; '+objTemplatesButtonTexts.prevButton+'</button> <button class="btn btn-sm btn-default" data-role="next">'+objTemplatesButtonTexts.nextButton+' &raquo;</button> <button class="btn btn-sm btn-default" data-role="pause-resume" data-pause-text="'+objTemplatesButtonTexts.pauseButton+'" data-resume-text="'+objTemplatesButtonTexts.resumeButton+'">'+objTemplatesButtonTexts.pauseButton+'</button> </div> <button class="btn btn-sm btn-default" data-role="end">'+objTemplatesButtonTexts.endTourButton+'</button> </div> </div>',
bootstrap4 : '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-header"></h3> <div class="popover-body"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-outline-secondary" data-role="prev">&laquo; '+objTemplatesButtonTexts.prevButton+'</button> <button class="btn btn-sm btn-outline-secondary" data-role="next">'+objTemplatesButtonTexts.nextButton+' &raquo;</button> <button class="btn btn-sm btn-outline-secondary" data-role="pause-resume" data-pause-text="'+objTemplatesButtonTexts.pauseButton+'" data-resume-text="'+objTemplatesButtonTexts.resumeButton+'">'+objTemplatesButtonTexts.pauseButton+'</button> </div> <button class="btn btn-sm btn-outline-secondary" data-role="end">'+objTemplatesButtonTexts.endTourButton+'</button> </div> </div>',
};

// 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)
{
Expand Down