35 |
36 |
37 |
38 |
49 |
'
50 | afterSetState: (key, value) ->
51 | afterGetState: (key, value) ->
52 | afterRemoveState: (key) ->
53 | onStart: (tour) ->
54 | onEnd: (tour) ->
55 | onShow: (tour) ->
56 | onShown: (tour) ->
57 | onHide: (tour) ->
58 | onHidden: (tour) ->
59 | onNext: (tour) ->
60 | onPrev: (tour) ->
61 | onPause: (tour, duration) ->
62 | onResume: (tour, duration) ->
63 | onRedirectError: (tour) ->
64 | , options
65 |
66 | @_force = false
67 | @_inited = false
68 | @_current = null
69 | @backdrops = []
70 | @
71 |
72 | # Add multiple steps
73 | addSteps: (steps) ->
74 | @addStep step for step in steps
75 | @
76 |
77 | # Add a new step
78 | addStep: (step) ->
79 | @_options.steps.push step
80 | @
81 |
82 | # Get a step by its indice
83 | getStep: (i) ->
84 | if @_options.steps[i]?
85 | $.extend
86 | id: "step-#{i}"
87 | path: ''
88 | host: ''
89 | placement: 'right'
90 | title: ''
91 | content: '' # no empty as default, otherwise popover won't show up
92 | next: if i is @_options.steps.length - 1 then -1 else i + 1
93 | prev: i - 1
94 | animation: true
95 | container: @_options.container
96 | autoscroll: @_options.autoscroll
97 | backdrop: @_options.backdrop
98 | backdropContainer: @_options.backdropContainer
99 | backdropPadding: @_options.backdropPadding
100 | redirect: @_options.redirect
101 | reflexElement: @_options.steps[i].element
102 | backdropElement: @_options.steps[i].element
103 | orphan: @_options.orphan
104 | duration: @_options.duration
105 | delay: @_options.delay
106 | template: @_options.template
107 | onShow: @_options.onShow
108 | onShown: @_options.onShown
109 | onHide: @_options.onHide
110 | onHidden: @_options.onHidden
111 | onNext: @_options.onNext
112 | onPrev: @_options.onPrev
113 | onPause: @_options.onPause
114 | onResume: @_options.onResume
115 | onRedirectError: @_options.onRedirectError
116 | , @_options.steps[i]
117 |
118 | # Setup event bindings and continue a tour that has already started
119 | init: (force) ->
120 | @_force = force
121 |
122 | if @ended()
123 | @_debug 'Tour ended, init prevented.'
124 | return @
125 |
126 | @setCurrentStep()
127 |
128 | @_initMouseNavigation()
129 | @_initKeyboardNavigation()
130 |
131 | # Continue a tour that had started on a previous page load
132 | @showStep @_current unless @_current is null
133 |
134 | @_inited = true
135 | @
136 |
137 | # Start tour from current step
138 | start: (force = false) ->
139 | @init force unless @_inited # Backward compatibility
140 |
141 | if @_current is null
142 | promise = @_makePromise(@_options.onStart(@) if @_options.onStart?)
143 | @_callOnPromiseDone(promise, @showStep, 0)
144 | @
145 |
146 | # Hide current step and show next step
147 | next: ->
148 | promise = @hideStep @_current, @_current+1
149 | @_callOnPromiseDone promise, @_showNextStep
150 |
151 | # Hide current step and show prev step
152 | prev: ->
153 | promise = @hideStep @_current, @_current-1
154 | @_callOnPromiseDone promise, @_showPrevStep
155 |
156 | goTo: (i) ->
157 | promise = @hideStep @_current, i
158 | @_callOnPromiseDone promise, @showStep, i
159 |
160 | # End tour
161 | end: ->
162 | endHelper = (e) =>
163 | $(document).off "click.tour-#{@_options.name}"
164 | $(document).off "keyup.tour-#{@_options.name}"
165 | @_setState('end', 'yes')
166 | @_inited = false
167 | @_force = false
168 |
169 | @_clearTimer()
170 |
171 | @_options.onEnd(@) if @_options.onEnd?
172 |
173 | promise = @hideStep(@_current)
174 | @_callOnPromiseDone(promise, endHelper)
175 |
176 | # Verify if tour is enabled
177 | ended: ->
178 | not @_force and not not @_getState 'end'
179 |
180 | # Restart tour
181 | restart: ->
182 | @_removeState 'current_step'
183 | @_removeState 'end'
184 | @_removeState 'redirect_to'
185 | @start()
186 |
187 | # Pause step timer
188 | pause: ->
189 | step = @getStep @_current
190 | return @ unless step and step.duration
191 |
192 | @_paused = true
193 | @_duration -= new Date().getTime() - @_start
194 | window.clearTimeout(@_timer)
195 |
196 | @_debug "Paused/Stopped step #{@_current + 1} timer (#{@_duration} remaining)."
197 |
198 | step.onPause @, @_duration if step.onPause?
199 |
200 | # Resume step timer
201 | resume: ->
202 | step = @getStep @_current
203 | return @ unless step and step.duration
204 |
205 | @_paused = false
206 | @_start = new Date().getTime()
207 | @_duration = @_duration or step.duration
208 | @_timer = window.setTimeout =>
209 | if @_isLast() then @next() else @end()
210 | , @_duration
211 |
212 | @_debug "Started step #{@_current + 1} timer with duration #{@_duration}"
213 |
214 | step.onResume @, @_duration if step.onResume? and @_duration isnt step.duration
215 |
216 | # Hide the specified step
217 | hideStep: (i, iNext) ->
218 | step = @getStep i
219 | return unless step
220 |
221 | @_clearTimer()
222 |
223 | # If onHide returns a promise, let's wait until it's done to execute
224 | promise = @_makePromise(step.onHide @, i if step.onHide?)
225 |
226 | hideStepHelper = (e) =>
227 | $element = $ step.element
228 | $element = $('body') unless $element.data('bs.popover')
229 | $element
230 | .popover('dispose')
231 | .removeClass("tour-#{@_options.name}-element tour-#{@_options.name}-#{i}-element")
232 | .removeData('bs.popover')
233 |
234 | if step.reflex
235 | $ step.reflexElement
236 | .removeClass('tour-step-element-reflex')
237 | .off "#{@_reflexEvent(step.reflex)}.tour-#{@_options.name}"
238 |
239 | if step.backdrop
240 | next_step = iNext? and @getStep iNext
241 | if !next_step or !next_step.backdrop or next_step.backdropElement != step.backdropElement
242 | @_hideOverlayElement(step)
243 |
244 | step.onHidden(@) if step.onHidden?
245 |
246 | hideDelay = step.delay.hide || step.delay
247 |
248 | if ({}).toString.call(hideDelay) is '[object Number]' and hideDelay > 0
249 | @_debug "Wait #{hideDelay} milliseconds to hide the step #{@_current + 1}"
250 | window.setTimeout =>
251 | @_callOnPromiseDone promise, hideStepHelper
252 | , hideDelay
253 | else
254 | @_callOnPromiseDone promise, hideStepHelper
255 |
256 | promise
257 |
258 | # Show the specified step
259 | showStep: (i) ->
260 | if @ended()
261 | @_debug 'Tour ended, showStep prevented.'
262 | return @
263 |
264 | step = @getStep i
265 | return unless step
266 |
267 | skipToPrevious = i < @_current
268 |
269 | # If onShow returns a promise, let's wait until it's done to execute
270 | promise = @_makePromise(step.onShow @, i if step.onShow?)
271 |
272 | @setCurrentStep i
273 |
274 | # Support string or function for path
275 | path = switch ({}).toString.call step.path
276 | when '[object Function]' then step.path()
277 | when '[object String]' then @_options.basePath + step.path
278 | else step.path
279 |
280 | # Redirect to step path if not already there
281 | if step.redirect and @_isRedirect step.host, path, document.location
282 | @_redirect step, i, path
283 |
284 | return unless @_isJustPathHashDifferent(step.host, path, document.location)
285 |
286 | showStepHelper = (e) =>
287 | # Skip if step is orphan and orphan options is false
288 | if @_isOrphan step
289 | if step.orphan is false
290 | @_debug """Skip the orphan step #{@_current + 1}.
291 | Orphan option is false and the element does not exist or is hidden."""
292 | if skipToPrevious then @_showPrevStep() else @_showNextStep()
293 | return
294 |
295 | @_debug "Show the orphan step #{@_current + 1}. Orphans option is true."
296 |
297 | # Show backdrop
298 | # @_showBackdrop(step) if step.backdrop
299 |
300 | if step.autoscroll
301 | @_scrollIntoView i
302 | else
303 | @_showPopoverAndOverlay i
304 |
305 | # Play step timer
306 | @resume() if step.duration
307 |
308 | showDelay = step.delay.show || step.delay
309 |
310 | if ({}).toString.call(showDelay) is '[object Number]' and showDelay > 0
311 | @_debug "Wait #{showDelay} milliseconds to show the step #{@_current + 1}"
312 | window.setTimeout =>
313 | @_callOnPromiseDone promise, showStepHelper
314 | , showDelay
315 | else
316 | @_callOnPromiseDone promise, showStepHelper
317 |
318 | promise
319 |
320 | getCurrentStep: ->
321 | @_current
322 |
323 | # Setup current step variable
324 | setCurrentStep: (value) ->
325 | if value?
326 | @_current = value
327 | @_setState 'current_step', value
328 | else
329 | @_current = @_getState 'current_step'
330 | @_current = if @_current is null then null else parseInt @_current, 10
331 | @
332 |
333 | # Manually trigger a redraw on the overlay element
334 | redraw: ->
335 | @_showOverlayElement(@getStep(@getCurrentStep()))
336 |
337 | # Set a state in storage
338 | _setState: (key, value) ->
339 | if @_options.storage
340 | keyName = "#{@_options.name}_#{key}"
341 | try @_options.storage.setItem keyName, value
342 | catch e
343 | if e.code is DOMException.QUOTA_EXCEEDED_ERR
344 | @_debug 'LocalStorage quota exceeded. State storage failed.'
345 | @_options.afterSetState keyName, value
346 | else
347 | @_state ?= {}
348 | @_state[key] = value
349 |
350 | # Remove the current state from the storage layer
351 | _removeState: (key) ->
352 | if @_options.storage
353 | keyName = "#{@_options.name}_#{key}"
354 | @_options.storage.removeItem keyName
355 | @_options.afterRemoveState keyName
356 | else
357 | delete @_state[key] if @_state?
358 |
359 | # Get the current state from the storage layer
360 | _getState: (key) ->
361 | if @_options.storage
362 | keyName = "#{@_options.name}_#{key}"
363 | value = @_options.storage.getItem keyName
364 | else
365 | value = @_state[key] if @_state?
366 |
367 | value = null if value is undefined or value is 'null'
368 |
369 | @_options.afterGetState key, value
370 | return value
371 |
372 | # Show next step
373 | _showNextStep: ->
374 | step = @getStep @_current
375 | showNextStepHelper = (e) => @showStep step.next
376 |
377 | promise = @_makePromise(step.onNext @ if step.onNext?)
378 | @_callOnPromiseDone promise, showNextStepHelper
379 |
380 | # Show prev step
381 | _showPrevStep: ->
382 | step = @getStep @_current
383 | showPrevStepHelper = (e) => @showStep step.prev
384 |
385 | promise = @_makePromise(step.onPrev @ if step.onPrev?)
386 | @_callOnPromiseDone promise, showPrevStepHelper
387 |
388 | # Print message in console
389 | _debug: (text) ->
390 | window.console.log "Bootstrap Tour '#{@_options.name}' | #{text}" if @_options.debug
391 |
392 | # Check if step path equals current document path
393 | _isRedirect: (host, path, location) ->
394 | return true if host? and host isnt '' and (
395 | (({}).toString.call(host) is '[object RegExp]' and not host.test(location.origin)) or
396 | (({}).toString.call(host) is '[object String]' and @_isHostDifferent(host, location))
397 | )
398 |
399 | currentPath = [
400 | location.pathname,
401 | location.search,
402 | location.hash
403 | ].join('')
404 |
405 | path? and path isnt '' and (
406 | (({}).toString.call(path) is '[object RegExp]' and not path.test(currentPath)) or
407 | (({}).toString.call(path) is '[object String]' and @_isPathDifferent(path, currentPath))
408 | )
409 |
410 | _isHostDifferent: (host, location) ->
411 | switch ({}).toString.call(host)
412 | when '[object RegExp]'
413 | not host.test(location.origin)
414 | when '[object String]'
415 | @_getProtocol(host) isnt @_getProtocol(location.href) or
416 | @_getHost(host) isnt @_getHost(location.href)
417 | else
418 | true
419 |
420 | _isPathDifferent: (path, currentPath) ->
421 | @_getPath(path) isnt @_getPath(currentPath) or not
422 | @_equal(@_getQuery(path), @_getQuery(currentPath)) or not
423 | @_equal(@_getHash(path), @_getHash(currentPath))
424 |
425 | _isJustPathHashDifferent: (host, path, location) ->
426 | if host? and host isnt ''
427 | return false if @_isHostDifferent(host, location)
428 |
429 | currentPath = [
430 | location.pathname,
431 | location.search,
432 | location.hash
433 | ].join('')
434 |
435 | if ({}).toString.call(path) is '[object String]'
436 | return @_getPath(path) is @_getPath(currentPath) and
437 | @_equal(@_getQuery(path), @_getQuery(currentPath)) and not
438 | @_equal(@_getHash(path), @_getHash(currentPath))
439 |
440 | false
441 |
442 | # Execute the redirect
443 | _redirect: (step, i, path) ->
444 | if $.isFunction step.redirect
445 | step.redirect.call this, path
446 | else
447 | href = if ({}).toString.call(step.host) is '[object String]' then "#{step.host}#{path}" else path
448 | @_debug "Redirect to #{href}"
449 |
450 | if @_getState('redirect_to') is "#{i}"
451 | @_debug "Error redirection loop to #{path}"
452 | @_removeState 'redirect_to'
453 |
454 | step.onRedirectError @ if step.onRedirectError?
455 | else
456 | @_setState 'redirect_to', "#{i}"
457 | document.location.href = href
458 |
459 | _isOrphan: (step) ->
460 | # Do not check for is(':hidden') on svg elements. jQuery does not work properly on svg.
461 | not step.element? or
462 | not $(step.element).length or
463 | $(step.element).is(':hidden') and
464 | ($(step.element)[0].namespaceURI isnt 'http://www.w3.org/2000/svg')
465 |
466 | _isLast: ->
467 | @_current < @_options.steps.length - 1
468 |
469 | _showPopoverAndOverlay: (i) =>
470 | return if @getCurrentStep() isnt i or @ended()
471 |
472 | step = @getStep i
473 |
474 | @_showOverlayElement step if step.backdrop
475 | @_showPopover step, i
476 | step.onShown @ if step.onShown?
477 | @_debug "Step #{@_current + 1} of #{@_options.steps.length}"
478 |
479 | # Show step popover
480 | _showPopover: (step, i) ->
481 | # Remove previously existing tour popovers. This prevents displaying of
482 | # multiple inactive popovers when user navigates the tour too quickly.
483 | $(".tour-#{@_options.name}").remove()
484 |
485 | options = $.extend {}, @_options
486 | isOrphan = @_isOrphan step
487 |
488 | step.template = @_template step, i
489 |
490 | if isOrphan
491 | step.element = 'body'
492 | step.placement = 'top'
493 |
494 | $element = $ step.element
495 | $element.addClass "tour-#{@_options.name}-element tour-#{@_options.name}-#{i}-element"
496 |
497 | $.extend options, step.options if step.options
498 | if step.reflex and not isOrphan
499 | $ step.reflexElement
500 | .addClass('tour-step-element-reflex')
501 | .off("#{@_reflexEvent(step.reflex)}.tour-#{@_options.name}")
502 | .on "#{@_reflexEvent(step.reflex)}.tour-#{@_options.name}", =>
503 | if @_isLast() then @next() else @end()
504 |
505 | $element
506 | .popover(
507 | placement: step.placement
508 | trigger: 'manual'
509 | title: step.title
510 | content: step.content
511 | html: true
512 | animation: step.animation
513 | container: step.container
514 | template: step.template
515 | selector: step.element
516 | )
517 | .popover 'show'
518 |
519 | # Tip adjustment
520 | $tip = $($element.data('bs.popover').getTipElement())
521 | $tip.attr 'id', step.id
522 |
523 | # Get popover template
524 | _template: (step, i) ->
525 | template = step.template
526 |
527 | if @_isOrphan(step) and ({}).toString.call(step.orphan) isnt '[object Boolean]'
528 | template = step.orphan
529 |
530 | $template = if $.isFunction template then $(template i, step) else $(template)
531 | $navigation = $template.find '.popover-navigation'
532 | $prev = $navigation.find '[data-role="prev"]'
533 | $next = $navigation.find '[data-role="next"]'
534 | $resume = $navigation.find '[data-role="pause-resume"]'
535 |
536 | $template.addClass 'orphan' if @_isOrphan step
537 | $template.addClass "tour-#{@_options.name} tour-#{@_options.name}-#{i}"
538 | $template.addClass "tour-#{@_options.name}-reflex" if step.reflex
539 |
540 | if step.prev < 0
541 | $prev.addClass('disabled')
542 | .prop('disabled', true)
543 | .prop('tabindex', -1)
544 |
545 | if step.next < 0
546 | $next.addClass('disabled')
547 | .prop('disabled', true)
548 | .prop('tabindex', -1)
549 |
550 | $resume.remove() unless step.duration
551 | $template.clone().wrap('').parent().html()
552 |
553 | _reflexEvent: (reflex) ->
554 | if ({}).toString.call(reflex) is '[object Boolean]' then 'click' else reflex
555 |
556 | # Scroll to the popup if it is not in the viewport
557 | _scrollIntoView: (i) ->
558 | step = @getStep i
559 | $element = $(step.element)
560 | return @_showPopoverAndOverlay(i) unless $element.length
561 |
562 | $window = $(window)
563 | offsetTop = $element.offset().top
564 | height = $element.outerHeight()
565 | windowHeight = $window.height()
566 | scrollTop = 0
567 |
568 | switch step.placement.replace('auto','').trim()
569 | when 'top'
570 | scrollTop = Math.max(0, offsetTop - (windowHeight / 2))
571 | when 'left', 'right'
572 | scrollTop = Math.max(0, (offsetTop + height / 2) - (windowHeight / 2))
573 | when 'bottom'
574 | scrollTop = Math.max(0, (offsetTop + height) - (windowHeight / 2))
575 |
576 | @_debug "Scroll into view. ScrollTop: #{scrollTop}. Element offset: #{offsetTop}. Window height: #{windowHeight}."
577 | counter = 0
578 | $('body, html').stop(true, true).animate
579 | scrollTop: Math.ceil(scrollTop),
580 | =>
581 | if ++counter is 2
582 | @_showPopoverAndOverlay(i)
583 | @_debug """Scroll into view.
584 | Animation end element offset: #{$element.offset().top}.
585 | Window height: #{$window.height()}."""
586 |
587 | # Event bindings for mouse navigation
588 | _initMouseNavigation: ->
589 | _this = @
590 |
591 | # Go to next step after click on element with attribute 'data-role=next'
592 | # Go to previous step after click on element with attribute 'data-role=prev'
593 | # End tour after click on element with attribute 'data-role=end'
594 | # Pause/resume tour after click on element with attribute 'data-role=pause-resume'
595 | $(document)
596 | .off("click.tour-#{@_options.name}", ".popover.tour-#{@_options.name} *[data-role='prev']")
597 | .off("click.tour-#{@_options.name}", ".popover.tour-#{@_options.name} *[data-role='next']")
598 | .off("click.tour-#{@_options.name}", ".popover.tour-#{@_options.name} *[data-role='end']")
599 | .off("click.tour-#{@_options.name}", ".popover.tour-#{@_options.name} *[data-role='pause-resume']")
600 | .on "click.tour-#{@_options.name}", ".popover.tour-#{@_options.name} *[data-role='next']", (e) =>
601 | e.preventDefault()
602 | @next()
603 | .on "click.tour-#{@_options.name}", ".popover.tour-#{@_options.name} *[data-role='prev']", (e) =>
604 | e.preventDefault()
605 | @prev() if @_current > 0
606 | .on "click.tour-#{@_options.name}", ".popover.tour-#{@_options.name} *[data-role='end']", (e) =>
607 | e.preventDefault()
608 | @end()
609 | .on "click.tour-#{@_options.name}", ".popover.tour-#{@_options.name} *[data-role='pause-resume']", (e) ->
610 | e.preventDefault()
611 | $this = $ @
612 |
613 | $this.text if _this._paused then $this.data 'pause-text' else $this.data 'resume-text'
614 | if _this._paused then _this.resume() else _this.pause()
615 |
616 | # Keyboard navigation
617 | _initKeyboardNavigation: ->
618 | return unless @_options.keyboard
619 |
620 | $(document).on "keyup.tour-#{@_options.name}", (e) =>
621 | return unless e.which
622 |
623 | switch e.which
624 | when 39
625 | e.preventDefault()
626 | if @_isLast() then @next() else @end()
627 | when 37
628 | e.preventDefault()
629 | @prev() if @_current > 0
630 |
631 | # Checks if the result of a callback is a promise
632 | _makePromise: (result) ->
633 | if result and $.isFunction(result.then) then result else null
634 |
635 | _callOnPromiseDone: (promise, cb, arg) ->
636 | if promise
637 | promise.then (e) =>
638 | cb.call(@, arg)
639 | else
640 | cb.call(@, arg)
641 |
642 | _showBackground: (step, data) ->
643 | height = $(document).height()
644 | width = $(document).width()
645 | for pos in ['top', 'bottom', 'left', 'right']
646 | $backdrop = @backdrops[pos] ?= $('
', class: "tour-backdrop #{pos}")
647 | $(step.backdropContainer).append($backdrop)
648 |
649 | switch pos
650 | when 'top'
651 | $backdrop
652 | .height(if data.offset.top > 0 then data.offset.top else 0)
653 | .width(width)
654 | .offset(top: 0, left: 0)
655 | when 'bottom'
656 | $backdrop
657 | .offset(top: data.offset.top + data.height, left: 0)
658 | .height(height - (data.offset.top + data.height))
659 | .width(width)
660 | when 'left'
661 | $backdrop
662 | .offset(top: data.offset.top, left: 0)
663 | .height(data.height)
664 | .width(if data.offset.left > 0 then data.offset.left else 0)
665 | when 'right'
666 | $backdrop
667 | .offset(top: data.offset.top, left: data.offset.left + data.width)
668 | .height(data.height)
669 | .width(width - (data.offset.left + data.width))
670 |
671 | _showOverlayElement: (step) ->
672 | $backdropElement = $ step.backdropElement
673 |
674 | if $backdropElement.length is 0
675 | elementData =
676 | width: 0
677 | height: 0
678 | offset:
679 | top: 0
680 | left: 0
681 | else
682 | elementData =
683 | width: $backdropElement.innerWidth()
684 | height: $backdropElement.innerHeight()
685 | offset: $backdropElement.offset()
686 |
687 | $backdropElement.addClass 'tour-step-backdrop'
688 | elementData = @_applyBackdropPadding step.backdropPadding, elementData if step.backdropPadding
689 |
690 | @_showBackground(step, elementData)
691 |
692 | _hideOverlayElement: (step) ->
693 | $(step.backdropElement).removeClass 'tour-step-backdrop'
694 |
695 | for pos, $backdrop of @backdrops
696 | $backdrop.remove() if $backdrop and $backdrop.remove isnt undefined
697 |
698 | @backdrops = []
699 |
700 | _applyBackdropPadding: (padding, data) ->
701 | if typeof padding is 'object'
702 | padding.top ?= 0
703 | padding.right ?= 0
704 | padding.bottom ?= 0
705 | padding.left ?= 0
706 |
707 | data.offset.top = data.offset.top - padding.top
708 | data.offset.left = data.offset.left - padding.left
709 | data.width = data.width + padding.left + padding.right
710 | data.height = data.height + padding.top + padding.bottom
711 | else
712 | data.offset.top = data.offset.top - padding
713 | data.offset.left = data.offset.left - padding
714 | data.width = data.width + (padding * 2)
715 | data.height = data.height + (padding * 2)
716 |
717 | data
718 |
719 | _clearTimer: ->
720 | window.clearTimeout @_timer
721 | @_timer = null
722 | @_duration = null
723 |
724 | _getProtocol: (url) ->
725 | url = url.split('://')
726 | return if url.length > 1 then url[0] else 'http'
727 |
728 | _getHost: (url) ->
729 | url = url.split('//')
730 | url = if url.length > 1 then url[1] else url[0]
731 |
732 | return url.split('/')[0]
733 |
734 | _getPath: (path) ->
735 | return path.replace(/\/?$/, '').split('?')[0].split('#')[0]
736 |
737 | _getQuery: (path) ->
738 | return @_getParams(path, '?')
739 |
740 | _getHash: (path) ->
741 | return @_getParams(path, '#')
742 |
743 | _getParams: (path, start) ->
744 | params = path.split(start)
745 | return {} if params.length is 1
746 |
747 | params = params[1].split('&')
748 | paramsObject = {}
749 |
750 | for param in params
751 | param = param.split('=')
752 | paramsObject[param[0]] = param[1] or ''
753 |
754 | return paramsObject
755 |
756 | _equal: (obj1, obj2) ->
757 | if ({}).toString.call(obj1) is '[object Object]' and ({}).toString.call(obj2) is '[object Object]'
758 | obj1Keys = Object.keys(obj1)
759 | obj2Keys = Object.keys(obj2)
760 | return false if obj1Keys.length isnt obj2Keys.length
761 |
762 | for k,v of obj1
763 | return false if not @_equal(obj2[k], v)
764 |
765 | return true
766 | else if ({}).toString.call(obj1) is '[object Array]' and ({}).toString.call(obj2) is '[object Array]'
767 | return false if obj1.length isnt obj2.length
768 |
769 | for v,k in obj1
770 | return false if not @_equal(v, obj2[k])
771 |
772 | return true
773 | else
774 | return obj1 is obj2
775 |
776 | Tour
777 | )
778 |
--------------------------------------------------------------------------------
/src/coffee/bootstrap-tour.docs.coffee:
--------------------------------------------------------------------------------
1 | $ ->
2 | $demo = $("#demo")
3 | duration = 5000
4 | remaining = duration
5 | tour = new Tour(
6 | onStart: -> $demo.addClass "disabled", true
7 | onEnd: -> $demo.removeClass "disabled", true
8 | debug: true
9 | steps: [
10 | path: "/"
11 | element: "#navbar"
12 | placement: "bottom"
13 | title: "Welcome to Bootstrap Tour!"
14 | content: """
15 | Introduce new users to your product by walking them through it step by step.
16 | """
17 | ,
18 | path: "/"
19 | element: "#usage"
20 | placement: "top"
21 | title: "A super simple setup"
22 | content: "Easy is better, right? The tour is up and running with just a
23 | few options and steps."
24 | ,
25 | path: "/"
26 | element: "#license"
27 | placement: "top"
28 | title: "Best of all, it's free!"
29 | content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
30 | ,
31 | path: "/api"
32 | element: "#options .page-header"
33 | placement: "top"
34 | title: "Flexibilty and expressiveness"
35 | content: """
36 | There are more options for those who want to get on the dark side.
37 | Power to the people! 38 | """ 39 | reflex: true 40 | , 41 | path: "/api" 42 | element: "#duration" 43 | placement: "top" 44 | title: "Automagically expiring step", 45 | content: """ 46 | A new addition: make your tour (or step) completely automatic. You set the duration, Bootstrap 47 | Tour does the rest. For instance, this step will disappear in 5 seconds. 48 | """ 49 | duration: 5000 50 | , 51 | path: "/api" 52 | element: "#methods table" 53 | placement: "top" 54 | title: "A new shiny Backdrop option" 55 | content: """ 56 | If you need to highlight the current step's element, activate the backdrop and you won't lose 57 | focus anymore! 58 | """ 59 | backdrop: true 60 | backdropPadding: 5 61 | , 62 | path: "/api" 63 | element: "#reflex" 64 | placement: "bottom" 65 | title: "Reflex mode" 66 | content: "Reflex mode is enabled, click on the text in the cell to continue!" 67 | reflex: true 68 | , 69 | path: "/api" 70 | title: "And support for orphan steps" 71 | content: """ 72 | If you activate the orphan property, the step(s) are shown centered in the page, and you can 73 | forget to specify element and placement! 74 | """ 75 | orphan: true 76 | onHidden: -> window.location.assign "/" 77 | ] 78 | ) 79 | .init() 80 | 81 | $('
6 | {% if page.title == "Bootstrap Tour" %}
7 | {{ page.title }}
8 | {% else %}
9 | {{ page.title }} · Bootstrap Tour
10 | {% endif %}
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
30 |
--------------------------------------------------------------------------------
/src/docs/_includes/nav.html:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/src/docs/_layouts/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {% include header.html %}
5 |
6 |
7 | 
8 | {% include nav.html %}
9 | {{ content }}
10 | {% include footer.html %}
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/docs/api.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: API Documentation
4 | slug: api
5 | ---
6 |
7 |
8 |
610 |
611 |
612 |
704 |
705 |
706 |
798 |
--------------------------------------------------------------------------------
/src/docs/assets/css/bootstrap-tour.css:
--------------------------------------------------------------------------------
1 | /* ========================================================================
2 | * bootstrap-tour - v0.12.0
3 | * http://bootstraptour.com
4 | * ========================================================================
5 | * Copyright 2012-2017 Ulrich Sossou
6 | *
7 | * ========================================================================
8 | * Licensed under the MIT License (the "License");
9 | * you may not use this file except in compliance with the License.
10 | * You may obtain a copy of the License at
11 | *
12 | * https://opensource.org/licenses/MIT
13 | *
14 | * Unless required by applicable law or agreed to in writing, software
15 | * distributed under the License is distributed on an "AS IS" BASIS,
16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 | * See the License for the specific language governing permissions and
18 | * limitations under the License.
19 | * ========================================================================
20 | */
21 |
22 | .tour-backdrop {
23 | background-color: #000;
24 | filter: alpha(opacity=80);
25 | opacity: .8;
26 | position: absolute;
27 | z-index: 1100; }
28 |
29 | .popover[class*="tour-"] {
30 | z-index: 1102; }
31 | .popover[class*="tour-"] .popover-navigation {
32 | overflow: hidden;
33 | padding: 9px 14px; }
34 | .popover[class*="tour-"] .popover-navigation *[data-role="end"] {
35 | float: right; }
36 | .popover[class*="tour-"] .popover-navigation *[data-role="prev"],
37 | .popover[class*="tour-"] .popover-navigation *[data-role="next"],
38 | .popover[class*="tour-"] .popover-navigation *[data-role="end"] {
39 | cursor: pointer; }
40 | .popover[class*="tour-"] .popover-navigation *[data-role="prev"].disabled,
41 | .popover[class*="tour-"] .popover-navigation *[data-role="next"].disabled,
42 | .popover[class*="tour-"] .popover-navigation *[data-role="end"].disabled {
43 | cursor: default; }
44 | .popover[class*="tour-"].orphan {
45 | left: 50%;
46 | margin-top: 0;
47 | position: fixed;
48 | top: 50%;
49 | transform: translate(-50%, -50%); }
50 | .popover[class*="tour-"].orphan .arrow {
51 | display: none; }
52 |
--------------------------------------------------------------------------------
/src/docs/assets/css/bootstrap-tour.docs.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-bottom: 50px;
3 | }
4 |
5 | #github {
6 | display: block;
7 | position: absolute;
8 | width: 150px;
9 | height: 150px;
10 | right: 0;
11 | z-index: 1050;
12 | }
13 |
14 | .masthead {
15 | position: relative;
16 | padding: 30px 15px;
17 | color: #fff;
18 | text-align: center;
19 | text-shadow: 0 1px 0 rgba(0,0,0,.1);
20 | background-color: #3276b1;
21 | background-image: -webkit-linear-gradient(top, #285e8e 0%, #3276b1 100%);
22 | background-image: linear-gradient(to bottom, #285e8e 0%, #3276b1 100%);
23 | background-repeat: repeat-x;
24 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#285e8e', endColorstr='#3276b1', GradientType=0);
25 | }
26 | .masthead small {
27 | font-size: 80%;
28 | color: #ccc;
29 | }
30 |
31 | #demo {
32 | cursor: pointer;
33 | }
34 |
35 | .page-header {
36 | margin-top: 3rem;
37 | margin-bottom: 1rem;
38 | }
39 |
40 | /*
41 | * Social buttons
42 | *
43 | * Twitter and GitHub social action buttons (for homepage and footer).
44 | */
45 |
46 | .social {
47 | display: inline-block;
48 | margin-top: 40px;
49 | margin-bottom: 0;
50 | padding-left: 0;
51 | list-style: none;
52 | }
53 | .social li {
54 | display: inline-block;
55 | line-height: 1;
56 | padding: 5px 8px;
57 | }
58 | .social .tweet-btn a {
59 | width: 98px !important;
60 | }
61 | /* Style the GitHub buttons via CSS instead of inline attributes */
62 | .github-btn {
63 | border: 0;
64 | overflow: hidden;
65 | }
66 |
--------------------------------------------------------------------------------
/src/docs/assets/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sorich87/bootstrap-tour/c501ce7ad1728050b0882bb9316f5c33df87f6a2/src/docs/assets/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/src/docs/assets/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sorich87/bootstrap-tour/c501ce7ad1728050b0882bb9316f5c33df87f6a2/src/docs/assets/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/src/docs/assets/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sorich87/bootstrap-tour/c501ce7ad1728050b0882bb9316f5c33df87f6a2/src/docs/assets/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/src/docs/assets/img/apple-touch-icon-144-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sorich87/bootstrap-tour/c501ce7ad1728050b0882bb9316f5c33df87f6a2/src/docs/assets/img/apple-touch-icon-144-precomposed.png
--------------------------------------------------------------------------------
/src/docs/assets/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sorich87/bootstrap-tour/c501ce7ad1728050b0882bb9316f5c33df87f6a2/src/docs/assets/img/favicon.png
--------------------------------------------------------------------------------
/src/docs/assets/img/masthead-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sorich87/bootstrap-tour/c501ce7ad1728050b0882bb9316f5c33df87f6a2/src/docs/assets/img/masthead-pattern.png
--------------------------------------------------------------------------------
/src/docs/assets/vendor/pygments-manni.css:
--------------------------------------------------------------------------------
1 | .hll { background-color: #ffffcc }
2 | /*{ background: #f0f3f3; }*/
3 | .c { color: #999; } /* Comment */
4 | .err { color: #AA0000; background-color: #FFAAAA } /* Error */
5 | .k { color: #006699; } /* Keyword */
6 | .o { color: #555555 } /* Operator */
7 | .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
8 | .cp { color: #009999 } /* Comment.Preproc */
9 | .c1 { color: #999; } /* Comment.Single */
10 | .cs { color: #999; } /* Comment.Special */
11 | .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
12 | .ge { font-style: italic } /* Generic.Emph */
13 | .gr { color: #FF0000 } /* Generic.Error */
14 | .gh { color: #003300; } /* Generic.Heading */
15 | .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
16 | .go { color: #AAAAAA } /* Generic.Output */
17 | .gp { color: #000099; } /* Generic.Prompt */
18 | .gs { } /* Generic.Strong */
19 | .gu { color: #003300; } /* Generic.Subheading */
20 | .gt { color: #99CC66 } /* Generic.Traceback */
21 | .kc { color: #006699; } /* Keyword.Constant */
22 | .kd { color: #006699; } /* Keyword.Declaration */
23 | .kn { color: #006699; } /* Keyword.Namespace */
24 | .kp { color: #006699 } /* Keyword.Pseudo */
25 | .kr { color: #006699; } /* Keyword.Reserved */
26 | .kt { color: #007788; } /* Keyword.Type */
27 | .m { color: #FF6600 } /* Literal.Number */
28 | .s { color: #d44950 } /* Literal.String */
29 | .na { color: #4f9fcf } /* Name.Attribute */
30 | .nb { color: #336666 } /* Name.Builtin */
31 | .nc { color: #00AA88; } /* Name.Class */
32 | .no { color: #336600 } /* Name.Constant */
33 | .nd { color: #9999FF } /* Name.Decorator */
34 | .ni { color: #999999; } /* Name.Entity */
35 | .ne { color: #CC0000; } /* Name.Exception */
36 | .nf { color: #CC00FF } /* Name.Function */
37 | .nl { color: #9999FF } /* Name.Label */
38 | .nn { color: #00CCFF; } /* Name.Namespace */
39 | .nt { color: #2f6f9f; } /* Name.Tag */
40 | .nv { color: #003333 } /* Name.Variable */
41 | .ow { color: #000000; } /* Operator.Word */
42 | .w { color: #bbbbbb } /* Text.Whitespace */
43 | .mf { color: #FF6600 } /* Literal.Number.Float */
44 | .mh { color: #FF6600 } /* Literal.Number.Hex */
45 | .mi { color: #FF6600 } /* Literal.Number.Integer */
46 | .mo { color: #FF6600 } /* Literal.Number.Oct */
47 | .sb { color: #CC3300 } /* Literal.String.Backtick */
48 | .sc { color: #CC3300 } /* Literal.String.Char */
49 | .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
50 | .s2 { color: #CC3300 } /* Literal.String.Double */
51 | .se { color: #CC3300; } /* Literal.String.Escape */
52 | .sh { color: #CC3300 } /* Literal.String.Heredoc */
53 | .si { color: #AA0000 } /* Literal.String.Interpol */
54 | .sx { color: #CC3300 } /* Literal.String.Other */
55 | .sr { color: #33AAAA } /* Literal.String.Regex */
56 | .s1 { color: #CC3300 } /* Literal.String.Single */
57 | .ss { color: #FFCC33 } /* Literal.String.Symbol */
58 | .bp { color: #336666 } /* Name.Builtin.Pseudo */
59 | .vc { color: #003333 } /* Name.Variable.Class */
60 | .vg { color: #003333 } /* Name.Variable.Global */
61 | .vi { color: #003333 } /* Name.Variable.Instance */
62 | .il { color: #FF6600 } /* Literal.Number.Integer.Long */
63 |
64 | .css .o,
65 | .css .o + .nt,
66 | .css .nt + .nt { color: #999; }
67 |
--------------------------------------------------------------------------------
/src/docs/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Bootstrap Tour
4 | slug: home
5 | ---
6 |
7 |
8 |
33 |
34 |
81 |
82 |
99 |
100 |
108 |
--------------------------------------------------------------------------------
/src/scss/bootstrap-tour-standalone.scss:
--------------------------------------------------------------------------------
1 | @import 'functions';
2 | @import 'variables';
3 | @import 'mixins';
4 | @import 'buttons';
5 | @import 'transitions';
6 | @import 'button-group';
7 | @import 'popover';
8 | @import 'bootstrap-tour';
9 |
--------------------------------------------------------------------------------
/src/scss/bootstrap-tour.scss:
--------------------------------------------------------------------------------
1 | .tour-backdrop {
2 | background-color: #000;
3 | filter: alpha(opacity = 80);
4 | opacity: .8;
5 | position: absolute;
6 | z-index: 1100;
7 | }
8 |
9 | .popover[class*="tour-"] {
10 | z-index: 1102;
11 |
12 | .popover-navigation {
13 | overflow: hidden;
14 | padding: 9px 14px;
15 |
16 | *[data-role="end"] {
17 | float: right;
18 | }
19 |
20 | *[data-role="prev"],
21 | *[data-role="next"],
22 | *[data-role="end"] {
23 | cursor: pointer;
24 |
25 | &.disabled {
26 | cursor: default;
27 | }
28 | }
29 | }
30 |
31 | &.orphan {
32 | left: 50%;
33 | margin-top: 0;
34 | position: fixed;
35 | top: 50%;
36 | transform: translate(-50%, -50%);
37 |
38 | .arrow {
39 | display: none;
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/test/bootstrap-tour.js:
--------------------------------------------------------------------------------
1 | /* ========================================================================
2 | * bootstrap-tour - v0.12.0
3 | * http://bootstraptour.com
4 | * ========================================================================
5 | * Copyright 2012-2017 Ulrich Sossou
6 | *
7 | * ========================================================================
8 | * Licensed under the MIT License (the "License");
9 | * you may not use this file except in compliance with the License.
10 | * You may obtain a copy of the License at
11 | *
12 | * https://opensource.org/licenses/MIT
13 | *
14 | * Unless required by applicable law or agreed to in writing, software
15 | * distributed under the License is distributed on an "AS IS" BASIS,
16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 | * See the License for the specific language governing permissions and
18 | * limitations under the License.
19 | * ========================================================================
20 | */
21 |
22 | var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
23 |
24 | (function(window, factory) {
25 | if (typeof define === 'function' && define.amd) {
26 | return define(['jquery'], function(jQuery) {
27 | return window.Tour = factory(jQuery);
28 | });
29 | } else if (typeof exports === 'object') {
30 | return module.exports = factory(require('jquery'));
31 | } else {
32 | return window.Tour = factory(window.jQuery);
33 | }
34 | })(window, function($) {
35 | var Tour, document;
36 | document = window.document;
37 | Tour = (function() {
38 | function Tour(options) {
39 | this._showPopoverAndOverlay = bind(this._showPopoverAndOverlay, this);
40 | var storage;
41 | try {
42 | storage = window.localStorage;
43 | } catch (error) {
44 | storage = false;
45 | }
46 | this._options = $.extend({
47 | name: 'tour',
48 | steps: [],
49 | container: 'body',
50 | autoscroll: true,
51 | keyboard: true,
52 | storage: storage,
53 | debug: false,
54 | backdrop: false,
55 | backdropContainer: 'body',
56 | backdropPadding: 0,
57 | redirect: true,
58 | orphan: false,
59 | duration: false,
60 | delay: false,
61 | basePath: '',
62 | template: ' ',
63 | afterSetState: function(key, value) {},
64 | afterGetState: function(key, value) {},
65 | afterRemoveState: function(key) {},
66 | onStart: function(tour) {},
67 | onEnd: function(tour) {},
68 | onShow: function(tour) {},
69 | onShown: function(tour) {},
70 | onHide: function(tour) {},
71 | onHidden: function(tour) {},
72 | onNext: function(tour) {},
73 | onPrev: function(tour) {},
74 | onPause: function(tour, duration) {},
75 | onResume: function(tour, duration) {},
76 | onRedirectError: function(tour) {}
77 | }, options);
78 | this._force = false;
79 | this._inited = false;
80 | this._current = null;
81 | this.backdrops = [];
82 | this;
83 | }
84 |
85 | Tour.prototype.addSteps = function(steps) {
86 | var j, len, step;
87 | for (j = 0, len = steps.length; j < len; j++) {
88 | step = steps[j];
89 | this.addStep(step);
90 | }
91 | return this;
92 | };
93 |
94 | Tour.prototype.addStep = function(step) {
95 | this._options.steps.push(step);
96 | return this;
97 | };
98 |
99 | Tour.prototype.getStep = function(i) {
100 | if (this._options.steps[i] != null) {
101 | return $.extend({
102 | id: "step-" + i,
103 | path: '',
104 | host: '',
105 | placement: 'right',
106 | title: '',
107 | content: '',
108 | next: i === this._options.steps.length - 1 ? -1 : i + 1,
109 | prev: i - 1,
110 | animation: true,
111 | container: this._options.container,
112 | autoscroll: this._options.autoscroll,
113 | backdrop: this._options.backdrop,
114 | backdropContainer: this._options.backdropContainer,
115 | backdropPadding: this._options.backdropPadding,
116 | redirect: this._options.redirect,
117 | reflexElement: this._options.steps[i].element,
118 | backdropElement: this._options.steps[i].element,
119 | orphan: this._options.orphan,
120 | duration: this._options.duration,
121 | delay: this._options.delay,
122 | template: this._options.template,
123 | onShow: this._options.onShow,
124 | onShown: this._options.onShown,
125 | onHide: this._options.onHide,
126 | onHidden: this._options.onHidden,
127 | onNext: this._options.onNext,
128 | onPrev: this._options.onPrev,
129 | onPause: this._options.onPause,
130 | onResume: this._options.onResume,
131 | onRedirectError: this._options.onRedirectError
132 | }, this._options.steps[i]);
133 | }
134 | };
135 |
136 | Tour.prototype.init = function(force) {
137 | this._force = force;
138 | if (this.ended()) {
139 | this._debug('Tour ended, init prevented.');
140 | return this;
141 | }
142 | this.setCurrentStep();
143 | this._initMouseNavigation();
144 | this._initKeyboardNavigation();
145 | if (this._current !== null) {
146 | this.showStep(this._current);
147 | }
148 | this._inited = true;
149 | return this;
150 | };
151 |
152 | Tour.prototype.start = function(force) {
153 | var promise;
154 | if (force == null) {
155 | force = false;
156 | }
157 | if (!this._inited) {
158 | this.init(force);
159 | }
160 | if (this._current === null) {
161 | promise = this._makePromise(this._options.onStart != null ? this._options.onStart(this) : void 0);
162 | this._callOnPromiseDone(promise, this.showStep, 0);
163 | }
164 | return this;
165 | };
166 |
167 | Tour.prototype.next = function() {
168 | var promise;
169 | promise = this.hideStep(this._current, this._current + 1);
170 | return this._callOnPromiseDone(promise, this._showNextStep);
171 | };
172 |
173 | Tour.prototype.prev = function() {
174 | var promise;
175 | promise = this.hideStep(this._current, this._current - 1);
176 | return this._callOnPromiseDone(promise, this._showPrevStep);
177 | };
178 |
179 | Tour.prototype.goTo = function(i) {
180 | var promise;
181 | promise = this.hideStep(this._current, i);
182 | return this._callOnPromiseDone(promise, this.showStep, i);
183 | };
184 |
185 | Tour.prototype.end = function() {
186 | var endHelper, promise;
187 | endHelper = (function(_this) {
188 | return function(e) {
189 | $(document).off("click.tour-" + _this._options.name);
190 | $(document).off("keyup.tour-" + _this._options.name);
191 | _this._setState('end', 'yes');
192 | _this._inited = false;
193 | _this._force = false;
194 | _this._clearTimer();
195 | if (_this._options.onEnd != null) {
196 | return _this._options.onEnd(_this);
197 | }
198 | };
199 | })(this);
200 | promise = this.hideStep(this._current);
201 | return this._callOnPromiseDone(promise, endHelper);
202 | };
203 |
204 | Tour.prototype.ended = function() {
205 | return !this._force && !!this._getState('end');
206 | };
207 |
208 | Tour.prototype.restart = function() {
209 | this._removeState('current_step');
210 | this._removeState('end');
211 | this._removeState('redirect_to');
212 | return this.start();
213 | };
214 |
215 | Tour.prototype.pause = function() {
216 | var step;
217 | step = this.getStep(this._current);
218 | if (!(step && step.duration)) {
219 | return this;
220 | }
221 | this._paused = true;
222 | this._duration -= new Date().getTime() - this._start;
223 | window.clearTimeout(this._timer);
224 | this._debug("Paused/Stopped step " + (this._current + 1) + " timer (" + this._duration + " remaining).");
225 | if (step.onPause != null) {
226 | return step.onPause(this, this._duration);
227 | }
228 | };
229 |
230 | Tour.prototype.resume = function() {
231 | var step;
232 | step = this.getStep(this._current);
233 | if (!(step && step.duration)) {
234 | return this;
235 | }
236 | this._paused = false;
237 | this._start = new Date().getTime();
238 | this._duration = this._duration || step.duration;
239 | this._timer = window.setTimeout((function(_this) {
240 | return function() {
241 | if (_this._isLast()) {
242 | return _this.next();
243 | } else {
244 | return _this.end();
245 | }
246 | };
247 | })(this), this._duration);
248 | this._debug("Started step " + (this._current + 1) + " timer with duration " + this._duration);
249 | if ((step.onResume != null) && this._duration !== step.duration) {
250 | return step.onResume(this, this._duration);
251 | }
252 | };
253 |
254 | Tour.prototype.hideStep = function(i, iNext) {
255 | var hideDelay, hideStepHelper, promise, step;
256 | step = this.getStep(i);
257 | if (!step) {
258 | return;
259 | }
260 | this._clearTimer();
261 | promise = this._makePromise(step.onHide != null ? step.onHide(this, i) : void 0);
262 | hideStepHelper = (function(_this) {
263 | return function(e) {
264 | var $element, next_step;
265 | $element = $(step.element);
266 | if (!$element.data('bs.popover')) {
267 | $element = $('body');
268 | }
269 | $element.popover('dispose').removeClass("tour-" + _this._options.name + "-element tour-" + _this._options.name + "-" + i + "-element").removeData('bs.popover');
270 | if (step.reflex) {
271 | $(step.reflexElement).removeClass('tour-step-element-reflex').off((_this._reflexEvent(step.reflex)) + ".tour-" + _this._options.name);
272 | }
273 | if (step.backdrop) {
274 | next_step = (iNext != null) && _this.getStep(iNext);
275 | if (!next_step || !next_step.backdrop || next_step.backdropElement !== step.backdropElement) {
276 | _this._hideOverlayElement(step);
277 | }
278 | }
279 | if (step.onHidden != null) {
280 | return step.onHidden(_this);
281 | }
282 | };
283 | })(this);
284 | hideDelay = step.delay.hide || step.delay;
285 | if ({}.toString.call(hideDelay) === '[object Number]' && hideDelay > 0) {
286 | this._debug("Wait " + hideDelay + " milliseconds to hide the step " + (this._current + 1));
287 | window.setTimeout((function(_this) {
288 | return function() {
289 | return _this._callOnPromiseDone(promise, hideStepHelper);
290 | };
291 | })(this), hideDelay);
292 | } else {
293 | this._callOnPromiseDone(promise, hideStepHelper);
294 | }
295 | return promise;
296 | };
297 |
298 | Tour.prototype.showStep = function(i) {
299 | var path, promise, showDelay, showStepHelper, skipToPrevious, step;
300 | if (this.ended()) {
301 | this._debug('Tour ended, showStep prevented.');
302 | return this;
303 | }
304 | step = this.getStep(i);
305 | if (!step) {
306 | return;
307 | }
308 | skipToPrevious = i < this._current;
309 | promise = this._makePromise(step.onShow != null ? step.onShow(this, i) : void 0);
310 | this.setCurrentStep(i);
311 | path = (function() {
312 | switch ({}.toString.call(step.path)) {
313 | case '[object Function]':
314 | return step.path();
315 | case '[object String]':
316 | return this._options.basePath + step.path;
317 | default:
318 | return step.path;
319 | }
320 | }).call(this);
321 | if (step.redirect && this._isRedirect(step.host, path, document.location)) {
322 | this._redirect(step, i, path);
323 | if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
324 | return;
325 | }
326 | }
327 | showStepHelper = (function(_this) {
328 | return function(e) {
329 | if (_this._isOrphan(step)) {
330 | if (step.orphan === false) {
331 | _this._debug("Skip the orphan step " + (_this._current + 1) + ".\nOrphan option is false and the element does not exist or is hidden.");
332 | if (skipToPrevious) {
333 | _this._showPrevStep();
334 | } else {
335 | _this._showNextStep();
336 | }
337 | return;
338 | }
339 | _this._debug("Show the orphan step " + (_this._current + 1) + ". Orphans option is true.");
340 | }
341 | if (step.autoscroll) {
342 | _this._scrollIntoView(i);
343 | } else {
344 | _this._showPopoverAndOverlay(i);
345 | }
346 | if (step.duration) {
347 | return _this.resume();
348 | }
349 | };
350 | })(this);
351 | showDelay = step.delay.show || step.delay;
352 | if ({}.toString.call(showDelay) === '[object Number]' && showDelay > 0) {
353 | this._debug("Wait " + showDelay + " milliseconds to show the step " + (this._current + 1));
354 | window.setTimeout((function(_this) {
355 | return function() {
356 | return _this._callOnPromiseDone(promise, showStepHelper);
357 | };
358 | })(this), showDelay);
359 | } else {
360 | this._callOnPromiseDone(promise, showStepHelper);
361 | }
362 | return promise;
363 | };
364 |
365 | Tour.prototype.getCurrentStep = function() {
366 | return this._current;
367 | };
368 |
369 | Tour.prototype.setCurrentStep = function(value) {
370 | if (value != null) {
371 | this._current = value;
372 | this._setState('current_step', value);
373 | } else {
374 | this._current = this._getState('current_step');
375 | this._current = this._current === null ? null : parseInt(this._current, 10);
376 | }
377 | return this;
378 | };
379 |
380 | Tour.prototype.redraw = function() {
381 | return this._showOverlayElement(this.getStep(this.getCurrentStep()));
382 | };
383 |
384 | Tour.prototype._setState = function(key, value) {
385 | var e, keyName;
386 | if (this._options.storage) {
387 | keyName = this._options.name + "_" + key;
388 | try {
389 | this._options.storage.setItem(keyName, value);
390 | } catch (error) {
391 | e = error;
392 | if (e.code === DOMException.QUOTA_EXCEEDED_ERR) {
393 | this._debug('LocalStorage quota exceeded. State storage failed.');
394 | }
395 | }
396 | return this._options.afterSetState(keyName, value);
397 | } else {
398 | if (this._state == null) {
399 | this._state = {};
400 | }
401 | return this._state[key] = value;
402 | }
403 | };
404 |
405 | Tour.prototype._removeState = function(key) {
406 | var keyName;
407 | if (this._options.storage) {
408 | keyName = this._options.name + "_" + key;
409 | this._options.storage.removeItem(keyName);
410 | return this._options.afterRemoveState(keyName);
411 | } else {
412 | if (this._state != null) {
413 | return delete this._state[key];
414 | }
415 | }
416 | };
417 |
418 | Tour.prototype._getState = function(key) {
419 | var keyName, value;
420 | if (this._options.storage) {
421 | keyName = this._options.name + "_" + key;
422 | value = this._options.storage.getItem(keyName);
423 | } else {
424 | if (this._state != null) {
425 | value = this._state[key];
426 | }
427 | }
428 | if (value === void 0 || value === 'null') {
429 | value = null;
430 | }
431 | this._options.afterGetState(key, value);
432 | return value;
433 | };
434 |
435 | Tour.prototype._showNextStep = function() {
436 | var promise, showNextStepHelper, step;
437 | step = this.getStep(this._current);
438 | showNextStepHelper = (function(_this) {
439 | return function(e) {
440 | return _this.showStep(step.next);
441 | };
442 | })(this);
443 | promise = this._makePromise(step.onNext != null ? step.onNext(this) : void 0);
444 | return this._callOnPromiseDone(promise, showNextStepHelper);
445 | };
446 |
447 | Tour.prototype._showPrevStep = function() {
448 | var promise, showPrevStepHelper, step;
449 | step = this.getStep(this._current);
450 | showPrevStepHelper = (function(_this) {
451 | return function(e) {
452 | return _this.showStep(step.prev);
453 | };
454 | })(this);
455 | promise = this._makePromise(step.onPrev != null ? step.onPrev(this) : void 0);
456 | return this._callOnPromiseDone(promise, showPrevStepHelper);
457 | };
458 |
459 | Tour.prototype._debug = function(text) {
460 | if (this._options.debug) {
461 | return window.console.log("Bootstrap Tour '" + this._options.name + "' | " + text);
462 | }
463 | };
464 |
465 | Tour.prototype._isRedirect = function(host, path, location) {
466 | var currentPath;
467 | if ((host != null) && host !== '' && (({}.toString.call(host) === '[object RegExp]' && !host.test(location.origin)) || ({}.toString.call(host) === '[object String]' && this._isHostDifferent(host, location)))) {
468 | return true;
469 | }
470 | currentPath = [location.pathname, location.search, location.hash].join('');
471 | return (path != null) && path !== '' && (({}.toString.call(path) === '[object RegExp]' && !path.test(currentPath)) || ({}.toString.call(path) === '[object String]' && this._isPathDifferent(path, currentPath)));
472 | };
473 |
474 | Tour.prototype._isHostDifferent = function(host, location) {
475 | switch ({}.toString.call(host)) {
476 | case '[object RegExp]':
477 | return !host.test(location.origin);
478 | case '[object String]':
479 | return this._getProtocol(host) !== this._getProtocol(location.href) || this._getHost(host) !== this._getHost(location.href);
480 | default:
481 | return true;
482 | }
483 | };
484 |
485 | Tour.prototype._isPathDifferent = function(path, currentPath) {
486 | return this._getPath(path) !== this._getPath(currentPath) || !this._equal(this._getQuery(path), this._getQuery(currentPath)) || !this._equal(this._getHash(path), this._getHash(currentPath));
487 | };
488 |
489 | Tour.prototype._isJustPathHashDifferent = function(host, path, location) {
490 | var currentPath;
491 | if ((host != null) && host !== '') {
492 | if (this._isHostDifferent(host, location)) {
493 | return false;
494 | }
495 | }
496 | currentPath = [location.pathname, location.search, location.hash].join('');
497 | if ({}.toString.call(path) === '[object String]') {
498 | return this._getPath(path) === this._getPath(currentPath) && this._equal(this._getQuery(path), this._getQuery(currentPath)) && !this._equal(this._getHash(path), this._getHash(currentPath));
499 | }
500 | return false;
501 | };
502 |
503 | Tour.prototype._redirect = function(step, i, path) {
504 | var href;
505 | if ($.isFunction(step.redirect)) {
506 | return step.redirect.call(this, path);
507 | } else {
508 | href = {}.toString.call(step.host) === '[object String]' ? "" + step.host + path : path;
509 | this._debug("Redirect to " + href);
510 | if (this._getState('redirect_to') === ("" + i)) {
511 | this._debug("Error redirection loop to " + path);
512 | this._removeState('redirect_to');
513 | if (step.onRedirectError != null) {
514 | return step.onRedirectError(this);
515 | }
516 | } else {
517 | this._setState('redirect_to', "" + i);
518 | return document.location.href = href;
519 | }
520 | }
521 | };
522 |
523 | Tour.prototype._isOrphan = function(step) {
524 | return (step.element == null) || !$(step.element).length || $(step.element).is(':hidden') && ($(step.element)[0].namespaceURI !== 'http://www.w3.org/2000/svg');
525 | };
526 |
527 | Tour.prototype._isLast = function() {
528 | return this._current < this._options.steps.length - 1;
529 | };
530 |
531 | Tour.prototype._showPopoverAndOverlay = function(i) {
532 | var step;
533 | if (this.getCurrentStep() !== i || this.ended()) {
534 | return;
535 | }
536 | step = this.getStep(i);
537 | if (step.backdrop) {
538 | this._showOverlayElement(step);
539 | }
540 | this._showPopover(step, i);
541 | if (step.onShown != null) {
542 | step.onShown(this);
543 | }
544 | return this._debug("Step " + (this._current + 1) + " of " + this._options.steps.length);
545 | };
546 |
547 | Tour.prototype._showPopover = function(step, i) {
548 | var $element, $tip, isOrphan, options;
549 | $(".tour-" + this._options.name).remove();
550 | options = $.extend({}, this._options);
551 | isOrphan = this._isOrphan(step);
552 | step.template = this._template(step, i);
553 | if (isOrphan) {
554 | step.element = 'body';
555 | step.placement = 'top';
556 | }
557 | $element = $(step.element);
558 | $element.addClass("tour-" + this._options.name + "-element tour-" + this._options.name + "-" + i + "-element");
559 | if (step.options) {
560 | $.extend(options, step.options);
561 | }
562 | if (step.reflex && !isOrphan) {
563 | $(step.reflexElement).addClass('tour-step-element-reflex').off((this._reflexEvent(step.reflex)) + ".tour-" + this._options.name).on((this._reflexEvent(step.reflex)) + ".tour-" + this._options.name, (function(_this) {
564 | return function() {
565 | if (_this._isLast()) {
566 | return _this.next();
567 | } else {
568 | return _this.end();
569 | }
570 | };
571 | })(this));
572 | }
573 | $element.popover({
574 | placement: step.placement,
575 | trigger: 'manual',
576 | title: step.title,
577 | content: step.content,
578 | html: true,
579 | animation: step.animation,
580 | container: step.container,
581 | template: step.template,
582 | selector: step.element
583 | }).popover('show');
584 | $tip = $($element.data('bs.popover').getTipElement());
585 | return $tip.attr('id', step.id);
586 | };
587 |
588 | Tour.prototype._template = function(step, i) {
589 | var $navigation, $next, $prev, $resume, $template, template;
590 | template = step.template;
591 | if (this._isOrphan(step) && {}.toString.call(step.orphan) !== '[object Boolean]') {
592 | template = step.orphan;
593 | }
594 | $template = $.isFunction(template) ? $(template(i, step)) : $(template);
595 | $navigation = $template.find('.popover-navigation');
596 | $prev = $navigation.find('[data-role="prev"]');
597 | $next = $navigation.find('[data-role="next"]');
598 | $resume = $navigation.find('[data-role="pause-resume"]');
599 | if (this._isOrphan(step)) {
600 | $template.addClass('orphan');
601 | }
602 | $template.addClass("tour-" + this._options.name + " tour-" + this._options.name + "-" + i);
603 | if (step.reflex) {
604 | $template.addClass("tour-" + this._options.name + "-reflex");
605 | }
606 | if (step.prev < 0) {
607 | $prev.addClass('disabled').prop('disabled', true).prop('tabindex', -1);
608 | }
609 | if (step.next < 0) {
610 | $next.addClass('disabled').prop('disabled', true).prop('tabindex', -1);
611 | }
612 | if (!step.duration) {
613 | $resume.remove();
614 | }
615 | return $template.clone().wrap('
37 | Power to the people! 38 | """ 39 | reflex: true 40 | , 41 | path: "/api" 42 | element: "#duration" 43 | placement: "top" 44 | title: "Automagically expiring step", 45 | content: """ 46 | A new addition: make your tour (or step) completely automatic. You set the duration, Bootstrap 47 | Tour does the rest. For instance, this step will disappear in 5 seconds. 48 | """ 49 | duration: 5000 50 | , 51 | path: "/api" 52 | element: "#methods table" 53 | placement: "top" 54 | title: "A new shiny Backdrop option" 55 | content: """ 56 | If you need to highlight the current step's element, activate the backdrop and you won't lose 57 | focus anymore! 58 | """ 59 | backdrop: true 60 | backdropPadding: 5 61 | , 62 | path: "/api" 63 | element: "#reflex" 64 | placement: "bottom" 65 | title: "Reflex mode" 66 | content: "Reflex mode is enabled, click on the text in the cell to continue!" 67 | reflex: true 68 | , 69 | path: "/api" 70 | title: "And support for orphan steps" 71 | content: """ 72 | If you activate the orphan property, the step(s) are shown centered in the page, and you can 73 | forget to specify element and placement! 74 | """ 75 | orphan: true 76 | onHidden: -> window.location.assign "/" 77 | ] 78 | ) 79 | .init() 80 | 81 | $('
You ended the demo tour. Restart the demo tour.
').prependTo(".content").alert() if tour.ended()
82 |
83 | $(document).on "click", "[data-demo]", (e) ->
84 | e.preventDefault()
85 | return if $(this).hasClass "disabled"
86 | tour.restart()
87 | $(".alert").alert "close"
88 |
89 | $(".gravatar").each ->
90 | $this = $(@)
91 | email = md5 $this.data "email"
92 |
93 | $(@).attr "src", "http://www.gravatar.com/avatar/#{email}?s=60"
94 |
--------------------------------------------------------------------------------
/src/docs/CNAME:
--------------------------------------------------------------------------------
1 | bootstraptour.com
2 |
--------------------------------------------------------------------------------
/src/docs/_includes/footer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
15 |
16 |
--------------------------------------------------------------------------------
/src/docs/_includes/header.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 | {% include nav.html %}
9 | {{ content }}
10 | {% include footer.html %}
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/docs/api.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: API Documentation
4 | slug: api
5 | ---
6 |
7 |
9 |
57 |
58 |
326 |
327 |
359 |
360 |
608 |
609 |
10 |
12 | Options Well, let's go deeper
11 |Global options
13 | {% highlight javascript %} 14 | var tour = new Tour({ 15 | name: "tour", 16 | steps: [], 17 | container: "body", 18 | keyboard: true, 19 | storage: window.localStorage, 20 | debug: false, 21 | backdrop: false, 22 | backdropContainer: 'body', 23 | backdropPadding: 0, 24 | redirect: true, 25 | orphan: false, 26 | duration: false, 27 | delay: false, 28 | basePath: "", 29 | template: "
30 |
31 |
32 |
33 |
38 |
39 |
",
40 | afterGetState: function (key, value) {},
41 | afterSetState: function (key, value) {},
42 | afterRemoveState: function (key, value) {},
43 | onStart: function (tour) {},
44 | onEnd: function (tour) {},
45 | onShow: function (tour) {},
46 | onShown: function (tour) {},
47 | onHide: function (tour) {},
48 | onHidden: function (tour) {},
49 | onNext: function (tour) {},
50 | onPrev: function (tour) {},
51 | onPause: function (tour, duration) {},
52 | onResume: function (tour, duration) {},
53 | onRedirectError: function (tour) {}
54 | });
55 | {% endhighlight %}
56 | | Name | 60 |Type | 61 |Description | 62 |Default | 63 |
|---|---|---|---|
| name | 68 |String | 69 |This option is used to build the name of the storage item where the tour state is stored. 70 | The name should contain only alphanumerics, underscores and hyphens. 71 | You can initialize several tours with different names in the same page and application. | 72 |'tour' |
73 |
| steps | 76 |Array | 77 |A list of object representing the steps to be included in the tour. Jump to 78 | Step options for the single step API. | 79 |[] |
80 |
| container | 83 |String | 84 |Appends the step popover to a specific element. 85 | See Usage section of 86 | Popover. 87 | 88 | |
89 | 'body' |
90 |
| autoscroll | 93 |Boolean | 94 |Autoscrolls the window when the step popover is out of view. | 95 |true |
96 |
| keyboard | 99 |Boolean | 100 |This option set the left and right arrow navigation. | 101 |true |
102 |
| storage | 105 |Object | 106 |The storage system you want to use. Could be the objects window.localStorage,
107 | window.sessionStorage or your own object. 108 | You can set this option as 109 | false to disable storage
110 | persistence (the tour starts from beginning every time the page is
111 | loaded).112 | Read more about DOM Storage interfaces. 113 | |
114 | window.localStorage |
115 |
| debug | 118 |Boolean | 119 |Set this option to true to have some useful informations printed in the 120 | console. | 121 |false |
122 |
| backdrop | 125 |Boolean | 126 |Show a dark backdrop behind the popover and its element, 127 | highlighting the current step. | 128 |false |
129 |
| backdropContainer NEW | 132 |String (jQuery selector) | 133 |HTML element on which the backdrop should be shown. | 134 |'body' |
135 |
| backdropPadding NEW | 138 |Number|Object | 139 |Add padding to the backdrop element that highlights the step element. 140 | It can be a number or a object containing optional top, right, bottom and left numbers. |
141 | 0 |
142 |
| redirect | 145 |Boolean|Function | 146 |Set a custom function to execute as redirect function.
147 | The default redirect relies on the traditional
148 | document.location.href |
149 | true |
150 |
| orphan | 153 |Boolean|String|function | 154 |Allow to show the step regardless whether its element is not set, is 155 | not present in the page or is hidden. The step is fixed 156 | positioned in the middle of the page. | 157 |false |
158 |
| duration NEW | 161 |Boolean|Number | 162 |Set a expiration time for the steps. When the current step expires, 163 | the next step is automatically shown. See it as a sort of guided, automatized tour 164 | functionality. The value is specified in milliseconds | 165 |false |
166 |
| delay NEW | 169 |Boolean|Number | 170 |Specifies a delay for the showing and hiding the tour steps.
171 | It can be:
172 |
| 0 |
178 |
| basePath | 181 |String | 182 |Specify a default base path prepended to the
183 | path option of every single
184 | step. Very useful if you need to reuse the same tour on different
185 | environments or sub-projects. |
186 | '' |
187 |
| template | 190 |String|Function | 191 |String or function that returns a string of the HTML template for
192 | the popovers. If you pass a Function, two parameters are available:
193 | i is the position of step in the tour and
194 | step is the an object that contains all the other step
195 | options. 196 | From version 0.5, the navigation template is included inside the 197 | template so you can easily rewrite it. However, Bootstrap Tour maps the 198 | previous, next and end logics to the elements 199 | which have the related data-role
200 | attribute. Therefore, you can also have multiple elements with the same
201 | data-role attribute.
202 | |
203 |
204 | {% highlight javascript %}
205 | "
206 |
207 |
208 |
209 |
215 | "
216 | {% endhighlight %}
217 | |
218 |
| afterGetState, afterSetState, afterRemoveState | 221 |Function | 222 |You may want to do something right after Bootstrap Tour read, write or remove
223 | the state. Just pass functions to these. 224 | Your functions can have two parameters: 225 |
A simple example if to send a post request to your server each 243 | time there is a change: 244 | {% highlight javascript %} 245 | var tour = new Tour({ 246 | afterSetState: function (key, value) { 247 | $.post("/some/path", value); 248 | } 249 | }); 250 | {% endhighlight %} 251 | |
252 | function (key, value) { } |
253 |
| onStart | 256 |Function | 257 |Function to execute when the tour starts. | 258 |function (tour) { } |
259 |
| onEnd | 262 |Function | 263 |Function to execute when the tour ends. | 264 |function (tour) { } |
265 |
| onShow | 268 |Function | 269 |Function to execute right before each step is shown. | 270 |function (tour) { } |
271 |
| onShown | 274 |Function | 275 |Function to execute right after each step is shown. | 276 |function (tour) { } |
277 |
| onHide | 280 |Function | 281 |Function to execute right before each step is hidden. | 282 |function (tour) { } |
283 |
| onHidden | 286 |Function | 287 |Function to execute right after each step is hidden. | 288 |function (tour) { } |
289 |
| onNext | 292 |Function | 293 |Function to execute when next step is called. | 294 |function (tour) { } |
295 |
| onPrev | 298 |Function | 299 |Function to execute when prev step is called. | 300 |function (tour) { } |
301 |
| onPause NEW | 304 |Function | 305 |Function to execute when pause is called. The second argument refers to the 306 | remaining duration. | 307 |function (tour, duration) { } |
308 |
| onResume NEW | 311 |Function | 312 |Function to execute when resume is called. The second argument refers to the 313 | remaining duration. | 314 |function (tour, duration) { } |
315 |
| onRedirectError NEW | 319 |Function | 320 |Function to execute when there is a redirection error. This 321 | happens when bootstrap tour cannot redirect to the path of the step | 322 |function (tour) { } |
323 |
Step Options
328 | {% highlight javascript %} 329 | tour.addStep({ 330 | path: "", 331 | host: "", 332 | element: "", 333 | placement: "right", 334 | title: "", 335 | content: "", 336 | next: 0, 337 | prev: 0, 338 | animation: true, 339 | container: "body", 340 | backdrop: false, 341 | backdropContainer: 'body', 342 | backdropPadding: false, 343 | redirect: true, 344 | reflex: false, 345 | orphan: false, 346 | template: "", 347 | onShow: function (tour) {}, 348 | onShown: function (tour) {}, 349 | onHide: function (tour) {}, 350 | onHidden: function (tour) {}, 351 | onNext: function (tour) {}, 352 | onPrev: function (tour) {}, 353 | onPause: function (tour) {}, 354 | onResume: function (tour) {}, 355 | onRedirectError: function (tour) {} 356 | }); 357 | {% endhighlight %} 358 || Name | 362 |Type | 363 |Description | 364 |Default | 365 |
|---|---|---|---|
| path | 370 |String or RegExp | 371 |Path to the page on which the step should be shown. This 372 | allows you to build tours that span several pages! | 373 |'' |
374 |
| host NEW | 378 |String or RegExp | 379 |Host of the page on which the step should be shown. This 380 | allows you to build tours for several sub-domains | 381 |'' |
382 |
| element | 385 |String (jQuery selector) | 386 |HTML element on which the step popover should be shown. 387 | If orphan is false, this option is required. |
388 | '' |
389 |
| placement | 392 |String|Function | 393 |How to position the popover. Possible choices:
394 | 'top',
395 | 'bottom',
396 | 'left',
397 | 'right',
398 | 'auto'.
399 | When "auto" is specified, it will dynamically reorient the popover.
400 | For example, if placement is "auto left", the popover will display to
401 | the left when possible, otherwise it will display right.
402 | |
403 | 'right' |
404 |
| title | 407 |String|Function | 408 |Step title | 409 |'' |
410 |
| content | 413 |String|Function | 414 |Step content | 415 |'' |
416 |
| next | 419 |Integer | 420 |Index of the step to show after this one, starting from
421 | 0 for the first step of the
422 | tour. -1 to not show the link
423 | to next step. By default, the next step (in the order you added
424 | them) will be shown.425 | This option should be used in conjunction with 426 | prev. |
427 | 0 |
428 |
| prev | 431 |Integer | 432 |Index of the step to show before this one, starting from
433 | 0 for the first step of the
434 | tour. -1 to not show the link
435 | to previous step. By default, the previous step (in the order you added
436 | them) will be shown.437 | This option should be used in conjunction with 438 | next. |
439 | 0 |
440 |
| animation | 443 |Boolean | 444 |Apply a css fade transition to the tooltip. | 445 |true |
446 |
| container | 449 |String (jQuery selector) | 450 |Attachment of popover. Pass an element to append the popover 451 | to. By default the popover is appended after the 'element' above. 452 | This option is particularly helpful for Internet Explorer. | 453 |'body' |
454 |
| backdrop | 457 |Boolean | 458 |Show a dark backdrop behind the popover and its element, 459 | highlighting the current step. | 460 |false |
461 |
| backdropContainer NEW | 464 |String (jQuery selector) | 465 |HTML element on which the backdrop should be shown. | 466 |'body' |
467 |
| backdropPadding NEW | 470 |Boolean|Object | 471 |Add padding to the backdrop element that highlights the step element. 472 | It can be a number or a object containing optional top, right, bottom and left numbers. |
473 | 0 |
474 |
| redirect | 477 |Boolean|Function | 478 |Set a custom function to execute as redirect function.
479 | The default redirect relies on the traditional
480 | document.location.href |
481 | true |
482 |
| reflex UPDATED | 485 |Boolean|String | 486 |Enable the reflex mode: attach an handler on click on the step element to continue the tour.487 | In order to bind the handler to a custom event, you can pass a string with its name. 488 | Also, the class tour-step-element-reflex is added to the element, as hook for your custom style (e.g: cursor: pointer). |
489 | false |
490 |
| orphan | 493 |Boolean|String|Function | 494 |Allow to show the step regardless whether its element is not set, is
495 | not present in the page or is hidden. The step is fixed
496 | positioned in the middle of the page. 497 | You can use a string or function that returns a string of the HTML template for 498 | the orphan popovers |
499 | false |
500 |
| duration NEW | 503 |Boolean|String | 504 |Set a expiration time for the steps. When the step expires, 505 | the next step is automatically shown. See it as a sort of guided, automatized tour 506 | functionality. The value is specified in milliseconds | 507 |false |
508 |
| template | 511 |String|Function | 512 |String or function that returns a string of the HTML template for
513 | the popovers. If you pass a Function, two parameters are available:
514 | i is the position of step in the tour and
515 | step is the object that contains all the other step
516 | options. 517 | From version 0.5, the navigation template is included inside the 518 | template so you can easily rewrite it. However, Bootstrap Tour maps the 519 | previous, next and end logics to the elements 520 | which have the related data-role
521 | attribute. Therefore, you can also have multiple elements with the same
522 | data-role attribute.
523 | |
524 |
525 | {% highlight javascript %}
526 | "
527 |
528 |
529 |
530 |
536 | "
537 | {% endhighlight %}
538 | |
539 |
| onShow | 542 |Function | 543 |Function to execute right before the step is shown. It overrides the
544 | global onShow option. |
545 | function (tour) { } |
546 |
| onShown | 549 |Function | 550 |Function to execute right after the step is shown. It overrides the
551 | global onShown option. |
552 | function (tour) { } |
553 |
| onHide | 556 |Function | 557 |Function to execute right before the step is hidden. It overrides
558 | the global onHide option. |
559 | function (tour) { } |
560 |
| onHidden | 563 |Function | 564 |Function to execute right after the step is hidden. It overrides the
565 | global onHidden option. |
566 | function (tour) { } |
567 |
| onNext | 570 |Function | 571 |Function to execute when next step is called. It overrides the
572 | global onNext option. |
573 | function (tour) { } |
574 |
| onPrev | 577 |Function | 578 |Function to execute when prev step is called. It overrides the global
579 | onPrev option. |
580 | function (tour) { } |
581 |
| onPause NEW | 584 |Function | 585 |Function to execute when pause is called. The second argument refers to the
586 | remaining duration. It overrides the global the
587 | onPause option |
588 | function (tour, duration) { } |
589 |
| onResume NEW | 592 |Function | 593 |Function to execute when resume is called. The second argument refers to the
594 | remaining duration. It overrides the global
595 | onResume option |
596 | function (tour, duration) { } |
597 |
| onRedirectError NEW | 600 |Function | 601 |Function to execute when there is a redirection error. This
602 | happens when bootstrap tour cannot redirect to the path of the step. It overrides the global
603 | onRedirectError option |
604 | function (tour) { } |
605 |
613 |
620 |
621 |
702 |
703 |
614 |
616 |
619 | Methods Always in control
615 || Name | 623 |Description | 624 |
|---|---|
addSteps([]) |
629 | Add multiple steps to the tour. Pass an array of objects. | 630 |
addStep({}) |
633 | Add single step to the tour. Pass an object. | 634 |
| init() | 637 |Initialize the tour. You must do it before calling start. | 638 |
start(true) |
641 | Start the tour. Pass true to force the start. |
642 |
| restart() | 645 |Restart the tour after it ended. | 646 |
| end() | 649 |End the tour prematurely. | 650 |
| next() | 653 |Skip to the next step. | 654 |
| prev() | 657 |Go back to the previous step. | 658 |
goTo(i)
661 | UPDATED |
662 | Skip to a specific step. Pass i as the
663 | index of the step in the tour (0-based).664 | From version 0.7.0, the method has been renamed since some Javascript compilers 665 | are confused by the property name goto, which is a reserved word) 666 | . 667 | |
668 |
| pause() | 671 |Pause the duration timer. It works only if tour or current step has duration. | 672 |
| resume() | 675 |Resume the duration timer. It works only if tour or current step has duration. | 676 |
| ended() | 679 |Verify if the tour ended. Returns boolean. | 680 |
getStep(i) |
683 | Get the step object. Pass i as the index
684 | of the step in the tour (0-based). |
685 |
| getCurrentStep() | 688 |Get the index of the current step. | 689 |
setCurrentStep(i) |
692 | Override the current step. Pass i
693 | as the index of the step in the tour (0-based). |
694 |
| redraw() | 697 |Triggers a redraw on the overlay element. Useful for 698 | Dynamically sized tour targets. | 699 |
707 |
797 |
708 |
712 | Multipage 709 | How to traverse across pages 710 |
711 |Bootstrap Tour can be used to create tours that span multiple pages. If you have URLs for each page that have 713 | unique paths, and the dependencies are loaded on each page, you can easily create a tour like so: 714 |
715 | {% highlight javascript %} 716 | var tour = new Tour({ 717 | steps: [ 718 | { 719 | element: "#my-element", 720 | title: "Title of my step", 721 | content: "Content of my step" 722 | }, 723 | { 724 | element: "#my-other-element", 725 | title: "Title of my step", 726 | content: "Content of my step", 727 | path: "/url/to/go/to/" 728 | } 729 | ] 730 | }); 731 | {% endhighlight %} 732 | 733 |It's that simple.
734 | 735 |If you do not know the URL you wish to go to because it contains a different value per user or per
736 | instance, you can use a regular expression as the path attribute and set the redirect
737 | attribute to a function that performs the redirect.
738 |
For example:
740 | 741 | {% highlight javascript %} 742 | var tour = new Tour({ 743 | steps: [ 744 | { 745 | element: "#my-element", 746 | title: "Title of my step", 747 | content: "Content of my step", 748 | redirect: function(){ 749 | document.location.href = '/url/' + userId; 750 | }; 751 | }, 752 | { 753 | element: "#my-other-element", 754 | title: "Title of my step", 755 | content: "Content of my step", 756 | path: RegExp("\/url\/[^/]+", "i") 757 | } 758 | ] 759 | }); 760 | {% endhighlight %} 761 | 762 |Finally, if you are only using GET parameters to define different pages, and wish to redirect using those
763 | parameters, you may run into the problem that Bootstrap Tour will consider the path of the two steps to be
764 | identical. For example, you cannot use the path parameter to go from your homepage at / to a
765 | search results page at /?q=foo, because from Bootstrap Tour's perspective, those are the same
766 | location (/).
767 |
To work around this limitation, you can set the onNext attribute a function that returns a
769 | promise.
For example:
771 | 772 | {% highlight javascript %} 773 | var tour = new Tour({ 774 | steps: [ 775 | { 776 | element: "#my-element", 777 | title: "Title of my step", 778 | content: "Content of my step", 779 | onNext: function(){ 780 | document.location.href = '/?q=foo'; 781 | return (new jQuery.Deferred()).promise(); 782 | }; 783 | }, 784 | { 785 | element: "#my-other-element", 786 | title: "Title of my step", 787 | content: "Content of my step", 788 | } 789 | ] 790 | }); 791 | {% endhighlight %} 792 | 793 |Doing this will prevent the next step from popping up while the redirect is being completed in the
794 | onNext function.
795 |
9 |
32 | Bootstrap Tour
10 |
11 | The easiest way to show people how to use your website.
12 |
Not using Bootstrap? It works anyway!
13 |
15 | 19 |
20 | 31 |
35 |
80 |
36 |
38 | The How-to It's simple!
37 |Add the dependencies
39 |If you are using Bootstrap, include bootstrap-tour.min.css and bootstrap-tour.min.js:
Otherwise, just include bootstrap-tour-standalone.min.css and bootstrap-tour-standalone.min.js:
Setup your tour:
56 | {% highlight javascript %} 57 | // Instance the tour 58 | var tour = new Tour({ 59 | steps: [ 60 | { 61 | element: "#my-element", 62 | title: "Title of my step", 63 | content: "Content of my step" 64 | }, 65 | { 66 | element: "#my-other-element", 67 | title: "Title of my step", 68 | content: "Content of my step" 69 | } 70 | ]}); 71 | 72 | // Initialize the tour 73 | tour.init(); 74 | 75 | // Start the tour 76 | tour.start(); 77 | {% endhighlight %} 78 |Do you want to do more? Read the full documentation.
79 |
83 |
98 |
84 |
86 |
97 | The Team It's handmade!
85 |
101 |
107 |
102 |
104 | The License It's free!
103 |Code licensed under the MIT license.
105 | Documentation licensed under CC BY 3.0.
').parent().html();
616 | };
617 |
618 | Tour.prototype._reflexEvent = function(reflex) {
619 | if ({}.toString.call(reflex) === '[object Boolean]') {
620 | return 'click';
621 | } else {
622 | return reflex;
623 | }
624 | };
625 |
626 | Tour.prototype._scrollIntoView = function(i) {
627 | var $element, $window, counter, height, offsetTop, scrollTop, step, windowHeight;
628 | step = this.getStep(i);
629 | $element = $(step.element);
630 | if (!$element.length) {
631 | return this._showPopoverAndOverlay(i);
632 | }
633 | $window = $(window);
634 | offsetTop = $element.offset().top;
635 | height = $element.outerHeight();
636 | windowHeight = $window.height();
637 | scrollTop = 0;
638 | switch (step.placement) {
639 | case 'top':
640 | scrollTop = Math.max(0, offsetTop - (windowHeight / 2));
641 | break;
642 | case 'left':
643 | case 'right':
644 | scrollTop = Math.max(0, (offsetTop + height / 2) - (windowHeight / 2));
645 | break;
646 | case 'bottom':
647 | scrollTop = Math.max(0, (offsetTop + height) - (windowHeight / 2));
648 | }
649 | this._debug("Scroll into view. ScrollTop: " + scrollTop + ". Element offset: " + offsetTop + ". Window height: " + windowHeight + ".");
650 | counter = 0;
651 | return $('body, html').stop(true, true).animate({
652 | scrollTop: Math.ceil(scrollTop)
653 | }, (function(_this) {
654 | return function() {
655 | if (++counter === 2) {
656 | _this._showPopoverAndOverlay(i);
657 | return _this._debug("Scroll into view.\nAnimation end element offset: " + ($element.offset().top) + ".\nWindow height: " + ($window.height()) + ".");
658 | }
659 | };
660 | })(this));
661 | };
662 |
663 | Tour.prototype._initMouseNavigation = function() {
664 | var _this;
665 | _this = this;
666 | return $(document).off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='prev']").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='next']").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='end']").off("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='pause-resume']").on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='next']", (function(_this) {
667 | return function(e) {
668 | e.preventDefault();
669 | return _this.next();
670 | };
671 | })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='prev']", (function(_this) {
672 | return function(e) {
673 | e.preventDefault();
674 | if (_this._current > 0) {
675 | return _this.prev();
676 | }
677 | };
678 | })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='end']", (function(_this) {
679 | return function(e) {
680 | e.preventDefault();
681 | return _this.end();
682 | };
683 | })(this)).on("click.tour-" + this._options.name, ".popover.tour-" + this._options.name + " *[data-role='pause-resume']", function(e) {
684 | var $this;
685 | e.preventDefault();
686 | $this = $(this);
687 | $this.text(_this._paused ? $this.data('pause-text') : $this.data('resume-text'));
688 | if (_this._paused) {
689 | return _this.resume();
690 | } else {
691 | return _this.pause();
692 | }
693 | });
694 | };
695 |
696 | Tour.prototype._initKeyboardNavigation = function() {
697 | if (!this._options.keyboard) {
698 | return;
699 | }
700 | return $(document).on("keyup.tour-" + this._options.name, (function(_this) {
701 | return function(e) {
702 | if (!e.which) {
703 | return;
704 | }
705 | switch (e.which) {
706 | case 39:
707 | e.preventDefault();
708 | if (_this._isLast()) {
709 | return _this.next();
710 | } else {
711 | return _this.end();
712 | }
713 | break;
714 | case 37:
715 | e.preventDefault();
716 | if (_this._current > 0) {
717 | return _this.prev();
718 | }
719 | }
720 | };
721 | })(this));
722 | };
723 |
724 | Tour.prototype._makePromise = function(result) {
725 | if (result && $.isFunction(result.then)) {
726 | return result;
727 | } else {
728 | return null;
729 | }
730 | };
731 |
732 | Tour.prototype._callOnPromiseDone = function(promise, cb, arg) {
733 | if (promise) {
734 | return promise.then((function(_this) {
735 | return function(e) {
736 | return cb.call(_this, arg);
737 | };
738 | })(this));
739 | } else {
740 | return cb.call(this, arg);
741 | }
742 | };
743 |
744 | Tour.prototype._showBackground = function(step, data) {
745 | var $backdrop, base, height, j, len, pos, ref, results, width;
746 | height = $(document).height();
747 | width = $(document).width();
748 | ref = ['top', 'bottom', 'left', 'right'];
749 | results = [];
750 | for (j = 0, len = ref.length; j < len; j++) {
751 | pos = ref[j];
752 | $backdrop = (base = this.backdrops)[pos] != null ? base[pos] : base[pos] = $('
', {
753 | "class": "tour-backdrop " + pos
754 | });
755 | $(step.backdropContainer).append($backdrop);
756 | switch (pos) {
757 | case 'top':
758 | results.push($backdrop.height(data.offset.top > 0 ? data.offset.top : 0).width(width).offset({
759 | top: 0,
760 | left: 0
761 | }));
762 | break;
763 | case 'bottom':
764 | results.push($backdrop.offset({
765 | top: data.offset.top + data.height,
766 | left: 0
767 | }).height(height - (data.offset.top + data.height)).width(width));
768 | break;
769 | case 'left':
770 | results.push($backdrop.offset({
771 | top: data.offset.top,
772 | left: 0
773 | }).height(data.height).width(data.offset.left > 0 ? data.offset.left : 0));
774 | break;
775 | case 'right':
776 | results.push($backdrop.offset({
777 | top: data.offset.top,
778 | left: data.offset.left + data.width
779 | }).height(data.height).width(width - (data.offset.left + data.width)));
780 | break;
781 | default:
782 | results.push(void 0);
783 | }
784 | }
785 | return results;
786 | };
787 |
788 | Tour.prototype._showOverlayElement = function(step) {
789 | var $backdropElement, elementData;
790 | $backdropElement = $(step.backdropElement);
791 | if ($backdropElement.length === 0) {
792 | elementData = {
793 | width: 0,
794 | height: 0,
795 | offset: {
796 | top: 0,
797 | left: 0
798 | }
799 | };
800 | } else {
801 | elementData = {
802 | width: $backdropElement.innerWidth(),
803 | height: $backdropElement.innerHeight(),
804 | offset: $backdropElement.offset()
805 | };
806 | $backdropElement.addClass('tour-step-backdrop');
807 | if (step.backdropPadding) {
808 | elementData = this._applyBackdropPadding(step.backdropPadding, elementData);
809 | }
810 | }
811 | return this._showBackground(step, elementData);
812 | };
813 |
814 | Tour.prototype._hideOverlayElement = function(step) {
815 | var $backdrop, pos, ref;
816 | $(step.backdropElement).removeClass('tour-step-backdrop');
817 | ref = this.backdrops;
818 | for (pos in ref) {
819 | $backdrop = ref[pos];
820 | if ($backdrop && $backdrop.remove !== void 0) {
821 | $backdrop.remove();
822 | }
823 | }
824 | return this.backdrops = [];
825 | };
826 |
827 | Tour.prototype._applyBackdropPadding = function(padding, data) {
828 | if (typeof padding === 'object') {
829 | if (padding.top == null) {
830 | padding.top = 0;
831 | }
832 | if (padding.right == null) {
833 | padding.right = 0;
834 | }
835 | if (padding.bottom == null) {
836 | padding.bottom = 0;
837 | }
838 | if (padding.left == null) {
839 | padding.left = 0;
840 | }
841 | data.offset.top = data.offset.top - padding.top;
842 | data.offset.left = data.offset.left - padding.left;
843 | data.width = data.width + padding.left + padding.right;
844 | data.height = data.height + padding.top + padding.bottom;
845 | } else {
846 | data.offset.top = data.offset.top - padding;
847 | data.offset.left = data.offset.left - padding;
848 | data.width = data.width + (padding * 2);
849 | data.height = data.height + (padding * 2);
850 | }
851 | return data;
852 | };
853 |
854 | Tour.prototype._clearTimer = function() {
855 | window.clearTimeout(this._timer);
856 | this._timer = null;
857 | return this._duration = null;
858 | };
859 |
860 | Tour.prototype._getProtocol = function(url) {
861 | url = url.split('://');
862 | if (url.length > 1) {
863 | return url[0];
864 | } else {
865 | return 'http';
866 | }
867 | };
868 |
869 | Tour.prototype._getHost = function(url) {
870 | url = url.split('//');
871 | url = url.length > 1 ? url[1] : url[0];
872 | return url.split('/')[0];
873 | };
874 |
875 | Tour.prototype._getPath = function(path) {
876 | return path.replace(/\/?$/, '').split('?')[0].split('#')[0];
877 | };
878 |
879 | Tour.prototype._getQuery = function(path) {
880 | return this._getParams(path, '?');
881 | };
882 |
883 | Tour.prototype._getHash = function(path) {
884 | return this._getParams(path, '#');
885 | };
886 |
887 | Tour.prototype._getParams = function(path, start) {
888 | var j, len, param, params, paramsObject;
889 | params = path.split(start);
890 | if (params.length === 1) {
891 | return {};
892 | }
893 | params = params[1].split('&');
894 | paramsObject = {};
895 | for (j = 0, len = params.length; j < len; j++) {
896 | param = params[j];
897 | param = param.split('=');
898 | paramsObject[param[0]] = param[1] || '';
899 | }
900 | return paramsObject;
901 | };
902 |
903 | Tour.prototype._equal = function(obj1, obj2) {
904 | var j, k, len, obj1Keys, obj2Keys, v;
905 | if ({}.toString.call(obj1) === '[object Object]' && {}.toString.call(obj2) === '[object Object]') {
906 | obj1Keys = Object.keys(obj1);
907 | obj2Keys = Object.keys(obj2);
908 | if (obj1Keys.length !== obj2Keys.length) {
909 | return false;
910 | }
911 | for (k in obj1) {
912 | v = obj1[k];
913 | if (!this._equal(obj2[k], v)) {
914 | return false;
915 | }
916 | }
917 | return true;
918 | } else if ({}.toString.call(obj1) === '[object Array]' && {}.toString.call(obj2) === '[object Array]') {
919 | if (obj1.length !== obj2.length) {
920 | return false;
921 | }
922 | for (k = j = 0, len = obj1.length; j < len; k = ++j) {
923 | v = obj1[k];
924 | if (!this._equal(v, obj2[k])) {
925 | return false;
926 | }
927 | }
928 | return true;
929 | } else {
930 | return obj1 === obj2;
931 | }
932 | };
933 |
934 | return Tour;
935 |
936 | })();
937 | return Tour;
938 | });
939 |
--------------------------------------------------------------------------------