Update docs

demo/scripts/demo.js

@@ -1,291 +1,337 @@
 /* eslint-disable */
+document.addEventListener("DOMContentLoaded", function () {
+  const tourDriver = new Driver({
+    animate: true,
+    opacity: 0.8,
+    padding: 5,
+    showButtons: true,
+  });
 
-const tourDriver = new Driver({
-  animate: true,
-  opacity: 0.8,
-  padding: 5,
-  showButtons: false,
-});
-
-tourDriver.defineSteps([
-  {
-    element: '.emoji',
-    popover: {
-      title: 'Adding Introductions',
-      description: 'You can use it to add popovers on top of the website',
-      position: 'bottom',
+  tourDriver.defineSteps([
+    {
+      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!',
+      },
+    },
+    {
+      element: '#logo_emoji',
+      popover: {
+        title: 'Focus Anything',
+        description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
+        position: 'bottom',
+      },
+    },
+    {
+      element: '#name_driver',
+      popover: {
+        title: 'Why Driver?',
+        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',
+      },
+    },
+    {
+      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',
+      }
+    },
+    {
+      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',
+      }
+    },
+    {
+      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',
+      }
+    },
+    {
+      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',
+      }
     },
-  }, {
-    element: '.section__header',
-    popover: {
-      title: 'Adding Introductions',
-      description: 'You can use it to add popovers on top of the website',
-      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'
+      }
     },
-  },
-  {
-    element: '.btn__dark',
-    popover: {
-      title: 'This is Button',
-      description: 'Yeah I know I dont need to tell that but anyways, we need a step in the listing so yeah!'
-    }
-  },
-  {
-    element: '#free-use',
-    popover: {
-      title: 'Free to Use',
-      description: 'Yes, you can use it in your personal or commercial products'
-    }
-  },
-  {
-    element: '.section__how',
-    popover: {
-      title: 'Just Specify the Item',
-      description: 'All you have to do is provide the query selector of element to highlight',
-      position: 'right',
+    {
+      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: '.section__purpose',
-    popover: {
-      title: 'Automatically Position',
-      description: 'It can automatically position too if you dont provide',
+    {
+      element: '#examples_section',
+      popover: {
+        title: 'Usage Examples',
+        description: 'Have a look at the usage examples and see how you can use it.'
+      }
     },
-  },
-  {
-    element: '.section__examples',
-  },
-  {
-    element: '.section__contributing',
-    popover: {
-      title: 'Automatically Position',
-      description: 'It can automatically position too if you dont provide',
+    {
+      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!',
+      },
     },
-  },
-]);
+  ]);
 
-document.querySelector('.btn__example')
-  .addEventListener('click', () => {
-    tourDriver.start();
-  });
+  document.querySelector('.btn__example')
+    .addEventListener('click', () => {
+      tourDriver.start();
+    });
 
 
-document.querySelectorAll('pre code').forEach((element) => {
-  hljs.highlightBlock(element);
-});
+  document.querySelectorAll('pre code').forEach((element) => {
+    hljs.highlightBlock(element);
+  });
 
 
 /////////////////////////////////////////////
 // First example – highlighting without popover
 /////////////////////////////////////////////
-const singleDriverNoPopover = new Driver();
-document.querySelector('#run-single-element-no-popover')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
-    singleDriverNoPopover.highlight('#single-element-no-popover');
-  });
+  const singleDriverNoPopover = new Driver();
+  document.querySelector('#run-single-element-no-popover')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
+      singleDriverNoPopover.highlight('#single-element-no-popover');
+    });
 
 /////////////////////////////////////////////
 // Form focus examples
 /////////////////////////////////////////////
