Merge pull request #8 from HubSpot/exit

Add an option to include a link at the top of each step
shipshapecode · Apr 16, 2014 · b427ea5 · b427ea5
2 parents df7988c + 76996b6
commit b427ea5
Show file tree

Hide file tree

Showing 16 changed files with 267 additions and 78 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "shepherd",
   "main": "shepherd.js",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "homepage": "https://github.com/HubSpot/shepherd",
   "authors": [
     "Zack Bloom <zackbloom@gmail.com>",

diff --git a/coffee/shepherd.coffee b/coffee/shepherd.coffee
@@ -1,10 +1,12 @@
 {extend, removeClass, addClass, hasClass, Evented, getBounds, uniqueId} = Tether.Utils
 
+Shepherd = new Evented
+
 ATTACHMENT =
-  'top': 'top center'
+  'top': 'bottom center'
   'left': 'middle right'
   'right': 'middle left'
-  'bottom': 'bottom center'
+  'bottom': 'top center'
 
 createFromHTML = (html) ->
   el = document.createElement('div')
@@ -118,6 +120,8 @@ class Step extends Evented
 
     addClass @el, 'shepherd-open'
 
+    document.body.setAttribute 'data-shepherd-step', @id
+
     @setupTether()
 
     if @options.scrollTo
@@ -129,6 +133,8 @@ class Step extends Evented
   hide: =>
     removeClass @el, 'shepherd-open'
 
+    document.body.removeAttribute 'data-shepherd-step'
+
     @tether?.destroy()
     @tether = null
 
@@ -138,12 +144,12 @@ class Step extends Evented
     hasClass @el, 'shepherd-open'
 
   cancel: =>
-    @hide()
+    @tour.cancel()
 
     @trigger 'cancel'
 
   complete: =>
-    @hide()
+    @tour.complete()
 
     @trigger 'complete'
 
@@ -172,11 +178,20 @@ class Step extends Evented
     content.className = 'shepherd-content'
     @el.appendChild content
 
+    header = document.createElement 'header'
+    content.appendChild header
+
     if @options.title?
-      header = document.createElement 'header'
-      header.innerHTML = "<h3 class='shepherd-title'>#{ @options.title }</h3>"
+      header.innerHTML += "<h3 class='shepherd-title'>#{ @options.title }</h3>"
       @el.className += ' shepherd-has-title'
-      content.appendChild header
+
+    if @options.showCancelLink
+      link = createFromHTML "<a href class='shepherd-cancel-link'>✕</a>"
+      header.appendChild link
+
+      @el.className += ' shepherd-has-cancel-link'
+
+      @bindCancelLink link
 
     if @options.text?
       text = createFromHTML "<div class='shepherd-text'></div>"
@@ -212,6 +227,12 @@ class Step extends Evented
     if @options.advanceOn
       @bindAdvance()
 
+  bindCancelLink: (link) ->
+    link.addEventListener 'click', (e) =>
+      e.preventDefault()
+
+      @cancel()
+
   bindButtonEvents: (cfg, el) ->
     cfg.events ?= {}
     if cfg.action?
@@ -235,7 +256,7 @@ class Tour extends Evented
     @steps = @options.steps ? []
 
     # Pass these events onto the global Shepherd object
-    for event in ['complete', 'cancel', 'hide', 'start', 'show']
+    for event in ['complete', 'cancel', 'hide', 'start', 'show', 'active', 'inactive']
       @on event, (opts={}) =>
         opts.tour = @
         Shepherd.trigger event, opts
@@ -283,11 +304,17 @@ class Tour extends Evented
     @show(index - 1)
 
   cancel: =>
-    @currentStep?.cancel()
+    @currentStep?.hide()
 
     @trigger 'cancel'
     @done()
 
+  complete: =>
+    @currentStep?.hide()
+
+    @trigger 'complete'
+    @done()
+
   hide: =>
     @currentStep?.hide()
 
@@ -297,9 +324,15 @@ class Tour extends Evented
   done: ->
     Shepherd.activeTour = null
 
+    removeClass document.body, 'shepherd-active'
+    @trigger 'inactive', {tour: @}
+
   show: (key=0) ->
     if @currentStep
       @currentStep.hide()
+    else
+      addClass document.body, 'shepherd-active'
+      @trigger 'active', {tour: @}
 
     Shepherd.activeTour = @
 
@@ -320,8 +353,6 @@ class Tour extends Evented
     @currentStep = null
     @next()
 
-Shepherd = new Evented
-
 extend Shepherd, {Tour, Step, Evented}
 
 window.Shepherd = Shepherd
diff --git a/css/shepherd-theme-arrows-plain-buttons.css b/css/shepherd-theme-arrows-plain-buttons.css
@@ -121,20 +121,45 @@
 
 .shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
   border-bottom-color: #eeeeee; }
+.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-has-title .shepherd-content header {
+  background: #eeeeee;
+  padding: 1em; }
+  .shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
+    padding: 0;
+    margin-bottom: 0; }
+.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-has-cancel-link .shepherd-content header h3 {
+  float: left; }
 .shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content {
   padding: 0; }
   .shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header {
+    *zoom: 1;
     -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
     -ms-border-radius: 5px 5px 0 0;
     -o-border-radius: 5px 5px 0 0;
-    border-radius: 5px 5px 0 0;
-    background: #eeeeee;
-    padding: 1em; }
+    border-radius: 5px 5px 0 0; }
+    .shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header:after {
+      content: "";
+      display: table;
+      clear: both; }
     .shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header h3 {
       margin: 0;
       line-height: 1;
       font-weight: normal; }
