Only set .onboarding-focus class when onboarding is enabled

README.md

@@ -8,6 +8,12 @@ ngOnboarding is a tooltip tutorial / onboarding framework for [Angular.js](http:
 
 This library requires Angular.js 1.2 or greater along with any recent version of jQuery.
 
+## Installation
+
+```bash
+npm install ng-onboarding
+```
+
 ## Demo
 
 You can find a very simple example of ngOnboarding [here](http://adamalbrecht.github.io/ngOnboarding/).
@@ -66,11 +72,11 @@ There are a number of options that can be passed to each step in your on-boardin
 | width               | null      | Width of the popover. Defaults to the width of the content. |
 | height              | null      | Height of the popover. Defaults to the height of the content. |
 | top, right, bottom, left | null | Set the positioning of the popover explicitly.
-| height              | null      | Height of the popover. Defaults to the height of the content. |
 | xOffset             | null      | Offset the horizontal position of the popover relative to the attached element. |
 | yOffset             | null      | Offset the vertical position of the popover relative to the attached element. |
 
 
+
 ## Overriding Directive Defaults
 
 You can also pre-configure some options during your app's configuration phase.
@@ -91,6 +97,8 @@ app.config(function(ngOnboardingDefaultsProvider) {
 | showDoneButton      | true      | Show a 'Done' button on the last popover    |
 | showStepInfo        | true      | Shows 'Step X of Y' text on each popover    |
 | closeButtonText     | X         | Text/HTML used for the close button         |
+| actualStepText      | 'Step'    | Text previous the actual step |
+| totalStepText       | 'of'      | Text between actual step and total steps |
 
 The CSS classes used in the HTML are also configurable. Please see the source for more info.
 

index.html

@@ -99,7 +99,9 @@ <h2>Content Zone 4</h2>
             overlay: true,
             title: 'Welcome!',
             description: "This is a box with the position set to 'centered'.",
-            position: 'centered'
+            position: 'centered',
+            actualStepText: 'Paso',
+            totalStepText: 'de'
           },
           {
             attachTo: '#content_1',

package.json

@@ -1,6 +1,10 @@
 {
-  "name": "ngOnboarding",
-  "version": "0.1.7",
+  "name": "ng-onboarding",
+  "version": "0.1.8",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adamalbrecht/ngOnboarding"
+  },
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-coffee": "~0.7",

src/ng-onboarding.coffee

@@ -29,6 +29,8 @@ app.provider "ngOnboardingDefaults", ->
     closeButtonClass: 'onboarding-close-button',
     closeButtonText: 'X',
     stepClass: 'onboarding-step-info',
+    actualStepText: 'Step',
+    totalStepText: 'of',
     showStepInfo: true
   }
   $get: ->
@@ -53,7 +55,6 @@ app.directive 'onboardingPopover', ['ngOnboardingDefaults', '$sce', '$timeout',
     # Important Variables
     curStep = null
     attributesToClear = ['title', 'top', 'right', 'bottom', 'left', 'width', 'height', 'position']
-    scope.stepCount = scope.steps.length
 
     # Button Actions
     scope.next = -> scope.index = scope.index + 1
@@ -65,8 +66,8 @@ app.directive 'onboardingPopover', ['ngOnboardingDefaults', '$sce', '$timeout',
         scope.onFinishCallback()
 
     # Watch for changes in the current step index
-    scope.$watch 'index', (newVal, oldVal) ->
-      if newVal == null
+    scope.$watchGroup ['index','enabled'], (newVals, oldVal) ->
+      if typeof(newVals[0]) == 'undefined'
         scope.enabled = false
         setupOverlay(false)
         return
@@ -75,6 +76,7 @@ app.directive 'onboardingPopover', ['ngOnboardingDefaults', '$sce', '$timeout',
       scope.lastStep = (scope.index + 1 == scope.steps.length)
       scope.showNextButton = (scope.index + 1 < scope.steps.length)
       scope.showPreviousButton = (scope.index > 0)
+      scope.stepCount = scope.steps.length
       for attr in attributesToClear
         scope[attr] = null
       for k, v of ngOnboardingDefaults
@@ -89,13 +91,15 @@ app.directive 'onboardingPopover', ['ngOnboardingDefaults', '$sce', '$timeout',
       scope.previousButtonText = $sce.trustAsHtml(scope.previousButtonText)
       scope.doneButtonText = $sce.trustAsHtml(scope.doneButtonText)
       scope.closeButtonText = $sce.trustAsHtml(scope.closeButtonText)
+      scope.actualStepText = $sce.trustAsHtml(scope.actualStepText)
+      scope.totalStepText = $sce.trustAsHtml(scope.totalStepText)
       setupOverlay()
       setupPositioning()
 
     setupOverlay = (showOverlay=true) ->
       $('.onboarding-focus').removeClass('onboarding-focus')
       if showOverlay
-        if curStep['attachTo'] && scope.overlay
+        if curStep['attachTo'] && scope.overlay && scope.enabled
           $(curStep['attachTo']).addClass('onboarding-focus')
 
     setupPositioning = ->
@@ -130,7 +134,7 @@ app.directive 'onboardingPopover', ['ngOnboardingDefaults', '$sce', '$timeout',
             top = $(attachTo).offset().top + $(attachTo).outerHeight() + yMargin
           else if scope.position == 'top'
             bottom = $(window).height() - $(attachTo).offset().top + yMargin
-            
+
 
           if curStep['yOffset']
             top = top + curStep['yOffset'] if top != null
@@ -157,7 +161,7 @@ app.directive 'onboardingPopover', ['ngOnboardingDefaults', '$sce', '$timeout',
                     <p ng-bind-html='description'></p>
                   </div>
                   <div class='{{buttonContainerClass}}' ng-show='showButtons'>
-                    <span ng-show='showStepInfo' class='{{stepClass}}'>Step {{index + 1}} of {{stepCount}}</span>
+                    <span ng-show='showStepInfo' class='{{stepClass}}'>{{actualStepText}} {{index + 1}} {{totalStepText}} {{stepCount}}</span>
                     <a href='' ng-click='previous()' ng-show='showPreviousButton' class='{{buttonClass}}' ng-bind-html='previousButtonText'></a>
                     <a href='' ng-click='next()' ng-show='showNextButton' class='{{buttonClass}}' ng-bind-html='nextButtonText'></a>
                     <a href='' ng-click='close()' ng-show='showDoneButton && lastStep' class='{{buttonClass}}' ng-bind-html='doneButtonText'></a>