-const focusDriver = new Driver({ padding: 0 });
-const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4'];
-inputIds.forEach(inputId => {
-  // Highlight the section on focus
-  document.getElementById(inputId).addEventListener('focus', () => {
-    focusDriver.highlight(`#${inputId}`);
+  const focusDriver = new Driver({ padding: 0 });
+  const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4'];
+  inputIds.forEach(inputId => {
+    // Highlight the section on focus
+    document.getElementById(inputId).addEventListener('focus', () => {
+      focusDriver.highlight(`#${inputId}`);
+    });
   });
-});
 
 /////////////////////////////////////////////
 // Highlighting single element with popover
 /////////////////////////////////////////////
-const singleDriverWithPopover = new Driver();
-document.querySelector('#run-single-element-with-popover')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
-    singleDriverWithPopover.highlight({
-      element: '#single-element-with-popover',
-      popover: {
-        title: 'Did you know?',
-        description: 'You can add HTML in title or description also!',
-        position: 'top'
-      }
+  const singleDriverWithPopover = new Driver();
+  document.querySelector('#run-single-element-with-popover')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
+      singleDriverWithPopover.highlight({
+        element: '#single-element-with-popover',
+        popover: {
+          title: 'Did you know?',
+          description: 'You can add HTML in title or description also!',
+          position: 'top'
+        }
+      });
     });
-  });
 
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
-const singleDriverWithPopoverPosition = new Driver();
-document.querySelector('#run-single-element-with-popover-position')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
+  const singleDriverWithPopoverPosition = new Driver();
+  document.querySelector('#run-single-element-with-popover-position')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
 
-    singleDriverWithPopoverPosition.highlight({
-      element: '#single-element-with-popover-position',
-      popover: {
-        title: 'Did you know?',
-        description: 'You can add HTML in title or description also!',
-        position: 'left'
-      }
+      singleDriverWithPopoverPosition.highlight({
+        element: '#single-element-with-popover-position',
+        popover: {
+          title: 'Did you know?',
+          description: 'You can add HTML in title or description also!',
+          position: 'left'
+        }
+      });
     });
-  });
 
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
-const positionBtnsDriver = new Driver({
-  padding: 0,
-});
+  const positionBtnsDriver = new Driver({
+    padding: 0,
+  });
 
-document.querySelector('#position-btn-left')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
+  document.querySelector('#position-btn-left')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
 
-    positionBtnsDriver.highlight({
-      element: '#position-btn-left',
-      popover: {
-        title: 'Did you know?',
-        description: 'You can add HTML in title or description also!',
-        position: 'left'
-      }
+      positionBtnsDriver.highlight({
+        element: '#position-btn-left',
+        popover: {
+          title: 'Did you know?',
+          description: 'You can add HTML in title or description also!',
+          position: 'left'
+        }
+      });
     });
-  });
 
-document.querySelector('#position-btn-right')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
+  document.querySelector('#position-btn-right')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
 
-    positionBtnsDriver.highlight({
-      element: '#position-btn-right',
-      popover: {
-        title: 'Did you know?',
-        description: 'You can add HTML in title or description also!',
-        position: 'right'
-      }
+      positionBtnsDriver.highlight({
+        element: '#position-btn-right',
+        popover: {
+          title: 'Did you know?',
+          description: 'You can add HTML in title or description also!',
+          position: 'right'
+        }
+      });
     });
-  });
 
-document.querySelector('#position-btn-bottom')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
+  document.querySelector('#position-btn-bottom')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
 
-    positionBtnsDriver.highlight({
-      element: '#position-btn-bottom',
-      popover: {
-        title: 'Did you know?',
-        description: 'You can add HTML in title or description also!',
-        position: 'bottom'
-      }
+      positionBtnsDriver.highlight({
+        element: '#position-btn-bottom',
+        popover: {
+          title: 'Did you know?',
+          description: 'You can add HTML in title or description also!',
+          position: 'bottom'
+        }
+      });
     });
-  });
 
-document.querySelector('#position-btn-top')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
+  document.querySelector('#position-btn-top')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
 
-    positionBtnsDriver.highlight({
-      element: '#position-btn-top',
-      popover: {
-        title: 'Did you know?',
-        description: 'You can add HTML in title or description also!',
-        position: 'top'
-      }
+      positionBtnsDriver.highlight({
+        element: '#position-btn-top',
+        popover: {
+          title: 'Did you know?',
+          description: 'You can add HTML in title or description also!',
+          position: 'top'
+        }
+      });
     });
-  });
 
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
-const htmlDriver = new Driver();
+  const htmlDriver = new Driver();
 