+    .shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header a.shepherd-cancel-link {
+      float: right;
+      text-decoration: none;
+      font-size: 1.25em;
+      line-height: 0.8em;
+      font-weight: normal;
+      color: rgba(0, 0, 0, 0.5);
+      opacity: 0.25;
+      position: relative;
+      top: 0.1em;
+      padding: 0.8em;
+      margin-bottom: -0.8em; }
+      .shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header a.shepherd-cancel-link:hover {
+        opacity: 1; }
   .shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content .shepherd-text {
     padding: 1em; }
     .shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content .shepherd-text p {

diff --git a/css/shepherd-theme-arrows.css b/css/shepherd-theme-arrows.css
@@ -121,22 +121,47 @@
 
 .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
   border-bottom-color: #eeeeee; }
+.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
+  background: #eeeeee;
+  padding: 1em; }
+  .shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
+    padding: 0;
+    margin-bottom: 0; }
+.shepherd-element.shepherd-theme-arrows.shepherd-has-cancel-link .shepherd-content header h3 {
+  float: left; }
 .shepherd-element.shepherd-theme-arrows .shepherd-content {
   padding: 0; }
   .shepherd-element.shepherd-theme-arrows .shepherd-content * {
     font-size: inherit; }
   .shepherd-element.shepherd-theme-arrows .shepherd-content header {
+    *zoom: 1;
     -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
     -ms-border-radius: 5px 5px 0 0;
     -o-border-radius: 5px 5px 0 0;
-    border-radius: 5px 5px 0 0;
-    background: #eeeeee;
-    padding: 1em; }
+    border-radius: 5px 5px 0 0; }
+    .shepherd-element.shepherd-theme-arrows .shepherd-content header:after {
+      content: "";
+      display: table;
+      clear: both; }
     .shepherd-element.shepherd-theme-arrows .shepherd-content header h3 {
       margin: 0;
       line-height: 1;
       font-weight: normal; }
