[Feature] allow custom modal class and spotlight classes

README.md

@@ -62,13 +62,17 @@ Template.foo.helpers({
     id: "myCoolTutorial",
     steps: tutorialSteps,
     emitter: new EventEmitter(),
+    modalClass: "myFancyModalClass",
+    spotlightClass: "myFancySpotlightClass",
     onFinish: function() { /* make the tutorial disappear */ }
   }
 });
 ```
 
 The `id` field of the options is optional. If provided, it preserves the current step of the tutorial across a hot code reload by saving it in a `Session` variable. You will probably find this very useful when testing your tutorial.
 
+The `modalClass`, `spotlightClass` allows you to add your custom class to override the defaults.
+
 The steps of the tutorial should be an array of objects, which take the following form:
 
 - `template`: (**required**) The template that should be displayed in the modal for this step. You can specify this either directly as a `Template.foo` object, or as a string like `"foo"`.

helpers.coffee

@@ -48,6 +48,12 @@ Template.tutorial.helpers
     # This function is reactive; the above will run whenever the context changes
     return @currentTemplate()
 
+  modalClass: ->
+    return @currentModalClass
+
+  spotlightClass: ->
+    return @currentSpotlightClass
+
 Template._tutorial_buttons.events =
   "click .action-tutorial-back": -> @prev()
   "click .action-tutorial-next": -> @next()

package.js

@@ -1,12 +1,12 @@
 Package.describe({
-  name: "mizzao:tutorials",
-  summary: "Create super cool animated tutorials for your Meteor app",
-  version: "0.6.7",
-  git: "https://github.com/mizzao/meteor-tutorials.git"
+  name: "pramodh:meteor-tutorials",
+  summary: "Create super cool animated tutorials for your Meteor app. A fork of https://github.com/mizzao/meteor-tutorials",
+  version: "0.6.8",
+  git: "https://github.com/whitebeatle/meteor-tutorials.git"
 });
 
 Package.onUse(function (api) {
-  api.versionsFrom("1.2.0.1");
+  api.versionsFrom("1.1.0.3");
 
   api.use(['jquery', 'stylus', 'coffeescript'], 'client');
   api.use(['ui', 'templating'], 'client');

templates.html

@@ -1,8 +1,8 @@
 <template name="tutorial">
     {{#with tutorialManager}}
-    <div class="spotlight"></div>
+    <div class="spotlight {{spotlightClass}}"></div>
     {{! Note the canonical BS3 div.modal wrapper is omitted here because it's actually NOT modal }}
-    <div class="modal-dialog positioned">
+    <div class="modal-dialog positioned {{modalClass}}">
         <div class="modal-content">
             <div class="modal-body">
                 {{> content }}

tutorial.coffee

@@ -26,6 +26,8 @@ class @TutorialManager
     @steps = options.steps
     @onFinish = options.onFinish || null
     @emitter = options.emitter
+    @currentModalClass = options.modalClass
+    @currentSpotlightClass = options.spotlightClass
 
     # Grab existing step if it exists - but don't grab it reactively,
     # or this template will keep reloading