-document.querySelector('#run-single-element-with-popover-html')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
+  document.querySelector('#run-single-element-with-popover-html')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
 
-    htmlDriver.highlight({
-      element: '#single-element-with-popover-html',
-      popover: {
-        title: '<em>Tags</em> in title or <u>body</u>',
-        description: 'Body can also have <strong>html tags</strong>!',
-        position: 'top'
-      }
+      htmlDriver.highlight({
+        element: '#single-element-with-popover-html',
+        popover: {
+          title: '<em>Tags</em> in title or <u>body</u>',
+          description: 'Body can also have <strong>html tags</strong>!',
+          position: 'top'
+        }
+      });
     });
-  });
 
 /////////////////////////////////////////////////////
 // Without Overlay Example
 /////////////////////////////////////////////////////
-const withoutOverlay = new Driver({
-  opacity: 0,
-  padding: 0
-});
+  const withoutOverlay = new Driver({
+    opacity: 0,
+    padding: 0
+  });
 
-document.querySelector('#run-element-without-popover')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
+  document.querySelector('#run-element-without-popover')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
 
-    withoutOverlay.highlight({
-      element: '#run-element-without-popover',
-      popover: {
-        title: 'Title for the Popover',
-        description: 'Description for it',
-        position: 'left', // can be `top`, `left`, `right`, `bottom`
-      }
-    } );
-  });
+      withoutOverlay.highlight({
+        element: '#run-element-without-popover',
+        popover: {
+          title: 'Title for the Popover',
+          description: 'Description for it',
+          position: 'left', // can be `top`, `left`, `right`, `bottom`
+        }
+      });
+    });
 
 /////////////////////////////////////////////////////
 // Highlighting single element with popover position
 /////////////////////////////////////////////////////
-const featureIntroductionDriver = new Driver();
-featureIntroductionDriver.defineSteps([
-  {
-    element: '#first-element-introduction',
-    popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'bottom'
-    }
-  },
-  {
-    element: '#second-para-feature-introductions',
-    popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'left'
-    }
-  },
-  {
-    element: '#third-para-feature-introductions',
-    popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'right'
-    }
-  },
-  {
-    element: '#run-multi-element-popovers',
-    popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'top'
-    }
-  },
-  {
-    element: '#third-element-introduction',
-    popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'top'
-    }
-  },
-]);
+  const featureIntroductionDriver = new Driver();
+  featureIntroductionDriver.defineSteps([
+    {
+      element: '#first-element-introduction',
+      popover: {
+        title: 'Title on Popover',
+        description: 'Body of the popover',
+        position: 'bottom'
+      }
+    },
+    {
+      element: '#second-para-feature-introductions',
+      popover: {
+        title: 'Title on Popover',
+        description: 'Body of the popover',
+        position: 'left'
+      }
+    },
+    {
+      element: '#third-para-feature-introductions',
+      popover: {
+        title: 'Title on Popover',
+        description: 'Body of the popover',
+        position: 'right'
+      }
+    },
+    {
+      element: '#run-multi-element-popovers',
+      popover: {
+        title: 'Title on Popover',
+        description: 'Body of the popover',
+        position: 'top'
+      }
+    },
+    {
+      element: '#third-element-introduction',
+      popover: {
+        title: 'Title on Popover',
+        description: 'Body of the popover',
+        position: 'top'
+      }
+    },
+  ]);
 
-document.querySelector('#run-multi-element-popovers')
-  .addEventListener('click', (e) => {
-    e.preventDefault();
-    featureIntroductionDriver.start();
-  });
+  document.querySelector('#run-multi-element-popovers')
+    .addEventListener('click', (e) => {
+      e.preventDefault();
+      featureIntroductionDriver.start();
+    });
 
+});

demo/styles/demo.scss