+    .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link {
+      float: right;
+      text-decoration: none;
+      font-size: 1.25em;
+      line-height: 0.8em;
+      font-weight: normal;
+      color: rgba(0, 0, 0, 0.5);
+      opacity: 0.25;
+      position: relative;
+      top: 0.1em;
+      padding: 0.8em;
+      margin-bottom: -0.8em; }
+      .shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link:hover {
+        opacity: 1; }
   .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text {
     padding: 1em; }
     .shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p {

diff --git a/docs/intro.md b/docs/intro.md
@@ -141,6 +141,7 @@ to disable.  Each button in the array is an object of the format:
 - `advanceOn`: An action on the page which should advance shepherd to the next step.  It can be of the form `"selector event"`, or an object with those
 properies.  For example: `".some-element click"`, or `{element: '.some-element', event: 'click'}`.  It doesn't have to be an event inside
 the tour, it can be any event fired on any element on the page.  You can also always manually advance the Tour by calling `myTour.next()`.
+- `showCancelLink`: Should a cancel "✕" be shown in the header of the step?
 - `scrollTo`: Should the element be scrolled to when this step is shown?
 - `tetherOptions`: Extra options to pass to [tether](http://github.hubspot.com/tether)
 

diff --git a/docs/welcome/coffee/welcome.coffee b/docs/welcome/coffee/welcome.coffee
@@ -5,6 +5,7 @@ setupShepherd = ->
   shepherd = new Shepherd.Tour
     defaults:
       classes: 'shepherd-element shepherd-open shepherd-theme-arrows'
+      showCancelLink: true
 
   shepherd.addStep 'welcome',
     text: [
@@ -16,9 +17,7 @@ setupShepherd = ->
     buttons: [
       text: 'Exit'
       classes: 'shepherd-button-secondary'
-      action: ->
-        completeShepherd()
-        shepherd.hide()
+      action: shepherd.cancel
     ,
       text: 'Next'
       action: shepherd.next
@@ -61,14 +60,9 @@ setupShepherd = ->
       action: shepherd.back
     ,
       text: 'Done'
-      action: ->
-        completeShepherd()
-        shepherd.next()
+      action: shepherd.next
     ]
 
   shepherd.start()
 
-completeShepherd = ->
-  $('body').addClass('shepherd-completed')
-
 $ init
diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css
@@ -65,7 +65,7 @@ body {
       -o-transition: opacity 0.4s;
       transition: opacity 0.4s;
       opacity: 0.3; }
-      body.shepherd-completed .hero-outer .hero-inner > * {
+      body:not(.shepherd-active) .hero-outer .hero-inner > * {
         opacity: 1; }
     .hero-outer .hero-inner .shepherd-target.shepherd-enabled {
       opacity: 1; }

diff --git a/docs/welcome/index.html b/docs/welcome/index.html
@@ -19,7 +19,7 @@
     <link rel="stylesheet" href="/shepherd/docs/welcome/css/prism.css" />
     <link rel="stylesheet" href="/shepherd/docs/welcome/css/welcome.css" />
 </head>
-<body>
+<body class="shepherd-active">
     <div class="hero-scroll">
         <div class="hero-outer">
             <div class="hero-inner">

diff --git a/docs/welcome/js/welcome.js b/docs/welcome/js/welcome.js
@@ -1,5 +1,5 @@
 (function() {
-  var completeShepherd, init, setupShepherd;
+  var init, setupShepherd;
 
   init = function() {
     return setupShepherd();
@@ -9,7 +9,8 @@
     var shepherd;
     shepherd = new Shepherd.Tour({
       defaults: {
-        classes: 'shepherd-element shepherd-open shepherd-theme-arrows'
+        classes: 'shepherd-element shepherd-open shepherd-theme-arrows',
+        showCancelLink: true
       }
     });
     shepherd.addStep('welcome', {
@@ -20,10 +21,7 @@
         {
           text: 'Exit',
           classes: 'shepherd-button-secondary',
-          action: function() {
-            completeShepherd();
-            return shepherd.hide();
-          }
+          action: shepherd.cancel
         }, {
           text: 'Next',
           action: shepherd.next,
@@ -72,20 +70,13 @@
           action: shepherd.back
         }, {
           text: 'Done',
-          action: function() {
-            completeShepherd();
-            return shepherd.next();
-          }
+          action: shepherd.next
         }
       ]
     });
     return shepherd.start();
   };
 
-  completeShepherd = function() {
-    return $('body').addClass('shepherd-completed');
-  };
-
   $(init);
 
 }).call(this);
diff --git a/docs/welcome/sass/welcome.sass b/docs/welcome/sass/welcome.sass
@@ -66,7 +66,7 @@ body
             +transition(opacity .4s)
             opacity: 0.3
 
-            body.shepherd-completed &
+            body:not(.shepherd-active) &
                 opacity: 1
 
         .shepherd-target.shepherd-enabled