added addSteps method to set more than one step at once, close #89

sorich87 · May 30, 2013 · 7becd5f · 7becd5f
1 parent 94e8363
commit 7becd5f
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 62 deletions.
diff --git a/bootstrap-tour.coffee b/bootstrap-tour.coffee
@@ -90,6 +90,10 @@
       @_options.afterGetState(key, value)
       return value
 
+    # Add multiple steps
+    addSteps: (steps) ->
+      @addStep step for step in steps
+
     # Add a new step
     addStep: (step) ->
       @_steps.push step

diff --git a/bootstrap-tour.js b/bootstrap-tour.js
diff --git a/docs/index.coffee b/docs/index.coffee
@@ -1,70 +1,67 @@
 $ ->
   $start = $("#start")
+
   tour = new Tour(
     onStart: ->
       $start.addClass "disabled", true
 
     onEnd: ->
       $start.removeClass "disabled", true
   )
-  tour.addStep
-    element: "#download"
-    placement: "bottom"
-    title: "Welcome to Bootstrap Tour!"
-    content: "Introduce new users to your product by walking them through it step by step. Built" +
-      "on the awesome <a href='http://twitter.github.com/bootstrap' target='_blank'>Bootstrap " +
-      "from Twitter.</a>"
-
-  tour.addStep
-    element: "#usage"
-    placement: "top"
-    title: "Setup in four easy steps"
-    content: "Easy is better, right? Easy like Bootstrap."
-    options:
-      labels:
-        prev: "Go back"
-        next: "Hey"
-        end: "Stop"
-
-  tour.addStep
-    path: "/"
-    element: "#options"
-    placement: "top"
-    title: "And it is powerful!"
-    content: "There are more options for those, like us, who want to do complicated things. " +
-      "<br />Power to the people! :P"
-    reflex: true
-
-  tour.addStep
-    path: "/"
-    element: "#demo"
-    placement: "top"
-    title: "A new shiny Backdrop option"
-    content: "If you need to highlight the current step's element, activate the backdrop " +
-      "and you won't lose the focus anymore!"
-    backdrop: true
-
-  tour.addStep
-    path: "/"
-    element: "#reflex"
-    placement: "bottom"
-    title: "Reflex mode"
-    content: "Reflex mode is enabled, click on the page heading to continue!"
-    reflex: true
-
-  tour.addStep
-    path: "/page.html"
-    element: "h1"
-    placement: "bottom"
-    title: "See, you are not restricted to only one page"
-    content: "Well, nothing to see here. Click next to go back to the index page."
 
-  tour.addStep
-    path: "/"
-    element: "#contribute"
-    placement: "bottom"
-    title: "Best of all, it's free!"
-    content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
+  tour.addSteps [
+      element: "#download"
+      placement: "bottom"
+      title: "Welcome to Bootstrap Tour!"
+      content: "Introduce new users to your product by walking them through it step by step. Built" +
+        "on the awesome <a href='http://twitter.github.com/bootstrap' target='_blank'>Bootstrap " +
+        "from Twitter.</a>"
+    ,
+      element: "#usage"
+      placement: "top"
+      title: "Setup in four easy steps"
+      content: "Easy is better, right? Easy like Bootstrap."
+      options:
+        labels:
+          prev: "Go back"
+          next: "Hey"
+          end: "Stop"
+    ,
+      path: "/"
+      element: "#options"
+      placement: "top"
+      title: "And it is powerful!"
+      content: "There are more options for those, like us, who want to do complicated things. " +
+        "<br />Power to the people! :P"
+      reflex: true
+    ,
+      path: "/"
+      element: "#demo"
+      placement: "top"
+      title: "A new shiny Backdrop option"
+      content: "If you need to highlight the current step's element, activate the backdrop " +
+        "and you won't lose the focus anymore!"
+      backdrop: true
+    ,
+      path: "/"
+      element: "#reflex"
+      placement: "bottom"
+      title: "Reflex mode"
+      content: "Reflex mode is enabled, click on the page heading to continue!"
+      reflex: true
+    ,
+      path: "/page.html"
+      element: "h1"
+      placement: "bottom"
+      title: "See, you are not restricted to only one page"
+      content: "Well, nothing to see here. Click next to go back to the index page."
+    ,
+      path: "/"
+      element: "#contribute"
+      placement: "bottom"
+      title: "Best of all, it's free!"
+      content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
+    ]
 
   tour.start()
 
@@ -76,4 +73,4 @@ $ ->
     tour.restart()
     $(".alert").alert "close"
 
-  $("html").smoothScroll();
+  $("html").smoothScroll();
diff --git a/docs/index.js b/docs/index.js
diff --git a/tests/tests.coffee b/tests/tests.coffee
@@ -52,14 +52,21 @@ test "Tour.getState should get state localStorage items", ->
     useLocalStorage: true
   })
   @tour.setState("test", "yes")
-  strictEqual(@tour.getState("test"), "yes", "tour save state localStorage items")
+  strictEqual(@tour.getState("test"), "yes", "tour saves state localStorage items")
   window.localStorage.setItem("tour_test", null)
 
 test "Tour.addStep should add a step", ->
   @tour = new Tour()
   step = { element: $("<div></div>").appendTo("#qunit-fixture") }
   @tour.addStep(step)
-  deepEqual(@tour._steps, [step], "tour adds steps")
+  deepEqual(@tour._steps, [step], "tour adds the step")
+
+test "Tour.addSteps should add multiple step", ->
+  @tour = new Tour()
+  firstStep = { element: $("<div></div>").appendTo("#qunit-fixture") }
+  secondStep = { element: $("<div></div>").appendTo("#qunit-fixture") }
+  @tour.addSteps([firstStep, secondStep])
+  deepEqual(@tour._steps, [firstStep, secondStep], "tour adds multiple steps")
 
 test "Tour step should have an id", ->
   @tour = new Tour()