@@ -18,9 +18,11 @@ img.emoji {
 
   a, a:visited, a:focus {
     color: #333333;
+    text-decoration: underline;
   }
 
   a.btn__dark {
+    text-decoration: none;
     color: #FFFFFF;
     background-color: #F44336;
     padding: 0 18px;
@@ -37,6 +39,7 @@ img.emoji {
   }
 
   a.btn__run-demo {
+    text-decoration: none;
     background: #f54336;
     padding: 5px;
     border-radius: 20px;
@@ -90,6 +93,7 @@ section {
 }
 
 .position-btns a {
+  text-decoration: none;
   font-size: 13px;
   padding: 10px 15px;
   background: #f54336;

index.html

@@ -6,13 +6,15 @@
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Driver</title>
+  <meta name=description itemprop=description
+        content="A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page"/>
   <link rel="stylesheet" href="./dist/demo.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css">
 </head>
 <body>
 <div class="page-wrap">
-  <section class="section__header" data-driver="Hey welcome to presenter!">
-    <h1><span class="emoji">👨‍🔧️</span> Driver</h1>
+  <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
       page</p>
     <a href="javascript:void(0)" class="btn btn__example btn__dark">Quick Tour</a>
@@ -29,15 +31,15 @@
     <p>Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature
       introductions, focus shifters, call-to-action are just a few examples.</p>
     <ul>
-      <li>🔆 <strong>Highlight</strong> any (literally any) item on page</li>
-      <li>✋ <strong>Block user interactions</strong></li>
-      <li>📣 Create <strong>feature introductions</strong></li>
-      <li>👓 Add <strong>focus shifters</strong> for users</li>
-      <li>🛠️ Highly customizable – <strong>Use it anywhere</strong> for overlay</li>
-      <li>⌨️ User Friendly – <strong>Controllable by keys</strong></li>
-      <li id="free-use">🆓 <strong>MIT Licensed</strong> – Free for personal and commercial use</li>
-      <li>🕊️ Lightweight – Only <strong>~4kb</strong> when gzipped</li>
-      <li>🌀 <strong>Consistent behavior</strong> across all major browsers</li>
+      <li id="highlight_feature">🔆 <strong>Highlight</strong> any (literally any) item on page</li>
+      <li id="interactions_feature">✋ <strong>Block user interactions</strong></li>
+      <li id="feature_introductions_feature">📣 Create <strong>feature introductions</strong></li>
+      <li id="focus_shifters_feature">👓 Add <strong>focus shifters</strong> for users</li>
+      <li id="customizable_feature">🛠️ Highly customizable – <strong>Use it anywhere</strong> for overlay</li>
+      <li id="keyboard_feature">⌨️ User Friendly – <strong>Controllable by keys</strong></li>
+      <li id="free_use_feature">🆓 <strong>MIT Licensed</strong> – Free for personal and commercial use</li>
+      <li id="lightweight_feature">🕊️ Lightweight – Only <strong>~4kb</strong> when gzipped</li>
+      <li id="major_browsers_feature">🌀 <strong>Consistent behavior</strong> across all major browsers</li>
     </ul>
   </section>
   <hr class="hr__fancy">
@@ -49,9 +51,11 @@
   </section>
   <hr class="hr__fancy">
   <section class="section__examples">
-    <h3>Can you show some Examples?</h3>
-    <p>Below you find some of the examples and sample use-cases on how you can use it. Run by clicking the
-      <code>RUN</code> button.</p>
+    <div id="examples_section">
+      <h3>Can you show some Examples?</h3>
+      <p>Below you find some of the examples and sample use-cases on how you can use it. Run by clicking the
+        <code>RUN</code> button.</p>
+    </div>
     <div id="single-element-no-popover" class="section__example">
       <h4>Highlighting a Single Element – Without Popover</h4>
       <p class="zero-bottom">If all you want is just highlight a single element, you can do that simply by passing the
@@ -204,7 +208,8 @@ driver.start();
 
     <div id="element-without-popover" class="section__example">
       <h4>Without Overlay</h4>
-      <p>You can create feature introductions and do everything listed above without overlays also. All you have to do is just set the opacity to `0`.</p>
+      <p>You can create feature introductions and do everything listed above without overlays also. All you have to do
+        is just set the opacity to `0`.</p>
       <a href="#" class="btn__run-demo" id="run-element-without-popover">Show Demo</a>
       <pre><code class="javascript">const driver = new Driver({
     opacity: 0,
@@ -225,8 +230,10 @@ driver.highlight({
     <hr class="hr__fancy">
 
     <div class="section__example">
-      <h3>..and much much more</h3>
-      <p>Driver comes with many options that you can manipulate to make driver behave as you may like</p>
+      <div id="api_section">
+        <h3>..and much much more</h3>
+        <p>Driver comes with many options that you can manipulate to make driver behave as you may like</p>
+      </div>
       <h4>Driver Definition</h4>
       <p>Here are the options that Driver understands</p>
       <pre><code class="javascript">const driver = new Driver({
@@ -241,7 +248,8 @@ driver.highlight({
     </div>
     <div class="section__example">
       <h4>Step Definition</h4>
-      <p>Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that you pass to <code>highlight</code> method</p>
+      <p>Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that
+        you pass to <code>highlight</code> method</p>
       <pre><code class="javascript">const stepDefinition = {
   element: '#some-item', // Query selector for the item to be highlighted
   popover: {             // There will be no popover if empty or not given
@@ -281,16 +289,22 @@ activeElement.showPopover();  // Show the popover
 activeElement.getNode();  // Gets the DOM Element behind this element
 </code></pre>
     </div>
-    <p class="top-20">You can use a variety of options to achieve whatever you may want. I have some plans on improving it further, make sure to keep an eye on the <a href="https://github.com/kamranahmedse/driver.js" target="_blank">github page</a></p>
+    <p class="top-20">You can use a variety of options to achieve whatever you may want. I have some plans on improving
+      it further, make sure to keep an eye on the <a href="https://github.com/kamranahmedse/driver.js" target="_blank">github
+        page</a></p>
   </section>
   <hr class="hr__fancy">
   <div class="section__example">
     <h4>Contributing</h4>
-    <p>You can find the contribution instructions on the <a href="https://github.com/kamranahmedse/driver.js" target="_blank">github page</a>. Feel free to submit an issue, create a pull request or spread the word</p>
+    <p>You can find the contribution instructions on the <a href="https://github.com/kamranahmedse/driver.js"
+                                                            target="_blank">github page</a>. Feel free to submit an
+      issue, create a pull request or spread the word</p>
   </div>
   <hr class="hr__fancy">
   <div class="section__example">
-    <p>A product by <a href="http://twitter.com/kamranahmedse" target="_blank">Kamran</a> produced out of boredom and frustration in cold Berlin after he gave up on trying to find a perfect solution to integrate journey introduction and overlays.</p>
+    <p>A product by <a href="http://twitter.com/kamranahmedse" target="_blank">Kamran</a> produced out of boredom and
+      frustration in cold Berlin after he gave up on trying to find a perfect solution to integrate journey introduction
+      and overlays.</p>
     <a href="https://twitter.com/kamranahmedse?ref_src=twsrc%5Etfw"
        class="twitter-follow-button mr-3"
        data-show-screen-name="false"

package.json

@@ -7,6 +7,10 @@
     "start": "node server.js",
     "build": "webpack --config webpack.config.prod.js "
   },
+  "bugs": {
+    "url": "https://github.com/kamranahmedse/driver.js/issues"
+  },
+  "homepage": "https://github.com/kamranahmedse/driver.js#readme",
   "repository": "https://github.com/kamranahmedse/driver.js",
   "author": "Kamran Ahmed <[email protected]>",
   "license": "MIT",

src/core/popover.js

@@ -28,8 +28,9 @@ export default class Popover extends Element {
       totalCount: 1,
       currentIndex: 0,
       showButtons: true,
-      doneBtnText: 'Done',
       closeBtnText: 'Close',
+      doneBtnText: 'Done',
+      startBtnText: 'Next →',
       nextBtnText: 'Next →',
       prevBtnText: '← Previous',
     }, options);
@@ -154,6 +155,7 @@ export default class Popover extends Element {
     this.footerNode.style.display = 'block';
     if (this.options.isFirst) {
       this.prevBtnNode.classList.add(CLASS_BTN_DISABLED);
+      this.nextBtnNode.innerHTML = this.options.startBtnText;
     } else {
       this.prevBtnNode.classList.remove(CLASS_BTN_DISABLED);
     }