index.coffee 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. $ ->
  2. $demo = $("#demo")
  3. tour = new Tour(
  4. onStart: -> $demo.addClass "disabled", true
  5. onEnd: -> $demo.removeClass "disabled", true
  6. debug: true
  7. )
  8. duration = 5000
  9. remaining = duration
  10. tour.addSteps [
  11. element: "#demo"
  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. Built on the awesome
  17. <a href='http://twitter.github.com/bootstrap' target='_blank'>Bootstrap from Twitter.</a>
  18. """
  19. ,
  20. element: "#usage"
  21. placement: "top"
  22. title: "A super simple setup"
  23. content: "Easy is better, right? Easy like Bootstrap. The tour is up and running with just a
  24. few options and steps."
  25. ,
  26. element: "#options"
  27. placement: "top"
  28. title: "Flexibilty and expressiveness"
  29. content: """
  30. There are more options for those who want to get on the dark side.<br>
  31. Power to the people!
  32. """
  33. reflex: true
  34. ,
  35. element: "#duration"
  36. placement: "top"
  37. title: "Automagically expiring step",
  38. content: """
  39. A new addition: make your tour (or step) completely automatic. You set the duration, Bootstrap
  40. Tour does the rest. For instance, this step will disappear in <em>5</em> seconds.
  41. """
  42. duration: 5000
  43. ,
  44. element: "#methods"
  45. placement: "top"
  46. title: "A new shiny Backdrop option"
  47. content: """
  48. If you need to highlight the current step's element, activate the backdrop and you won't lose
  49. the focus anymore!
  50. """
  51. backdrop: true
  52. ,
  53. title: "And support for orphan steps"
  54. content: """
  55. If you activate the orphan property, the step(s) are shown centered in the page, and you can
  56. forget to specify element and placement!
  57. """
  58. orphan: true
  59. ,
  60. path: "/"
  61. element: "#reflex"
  62. placement: "bottom"
  63. title: "Reflex mode"
  64. content: "Reflex mode is enabled, click on the page heading to continue!"
  65. reflex: true
  66. ,
  67. path: "/page.html"
  68. element: "h1"
  69. placement: "bottom"
  70. title: "See, you are not restricted to only one page"
  71. content: "Well, nothing to see here. Click next to go back to the index page."
  72. ,
  73. path: "/"
  74. element: "#license"
  75. placement: "top"
  76. title: "Best of all, it's free!"
  77. content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
  78. ,
  79. element: ".navbar-nav > li:last"
  80. placement: "bottom"
  81. title: "Fixed position"
  82. content: "Works well for fixed positioned elements! :)"
  83. ]
  84. tour.init()
  85. tour.start()
  86. $('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert() if tour.ended()
  87. $(document).on "click", "[data-demo]", (e) ->
  88. e.preventDefault()
  89. return if $(this).hasClass "disabled"
  90. tour.restart()
  91. $(".alert").alert "close"
  92. $("html").smoothScroll()
  93. $(".gravatar").each( ->
  94. $this = $(@)
  95. email = md5 $this.data "email"
  96. $(@).attr "src", "http://www.gravatar.com/avatar/#{email}?s=60"
  97. )