Add number of steps to the template function

[fredericoregateiro]

I think this could be done easily, so we could on the template function add a progress bar.

I've changed the Tour.prototype.getStep and added a property:
numSteps: this._options.steps.length

for me it's working.

Thanks,
Frederico

[TonyAshworth]

I was looking for a similar feature. I was hoping to find something in the template such as.

<span class='popover-current-step'></span>
<span class='popover-total-steps'></span>

[ewels]

I was looking for something like this and came up with the following solution:

• Move steps out into a separate variable, just the array
• Update the title of each item in a loop, to show the step number
• Reference the array when creating the tour.

For example:

var tour_steps = [
  {
    orphan: true,
    title: "Welcome to this tour!",
    content: 'This is the first step.',
  },
  {
    element: "#cool_element",
    title: 'Now with item counts.',
    content: "These steps have the count shown in the header...",
  },
];
$.each(tour_steps, function(i, step){
  step['title'] += '<span style="float:right;">'+(i+1)+'/'+tour_steps.length+'</span>';
});
var my_tour = new Tour({
  backdrop: true,
  storage: false,
  steps: tour_steps
});
my_tour.init();

Obviously you can adjust the markup however you would like. For instance, a progress bar:

$.each(tour_steps, function(i, step){
  var percent = parseInt(((i+1) / tour_steps.length) * 100);
  step['content'] = '<div class="progress"><div class="progress-bar" role="progressbar" style="min-width: 2em; width:'+percent+'%;">'+percent+'%</div></div>'+step['content'];
});

I hope that helps someone!

[ewels]

For completeness, here's my solution (adds slide number after the title on the right, and has a progress bar underneath)..

Example:

JS:

var tour_steps = [
  ...
  {
    orphan: true,
    title: "Example Tour Slide",
    content: "I know how far through this tour I am! And my, what a lovely progress bar."
  },
  ...
];
$.each(tour_steps, function(i, step){
  step['title'] += '<span class="pull-right">'+(i+1)+'/'+tour_steps.length+'</span>';
  var percent = parseInt(((i+1) / tour_steps.length) * 100);
  step['content'] = '<div class="pbar_wrapper"><hr class="pbar" style="width:'+percent+'%;"></div>' + step['content'];
});
var intro_tour = new Tour({
  backdrop: true,
  storage: false,
  steps: tour_steps
});
intro_tour.init();
$('#launch-into-tour').click(function(){
  intro_tour.start();
});

CSS:

.popover.my-tour .popover-content {
    padding-top: 0;
}
.popover.my-tour .popover-content .pbar_wrapper {
    padding-bottom: 9px;
    margin: -1px -14px 0;
}
.popover.my-tour .popover-content .pbar {
    border-top: 1px solid #337ab7;
    margin:0;
}

[IGreatlyDislikeJavascript]

Added progress bar into fork

https://github.com/IGreatlyDislikeJavascript/bootstrap-tour
https://github.com/IGreatlyDislikeJavascript/bootstrap-tour/blob/master/build/js/bootstrap-tour.js