Add animated or non-animated tours

demo/scripts/demo.js

@@ -1,117 +1,121 @@
 /* eslint-disable */
 document.addEventListener("DOMContentLoaded", function () {
-  const tourDriver = new Driver({
-    animate: false,
-    opacity: 0.8,
-    padding: 5,
-    showButtons: true,
-  });
 
-  tourDriver.defineSteps([
+  const tourSteps = [
     {
       element: '#driver-demo-head',
       popover: {
         title: 'Before we start',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',
-        nextBtnText: 'Okay, Start!',
-      },
-    },
-    {
+        nextBtnText: 'Okay, Start!'
+      }
+    }, {
       element: '#logo_emoji',
       popover: {
         title: 'Focus Anything',
         description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
-        position: 'bottom',
-      },
-    },
-    {
+        position: 'bottom'
+      }
+    }, {
       element: '#name_driver',
       popover: {
         title: 'Why Driver?',
-        description: 'Because it lets you drive the user across the page',
-        position: 'bottom',
-      },
-    },
-    {
+        description: 'Because it let\'s you drive the user across the page',
+        position: 'bottom'
+      }
+    }, {
       element: '#driver-demo-head',
       popover: {
         title: 'Lets talk features',
         description: 'You may leave your mouse and use the <strong>arrow keys</strong> to move next and back or <strong>escape key</strong> anytime to close this',
-        position: 'bottom',
-      },
-    },
-    {
+        position: 'bottom'
+      }
+    }, {
       element: '#highlight_feature',
       popover: {
         title: 'Highlight Feature',
         description: 'You may use it to highlight single elements (with or without popover) e.g. like facebook does while creating posts'
       }
-    },
-    {
+    }, {
       element: '#feature_introductions_feature',
       popover: {
         title: 'Feature Introductions',
         description: 'With it\'s powerful API you can use it to make programmatic or user driven feature introductions',
-        position: 'bottom',
+        position: 'bottom'
       }
-    },
-    {
+    }, {
       element: '#focus_shifters_feature',
       popover: {
         title: 'Focus Shifters',
         description: 'If some element or part of the page needs user\'s interaction, you can just call the highlight method. Driver will take care of driving the user there',
-        position: 'bottom',
+        position: 'bottom'
       }
-    },
-    {
+    }, {
       element: '#customizable_feature',
       popover: {
         title: 'Highly Customizable',
         description: 'Driver has a powerful API allowing you to customize the experience as much as you can.',
-        position: 'bottom',
+        position: 'bottom'
       }
-    },
-    {
+    }, {
       element: '#keyboard_feature',
       popover: {
         title: 'User Friendly',
         description: 'Your users can control it with the arrow keys on keyboard, or escape to close it',
-        position: 'bottom',
+        position: 'bottom'
       }
-    },
-    {
+    }, {
       element: '#free_use_feature',
       popover: {
         title: 'MIT License',
-        description: 'I believe in open=source and thus Driver is completely free for both personal or commercial use'
+        description: 'I believe in open-source and thus Driver is completely free for both personal or commercial use'
       }
-    },
-    {
+    }, {
       element: '#lightweight_feature',
       popover: {
         title: 'Only ~4KB',
         description: 'Driver is free of bloat and written in Vanilla JS. There is no external dependency at all, thus keeping it smaller in size.'
       }
-    },
-    {
+    }, {
       element: '#examples_section',
       popover: {
         title: 'Usage Examples',
         description: 'Have a look at the usage examples and see how you can use it.'
       }
-    },
-    {
+    }, {
       element: '#driver-demo-head',
       popover: {
         title: 'Quick Tour Ends',
-        description: 'This was just a sneak peak, have a look at the API section and examples to learn more!',
-      },
-    },
-  ]);
+        description: 'This was just a sneak peak, have a look at the API section and examples to learn more!'
+      }
+    }
+  ];
+
+  const animatedTourDriver = new Driver({
+    animate: true,
+    opacity: 0.8,
+    padding: 5,
+    showButtons: true,
+  });
+
+  const boringTourDriver = new Driver({
+    animate: false,
+    opacity: 0.8,
+    padding: 5,
+    showButtons: true,
+  });
+
+  boringTourDriver.defineSteps(tourSteps);
+  animatedTourDriver.defineSteps(tourSteps);
+
+  document.querySelector('#animated-tour')
+    .addEventListener('click', () => {
+      animatedTourDriver.start();
+    });
 
-  document.querySelector('.btn__example')
+  document.querySelector('#boring-tour')
     .addEventListener('click', () => {
-      tourDriver.start();
+      boringTourDriver.start();
     });
 
 

demo/styles/demo.scss

@@ -9,7 +9,7 @@ img.emoji {
 }
 
 .page-wrap {
-  width: 500px;
+  width: 725px;
   margin: 50px auto;
   background: white;
   padding: 10px 30px;
@@ -28,14 +28,24 @@ img.emoji {
     padding: 0 18px;
     height: 40px;
     line-height: 40px;
-    border-radius: 20px;
+    border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s, color 0.2s;
     font-weight: 500;
-    width: 240px;
+    width: 195px;
     font-size: 17px;
-    margin: auto;
-    display: block;
+    display: inline-block;
+
+    &.btn-right {
+      margin-left: -5px;
+      border-radius: 0 8px 8px 0;
+      filter: grayscale(2);
+      border-left: 1px solid #2e2e30;
+    }
+
+    &.btn-left {
+      border-radius: 8px 0 0 8px;
+    }
   }
 
   a.btn__run-demo {
@@ -70,6 +80,12 @@ section {
       position: relative;
     }
   }
+
+  .tagline {
+    width: 450px;
+    margin: 0 auto 25px;
+    text-align: center;
+  }
 }
 
 .section__examples {

index.html

@@ -15,9 +15,11 @@
 <div class="page-wrap">
   <section class="section__header" id="driver-demo-head">
     <h1><span id="logo_emoji" class="emoji">👨‍🔧️</span> <span id="name_driver">Driver</span></h1>
-    <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the
+    <p class="text-muted tagline">Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the
       page</p>
-    <a href="javascript:void(0)" class="btn btn__example btn__dark">Quick Tour</a>
+
+    <a id="animated-tour" href="javascript:void(0)" class="btn btn__example btn__dark btn-left">With Animation</a>
+    <a id="boring-tour" href="javascript:void(0)" class="btn btn__example btn__dark btn-right">without Animation</a>
   </section>
 
   <blockquote>