Add basic highlight functionality

.babelrc

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "corejs": "2",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-object-rest-spread"
-  ]
-}

.editorconfig

@@ -1,8 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,7 @@
+.history
+.husky
+.vscode
+coverage
+dist
+node_modules
+vite.config.ts

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

.eslintrc.json

@@ -1,22 +0,0 @@
-{
-  "extends": "airbnb-base",
-  "env": {
-    "browser": true
-  },
-  "rules": {
-    "no-underscore-dangle": "off",
-    "no-plusplus": "off",
-    "no-cond-assign": "off",
-    "func-names": "off",
-    "no-continue": "off",
-    "no-console": "off",
-    "no-bitwise": "off",
-    "class-methods-use-this": "off",
-    "prefer-destructuring": "off",
-    "no-param-reassign": [
-      "off"
-    ],
-    "max-len": "off",
-    "no-multi-spaces": "off"
-  }
-}

.gitignore

@@ -1,8 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-npm-debug.log
-.DS_Store
+dist
+dist-ssr
+*.local
+coverage
+
+# Editor directories and files
+.vscode/*
+.history/*
+!.vscode/extensions.json
 .idea
-.vscode
-package-lock.json
-yarn-error.log
-dist/demo
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "./**/*.{ts,html,json}": "npm run format:scripts",
+  "./**/*.{css,scss}": "npm run format:styles"
+}

.npmignore

@@ -1,8 +0,0 @@
-.editorconfig
-.idea
-.eslintrc.json
-index.html
-server.js
-demo
-config
-dist/demo

.prettierignore

@@ -0,0 +1,6 @@
+.history
+.husky
+.vscode
+coverage
+dist
+node_modules

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "useTabs": false,
+  "endOfLine": "auto",
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "semi": true
+}

.stylelintignore

@@ -0,0 +1,7 @@
+.history
+.husky
+.vscode
+coverage
+dist
+node_modules
+vite.config.ts

.stylelintrc

@@ -0,0 +1,21 @@
+{
+  "plugins": ["stylelint-prettier"],
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-sass-guidelines",
+    "stylelint-config-prettier"
+  ],
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
+    }
+  ],
+  "rules": {
+    "prettier/prettier": true,
+    "function-parentheses-space-inside": null,
+    "no-descending-specificity": null,
+    "max-nesting-depth": 2,
+    "selector-max-id": 1
+  }
+}

config/webpack.config.demo.js

@@ -1,96 +0,0 @@
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const isProduction = process.env.NODE_ENV === 'production';
-const scriptFileName = 'driver-demo.min.js';
-const styleFileName = 'driver-demo.min.css';
-
-module.exports = {
-  mode: isProduction ? 'production' : 'development',
-  entry: [
-    './demo/styles/demo.scss',
-    './demo/scripts/demo.js',
-    './src/index.js',
-  ].filter(entryPoint => !!entryPoint),
-  output: {
-    path: path.join(__dirname, '/../dist/demo'),
-    publicPath: './',
-    filename: scriptFileName,
-    libraryTarget: 'umd',
-    library: 'Driver',
-    libraryExport: 'default',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        options: {
-          failOnWarning: false,
-          failOnError: true,
-        },
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-      },
-      {
-        test: /.scss$/,
-        loader: ExtractTextPlugin.extract([
-          {
-            loader: 'css-loader',
-            options: { url: false },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              ident: 'postcss',
-              plugins: [require('autoprefixer')()], // eslint-disable-line global-require
-            },
-          },
-          'sass-loader',
-        ]),
-      },
-    ],
-  },
-  plugins: [
-    new ExtractTextPlugin({
-      filename: styleFileName,
-      allChunks: true,
-    }),
-    new OptimizeCssAssetsPlugin({
-      assetNameRegExp: /\.min\.css$/g,
-      // eslint-disable-next-line global-require
-      cssProcessor: require('cssnano'),
-      cssProcessorPluginOptions: {
-        preset: [
-          'default',
-          {
-            discardComments: { removeAll: true },
-          },
-        ],
-      },
-      canPrint: true,
-    }),
-    new CopyWebpackPlugin([
-      {
-        from: './demo/images/',
-        to: 'images',
-      },
-    ]),
-    new HtmlWebpackPlugin({
-      template: 'demo/index.html',
-      favicon: 'demo/images/favicon.png',
-    }),
-  ],
-  stats: {
-    colors: true,
-  },
-  devtool: 'cheap-module-eval-source-map',
-};

config/webpack.config.prod.js

@@ -1,79 +0,0 @@
-const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-
-module.exports = {
-  mode: 'production',
-  entry: [
-    './src/driver.scss',
-    './src/index.js',
-  ],
-  output: {
-    path: path.join(__dirname, '/../dist'),
-    publicPath: '/dist/',
-    filename: 'driver.min.js',
-    libraryTarget: 'umd',
-    library: 'Driver',
-    libraryExport: 'default',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        options: {
-          failOnWarning: false,
-          failOnError: true,
-        },
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-      },
-      {
-        test: /.scss$/,
-        loader: ExtractTextPlugin.extract([
-          {
-            loader: 'css-loader',
-            options: { url: false },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              ident: 'postcss',
-              plugins: [require('autoprefixer')()], // eslint-disable-line global-require
-            },
-          },
-          'sass-loader',
-        ]),
-      },
-    ],
-  },
-  plugins: [
-    new ExtractTextPlugin({
-      filename: 'driver.min.css',
-      allChunks: true,
-    }),
-    new OptimizeCssAssetsPlugin({
-      assetNameRegExp: /\.min\.css$/g,
-      // eslint-disable-next-line global-require
-      cssProcessor: require('cssnano'),
-      cssProcessorPluginOptions: {
-        preset: [
-          'default',
-          {
-            discardComments: { removeAll: true },
-          },
-        ],
-      },
-      canPrint: true,
-    }),
-  ],
-  stats: {
-    colors: true,
-  },
-  devtool: 'cheap-module-source-map',
-};

demo/index.html

@@ -1,412 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport"
-        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="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css">
-</head>
-<body>
-<div class="page-wrap">
-  <section class="section__header" id="driver-demo-head">
-    <h1 class="brand">
-      <img id="logo_img" src="./images/driver.png"/>
-      <span id="name_driver">Driver.js</span>
-    </h1>
-    <p class="text-muted tagline">Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across
-      the
-      page</p>
-
-    <a id="animated-tour" href="javascript:void(0)" class="btn btn__example btn__dark">With Animation</a>
-    <a id="boring-tour" href="javascript:void(0)" class="btn btn__example btn__dark">Without Animation</a>
-
-    <div class="github-button top-30">
-      <!-- Place this tag where you want the button to render. -->
-      <a class="github-button" href="https://github.com/kamranahmedse/driver.js" data-size="large"
-         data-show-count="true" aria-label="Star kamranahmedse/driver.js on GitHub">Star</a>
-    </div>
-
-  </section>
-
-  <blockquote>
-    <p>A lightweight (~4kb gzipped) yet powerful JavaScript engine that helps you drive the user's focus on page.</p>
-    <p class="zero-bottom">Some sample use-cases can be creating powerful feature introductions, call-to-action
-      components, focus shifters etc.</p>
-  </blockquote>
-
-  <section class="section__purpose">
-    <h3>What are the features?</h3>
-    <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 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">
-  <section class="section__how">
-    <h3>How does it do that?</h3>
-    <p>In it simplest, it puts the canvas on top of the whole page and then cuts the part that is over the element to be
-      highlighted and provides you several hooks when highlighting, highlighted or un-highlighting elements making it
-      highly customizable.</p>
-  </section>
-  <hr class="hr__fancy">
-  <section class="section__examples">
-    <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.</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
-        selector</p>
-      <a href="#" class="btn__run-demo" id="run-single-element-no-popover">Show Demo</a>
-      <pre><code class="javascript">const driver = new Driver();
-driver.highlight('#create-post');
-</code></pre>
-    </div>
-
-    <hr class="hr__fancy">
-
-    <div class="section__example">
-      <p>A <strong>real world use-case</strong> for this could be highlighting an element when user is interacting with
-        it</p>
-      <pre><code class="javascript">const focusDriver = new Driver();
-
-// Highlight the section on focus
-document.getElementById('creation-input')
-  .addEventListener('focus', (e) => {
-    focusDriver.focus('#creation-input');
-  });
-</code></pre>
-      <p class="top-20">Focus any of the inputs and see how it moves the highlight from one element to the other</p>
-      <div id="creation-forms">
-        <input type="text" id="creation-input" class="form-control" placeholder="Focus any of the inputs">
-        <input type="text" id="creation-input-2" class="form-control" placeholder="Focus any of the inputs">
-        <input type="text" id="creation-input-3" class="form-control" placeholder="Focus any of the inputs">
-        <input type="text" id="creation-input-4" class="form-control" placeholder="Focus any of the inputs">
-      </div>
-    </div>
-
-    <p>You can also turn off the animation or set the padding around the corner. More on it later.</p>
-
-    <hr class="hr__fancy">
-
-    <div id="single-element-with-popover" class="section__example">
-      <h4>Highlighting a Single Element – With Popover</h4>
-      <p>If you would like to show some details alongside the highlighted element, you can do that easily by specifying
-        title and description</p>
-      <a href="#" class="btn__run-demo" id="run-single-element-with-popover">Show Demo</a>
-      <pre><code class="javascript">const driver = new Driver();
-driver.highlight({
-  element: '#some-element',
-  popover: {
-    title: 'Title for the Popover',
-    description: 'Description for it',
-  }
-});
-</code></pre>
-      <p class="top-20">You can modify the behavior of this popover also by a certain set of options. More on it
-        below.</p>
-    </div>
-
-    <hr class="hr__fancy">
-
-    <div id="single-element-with-popover-position" class="section__example">
-      <h4>Popover Positioning</h4>
-      <p>You can also, change the position of the popover to be either <code>left</code>, <code>left-center</code>, <code>left-bottom</code>, <code>top</code>, <code>top-center</code>, <code>top-right</code>,
-      <code>right</code>, <code>right-center</code>, <code>right-bottom</code> or <code>bottom</code>, <code>bottom-center</code>, <code>bottom-right</code>, <code>mid-center</code>.</p>
-      <a href="#" class="btn__run-demo" id="run-single-element-with-popover-position">Show Demo</a>
-      <pre><code class="javascript">const driver = new Driver();
-driver.highlight({
-  element: '#some-element',
-  popover: {
-    title: 'Title for the Popover',
-    description: 'Description for it',
-    // position can be left, left-center, left-bottom, top,
-    // top-center, top-right, right, right-center, right-bottom,
-    // bottom, bottom-center, bottom-right, mid-center
-    position: 'left',
-  }
-});
-</code></pre>
-    </div>
-    <div class="section__example">
-      <div class="top-90 position-btns" id="position-btns">
-        <a href="#" id="position-btn-left" data-alignment="left">Left, Left Top</a>
-        <a href="#" id="position-btn-left-center" data-alignment="left-center">Left Center</a>
-        <a href="#" id="position-btn-left-bottom" data-alignment="left-bottom">Left Bottom</a>
-
-        <a href="#" id="position-btn-right" data-alignment="right">Right, Right Top</a>
-        <a href="#" id="position-btn-right-center" data-alignment="right-center">Right Center</a>
-        <a href="#" id="position-btn-right-bottom" data-alignment="right-bottom">Right Bottom</a>
-
-        <a href="#" id="position-btn-top" data-alignment="top">Top, Top-left</a>
-        <a href="#" id="position-btn-top-center" data-alignment="top-center">Top Center</a>
-        <a href="#" id="position-btn-top-right" data-alignment="top-right">Top Right</a>
-
-        <a href="#" id="position-btn-bottom" data-alignment="bottom">Bottom, Bottom left</a>
-        <a href="#" id="position-btn-bottom-center" data-alignment="bottom-center">Bottom center</a>
-        <a href="#" id="position-btn-bottom-right" data-alignment="bottom-right">Bottom right</a>
-
-        <a href="#" id="position-btn-mid-center" data-alignment="mid-center">Mid Center</a>
-        <!-- <a href="#" id="position-btn-auto" data-alignment="auto">Auto</a> -->
-      </div>
-      <p class="top-20">If you don't specify the position or specify it to be <code>auto</code>, it will automatically
-        find the suitable position for the popover and show it</p>
-    </div>
-    <hr class="hr__fancy">
-    <div id="single-element-with-popover-html" class="section__example">
-      <h4>HTML in Popovers</h4>
-      <p>You can also specify HTML in the body or the title of the popovers. Here is an example:</p>
-      <a href="#" class="btn__run-demo" id="run-single-element-with-popover-html">Show Demo</a>
-      <pre><code class="javascript">const driver = new Driver();
-driver.highlight({
-  element: '#some-element',
-  popover: {
-    title: '&lt;em&gt;An italicized title&lt;/em&gt;',
-    description: 'Description may also contain &lt;strong&gt;HTML&lt;/strong&gt;'
-  }
-});
-</code></pre>
-    </div>
-
-    <p class="top-20">And of course it can be any valid HTML.</p>
-
-    <hr class="hr__fancy">
-    <div id="single-element-no-close" class="section__example">
-      <h4>Disable Close on Outside Click</h4>
-      <p>By default, driver.js gets reset if user clicks outside the highlighted element, you can disable this:</p>
-      <a href="#" class="btn__run-demo" id="run-single-element-no-close">Show Demo</a>
-      <pre><code class="javascript">const driver = new Driver({
-    allowClose: false,
-});
-
-driver.highlight({
-  element: '#some-element',
-  popover: {
-    title: '&lt;em&gt;An italicized title&lt;/em&gt;',
-    description: 'Description may also contain &lt;strong&gt;HTML&lt;/strong&gt;'
-  }
-});
-</code></pre>
-      <p class="top-20">
-        If you use this option, for multi-step driver, it would close after you are done with the popover or you can close it programmatically. For single element popover, you need to close it properly, otherwise it won't be closed
-      </p>
-      <pre><code class="javascript">driver.reset()</code>
-    </div>
-
-    <hr class="hr__fancy">
-    <div id="third-element-introduction" class="section__example">
-      <h4 id="first-element-introduction">Creating Feature Introductions</h4>
-      <p id="second-para-feature-introductions">You can also make powerful feature introductions to guide the users
-        about the features. Just provide an array of steps where each step specifies an element to highlight.</p>
-      <p id="third-para-feature-introductions">Below is just a quick example showing you how to combine the steps in
-        introduction.</p>
-      <a href="#" class="btn__run-demo" id="run-multi-element-popovers">Show Demo</a>
-    </div>
-    <pre><code class="javascript">const driver = new Driver();
-// Define the steps for introduction
-driver.defineSteps([
-  {
-    element: '#first-element-introduction',
-    popover: {
-      className: 'first-step-popover-class',
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'left'
-    }
-  },
-  {
-    element: '#second-element-introduction',
-    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: 'right'
-    }
-  },
-]);
-// Start the introduction
-driver.start();
-</code></pre>
-    <p class="top-20">This is just a quick example for the feature introduction. For a richer one, please have a look at
-      the
-      <a href="#" class="btn__example">"Quick Tour"</a></p>
-
-    <p>You may also turn off the footer buttons in popover, in which case user can control the popover using the arrows
-      keys on keyboard. Or you may control it using the methods provided by Driver.</p>
-
-    <hr class="hr__fancy">
-
-    <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>
-      <a href="#" class="btn__run-demo" id="run-element-without-popover">Show Demo</a>
-      <pre><code class="javascript">const driver = new Driver({
-    opacity: 0,
-});
-
-driver.highlight({
-  element: '#run-element-without-popover',
-  popover: {
-    title: 'Title for the Popover',
-    description: 'Description for it',
-    position: 'top', // can be `top`, `left`, `right`, `bottom`
-  }
-});
-</code></pre>
-      <p class="top-20">..and you can do the same for the feature introductions</p>
-    </div>
-
-    <hr class="hr__fancy">
-
-    <div class="section__example">
-      <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({
-  className: 'scoped-class', // className to wrap driver.js popover
-  animate: true,  // Animate while changing highlighted element
-  opacity: 0.75,  // Background opacity (0 means only popovers and without overlay)
-  padding: 10,    // Distance of element from around the edges
-  allowClose: true, // Whether clicking on overlay should close or not
-  overlayClickNext: false, // Should it move to next step on overlay click
-  doneBtnText: 'Done', // Text on the final button
-  closeBtnText: 'Close', // Text on the close button for this step
-  nextBtnText: 'Next', // Next button text for this step
-  prevBtnText: 'Previous', // Previous button text for this step
-  showButtons: false, // Do not show control buttons in footer
-  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
-  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
-  onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
-  onHighlighted: (Element) {}, // Called when element is fully highlighted
-  onDeselected: (Element) {}, // Called when element has been deselected
-  onReset: (Element) {},        // Called when overlay is about to be cleared
-  onNext: (Element) => {},      // Called when moving to next step on any step
-  onPrevious: (Element) => {},  // Called when moving to next step on any step
-});
-</code></pre>
-    </div>
-    <p class="top-20">Note that all the button options that you provide in the driver definition can be overridden for a
-      specific step by giving them in the step definition</p>
-    <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>
-      <pre><code class="javascript">const stepDefinition = {
-  element: '#some-item',        // Query selector string or Node to be highlighted
-  popover: {                    // There will be no popover if empty or not given
-    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
-    title: 'Title',             // Title on the popover
-    description: 'Description', // Body of the popover
-    showButtons: false,         // Do not show control buttons in footer
-    closeBtnText: 'Close',      // Text on the close button for this step
-    nextBtnText: 'Next',        // Next button text for this step
-    prevBtnText: 'Previous',    // Previous button text for this step
-  }
-};
-</code></pre>
-    </div>
-    <div class="section__example">
-      <h4>API Methods</h4>
-      <p>Below are the set of methods that are available to you</p>
-      <pre><code class="javascript">const driver = new Driver(driverOptions);
-
-const isActivated = driver.isActivated; // Checks if the driver is active or not
-driver.moveNext();     // Moves to next step in the steps list
-driver.movePrevious(); // Moves to previous step in the steps list
-driver.start(stepNumber = 0);  // Starts driving through the defined steps
-driver.highlight(string|stepDefinition); // highlights the element using query selector or the step definition
-driver.reset(); // Resets the overlay and clears the screen
-driver.hasHighlightedElement(); // Checks if there is any highlighted element
-driver.hasNextStep(); // Checks if there is next step to move to
-driver.hasPreviousStep(); // Checks if there is previous step to move to
-
-// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
-// perform some asynchronous task and manually move to next step
-driver.preventMove();
-
-// Gets the currently highlighted element on screen
-const activeElement = driver.getHighlightedElement();
-const lastActiveElement = driver.getLastHighlightedElement();
-activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
-activeElement.hidePopover();  // Hide the popover
-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>
-  </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>
-  </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 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"
-       data-size="large"
-       target="_blank"
-       data-show-count="true">Follow @kamranahmedse</a>
-
-    <a class="github-button" href="https://github.com/kamranahmedse"
-       data-size="large"
-       target="_blank"
-       data-show-count="true"
-       aria-label="Follow @kamranahmedse on GitHub">Follow</a>
-  </div>
-</div>
-
-<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
-<script async defer src="//buttons.github.io/buttons.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-
-<script>
-  (function (i, s, o, g, r, a, m) {
-    i['GoogleAnalyticsObject'] = r;
-    i[r] = i[r] || function () {
-      (i[r].q = i[r].q || []).push(arguments);
-    }, i[r].l = 1 * new Date();
-    a = s.createElement(o),
-      m = s.getElementsByTagName(o)[0];
-    a.async = 1;
-    a.src = g;
-    m.parentNode.insertBefore(a, m);
-  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-  ga('create', 'UA-58155965-1', 'auto');
-  ga('send', 'pageview');
-</script>
-</body>
-</html>

demo/scripts/demo.js

@@ -1,359 +0,0 @@
-/* eslint-disable */
-import Driver from '../../src';
-
-document.addEventListener('DOMContentLoaded', function () {
-  const tourSteps = [
-    {
-      element: document.getElementById('driver-demo-head'),
-      popover: {
-        className: 'scoped-driver-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_img',
-      popover: {
-        title: 'Focus Anything',
-        description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
-      },
-    }, {
-      element: '#name_driver',
-      popover: {
-        title: 'Why Driver?',
-        description: 'Because it lets you drive the user across the page',
-      }
-    }, {
-      element: '#driver-demo-head',
-      popover: {
-        title: 'Let\'s 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: '#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: '#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!'
-      }
-    }
-  ];
-
-  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,
-    className: 'boring-scope',
-  });
-
-  boringTourDriver.defineSteps(tourSteps);
-  animatedTourDriver.defineSteps(tourSteps);
-
-  document.querySelector('#animated-tour')
-    .addEventListener('click', () => {
-      if (boringTourDriver.isActivated) {
-        boringTourDriver.reset(true);
-      }
-
-      animatedTourDriver.start();
-    });
-
-  document.querySelector('#boring-tour')
-    .addEventListener('click', () => {
-      if (animatedTourDriver.isActivated) {
-        animatedTourDriver.reset(true);
-      }
-
-      boringTourDriver.start();
-    });
-
-
-  try {
-    document.querySelectorAll('pre code')
-      .forEach((element) => {
-        hljs.highlightBlock(element);
-      });
-  } catch (e) {
-    // Silently ignore the highlight errors
-  }
-
-
-/////////////////////////////////////////////
-// 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');
-    });
-
-/////////////////////////////////////////////
-// 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}`);
-      });
-  });
-
-/////////////////////////////////////////////
-// 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',
-        showButtons: false,
-        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();
-
-      singleDriverWithPopoverPosition.highlight({
-        element: '#single-element-with-popover-position',
-        showButtons: false,
-        popover: {
-          title: 'Did you know?',
-          description: 'You can add HTML in title or description also!',
-          position: 'top'
-        }
-      });
-    });
-
-/////////////////////////////////////////////////////
-// Highlighting single element with popover position
-/////////////////////////////////////////////////////
-  const positionBtnsDriver = new Driver({
-    padding: 0,
-  });
-
-  document.querySelector('#position-btns')
-    .addEventListener('click', (e) => {
-      e.preventDefault();
-
-      let id = e.target.id;
-      let alignment = e.target.dataset.alignment;
-
-      if (!alignment) return;
-
-      positionBtnsDriver.highlight({
-        element: `#${id}`,
-        showButtons: false,
-        popover: {
-          title: 'Did you know?',
-          description: 'You can add HTML in title or description also!',
-          position: alignment
-        }
-      });
-    })
-
-/////////////////////////////////////////////////////
-// Highlighting single element with popover position
-/////////////////////////////////////////////////////
-  const htmlDriver = new Driver();
-
-  document.querySelector('#run-single-element-with-popover-html')
-    .addEventListener('click', (e) => {
-      e.preventDefault();
-
-      htmlDriver.highlight({
-        element: '#single-element-with-popover-html',
-        showButtons: false,
-        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
-  });
-
-  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: 'top', // can be `top`, `left`, `right`, `bottom`
-        }
-      });
-    });
-
-/////////////////////////////////////////////
-// Single no close demo
-/////////////////////////////////////////////
-  const singleNoClose = new Driver({
-    allowClose: false,
-    position: 'top'
-  });
-
-  singleNoClose.defineSteps([{
-    element: '#single-element-no-close',
-    popover: {
-      title: 'Uh-huh!',
-      description: 'You cannot close by clicking outside'
-    }
-  }, {
-    element: '#third-element-introduction',
-    popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'top'
-    }
-  }]);
-
-  document.querySelector('#run-single-element-no-close')
-    .addEventListener('click', function (e) {
-      e.preventDefault();
-      singleNoClose.start();
-    });
-
-/////////////////////////////////////////////////////
-// Highlighting single element with popover position
-/////////////////////////////////////////////////////
-  const featureIntroductionDriver = new Driver();
-  featureIntroductionDriver.defineSteps([
-    {
-      element: '#first-element-introduction',
-      popover: {
-        className: 'first-step-popover-class',
-        title: 'Title on Popover',
-        description: 'Body of the popover',
-        position: 'top'
-      }
-    },
-    {
-      element: '#second-para-feature-introductions',
-      popover: {
-        title: 'Title on Popover',
-        description: 'Body of the popover',
-        position: 'bottom'
-      }
-    },
-    {
-      element: '#third-para-feature-introductions',
-      popover: {
-        title: 'Title on Popover',
-        description: 'Body of the popover',
-        position: 'top'
-      }
-    },
-    {
-      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();
-      e.stopPropagation();
-      featureIntroductionDriver.start();
-    });
-
-  const newURL = location.href.split('?')[0];
-  if (newURL !== location.href) {
-    window.location = newURL;
-    window.location.href = newURL;
-  }
-});

demo/styles/base.scss

@@ -1,154 +0,0 @@
-$global-guttering: 24px;
-$global-font-size-h1: 32px;
-$global-font-size-h2: 24px;
-$global-font-size-h3: 20px;
-$global-font-size-h4: 18px;
-$global-font-size-h5: 16px;
-$global-font-size-h6: 14px;
-$heading-font-weight: 700;
-
-/*=============================================
-=            Generic styling                  =
-=============================================*/
-
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin: 0;
-  padding: 0;
-}
-
-*, *:before, *:after {
-  box-sizing: border-box
-}
-
-html, body {
-  position: relative;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-}
-
-body {
-  padding-top: 1px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 16px;
-  line-height: 1.4;
-  color: white;
-  background-color: #2E2E30;
-  overflow-x: hidden;
-}
-
-label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 20px;
-  line-height: 1.5;
-}
-
-hr, .hr {
-  display: block;
-  margin: $global-guttering*1.25 0;
-  border: 0;
-  border-bottom: 1px solid #eaeaea;
-  height: 1px;
-
-  &.hr__fancy {
-    background: url("./images/separator.png") repeat-y;
-    height: 5px;
-    background-size: cover;
-  }
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: $global-guttering/2;
-  font-weight: $heading-font-weight;
-  line-height: 1.2;
-}
-
-a, a:visited, a:focus {
-  color: #FFFFFF;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.form-control {
-  display: block;
-  width: 100%;
-  background-color: #f9f9f9;
-  padding: 12px;
-  border: 1px solid #ddd;
-  border-radius: 2.5px;
-  font-size: 14px;
-  -webkit-appearance: none;
-  appearance: none;
-  outline: none;
-  margin-bottom: $global-guttering;
-}
-
-h1, .h1 {
-  font-size: $global-font-size-h1;
-}
-
-h2, .h2 {
-  font-size: $global-font-size-h2;
-}
-
-h3, .h3 {
-  font-size: $global-font-size-h3;
-}
-
-h4, .h4 {
-  font-size: $global-font-size-h4;
-}
-
-h5, .h5 {
-  font-size: $global-font-size-h5;
-}
-
-h6, .h6 {
-  font-size: $global-font-size-h6;
-}
-
-ul li, ol li {
-  list-style-type: none;
-  line-height: 1.5;
-  margin-bottom: 3px;
-}
-
-blockquote {
-  background: #f5f3f1;
-  padding: 10px;
-  margin-bottom: 35px;
-  border-radius: 10px;
-}
-
-.top-20 {
-  margin-top: 20px;
-}
-
-.top-30 {
-  margin-top: 30px;
-}
-
-.zero-bottom {
-  margin-bottom: 0;
-}
-
-.zero-top {
-  margin-top: 0;
-}
-
-.text-center {
-  text-align: center;
-}
-
-/*=====  End of Section comment block  ======*/

demo/styles/demo.scss

@@ -1,129 +0,0 @@
-@import "./base";
-@import "../../src/driver";
-
-img.emoji {
-  height: 1em;
-  width: 1em;
-  margin: 0 .05em 0 .1em;
-  vertical-align: -0.1em;
-}
-
-.brand {
-  position: relative;
-
-  img {
-    height: 67px;
-    position: relative;
-    top: 10px;
-  }
-}
-
-.page-wrap {
-  max-width: 550px;
-  margin: 50px auto;
-  background: white;
-  padding: 10px 30px;
-  border-radius: 5px;
-  color: #1f1f1f;
-
-  a, a:visited, a:focus {
-    color: #1f1f1f;
-    text-decoration: underline;
-  }
-
-  a.btn__dark {
-    text-decoration: none;
-    color: #FFFFFF;
-    background-color: #F44336;
-    padding: 0 18px;
-    height: 40px;
-    line-height: 40px;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background-color 0.2s, color 0.2s;
-    font-weight: 500;
-    width: 195px;
-    font-size: 17px;
-    display: inline-block;
-    margin-top: 2px;
-  }
-
-  a.btn__run-demo {
-    text-decoration: none;
-    background: #f54336;
-    padding: 5px;
-    border-radius: 20px;
-    color: white;
-    display: block;
-    margin: 15px 0 10px;
-    text-align: center;
-  }
-}
-
-section {
-  margin-bottom: $global-guttering*1.25;
-}
-
-.section__header {
-  margin: 10px 0 20px;
-  text-align: center;
-  display: block;
-  padding: 10px;
-
-  h1 {
-    font-size: 55px;
-
-    .emoji {
-      font-size: 45px;
-      top: -4px;
-      margin-right: 3px;
-      position: relative;
-    }
-  }
-
-  .tagline {
-    max-width: 450px;
-    margin: 0 auto 25px;
-    text-align: center;
-  }
-}
-
-.section__examples {
-  .section__example {
-    margin-bottom: 20px;
-  }
-
-  #creation-input {
-    margin-top: 20px;
-  }
-
-  input {
-    padding: 10px;
-    background-color: #fafbfc;
-    border: 3px solid #e1e4e8;
-    border-radius: 3px;
-    box-shadow: inset 0 0 10px rgba(27, 31, 35, 0.05);
-    margin-bottom: 0;
-    margin-top: 7px;
-  }
-}
-
-.position-btns {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  grid-gap: 8px;
-  text-align: center;
-
-  #position-btn-mid-center{
-    grid-column: 2/ span 1;
-  }
-}
-
-.position-btns a {
-  text-decoration: none;
-  font-size: 13px;
-  padding: 10px 15px;
-  background: #f54336;
-  color: white !important;
-  border-radius: 6px;
-}

dist/driver.min.css

@@ -1 +0,0 @@
-div#driver-popover-item{display:none;position:absolute;background:#fff;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1000000000}div#driver-popover-item .driver-popover-tip{border:5px solid #fff;content:"";position:absolute}div#driver-popover-item .driver-popover-tip.bottom{bottom:-10px;border-color:#fff transparent transparent}div#driver-popover-item .driver-popover-tip.bottom.position-center{left:49%}div#driver-popover-item .driver-popover-tip.bottom.position-right{right:20px}div#driver-popover-item .driver-popover-tip.left{left:-10px;top:10px;border-color:transparent #fff transparent transparent}div#driver-popover-item .driver-popover-tip.left.position-center{top:46%}div#driver-popover-item .driver-popover-tip.left.position-bottom{top:auto;bottom:20px}div#driver-popover-item .driver-popover-tip.right{right:-10px;top:10px;border-color:transparent transparent transparent #fff}div#driver-popover-item .driver-popover-tip.right.position-center{top:46%}div#driver-popover-item .driver-popover-tip.right.position-bottom{top:auto;bottom:20px}div#driver-popover-item .driver-popover-tip.top{top:-10px;border-color:transparent transparent #fff}div#driver-popover-item .driver-popover-tip.top.position-center{left:49%}div#driver-popover-item .driver-popover-tip.top.position-right{right:20px}div#driver-popover-item .driver-popover-tip.mid-center{display:none}div#driver-popover-item .driver-popover-footer{display:block;margin-top:10px}div#driver-popover-item .driver-popover-footer button{display:inline-block;padding:3px 10px;border:1px solid #d4d4d4;text-decoration:none;text-shadow:1px 1px 0 #fff;color:#2d2d2d;font:11px/normal sans-serif;cursor:pointer;outline:0;background-color:#f1f1f1;border-radius:2px;zoom:1;line-height:1.3}div#driver-popover-item .driver-popover-footer button.driver-disabled{color:grey;cursor:default;pointer-events:none}div#driver-popover-item .driver-popover-footer .driver-close-btn{float:left}div#driver-popover-item .driver-popover-footer .driver-btn-group,div#driver-popover-item .driver-popover-footer .driver-close-only-btn{float:right}div#driver-popover-item .driver-popover-title{font:19px/normal sans-serif;margin:0 0 5px;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1}div#driver-popover-item .driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;color:#2d2d2d;font-weight:400;zoom:1}.driver-clearfix:after,.driver-clearfix:before{content:"";display:table}.driver-clearfix:after{clear:both}.driver-stage-no-animation{transition:none!important;background:transparent!important;outline:5000px solid rgba(0,0,0,.75)}div#driver-page-overlay{background:#000;position:fixed;top:0;left:0;bottom:0;right:0;display:block;width:100%;height:100%;zoom:1;filter:alpha(opacity=75);opacity:.75;z-index:100002!important;transition:all .3s}div#driver-highlighted-element-stage{position:absolute;top:0;left:0;height:50px;width:300px;background:#fff;z-index:100003!important;display:none;border-radius:2px;transition:all .3s}.driver-highlighted-element{z-index:100004!important}.driver-position-relative{position:relative!important}.driver-fix-stacking{z-index:auto!important;opacity:1!important;transform:none!important;-webkit-filter:none!important;filter:none!important;perspective:none!important;transform-style:flat!important;transform-box:border-box!important;will-change:unset!important}

dist/driver.min.js

@@ -1,2 +0,0 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Driver=e():t.Driver=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/dist/",n(n.s=57)}([function(t,e,n){var o=n(2),i=n(11),r=n(4),s=n(13),a=n(22),c=function(t,e,n){var u,l,h,f,p=t&c.F,d=t&c.G,v=t&c.S,y=t&c.P,g=t&c.B,m=d?o:v?o[e]||(o[e]={}):(o[e]||{}).prototype,b=d?i:i[e]||(i[e]={}),w=b.prototype||(b.prototype={});for(u in d&&(n=e),n)h=((l=!p&&m&&void 0!==m[u])?m:n)[u],f=g&&l?a(h,o):y&&"function"==typeof h?a(Function.call,h):h,m&&s(m,u,h,t&c.U),b[u]!=h&&r(b,u,f),y&&w[u]!=h&&(w[u]=h)};o.core=i,c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},function(t,e,n){var o=n(17)("wks"),i=n(14),r=n(2).Symbol,s="function"==typeof r;(t.exports=function(t){return o[t]||(o[t]=s&&r[t]||(s?r:i)("Symbol."+t))}).store=o},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){var o=n(5),i=n(16);t.exports=n(6)?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var o=n(12),i=n(35),r=n(21),s=Object.defineProperty;e.f=n(6)?Object.defineProperty:function(t,e,n){if(o(t),e=r(e,!0),o(n),i)try{return s(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){t.exports=!n(7)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var o=n(39),i=n(24);t.exports=function(t){return o(i(t))}},function(t,e,n){var o=n(0);o(o.S+o.F*!n(6),"Object",{defineProperty:n(5).f})},function(t,e){var n=t.exports={version:"2.6.9"};"number"==typeof __e&&(__e=n)},function(t,e,n){var o=n(3);t.exports=function(t){if(!o(t))throw TypeError(t+" is not an object!");return t}},function(t,e,n){var o=n(2),i=n(4),r=n(8),s=n(14)("src"),a=n(59),c=(""+a).split("toString");n(11).inspectSource=function(t){return a.call(t)},(t.exports=function(t,e,n,a){var u="function"==typeof n;u&&(r(n,"name")||i(n,"name",e)),t[e]!==n&&(u&&(r(n,s)||i(n,s,t[e]?""+t[e]:c.join(String(e)))),t===o?t[e]=n:a?t[e]?t[e]=n:i(t,e,n):(delete t[e],i(t,e,n)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[s]||a.call(this)})},function(t,e){var n=0,o=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+o).toString(36))}},function(t,e,n){var o=n(45),i=n(28);t.exports=Object.keys||function(t){return o(t,i)}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var o=n(11),i=n(2),r=i["__core-js_shared__"]||(i["__core-js_shared__"]={});(t.exports=function(t,e){return r[t]||(r[t]=void 0!==e?e:{})})("versions",[]).push({version:o.version,mode:n(18)?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=!1},function(t,e,n){var o=n(24);t.exports=function(t){return Object(o(t))}},function(t,e,n){"use strict";var o=n(2),i=n(8),r=n(6),s=n(0),a=n(13),c=n(62).KEY,u=n(7),l=n(17),h=n(26),f=n(14),p=n(1),d=n(43),v=n(44),y=n(63),g=n(42),m=n(12),b=n(3),w=n(19),x=n(9),S=n(21),O=n(16),k=n(30),P=n(67),E=n(49),N=n(47),j=n(5),L=n(15),T=E.f,C=j.f,_=P.f,M=o.Symbol,H=o.JSON,B=H&&H.stringify,F=p("_hidden"),I=p("toPrimitive"),R={}.propertyIsEnumerable,A=l("symbol-registry"),z=l("symbols"),D=l("op-symbols"),V=Object.prototype,W="function"==typeof M&&!!N.f,q=o.QObject,G=!q||!q.prototype||!q.prototype.findChild,K=r&&u(function(){return 7!=k(C({},"a",{get:function(){return C(this,"a",{value:7}).a}})).a})?function(t,e,n){var o=T(V,e);o&&delete V[e],C(t,e,n),o&&t!==V&&C(V,e,o)}:C,U=function(t){var e=z[t]=k(M.prototype);return e._k=t,e},Y=W&&"symbol"==typeof M.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof M},J=function(t,e,n){return t===V&&J(D,e,n),m(t),e=S(e,!0),m(n),i(z,e)?(n.enumerable?(i(t,F)&&t[F][e]&&(t[F][e]=!1),n=k(n,{enumerable:O(0,!1)})):(i(t,F)||C(t,F,O(1,{})),t[F][e]=!0),K(t,e,n)):C(t,e,n)},X=function(t,e){m(t);for(var n,o=y(e=x(e)),i=0,r=o.length;r>i;)J(t,n=o[i++],e[n]);return t},Q=function(t){var e=R.call(this,t=S(t,!0));return!(this===V&&i(z,t)&&!i(D,t))&&(!(e||!i(this,t)||!i(z,t)||i(this,F)&&this[F][t])||e)},$=function(t,e){if(t=x(t),e=S(e,!0),t!==V||!i(z,e)||i(D,e)){var n=T(t,e);return!n||!i(z,e)||i(t,F)&&t[F][e]||(n.enumerable=!0),n}},Z=function(t){for(var e,n=_(x(t)),o=[],r=0;n.length>r;)i(z,e=n[r++])||e==F||e==c||o.push(e);return o},tt=function(t){for(var e,n=t===V,o=_(n?D:x(t)),r=[],s=0;o.length>s;)!i(z,e=o[s++])||n&&!i(V,e)||r.push(z[e]);return r};W||(a((M=function(){if(this instanceof M)throw TypeError("Symbol is not a constructor!");var t=f(arguments.length>0?arguments[0]:void 0),e=function(n){this===V&&e.call(D,n),i(this,F)&&i(this[F],t)&&(this[F][t]=!1),K(this,t,O(1,n))};return r&&G&&K(V,t,{configurable:!0,set:e}),U(t)}).prototype,"toString",function(){return this._k}),E.f=$,j.f=J,n(48).f=P.f=Z,n(29).f=Q,N.f=tt,r&&!n(18)&&a(V,"propertyIsEnumerable",Q,!0),d.f=function(t){return U(p(t))}),s(s.G+s.W+s.F*!W,{Symbol:M});for(var et="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),nt=0;et.length>nt;)p(et[nt++]);for(var ot=L(p.store),it=0;ot.length>it;)v(ot[it++]);s(s.S+s.F*!W,"Symbol",{for:function(t){return i(A,t+="")?A[t]:A[t]=M(t)},keyFor:function(t){if(!Y(t))throw TypeError(t+" is not a symbol!");for(var e in A)if(A[e]===t)return e},useSetter:function(){G=!0},useSimple:function(){G=!1}}),s(s.S+s.F*!W,"Object",{create:function(t,e){return void 0===e?k(t):X(k(t),e)},defineProperty:J,defineProperties:X,getOwnPropertyDescriptor:$,getOwnPropertyNames:Z,getOwnPropertySymbols:tt});var rt=u(function(){N.f(1)});s(s.S+s.F*rt,"Object",{getOwnPropertySymbols:function(t){return N.f(w(t))}}),H&&s(s.S+s.F*(!W||u(function(){var t=M();return"[null]"!=B([t])||"{}"!=B({a:t})||"{}"!=B(Object(t))})),"JSON",{stringify:function(t){for(var e,n,o=[t],i=1;arguments.length>i;)o.push(arguments[i++]);if(n=e=o[1],(b(e)||void 0!==t)&&!Y(t))return g(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!Y(e))return e}),o[1]=e,B.apply(H,o)}}),M.prototype[I]||n(4)(M.prototype,I,M.prototype.valueOf),h(M,"Symbol"),h(Math,"Math",!0),h(o.JSON,"JSON",!0)},function(t,e,n){var o=n(3);t.exports=function(t,e){if(!o(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!o(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var o=n(37);t.exports=function(t,e,n){if(o(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,o){return t.call(e,n,o)};case 3:return function(n,o,i){return t.call(e,n,o,i)}}return function(){return t.apply(e,arguments)}}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on  "+t);return t}},function(t,e,n){"use strict";var o=n(7);t.exports=function(t,e){return!!t&&o(function(){e?t.call(null,function(){},1):t.call(null)})}},function(t,e,n){var o=n(5).f,i=n(8),r=n(1)("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,r)&&o(t,r,{configurable:!0,value:e})}},function(t,e,n){var o=n(17)("keys"),i=n(14);t.exports=function(t){return o[t]||(o[t]=i(t))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var o=n(12),i=n(65),r=n(28),s=n(27)("IE_PROTO"),a=function(){},c=function(){var t,e=n(36)("iframe"),o=r.length;for(e.style.display="none",n(66).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),c=t.F;o--;)delete c.prototype[r[o]];return c()};t.exports=Object.create||function(t,e){var n;return null!==t?(a.prototype=o(t),n=new a,a.prototype=null,n[s]=t):n=c(),void 0===e?n:i(n,e)}},function(t,e,n){"use strict";var o=n(68),i=n(69),r=n(32),s=n(9);t.exports=n(70)(Array,"Array",function(t,e){this._t=s(t),this._i=0,this._k=e},function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,i(1)):i(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])},"values"),r.Arguments=r.Array,o("keys"),o("values"),o("entries")},function(t,e){t.exports={}},function(t,e,n){n(44)("asyncIterator")},function(t,e,n){"use strict";var o=n(0),i=n(38)(0),r=n(25)([].forEach,!0);o(o.P+o.F*!r,"Array",{forEach:function(t){return i(this,t,arguments[1])}})},function(t,e,n){t.exports=!n(6)&&!n(7)(function(){return 7!=Object.defineProperty(n(36)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){var o=n(3),i=n(2).document,r=o(i)&&o(i.createElement);t.exports=function(t){return r?i.createElement(t):{}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){var o=n(22),i=n(39),r=n(19),s=n(40),a=n(60);t.exports=function(t,e){var n=1==t,c=2==t,u=3==t,l=4==t,h=6==t,f=5==t||h,p=e||a;return function(e,a,d){for(var v,y,g=r(e),m=i(g),b=o(a,d,3),w=s(m.length),x=0,S=n?p(e,w):c?p(e,0):void 0;w>x;x++)if((f||x in m)&&(y=b(v=m[x],x,g),t))if(n)S[x]=y;else if(y)switch(t){case 3:return!0;case 5:return v;case 6:return x;case 2:S.push(v)}else if(l)return!1;return h?-1:u||l?l:S}}},function(t,e,n){var o=n(23);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==o(t)?t.split(""):Object(t)}},function(t,e,n){var o=n(41),i=Math.min;t.exports=function(t){return t>0?i(o(t),9007199254740991):0}},function(t,e){var n=Math.ceil,o=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?o:n)(t)}},function(t,e,n){var o=n(23);t.exports=Array.isArray||function(t){return"Array"==o(t)}},function(t,e,n){e.f=n(1)},function(t,e,n){var o=n(2),i=n(11),r=n(18),s=n(43),a=n(5).f;t.exports=function(t){var e=i.Symbol||(i.Symbol=r?{}:o.Symbol||{});"_"==t.charAt(0)||t in e||a(e,t,{value:s.f(t)})}},function(t,e,n){var o=n(8),i=n(9),r=n(46)(!1),s=n(27)("IE_PROTO");t.exports=function(t,e){var n,a=i(t),c=0,u=[];for(n in a)n!=s&&o(a,n)&&u.push(n);for(;e.length>c;)o(a,n=e[c++])&&(~r(u,n)||u.push(n));return u}},function(t,e,n){var o=n(9),i=n(40),r=n(64);t.exports=function(t){return function(e,n,s){var a,c=o(e),u=i(c.length),l=r(s,u);if(t&&n!=n){for(;u>l;)if((a=c[l++])!=a)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var o=n(45),i=n(28).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return o(t,i)}},function(t,e,n){var o=n(29),i=n(16),r=n(9),s=n(21),a=n(8),c=n(35),u=Object.getOwnPropertyDescriptor;e.f=n(6)?u:function(t,e){if(t=r(t),e=s(e,!0),c)try{return u(t,e)}catch(t){}if(a(t,e))return i(!o.f.call(t,e),t[e])}},function(t,e,n){for(var o=n(31),i=n(15),r=n(13),s=n(2),a=n(4),c=n(32),u=n(1),l=u("iterator"),h=u("toStringTag"),f=c.Array,p={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},d=i(p),v=0;v<d.length;v++){var y,g=d[v],m=p[g],b=s[g],w=b&&b.prototype;if(w&&(w[l]||a(w,l,f),w[h]||a(w,h,g),c[g]=f,m))for(y in o)w[y]||r(w,y,o[y],!0)}},function(t,e,n){"use strict";var o=n(73),i={};i[n(1)("toStringTag")]="z",i+""!="[object z]"&&n(13)(Object.prototype,"toString",function(){return"[object "+o(this)+"]"},!0)},function(t,e,n){var o=n(19),i=n(15);n(74)("keys",function(){return function(t){return i(o(t))}})},function(t,e,n){"use strict";var o=n(0),i=n(38)(2);o(o.P+o.F*!n(25)([].filter,!0),"Array",{filter:function(t){return i(this,t,arguments[1])}})},function(t,e,n){var o=n(0);o(o.P,"Function",{bind:n(75)})},function(t,e,n){var o=n(0);o(o.S,"Object",{create:n(30)})},function(t,e,n){var o=n(0);o(o.S,"Object",{setPrototypeOf:n(81).set})},function(t,e,n){n(58),t.exports=n(82)},function(t,e){},function(t,e,n){t.exports=n(17)("native-function-to-string",Function.toString)},function(t,e,n){var o=n(61);t.exports=function(t,e){return new(o(t))(e)}},function(t,e,n){var o=n(3),i=n(42),r=n(1)("species");t.exports=function(t){var e;return i(t)&&("function"!=typeof(e=t.constructor)||e!==Array&&!i(e.prototype)||(e=void 0),o(e)&&null===(e=e[r])&&(e=void 0)),void 0===e?Array:e}},function(t,e,n){var o=n(14)("meta"),i=n(3),r=n(8),s=n(5).f,a=0,c=Object.isExtensible||function(){return!0},u=!n(7)(function(){return c(Object.preventExtensions({}))}),l=function(t){s(t,o,{value:{i:"O"+ ++a,w:{}}})},h=t.exports={KEY:o,NEED:!1,fastKey:function(t,e){if(!i(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!r(t,o)){if(!c(t))return"F";if(!e)return"E";l(t)}return t[o].i},getWeak:function(t,e){if(!r(t,o)){if(!c(t))return!0;if(!e)return!1;l(t)}return t[o].w},onFreeze:function(t){return u&&h.NEED&&c(t)&&!r(t,o)&&l(t),t}}},function(t,e,n){var o=n(15),i=n(47),r=n(29);t.exports=function(t){var e=o(t),n=i.f;if(n)for(var s,a=n(t),c=r.f,u=0;a.length>u;)c.call(t,s=a[u++])&&e.push(s);return e}},function(t,e,n){var o=n(41),i=Math.max,r=Math.min;t.exports=function(t,e){return(t=o(t))<0?i(t+e,0):r(t,e)}},function(t,e,n){var o=n(5),i=n(12),r=n(15);t.exports=n(6)?Object.defineProperties:function(t,e){i(t);for(var n,s=r(e),a=s.length,c=0;a>c;)o.f(t,n=s[c++],e[n]);return t}},function(t,e,n){var o=n(2).document;t.exports=o&&o.documentElement},function(t,e,n){var o=n(9),i=n(48).f,r={}.toString,s="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return s&&"[object Window]"==r.call(t)?function(t){try{return i(t)}catch(t){return s.slice()}}(t):i(o(t))}},function(t,e,n){var o=n(1)("unscopables"),i=Array.prototype;null==i[o]&&n(4)(i,o,{}),t.exports=function(t){i[o][t]=!0}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){"use strict";var o=n(18),i=n(0),r=n(13),s=n(4),a=n(32),c=n(71),u=n(26),l=n(72),h=n(1)("iterator"),f=!([].keys&&"next"in[].keys()),p=function(){return this};t.exports=function(t,e,n,d,v,y,g){c(n,e,d);var m,b,w,x=function(t){if(!f&&t in P)return P[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},S=e+" Iterator",O="values"==v,k=!1,P=t.prototype,E=P[h]||P["@@iterator"]||v&&P[v],N=E||x(v),j=v?O?x("entries"):N:void 0,L="Array"==e&&P.entries||E;if(L&&(w=l(L.call(new t)))!==Object.prototype&&w.next&&(u(w,S,!0),o||"function"==typeof w[h]||s(w,h,p)),O&&E&&"values"!==E.name&&(k=!0,N=function(){return E.call(this)}),o&&!g||!f&&!k&&P[h]||s(P,h,N),a[e]=N,a[S]=p,v)if(m={values:O?N:x("values"),keys:y?N:x("keys"),entries:j},g)for(b in m)b in P||r(P,b,m[b]);else i(i.P+i.F*(f||k),e,m);return m}},function(t,e,n){"use strict";var o=n(30),i=n(16),r=n(26),s={};n(4)(s,n(1)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=o(s,{next:i(1,n)}),r(t,e+" Iterator")}},function(t,e,n){var o=n(8),i=n(19),r=n(27)("IE_PROTO"),s=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),o(t,r)?t[r]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?s:null}},function(t,e,n){var o=n(23),i=n(1)("toStringTag"),r="Arguments"==o(function(){return arguments}());t.exports=function(t){var e,n,s;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),i))?n:r?o(e):"Object"==(s=o(e))&&"function"==typeof e.callee?"Arguments":s}},function(t,e,n){var o=n(0),i=n(11),r=n(7);t.exports=function(t,e){var n=(i.Object||{})[t]||Object[t],s={};s[t]=e(n),o(o.S+o.F*r(function(){n(1)}),"Object",s)}},function(t,e,n){"use strict";var o=n(37),i=n(3),r=n(76),s=[].slice,a={};t.exports=Function.bind||function(t){var e=o(this),n=s.call(arguments,1),c=function(){var o=n.concat(s.call(arguments));return this instanceof c?function(t,e,n){if(!(e in a)){for(var o=[],i=0;i<e;i++)o[i]="a["+i+"]";a[e]=Function("F,a","return new F("+o.join(",")+")")}return a[e](t,n)}(e,o.length,o):r(e,o,t)};return i(e.prototype)&&(c.prototype=e.prototype),c}},function(t,e){t.exports=function(t,e,n){var o=void 0===n;switch(e.length){case 0:return o?t():t.call(n);case 1:return o?t(e[0]):t.call(n,e[0]);case 2:return o?t(e[0],e[1]):t.call(n,e[0],e[1]);case 3:return o?t(e[0],e[1],e[2]):t.call(n,e[0],e[1],e[2]);case 4:return o?t(e[0],e[1],e[2],e[3]):t.call(n,e[0],e[1],e[2],e[3])}return t.apply(n,e)}},function(t,e,n){"use strict";n(78)("trim",function(t){return function(){return t(this,3)}})},function(t,e,n){var o=n(0),i=n(24),r=n(7),s=n(79),a="["+s+"]",c=RegExp("^"+a+a+"*"),u=RegExp(a+a+"*$"),l=function(t,e,n){var i={},a=r(function(){return!!s[t]()||"​…"!="​…"[t]()}),c=i[t]=a?e(h):s[t];n&&(i[n]=c),o(o.P+o.F*a,"String",i)},h=l.trim=function(t,e){return t=String(i(t)),1&e&&(t=t.replace(c,"")),2&e&&(t=t.replace(u,"")),t};t.exports=l},function(t,e){t.exports="\t\n\v\f\r   ᠎             　\u2028\u2029\ufeff"},function(t,e,n){"use strict";var o=n(0),i=n(46)(!1),r=[].indexOf,s=!!r&&1/[1].indexOf(1,-0)<0;o(o.P+o.F*(s||!n(25)(r)),"Array",{indexOf:function(t){return s?r.apply(this,arguments)||0:i(this,t,arguments[1])}})},function(t,e,n){var o=n(3),i=n(12),r=function(t,e){if(i(t),!o(e)&&null!==e)throw TypeError(e+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,e,o){try{(o=n(22)(Function.call,n(49).f(Object.prototype,"__proto__").set,2))(t,[]),e=!(t instanceof Array)}catch(t){e=!0}return function(t,n){return r(t,n),e?t.__proto__=n:o(t,n),t}}({},!1):void 0),check:r}},function(t,e,n){"use strict";n.r(e);n(34),n(20),n(50),n(31),n(51),n(52),n(10),n(53),n(54);var o=.75,i=10,r=!0,s=!0,a=!0,c=!1,u="driver-highlighted-element-stage",l='<div id="'.concat("driver-page-overlay",'"></div>'),h='<div id="'.concat(u,'"></div>');n(33),n(77);function f(t){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var p=function(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstChild},d=function t(e,n){if(arguments.length>2&&void 0!==arguments[2]&&arguments[2]){for(var o=["","-webkit-","-ms-","moz-","-o-"],i=0;i<o.length;i++){var r=t(e,o[i]+n);if(r)return r}return""}var s="";return e.currentStyle?s=e.currentStyle[n]:document.defaultView&&document.defaultView.getComputedStyle&&(s=document.defaultView.getComputedStyle(e,null).getPropertyValue(n)),s&&s.toLowerCase?s.toLowerCase():s},v=function(t){return t&&"object"===f(t)&&"nodeType"in t};function y(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var g=function(){function t(e,n,o){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=e,this.highlightedElement=null,this.lastHighlightedElement=null,this.hideTimer=null,this.window=n,this.document=o,this.removeNode=this.removeNode.bind(this)}var e,n,o;return e=t,(n=[{key:"attachNode",value:function(){var t=this.document.getElementById("driver-page-overlay");t||(t=p(l),document.body.appendChild(t)),this.node=t,this.node.style.opacity="0",this.options.animate||this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{key:"highlight",value:function(t){t&&t.node?t.isSame(this.highlightedElement)||(this.window.clearTimeout(this.hideTimer),t.onHighlightStarted(),this.highlightedElement&&!this.highlightedElement.isSame(this.lastHighlightedElement)&&this.highlightedElement.onDeselected(),t.getCalculatedPosition().canHighlight()&&(this.lastHighlightedElement=this.highlightedElement,this.highlightedElement=t,this.show(),this.highlightedElement.onHighlighted())):console.warn("Invalid element to highlight. Must be an instance of `Element`")}},{key:"show",value:function(){var t=this;this.node&&this.node.parentElement||(this.attachNode(),window.setTimeout(function(){t.node.style.opacity="".concat(t.options.opacity),t.node.style.position="fixed",t.node.style.left="0",t.node.style.top="0",t.node.style.bottom="0",t.node.style.right="0"}))}},{key:"getHighlightedElement",value:function(){return this.highlightedElement}},{key:"getLastHighlightedElement",value:function(){return this.lastHighlightedElement}},{key:"clear",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(this.options.onReset&&this.options.onReset(this.highlightedElement),this.highlightedElement){this.highlightedElement.onDeselected(!0)}this.highlightedElement=null,this.lastHighlightedElement=null,this.node&&(this.window.clearTimeout(this.hideTimer),this.options.animate&&!t?(this.node.style.opacity="0",this.hideTimer=this.window.setTimeout(this.removeNode,300)):this.removeNode())}},{key:"removeNode",value:function(){this.node&&this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{key:"refresh",value:function(){this.highlightedElement&&(this.highlightedElement.showPopover(),this.highlightedElement.showStage())}}])&&y(e.prototype,n),o&&y(e,o),t}();n(80);function m(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var b=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.left,o=void 0===n?0:n,i=e.top,r=void 0===i?0:i,s=e.right,a=void 0===s?0:s,c=e.bottom,u=void 0===c?0:c;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.left=o,this.right=a,this.top=r,this.bottom=u}var e,n,o;return e=t,(n=[{key:"canHighlight",value:function(){return this.left<this.right&&this.top<this.bottom}}])&&m(e.prototype,n),o&&m(e,o),t}();function w(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var x=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.node,o=e.options,i=e.popover,r=e.stage,s=e.overlay,a=e.window,c=e.document;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.node=n,this.document=c,this.window=a,this.options=o,this.overlay=s,this.popover=i,this.stage=r,this.animationTimeout=null}var e,n,o;return e=t,(n=[{key:"isInView",value:function(){for(var t=this.node.offsetTop,e=this.node.offsetLeft,n=this.node.offsetWidth,o=this.node.offsetHeight,i=this.node;i.offsetParent;)t+=(i=i.offsetParent).offsetTop,e+=i.offsetLeft;return t>=this.window.pageYOffset&&e>=this.window.pageXOffset&&t+o<=this.window.pageYOffset+this.window.innerHeight&&e+n<=this.window.pageXOffset+this.window.innerWidth}},{key:"scrollManually",value:function(){var t=this.node.getBoundingClientRect().top+this.window.pageYOffset-this.window.innerHeight/2;this.window.scrollTo(0,t)}},{key:"bringInView",value:function(){if(this.node&&!this.isInView())if(this.node.scrollIntoView)try{this.node.scrollIntoView(this.options.scrollIntoViewOptions||{behavior:"instant",block:"center"})}catch(t){this.scrollManually()}else this.scrollManually()}},{key:"getCalculatedPosition",value:function(){var t=this.document.body,e=this.document.documentElement,n=this.window,o=this.window.pageYOffset||e.scrollTop||t.scrollTop,i=n.pageXOffset||e.scrollLeft||t.scrollLeft,r=this.node.getBoundingClientRect();return new b({top:r.top+o,left:r.left+i,right:r.left+i+r.width,bottom:r.top+o+r.height})}},{key:"getPopover",value:function(){return this.popover}},{key:"onDeselected",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.hidePopover(),t&&this.hideStage(),this.removeHighlightClasses(),this.window.clearTimeout(this.animationTimeout),this.options.onDeselected&&this.options.onDeselected(this)}},{key:"isSame",value:function(t){return!(!t||!t.node)&&t.node===this.node}},{key:"onHighlightStarted",value:function(){this.options.onHighlightStarted&&this.options.onHighlightStarted(this)}},{key:"onHighlighted",value:function(){this.isInView()||this.bringInView(),this.showPopover(),this.showStage(),this.addHighlightClasses(),this.options.onHighlighted&&this.options.onHighlighted(this)}},{key:"removeHighlightClasses",value:function(){this.node.classList.remove("driver-highlighted-element"),this.node.classList.remove("driver-position-relative");for(var t=this.document.querySelectorAll(".".concat("driver-fix-stacking")),e=0;e<t.length;e++)t[e].classList.remove("driver-fix-stacking")}},{key:"addHighlightClasses",value:function(){this.node.classList.add("driver-highlighted-element"),this.canMakeRelative()&&this.node.classList.add("driver-position-relative"),this.fixStackingContext()}},{key:"fixStackingContext",value:function(){for(var t=this.node.parentNode;t&&t.tagName&&"body"!==t.tagName.toLowerCase();){var e=d(t,"z-index"),n=parseFloat(d(t,"opacity")),o=d(t,"transform",!0),i=d(t,"transform-style",!0),r=d(t,"transform-box",!0),s=d(t,"filter",!0),a=d(t,"perspective",!0);(/[0-9]+/.test(e)||n<1||o&&"none"!==o||i&&"flat"!==i||r&&"border-box"!==r||s&&"none"!==s||a&&"none"!==a)&&t.classList.add("driver-fix-stacking"),t=t.parentNode}}},{key:"canMakeRelative",value:function(){var t=this.getStyleProperty("position");return-1===["absolute","fixed","relative"].indexOf(t)}},{key:"getStyleProperty",value:function(t){return d(this.node,t)}},{key:"showStage",value:function(){this.stage.show(this.getCalculatedPosition())}},{key:"getNode",value:function(){return this.node}},{key:"hideStage",value:function(){this.stage.hide()}},{key:"hidePopover",value:function(){this.popover&&this.popover.hide()}},{key:"showPopover",value:function(){var t=this;if(this.popover){var e=this.getCalculatedPosition(),n=300;this.options.animate&&this.overlay.lastHighlightedElement||(n=0),this.animationTimeout=this.window.setTimeout(function(){t.popover.show(e)},n)}}},{key:"getFullPageSize",value:function(){var t=this.document.body,e=this.document.documentElement;return{height:Math.max(t.scrollHeight,t.offsetHeight,e.scrollHeight,e.offsetHeight),width:Math.max(t.scrollWidth,t.offsetWidth,e.scrollWidth,e.offsetWidth)}}},{key:"getSize",value:function(){return{height:Math.max(this.node.scrollHeight,this.node.offsetHeight),width:Math.max(this.node.scrollWidth,this.node.offsetWidth)}}}])&&w(e.prototype,n),o&&w(e,o),t}();n(55),n(56);function S(t){return(S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function O(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function k(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function P(t,e){return!e||"object"!==S(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function E(t){return(E=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function N(t,e){return(N=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var j=function(t){function e(t,n,o){var i;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),(i=P(this,E(e).call(this))).options=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),o.forEach(function(e){O(t,e,n[e])})}return t}({isFirst:!0,isLast:!0,totalCount:1,currentIndex:0,offset:0,showButtons:!0,closeBtnText:"Close",doneBtnText:"Done",startBtnText:"Next &rarr;",nextBtnText:"Next &rarr;",prevBtnText:"&larr; Previous"},t),i.window=n,i.document=o,i}var n,o,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&N(t,e)}(e,x),n=e,(o=[{key:"attachNode",value:function(){var t=this.document.getElementById("driver-popover-item");t&&t.parentElement.removeChild(t),t=p(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return'\n  <div id="'.concat("driver-popover-item",'" class="').concat(t,'">\n    <div class="').concat("driver-popover-tip",'"></div>\n    <div class="').concat("driver-popover-title",'">Popover Title</div>\n    <div class="').concat("driver-popover-description",'">Popover Description</div>\n    <div class="driver-clearfix ').concat("driver-popover-footer",'">\n      <button class="').concat("driver-close-btn",'">Close</button>\n      <span class="driver-btn-group ').concat("driver-navigation-btns",'">\n        <button class="').concat("driver-prev-btn",'">&larr; Previous</button>\n        <button class="').concat("driver-next-btn",'">Next &rarr;</button>\n      </span>\n    </div>\n  </div>')}(this.options.className)),document.body.appendChild(t),this.node=t,this.tipNode=t.querySelector(".".concat("driver-popover-tip")),this.titleNode=t.querySelector(".".concat("driver-popover-title")),this.descriptionNode=t.querySelector(".".concat("driver-popover-description")),this.footerNode=t.querySelector(".".concat("driver-popover-footer")),this.nextBtnNode=t.querySelector(".".concat("driver-next-btn")),this.prevBtnNode=t.querySelector(".".concat("driver-prev-btn")),this.closeBtnNode=t.querySelector(".".concat("driver-close-btn"))}},{key:"getTitleNode",value:function(){return this.titleNode}},{key:"getDescriptionNode",value:function(){return this.descriptionNode}},{key:"hide",value:function(){this.node&&(this.node.style.display="none")}},{key:"setInitialState",value:function(){this.node.style.display="block",this.node.style.left="0",this.node.style.top="0",this.node.style.bottom="",this.node.style.right="",this.node.querySelector(".".concat("driver-popover-tip")).className="driver-popover-tip"}},{key:"show",value:function(t){switch(this.attachNode(),this.setInitialState(),this.titleNode.innerHTML=this.options.title,this.descriptionNode.innerHTML=this.options.description||"",this.renderFooter(),this.options.position){case"left":case"left-top":this.positionOnLeft(t);break;case"left-center":this.positionOnLeftCenter(t);break;case"left-bottom":this.positionOnLeftBottom(t);break;case"right":case"right-top":this.positionOnRight(t);break;case"right-center":this.positionOnRightCenter(t);break;case"right-bottom":this.positionOnRightBottom(t);break;case"top":case"top-left":this.positionOnTop(t);break;case"top-center":this.positionOnTopCenter(t);break;case"top-right":this.positionOnTopRight(t);break;case"bottom":case"bottom-left":this.positionOnBottom(t);break;case"bottom-center":this.positionOnBottomCenter(t);break;case"bottom-right":this.positionOnBottomRight(t);break;case"mid-center":this.positionOnMidCenter(t);break;case"auto":default:this.autoPosition(t)}this.bringInView()}},{key:"renderFooter",value:function(){this.nextBtnNode.innerHTML=this.options.nextBtnText,this.prevBtnNode.innerHTML=this.options.prevBtnText,this.closeBtnNode.innerHTML=this.options.closeBtnText;var t=this.options.totalCount&&1!==this.options.totalCount;this.options.showButtons?(t?(this.nextBtnNode.style.display="inline-block",this.prevBtnNode.style.display="inline-block",this.closeBtnNode.classList.remove("driver-close-only-btn")):(this.nextBtnNode.style.display="none",this.prevBtnNode.style.display="none",this.closeBtnNode.classList.add("driver-close-only-btn")),this.footerNode.style.display="block",this.options.isFirst?(this.prevBtnNode.classList.add("driver-disabled"),this.nextBtnNode.innerHTML=this.options.startBtnText):this.prevBtnNode.classList.remove("driver-disabled"),this.options.isLast?this.nextBtnNode.innerHTML=this.options.doneBtnText:this.nextBtnNode.innerHTML=this.options.nextBtnText):this.footerNode.style.display="none"}},{key:"positionOnLeft",value:function(t){var e=this.getSize().width,n=this.options.padding+10;this.node.style.left="".concat(t.left-e-n,"px"),this.node.style.top="".concat(t.top+this.options.offset-this.options.padding,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("right")}},{key:"positionOnLeftBottom",value:function(t){var e=this.getSize(),n=e.width,o=this.options.padding+10;this.node.style.left="".concat(t.left-n-o,"px"),this.node.style.top="".concat(t.bottom+this.options.padding+this.options.offset-e.height,"px"),this.node.style.bottom="",this.node.style.right="",this.tipNode.classList.add("right","position-bottom")}},{key:"positionOnLeftCenter",value:function(t){var e=this.getSize(),n=e.width,o=e.height/2,i=this.options.padding+10,r=(t.bottom-t.top)/2,s=t.top-o+r+this.options.offset;this.node.style.left="".concat(t.left-n-i,"px"),this.node.style.top="".concat(s,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("right","position-center")}},{key:"positionOnRight",value:function(t){var e=this.options.padding+10;this.node.style.left="".concat(t.right+e,"px"),this.node.style.top="".concat(t.top+this.options.offset-this.options.padding,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("left")}},{key:"positionOnRightCenter",value:function(t){var e=this.getSize(),n=this.options.padding+10,o=e.height/2,i=(t.bottom-t.top)/2,r=t.top-o+i+this.options.offset;this.node.style.left="".concat(t.right+n,"px"),this.node.style.top="".concat(r,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("left","position-center")}},{key:"positionOnRightBottom",value:function(t){var e=this.options.padding+10,n=this.getSize();this.node.style.left="".concat(t.right+e,"px"),this.node.style.top="".concat(t.bottom+this.options.padding+this.options.offset-n.height,"px"),this.node.style.bottom="",this.node.style.right="",this.tipNode.classList.add("left","position-bottom")}},{key:"positionOnTop",value:function(t){var e=this.getSize().height,n=this.options.padding+10;this.node.style.top="".concat(t.top-e-n,"px"),this.node.style.left="".concat(t.left-this.options.padding+this.options.offset,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("bottom")}},{key:"positionOnTopCenter",value:function(t){var e=this.getSize(),n=e.height,o=e.width/2,i=this.options.padding+10,r=this.options.offset+t.left+(t.right-t.left)/2;this.node.style.top="".concat(t.top-n-i,"px"),this.node.style.left="".concat(r-o-this.options.padding,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("bottom","position-center")}},{key:"positionOnTopRight",value:function(t){var e=this.getSize(),n=e.height,o=this.options.padding+10;this.node.style.top="".concat(t.top-n-o,"px"),this.node.style.left="".concat(t.right+this.options.padding+this.options.offset-e.width,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("bottom","position-right")}},{key:"positionOnBottom",value:function(t){var e=this.options.padding+10;this.node.style.top="".concat(t.bottom+e,"px"),this.node.style.left="".concat(t.left-this.options.padding+this.options.offset,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("top")}},{key:"positionOnBottomCenter",value:function(t){var e=this.getSize().width/2,n=this.options.padding+10,o=this.options.offset+t.left+(t.right-t.left)/2;this.node.style.top="".concat(t.bottom+n,"px"),this.node.style.left="".concat(o-e-this.options.padding,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("top","position-center")}},{key:"positionOnBottomRight",value:function(t){var e=this.getSize(),n=this.options.padding+10;this.node.style.top="".concat(t.bottom+n,"px"),this.node.style.left="".concat(t.right+this.options.padding+this.options.offset-e.width,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("top","position-right")}},{key:"positionOnMidCenter",value:function(t){var e=this.getSize(),n=e.height,o=e.width/2,i=n/2,r=(t.bottom-t.top)/2,s=t.top-i+r+this.options.offset,a=this.options.offset+t.left+(t.right-t.left)/2;this.node.style.top="".concat(s,"px"),this.node.style.left="".concat(a-o-this.options.padding,"px"),this.node.style.right="",this.node.style.bottom="",this.tipNode.classList.add("mid-center")}},{key:"autoPosition",value:function(t){var e=this.getFullPageSize(),n=this.getSize(),o=e.height,i=n.height,r=this.options.padding+10;t.bottom+i+r>=o?this.positionOnTop(t):this.positionOnBottom(t)}}])&&k(n.prototype,o),i&&k(n,i),e}();function L(t){return(L="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function T(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function C(t,e){return!e||"object"!==L(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function _(t){return(_=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function M(t,e){return(M=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var H=function(t){function e(t,n,o){var i;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),(i=C(this,_(e).call(this))).options=t,i.window=n,i.document=o,i}var n,o,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&M(t,e)}(e,x),n=e,(o=[{key:"attachNode",value:function(){var t=this.document.getElementById(u);t||(t=p(h),document.body.appendChild(t)),this.node=t,this.options.animate?this.node.classList.remove("driver-stage-no-animation"):this.node.classList.add("driver-stage-no-animation")}},{key:"hide",value:function(){this.node&&this.node.parentElement&&this.node.parentElement.removeChild(this.node)}},{key:"setInitialStyle",value:function(){this.node.style.display="block",this.node.style.left="0",this.node.style.top="0",this.node.style.bottom="",this.node.style.right=""}},{key:"show",value:function(t){this.attachNode(),this.setInitialStyle();var e=2*this.options.padding,n=t.right-t.left+e,o=t.bottom-t.top+e;this.node.style.display="block",this.node.style.position="absolute",this.node.style.width="".concat(n,"px"),this.node.style.height="".concat(o,"px"),this.node.style.top="".concat(t.top-e/2,"px"),this.node.style.left="".concat(t.left-e/2,"px"),this.node.style.backgroundColor=this.options.stageBackground}}])&&T(n.prototype,o),i&&T(n,i),e}();function B(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),o.forEach(function(e){F(t,e,n[e])})}return t}function F(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function I(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}n.d(e,"default",function(){return R});var R=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.options=B({animate:r,opacity:o,padding:i,scrollIntoViewOptions:null,allowClose:s,keyboardControl:a,overlayClickNext:c,stageBackground:"#ffffff",onHighlightStarted:function(){return null},onHighlighted:function(){return null},onDeselected:function(){return null},onReset:function(){return null},onNext:function(){return null},onPrevious:function(){return null}},e),this.document=document,this.window=window,this.isActivated=!1,this.steps=[],this.currentStep=0,this.currentMovePrevented=!1,this.overlay=new g(this.options,window,document),this.onResize=this.onResize.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.onClick=this.onClick.bind(this),this.moveNext=this.moveNext.bind(this),this.movePrevious=this.movePrevious.bind(this),this.preventMove=this.preventMove.bind(this),this.bind()}var e,n,u;return e=t,(n=[{key:"getSteps",value:function(){return this.steps}},{key:"setSteps",value:function(t){this.steps=t}},{key:"bind",value:function(){this.window.addEventListener("resize",this.onResize,!1),this.window.addEventListener("keyup",this.onKeyUp,!1),"ontouchstart"in document.documentElement?this.window.addEventListener("touchstart",this.onClick,!1):this.window.addEventListener("click",this.onClick,!1)}},{key:"onClick",value:function(t){if(this.isActivated&&this.hasHighlightedElement()){t.stopPropagation();var e=this.overlay.getHighlightedElement(),n=this.document.getElementById("driver-popover-item"),o=e.node.contains(t.target),i=n&&n.contains(t.target);if(o||i||!this.options.overlayClickNext)if(o||i||!this.options.allowClose){var r=t.target.classList.contains("driver-next-btn"),s=t.target.classList.contains("driver-prev-btn");t.target.classList.contains("driver-close-btn")?this.reset():r?this.handleNext():s&&this.handlePrevious()}else this.reset();else this.handleNext()}}},{key:"onResize",value:function(){this.isActivated&&this.refresh()}},{key:"refresh",value:function(){this.overlay.refresh()}},{key:"onKeyUp",value:function(t){if(this.isActivated&&this.options.keyboardControl)if(27!==t.keyCode){var e=this.getHighlightedElement();e&&e.popover&&(39===t.keyCode?this.handleNext():37===t.keyCode&&this.handlePrevious())}else this.reset()}},{key:"movePrevious",value:function(){var t=this.steps[this.currentStep-1];t?(this.overlay.highlight(t),this.currentStep-=1):this.reset()}},{key:"preventMove",value:function(){this.currentMovePrevented=!0}},{key:"handleNext",value:function(){this.currentMovePrevented=!1;var t=this.steps[this.currentStep];t&&t.options&&t.options.onNext&&t.options.onNext(this.overlay.highlightedElement),this.currentMovePrevented||this.moveNext()}},{key:"handlePrevious",value:function(){this.currentMovePrevented=!1;var t=this.steps[this.currentStep];t&&t.options&&t.options.onPrevious&&t.options.onPrevious(this.overlay.highlightedElement),this.currentMovePrevented||this.movePrevious()}},{key:"moveNext",value:function(){var t=this.steps[this.currentStep+1];t?(this.overlay.highlight(t),this.currentStep+=1):this.reset()}},{key:"hasNextStep",value:function(){return!!this.steps[this.currentStep+1]}},{key:"hasPreviousStep",value:function(){return!!this.steps[this.currentStep-1]}},{key:"reset",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.currentStep=0,this.isActivated=!1,this.overlay.clear(t)}},{key:"hasHighlightedElement",value:function(){var t=this.overlay.getHighlightedElement();return t&&t.node}},{key:"getHighlightedElement",value:function(){return this.overlay.getHighlightedElement()}},{key:"getLastHighlightedElement",value:function(){return this.overlay.getLastHighlightedElement()}},{key:"defineSteps",value:function(t){this.steps=[];for(var e=0;e<t.length;e++){var n=this.prepareElementFromStep(t[e],t,e);n&&this.steps.push(n)}}},{key:"prepareElementFromStep",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=B({},this.options),i=t,r="string"!=typeof t&&!v(t);if(!t||r&&!t.element)throw new Error("Element is required in step ".concat(n));r&&(i=t.element,o=B({},this.options,t));var s=v(i)?i:this.document.querySelector(i);if(!s)return console.warn("Element to highlight ".concat(i," not found")),null;var a=null;if(o.popover&&o.popover.title){var c=[this.options.className,o.popover.className].filter(function(t){return t}).join(" "),u=B({},o,o.popover,{className:c,totalCount:e.length,currentIndex:n,isFirst:0===n,isLast:0===e.length||n===e.length-1});a=new j(u,this.window,this.document)}var l=B({},o),h=new H(l,this.window,this.document);return new x({node:s,options:o,popover:a,stage:h,overlay:this.overlay,window:this.window,document:this.document})}},{key:"start",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;if(!this.steps||0===this.steps.length)throw new Error("There are no steps defined to iterate");this.isActivated=!0,this.currentStep=t,this.overlay.highlight(this.steps[t])}},{key:"highlight",value:function(t){this.isActivated=!0;var e=this.prepareElementFromStep(t);e&&this.overlay.highlight(e)}}])&&I(e.prototype,n),u&&I(e,u),t}()}]).default});
-//# sourceMappingURL=driver.min.js.map

dist/driver.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"driver.min.js","sources":["webpack://Driver/webpack/universalModuleDefinition"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Driver\"] = factory();\n\telse\n\t\troot[\"Driver\"] = factory();\n})(window, function() {\nreturn "],"mappings":"AAAA","sourceRoot":""}

dts-bundle-generator.config.ts

@@ -0,0 +1,9 @@
+module.exports = {
+  entries: [
+    {
+      filePath: "./src/index.ts",
+      outFile: `./dist/driver.js.d.ts`,
+      noCheck: false,
+    },
+  ],
+};

index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 14px;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+      }
+
+      h1 {
+        margin: 40px 0 10px;
+        font-size: 48px;
+        font-weight: 600;
+        text-align: center;
+      }
+
+      h1 sup {
+        font-size: 18px;
+        font-weight: 400;
+      }
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 20px 10px 0;
+        line-height: 1.5;
+      }
+
+      ul li:before {
+        content: "•";
+        margin-right: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>driver.js <sup>next</sup></h1>
+      <p>Rewritten and enhanced version of driver.js</p>
+
+      <ul>
+        <li>Written in TypeScript</li>
+        <li>Lightweight — only 5kb gzipped</li>
+        <li>No dependencies</li>
+        <li>MIT Licensed</li>
+      </ul>
+    </div>
+    <script type="module">
+      import { driver } from "./src/driver.ts";
+
+      const driverObj = driver();
+
+      window.setTimeout(() => {
+        driverObj.highlight({
+          element: "h1",
+          popover: {
+            title: "Welcome to driver.js!",
+            description: "It's a rewritten version of driver.js",
+            position: "bottom",
+          },
+        });
+      }, 1000);
+
+      window.setTimeout(() => {
+        driverObj.highlight({
+          element: "p",
+          popover: {
+            title: "Welcome to driver.js!",
+            description: "It's a rewritten version of driver.js",
+            position: "bottom",
+          },
+        });
+      }, 2000);
+
+      window.setTimeout(() => {
+        driverObj.highlight({
+          element: "ul",
+          popover: {
+            title: "Welcome to driver.js!",
+            description: "It's a rewritten version of driver.js",
+            position: "bottom",
+          },
+        });
+      }, 3000);
+    </script>
+  </body>
+</html>

package.json

@@ -1,54 +1,51 @@
 {
-  "name": "driver.js",
-  "version": "0.9.8",
-  "description": "A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page",
-  "main": "dist/driver.min.js",
-  "types": "types/index.d.ts",
-  "scripts": {
-    "start": "node server.js",
-    "build-demo": "NODE_ENV=production webpack --config config/webpack.config.demo.js",
-    "build": "webpack --config config/webpack.config.prod.js",
-    "deploy-demo": "NODE_DEBUG=gh-pages gh-pages -d dist/demo"
+  "name": "vite-vanilla-ts-lib-starter",
+  "private": true,
+  "version": "0.0.2",
+  "main": "./dist/vite-ts-lib-starter.cjs",
+  "module": "./dist/vite-ts-lib-starter.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/vite-ts-lib-starter.cjs",
+      "import": "./dist/vite-ts-lib-starter.mjs"
+    }
   },
-  "bugs": {
-    "url": "https://github.com/kamranahmedse/driver.js/issues"
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "lint:scripts": "eslint . --ext .ts",
+    "lint:styles": "stylelint ./**/*.{css,scss}",
+    "format:scripts": "prettier . --write",
+    "format:styles": "stylelint ./**/*.{css,scss} --fix",
+    "format": "npm run format:scripts && npm run format:styles",
+    "prepare": "husky install && husky set .husky/pre-commit 'npx lint-staged' && git add .husky/pre-commit",
+    "uninstall-husky": "npm uninstall husky --no-save && git config --unset core.hooksPath && npx rimraf .husky"
   },
-  "homepage": "https://github.com/kamranahmedse/driver.js#readme",
-  "repository": "https://github.com/kamranahmedse/driver.js",
-  "author": "Kamran Ahmed <[email protected]>",
-  "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "autoprefixer": "^9.7.4",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.3",
-    "css-loader": "^3.0.0",
-    "cssnano": "^4.1.10",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-loader": "^2.1.2",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-node": "^9.1.0",
-    "extract-loader": "^3.1.0",
-    "extract-text-webpack-plugin": "next",
-    "file-loader": "^4.0.0",
-    "gh-pages": "^2.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.12.0",
-    "opn": "^6.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss-loader": "^3.0.0",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.34.0",
-    "webpack-cli": "^3.3.4",
-    "webpack-dev-server": "^3.7.1"
-  },
-  "dependencies": {},
-  "browserslist": [
-    "defaults"
-  ]
+    "@types/jsdom": "^21.1.1",
+    "@types/node": "^20.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "@vitest/coverage-c8": "^0.31.0",
+    "dts-bundle-generator": "^8.0.1",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "postcss": "^8.4.23",
+    "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.8",
+    "stylelint": "^15.6.1",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-recommended": "^12.0.0",
+    "stylelint-config-sass-guidelines": "^10.0.0",
+    "stylelint-prettier": "^3.0.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5",
+    "vitest": "^0.31.0"
+  }
 }

server.js

@@ -1,22 +0,0 @@
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const opn = require('opn');
-
-const config = require('./config/webpack.config.demo');
-
-const PORT = 3000;
-const HOST = 'localhost';
-const URL = `http://${HOST}:${PORT}`;
-
-config.entry.unshift(`webpack-dev-server/client?${URL}`);
-
-new WebpackDevServer(webpack(config))
-  .listen(PORT, HOST, (error) => {
-    if (error) {
-      console.error(error);
-      return;
-    }
-
-    opn(URL);
-    console.log(`Listening at ${URL}`);
-  });

src/common/constants.js

@@ -1,52 +0,0 @@
-export const OVERLAY_OPACITY = 0.75;
-export const OVERLAY_PADDING = 10;
-
-export const SHOULD_ANIMATE_OVERLAY = true;
-export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
-export const ALLOW_KEYBOARD_CONTROL = true;
-export const SHOULD_OUTSIDE_CLICK_NEXT = false;
-
-export const ESC_KEY_CODE = 27;
-export const LEFT_KEY_CODE = 37;
-export const RIGHT_KEY_CODE = 39;
-
-export const ID_OVERLAY = 'driver-page-overlay';
-export const ID_STAGE = 'driver-highlighted-element-stage';
-export const ID_POPOVER = 'driver-popover-item';
-
-export const CLASS_DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
-export const CLASS_POSITION_RELATIVE = 'driver-position-relative';
-export const CLASS_FIX_STACKING_CONTEXT = 'driver-fix-stacking';
-
-export const CLASS_STAGE_NO_ANIMATION = 'driver-stage-no-animation';
-export const CLASS_POPOVER_TIP = 'driver-popover-tip';
-export const CLASS_POPOVER_TITLE = 'driver-popover-title';
-export const CLASS_POPOVER_DESCRIPTION = 'driver-popover-description';
-export const CLASS_POPOVER_FOOTER = 'driver-popover-footer';
-export const CLASS_CLOSE_BTN = 'driver-close-btn';
-export const CLASS_NEXT_STEP_BTN = 'driver-next-btn';
-export const CLASS_PREV_STEP_BTN = 'driver-prev-btn';
-export const CLASS_BTN_DISABLED = 'driver-disabled';
-export const CLASS_CLOSE_ONLY_BTN = 'driver-close-only-btn';
-export const CLASS_NAVIGATION_BTNS = 'driver-navigation-btns';
-
-// NOTE: It must match the one set in the animations in CSS file
-export const ANIMATION_DURATION_MS = 300;
-
-// language=HTML
-export const POPOVER_HTML = (className = '') => `
-  <div id="${ID_POPOVER}" class="${className}">
-    <div class="${CLASS_POPOVER_TIP}"></div>
-    <div class="${CLASS_POPOVER_TITLE}">Popover Title</div>
-    <div class="${CLASS_POPOVER_DESCRIPTION}">Popover Description</div>
-    <div class="driver-clearfix ${CLASS_POPOVER_FOOTER}">
-      <button class="${CLASS_CLOSE_BTN}">Close</button>
-      <span class="driver-btn-group ${CLASS_NAVIGATION_BTNS}">
-        <button class="${CLASS_PREV_STEP_BTN}">&larr; Previous</button>
-        <button class="${CLASS_NEXT_STEP_BTN}">Next &rarr;</button>
-      </span>
-    </div>
-  </div>`;
-
-export const OVERLAY_HTML = `<div id="${ID_OVERLAY}"></div>`;
-export const STAGE_HTML = `<div id="${ID_STAGE}"></div>`;

src/common/utils.js

@@ -1,56 +0,0 @@
-/**
- * Turn a string into a node
- * @param  {String} htmlString to convert
- * @return {HTMLElement|Node}   Converted node element
- */
-export const createNodeFromString = (htmlString) => {
-  const div = document.createElement('div');
-  div.innerHTML = htmlString.trim();
-
-  // Change this to div.childNodes to support multiple top-level nodes
-  return div.firstChild;
-};
-
-/**
- * Gets the CSS property from the given element
- * @param {HTMLElement|Node} element
- * @param {string} propertyName
- * @param {boolean} prefixVendor
- * @return {string}
- */
-export const getStyleProperty = (element, propertyName, prefixVendor = false) => {
-  if (prefixVendor) {
-    const prefixes = ['', '-webkit-', '-ms-', 'moz-', '-o-'];
-    for (let counter = 0; counter < prefixes.length; counter++) {
-      const prefixedProperty = prefixes[counter] + propertyName;
-      const foundValue = getStyleProperty(element, prefixedProperty);
-
-      if (foundValue) {
-        return foundValue;
-      }
-    }
-
-    return '';
-  }
-
-  let propertyValue = '';
-
-  if (element.currentStyle) {
-    propertyValue = element.currentStyle[propertyName];
-  } else if (document.defaultView && document.defaultView.getComputedStyle) {
-    propertyValue = document.defaultView
-      .getComputedStyle(element, null)
-      .getPropertyValue(propertyName);
-  }
-
-  return propertyValue && propertyValue.toLowerCase ? propertyValue.toLowerCase() : propertyValue;
-};
-
-/**
- * Checks if the passed element is dom object or not
- * @param element
- * @returns {boolean}
- */
-export const isDomElement = function (element) {
-  return element && typeof element === 'object' && 'nodeType' in element;
-};

src/core/element.js

@@ -1,392 +0,0 @@
-import {
-  ANIMATION_DURATION_MS,
-  CLASS_DRIVER_HIGHLIGHTED_ELEMENT,
-  CLASS_FIX_STACKING_CONTEXT,
-  CLASS_POSITION_RELATIVE,
-} from '../common/constants';
-import { getStyleProperty } from '../common/utils';
-import Position from './position';
-
-/**
- * Wrapper around DOMElements to enrich them
- * with the functionality necessary
- */
-export default class Element {
-  /**
-   * DOM element object
-   * @param {Node|HTMLElement} node
-   * @param {Object} options
-   * @param {Popover} popover
-   * @param {Stage} stage
-   * @param {Overlay} overlay
-   * @param {Window} window
-   * @param {Document} document
-   */
-  constructor({
-    node,
-    options,
-    popover,
-    stage,
-    overlay,
-    window,
-    document,
-  } = {}) {
-    this.node = node;
-    this.document = document;
-    this.window = window;
-    this.options = options;
-    this.overlay = overlay;
-    this.popover = popover;
-    this.stage = stage;
-    this.animationTimeout = null;
-  }
-
-  /**
-   * Checks if the current element is visible in viewport
-   * @returns {boolean}
-   * @public
-   */
-  isInView() {
-    let top = this.node.offsetTop;
-    let left = this.node.offsetLeft;
-    const width = this.node.offsetWidth;
-    const height = this.node.offsetHeight;
-
-    let el = this.node;
-
-    while (el.offsetParent) {
-      el = el.offsetParent;
-      top += el.offsetTop;
-      left += el.offsetLeft;
-    }
-
-    return (
-      top >= this.window.pageYOffset
-      && left >= this.window.pageXOffset
-      && (top + height) <= (this.window.pageYOffset + this.window.innerHeight)
-      && (left + width) <= (this.window.pageXOffset + this.window.innerWidth)
-    );
-  }
-
-  /**
-   * Manually scrolls to the position of element if `scrollIntoView` fails
-   * @private
-   */
-  scrollManually() {
-    const elementRect = this.node.getBoundingClientRect();
-    const absoluteElementTop = elementRect.top + this.window.pageYOffset;
-    const middle = absoluteElementTop - (this.window.innerHeight / 2);
-
-    this.window.scrollTo(0, middle);
-  }
-
-  /**
-   * Brings the element to middle of the view port if not in view
-   * @public
-   */
-  bringInView() {
-    // If the node is not there or already is in view
-    if (!this.node || this.isInView()) {
-      return;
-    }
-
-    // If browser does not support scrollIntoView
-    if (!this.node.scrollIntoView) {
-      this.scrollManually();
-      return;
-    }
-
-    try {
-      this.node.scrollIntoView(this.options.scrollIntoViewOptions || {
-        behavior: 'instant',
-        block: 'center',
-      });
-    } catch (e) {
-      // `block` option is not allowed in older versions of firefox, scroll manually
-      this.scrollManually();
-    }
-  }
-
-  /**
-   * Gets the calculated position on screen, around which
-   * we need to draw
-   * @public
-   * @return {Position}
-   */
-  getCalculatedPosition() {
-    const body = this.document.body;
-    const documentElement = this.document.documentElement;
-    const window = this.window;
-
-    const scrollTop = this.window.pageYOffset || documentElement.scrollTop || body.scrollTop;
-    const scrollLeft = window.pageXOffset || documentElement.scrollLeft || body.scrollLeft;
-    const elementRect = this.node.getBoundingClientRect();
-
-    return new Position({
-      top: elementRect.top + scrollTop,
-      left: elementRect.left + scrollLeft,
-      right: elementRect.left + scrollLeft + elementRect.width,
-      bottom: elementRect.top + scrollTop + elementRect.height,
-    });
-  }
-
-  /**
-   * Gets the popover for the current element if any
-   * @returns {Popover|*}
-   * @public
-   */
-  getPopover() {
-    return this.popover;
-  }
-
-  /**
-   * Is called when element is about to be deselected
-   * i.e. when moving the focus to next element of closing
-   * @public
-   */
-  onDeselected(hideStage = false) {
-    this.hidePopover();
-
-    if (hideStage) {
-      this.hideStage();
-    }
-
-    this.removeHighlightClasses();
-
-    // If there was any animation in progress, cancel that
-    this.window.clearTimeout(this.animationTimeout);
-
-    if (this.options.onDeselected) {
-      this.options.onDeselected(this);
-    }
-  }
-
-  /**
-   * Checks if the given element is same as the current element
-   * @param {Element} element
-   * @returns {boolean}
-   * @public
-   */
-  isSame(element) {
-    if (!element || !element.node) {
-      return false;
-    }
-
-    return element.node === this.node;
-  }
-
-  /**
-   * Is called when the element is about to be highlighted
-   * @public
-   */
-  onHighlightStarted() {
-    if (this.options.onHighlightStarted) {
-      this.options.onHighlightStarted(this);
-    }
-  }
-
-  /**
-   * Is called when the element has been successfully highlighted
-   * @public
-   */
-  onHighlighted() {
-    const highlightedElement = this;
-    if (!highlightedElement.isInView()) {
-      highlightedElement.bringInView();
-    }
-
-    // Show the popover and stage once the item has been
-    // brought in the view, this would allow us to handle
-    // the cases where the container has scroll overflow
-    this.showPopover();
-    this.showStage();
-    this.addHighlightClasses();
-
-    if (this.options.onHighlighted) {
-      this.options.onHighlighted(this);
-    }
-  }
-
-  /**
-   * Removes the stacking context fix classes and the highlighter classes
-   * @private
-   */
-  removeHighlightClasses() {
-    this.node.classList.remove(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
-    this.node.classList.remove(CLASS_POSITION_RELATIVE);
-
-    const stackFixes = this.document.querySelectorAll(`.${CLASS_FIX_STACKING_CONTEXT}`);
-    for (let counter = 0; counter < stackFixes.length; counter++) {
-      stackFixes[counter].classList.remove(CLASS_FIX_STACKING_CONTEXT);
-    }
-  }
-
-  /**
-   * Adds the highlight class on the current element and "fixes"
-   * the parent nodes if they
-   * @private
-   */
-  addHighlightClasses() {
-    this.node.classList.add(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
-
-    // Don't make relative if element already has some position set
-    if (this.canMakeRelative()) {
-      this.node.classList.add(CLASS_POSITION_RELATIVE);
-    }
-
-    // Check and re-define the stacking context
-    this.fixStackingContext();
-  }
-
-  /**
-   * Walks through the parents of the current element and fixes
-   * the stacking context
-   * @private
-   */
-  fixStackingContext() {
-    let parentNode = this.node.parentNode;
-    while (parentNode) {
-      if (!parentNode.tagName || parentNode.tagName.toLowerCase() === 'body') {
-        break;
-      }
-
-      const zIndex = getStyleProperty(parentNode, 'z-index');
-      const opacity = parseFloat(getStyleProperty(parentNode, 'opacity'));
-      const transform = getStyleProperty(parentNode, 'transform', true);
-      const transformStyle = getStyleProperty(parentNode, 'transform-style', true);
-      const transformBox = getStyleProperty(parentNode, 'transform-box', true);
-      const filter = getStyleProperty(parentNode, 'filter', true);
-      const perspective = getStyleProperty(parentNode, 'perspective', true);
-
-      // Stacking context gets disturbed if
-      // - Parent has z-index
-      // - Opacity is below 0
-      // - Filter/transform or perspective is applied
-      if (
-        /[0-9]+/.test(zIndex)
-        || opacity < 1
-        || (transform && transform !== 'none')
-        || (transformStyle && transformStyle !== 'flat')
-        || (transformBox && transformBox !== 'border-box')
-        || (filter && filter !== 'none')
-        || (perspective && perspective !== 'none')
-      ) {
-        parentNode.classList.add(CLASS_FIX_STACKING_CONTEXT);
-      }
-
-      parentNode = parentNode.parentNode;
-    }
-  }
-
-  /**
-   * Checks if we can make the current element relative or not
-   * @return {boolean}
-   * @private
-   */
-  canMakeRelative() {
-    const currentPosition = this.getStyleProperty('position');
-    const avoidPositionsList = ['absolute', 'fixed', 'relative'];
-
-    // Because if the element has any of these positions, making it
-    // relative will break the UI
-    return avoidPositionsList.indexOf(currentPosition) === -1;
-  }
-
-  /**
-   * Get current element's CSS attribute value
-   * @param {string} property
-   * @returns string
-   * @private
-   */
-  getStyleProperty(property) {
-    return getStyleProperty(this.node, property);
-  }
-
-  /**
-   * Shows the stage behind the element
-   * @public
-   */
-  showStage() {
-    this.stage.show(this.getCalculatedPosition());
-  }
-
-  /**
-   * Gets the DOM Element behind this element
-   * @returns {Node|HTMLElement|*}
-   * @public
-   */
-  getNode() {
-    return this.node;
-  }
-
-  /**
-   * Hides the stage
-   * @public
-   */
-  hideStage() {
-    this.stage.hide();
-  }
-
-  /**
-   * Hides the popover if possible
-   * @public
-   */
-  hidePopover() {
-    if (!this.popover) {
-      return;
-    }
-
-    this.popover.hide();
-  }
-
-  /**
-   * Shows the popover on the current element
-   * @public
-   */
-  showPopover() {
-    if (!this.popover) {
-      return;
-    }
-
-    const showAtPosition = this.getCalculatedPosition();
-
-    // For first highlight, show it immediately because there won't be any animation
-    let showAfterMs = ANIMATION_DURATION_MS;
-    // If animation is disabled or  if it is the first display, show it immediately
-    if (!this.options.animate || !this.overlay.lastHighlightedElement) {
-      showAfterMs = 0;
-    }
-
-    // @todo remove timeout and handle with CSS
-    this.animationTimeout = this.window.setTimeout(() => {
-      this.popover.show(showAtPosition);
-    }, showAfterMs);
-  }
-
-  /**
-   * @returns {{height: number, width: number}}
-   * @public
-   */
-  getFullPageSize() {
-    // eslint-disable-next-line prefer-destructuring
-    const body = this.document.body;
-    const html = this.document.documentElement;
-
-    return {
-      height: Math.max(body.scrollHeight, body.offsetHeight, html.scrollHeight, html.offsetHeight),
-      width: Math.max(body.scrollWidth, body.offsetWidth, html.scrollWidth, html.offsetWidth),
-    };
-  }
-
-  /**
-   * Gets the size for popover
-   * @returns {{height: number, width: number}}
-   * @public
-   */
-  getSize() {
-    return {
-      height: Math.max(this.node.scrollHeight, this.node.offsetHeight),
-      width: Math.max(this.node.scrollWidth, this.node.offsetWidth),
-    };
-  }
-}

src/core/overlay.js

@@ -1,195 +0,0 @@
-import { ANIMATION_DURATION_MS, ID_OVERLAY, OVERLAY_HTML } from '../common/constants';
-import { createNodeFromString } from '../common/utils';
-
-/**
- * Responsible for overlay creation and manipulation i.e.
- * cutting out the visible part, animating between the sections etc
- */
-export default class Overlay {
-  /**
-   * @param {Object} options
-   * @param {Window} window
-   * @param {Document} document
-   */
-  constructor(options, window, document) {
-    this.options = options;
-
-    this.highlightedElement = null;              // currently highlighted dom element (instance of Element)
-    this.lastHighlightedElement = null;          // element that was highlighted before current one
-    this.hideTimer = null;
-
-    this.window = window;
-    this.document = document;
-
-    this.removeNode = this.removeNode.bind(this);
-  }
-
-  /**
-   * Prepares the overlay
-   * @private
-   */
-  attachNode() {
-    let pageOverlay = this.document.getElementById(ID_OVERLAY);
-    if (!pageOverlay) {
-      pageOverlay = createNodeFromString(OVERLAY_HTML);
-      document.body.appendChild(pageOverlay);
-    }
-
-    this.node = pageOverlay;
-    this.node.style.opacity = '0';
-
-    if (!this.options.animate) {
-      // For non-animation cases remove the overlay because we achieve this overlay by having
-      // a higher box-shadow on the stage. Why are we doing it that way? Because the stage that
-      // is shown "behind" the highlighted element to make it pop out of the screen, it introduces
-      // some stacking contexts issues. To avoid those issues we just make the stage background
-      // transparent and achieve the overlay using the shadow so to make the element below it visible
-      // through the stage even if there are stacking issues.
-      if (this.node.parentElement) {
-        this.node.parentElement.removeChild(this.node);
-      }
-    }
-  }
-
-  /**
-   * Highlights the dom element on the screen
-   * @param {Element} element
-   * @public
-   */
-  highlight(element) {
-    if (!element || !element.node) {
-      console.warn('Invalid element to highlight. Must be an instance of `Element`');
-      return;
-    }
-
-    // If highlighted element is not changed from last time
-    if (element.isSame(this.highlightedElement)) {
-      return;
-    }
-
-    // There might be hide timer from last time
-    // which might be getting triggered
-    this.window.clearTimeout(this.hideTimer);
-
-    // Trigger the hook for highlight started
-    element.onHighlightStarted();
-
-    // Old element has been deselected
-    if (this.highlightedElement && !this.highlightedElement.isSame(this.lastHighlightedElement)) {
-      this.highlightedElement.onDeselected();
-    }
-
-    // get the position of element around which we need to draw
-    const position = element.getCalculatedPosition();
-    if (!position.canHighlight()) {
-      return;
-    }
-
-    this.lastHighlightedElement = this.highlightedElement;
-    this.highlightedElement = element;
-
-    this.show();
-
-    // Element has been highlighted
-    this.highlightedElement.onHighlighted();
-  }
-
-  /**
-   * Shows the overlay on whole screen
-   * @public
-   */
-  show() {
-    if (this.node && this.node.parentElement) {
-      return;
-    }
-
-    this.attachNode();
-
-    window.setTimeout(() => {
-      this.node.style.opacity = `${this.options.opacity}`;
-      this.node.style.position = 'fixed';
-      this.node.style.left = '0';
-      this.node.style.top = '0';
-      this.node.style.bottom = '0';
-      this.node.style.right = '0';
-    });
-  }
-
-  /**
-   * Returns the currently selected element
-   * @returns {null|*}
-   * @public
-   */
-  getHighlightedElement() {
-    return this.highlightedElement;
-  }
-
-  /**
-   * Gets the element that was highlighted before current element
-   * @returns {null|*}
-   * @public
-   */
-  getLastHighlightedElement() {
-    return this.lastHighlightedElement;
-  }
-
-  /**
-   * Removes the overlay and cancel any listeners
-   * @public
-   */
-  clear(immediate = false) {
-    // Callback for when overlay is about to be reset
-    if (this.options.onReset) {
-      this.options.onReset(this.highlightedElement);
-    }
-
-    // Deselect the highlighted element if any
-    if (this.highlightedElement) {
-      const hideStage = true;
-      this.highlightedElement.onDeselected(hideStage);
-    }
-
-    this.highlightedElement = null;
-    this.lastHighlightedElement = null;
-
-    if (!this.node) {
-      return;
-    }
-
-    // Clear any existing timers and remove node
-    this.window.clearTimeout(this.hideTimer);
-
-    if (this.options.animate && !immediate) {
-      this.node.style.opacity = '0';
-      this.hideTimer = this.window.setTimeout(this.removeNode, ANIMATION_DURATION_MS);
-    } else {
-      this.removeNode();
-    }
-  }
-
-  /**
-   * Removes the overlay node if it exists
-   * @private
-   */
-  removeNode() {
-    if (this.node && this.node.parentElement) {
-      this.node.parentElement.removeChild(this.node);
-    }
-  }
-
-  /**
-   * Refreshes the overlay i.e. sets the size according to current window size
-   * And moves the highlight around if necessary
-   * @public
-   */
-  refresh() {
-    // If no highlighted element, cancel the refresh
-    if (!this.highlightedElement) {
-      return;
-    }
-
-    // Reposition the stage and show popover
-    this.highlightedElement.showPopover();
-    this.highlightedElement.showStage();
-  }
-}

src/core/popover.js

@@ -1,509 +0,0 @@
-import Element from './element';
-import {
-  CLASS_BTN_DISABLED,
-  CLASS_CLOSE_BTN,
-  CLASS_CLOSE_ONLY_BTN,
-  CLASS_NEXT_STEP_BTN,
-  CLASS_POPOVER_DESCRIPTION,
-  CLASS_POPOVER_FOOTER,
-  CLASS_POPOVER_TIP,
-  CLASS_POPOVER_TITLE,
-  CLASS_PREV_STEP_BTN,
-  ID_POPOVER,
-  POPOVER_HTML,
-} from '../common/constants';
-import { createNodeFromString } from '../common/utils';
-
-/**
- * Popover that is displayed on top of the highlighted element
- */
-export default class Popover extends Element {
-  /**
-   * @param {Object} options
-   * @param {Window} window
-   * @param {Document} document
-   */
-  constructor(options, window, document) {
-    super();
-
-    this.options = {
-      isFirst: true,
-      isLast: true,
-      totalCount: 1,
-      currentIndex: 0,
-      offset: 0,
-      showButtons: true,
-      closeBtnText: 'Close',
-      doneBtnText: 'Done',
-      startBtnText: 'Next →',
-      nextBtnText: 'Next →',
-      prevBtnText: '← Previous',
-      ...options,
-    };
-
-    this.window = window;
-    this.document = document;
-  }
-
-  /**
-   * Prepares the dom element for popover
-   * @private
-   */
-  attachNode() {
-    let popover = this.document.getElementById(ID_POPOVER);
-    if (popover) {
-      popover.parentElement.removeChild(popover);
-    }
-
-    popover = createNodeFromString(POPOVER_HTML(this.options.className));
-    document.body.appendChild(popover);
-
-    this.node = popover;
-    this.tipNode = popover.querySelector(`.${CLASS_POPOVER_TIP}`);
-    this.titleNode = popover.querySelector(`.${CLASS_POPOVER_TITLE}`);
-    this.descriptionNode = popover.querySelector(`.${CLASS_POPOVER_DESCRIPTION}`);
-    this.footerNode = popover.querySelector(`.${CLASS_POPOVER_FOOTER}`);
-    this.nextBtnNode = popover.querySelector(`.${CLASS_NEXT_STEP_BTN}`);
-    this.prevBtnNode = popover.querySelector(`.${CLASS_PREV_STEP_BTN}`);
-    this.closeBtnNode = popover.querySelector(`.${CLASS_CLOSE_BTN}`);
-  }
-
-  /**
-   * Gets the title node for the popover
-   * @returns {Element | null | *}
-   * @public
-   */
-  getTitleNode() {
-    return this.titleNode;
-  }
-
-  /**
-   * Gets the description node for the popover
-   * @returns {Element | null | *}
-   * @public
-   */
-  getDescriptionNode() {
-    return this.descriptionNode;
-  }
-
-  /**
-   * Hides the popover
-   * @public
-   */
-  hide() {
-    // If hide is called when the node isn't created yet
-    if (!this.node) {
-      return;
-    }
-
-    this.node.style.display = 'none';
-  }
-
-  /**
-   * Sets the default state for the popover
-   * @private
-   */
-  setInitialState() {
-    this.node.style.display = 'block';
-    this.node.style.left = '0';
-    this.node.style.top = '0';
-    this.node.style.bottom = '';
-    this.node.style.right = '';
-
-    // Remove the positional classes from tip
-    this.node
-      .querySelector(`.${CLASS_POPOVER_TIP}`)
-      .className = CLASS_POPOVER_TIP;
-  }
-
-  /**
-   * Shows the popover at the given position
-   * @param {Position} position
-   * @public
-   */
-  show(position) {
-    this.attachNode();
-    this.setInitialState();
-
-    // Set the title and descriptions
-    this.titleNode.innerHTML = this.options.title;
-    this.descriptionNode.innerHTML = this.options.description || '';
-
-    this.renderFooter();
-
-    // Position the popover around the given position
-    switch (this.options.position) {
-      case 'left':
-      case 'left-top':
-        this.positionOnLeft(position);
-        break;
-      case 'left-center':
-        this.positionOnLeftCenter(position);
-        break;
-      case 'left-bottom':
-        this.positionOnLeftBottom(position);
-        break;
-      case 'right':
-      case 'right-top':
-        this.positionOnRight(position);
-        break;
-      case 'right-center':
-        this.positionOnRightCenter(position);
-        break;
-      case 'right-bottom':
-        this.positionOnRightBottom(position);
-        break;
-      case 'top':
-      case 'top-left':
-        this.positionOnTop(position);
-        break;
-      case 'top-center':
-        this.positionOnTopCenter(position);
-        break;
-      case 'top-right':
-        this.positionOnTopRight(position);
-        break;
-      case 'bottom':
-      case 'bottom-left':
-        this.positionOnBottom(position);
-        break;
-      case 'bottom-center':
-        this.positionOnBottomCenter(position);
-        break;
-      case 'bottom-right':
-        this.positionOnBottomRight(position);
-        break;
-      case 'mid-center':
-        this.positionOnMidCenter(position);
-        break;
-      case 'auto':
-      default:
-        this.autoPosition(position);
-        break;
-    }
-
-    // Bring the popover in view port once it is displayed
-    this.bringInView();
-  }
-
-  /**
-   * Enables, disables buttons, sets the text and
-   * decides if to show them or not
-   * @private
-   */
-  renderFooter() {
-    this.nextBtnNode.innerHTML = this.options.nextBtnText;
-    this.prevBtnNode.innerHTML = this.options.prevBtnText;
-    this.closeBtnNode.innerHTML = this.options.closeBtnText;
-
-    const hasSteps = this.options.totalCount && this.options.totalCount !== 1;
-
-    // If there was only one item, hide the buttons
-    if (!this.options.showButtons) {
-      this.footerNode.style.display = 'none';
-      return;
-    }
-
-    // If this is just a single highlighted element i.e. there
-    // are no other steps to go to – just hide the navigation buttons
-    if (!hasSteps) {
-      this.nextBtnNode.style.display = 'none';
-      this.prevBtnNode.style.display = 'none';
-      this.closeBtnNode.classList.add(CLASS_CLOSE_ONLY_BTN);
-    } else {
-      // @todo modify CSS to use block
-      this.nextBtnNode.style.display = 'inline-block';
-      this.prevBtnNode.style.display = 'inline-block';
-      this.closeBtnNode.classList.remove(CLASS_CLOSE_ONLY_BTN);
-    }
-
-    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);
-    }
-
-    if (this.options.isLast) {
-      this.nextBtnNode.innerHTML = this.options.doneBtnText;
-    } else {
-      this.nextBtnNode.innerHTML = this.options.nextBtnText;
-    }
-  }
-
-  /**
-   * Shows the popover on the left of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnLeft(elementPosition) {
-    const popoverWidth = this.getSize().width;
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    this.node.style.left = `${elementPosition.left - popoverWidth - popoverMargin}px`;
-    this.node.style.top = `${(elementPosition.top + this.options.offset) - this.options.padding}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    this.tipNode.classList.add('right');
-  }
-
-  /**
-   * Shows the popover on the left of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnLeftBottom(elementPosition) {
-    const popoverDimensions = this.getSize();
-
-    const popoverWidth = popoverDimensions.width;
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    this.node.style.left = `${elementPosition.left - popoverWidth - popoverMargin}px`;
-    this.node.style.top = `${(elementPosition.bottom + this.options.padding + this.options.offset) - popoverDimensions.height}px`;
-    this.node.style.bottom = '';
-    this.node.style.right = '';
-
-    this.tipNode.classList.add('right', 'position-bottom');
-  }
-
-  /**
-   * Shows the popover on the left center of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnLeftCenter(elementPosition) {
-    const popoverDimensions = this.getSize();
-
-    const popoverWidth = popoverDimensions.width;
-    const popoverHeight = popoverDimensions.height;
-    const popoverCenter = popoverHeight / 2;
-
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-    const elementCenter = (elementPosition.bottom - elementPosition.top) / 2;
-    const topCenterPosition = (elementPosition.top - popoverCenter) + elementCenter + this.options.offset;
-
-    this.node.style.left = `${elementPosition.left - popoverWidth - popoverMargin}px`;
-    this.node.style.top = `${topCenterPosition}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    this.tipNode.classList.add('right', 'position-center');
-  }
-
-  /**
-   * Shows the popover on the right of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnRight(elementPosition) {
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    this.node.style.left = `${elementPosition.right + popoverMargin}px`;
-    this.node.style.top = `${(elementPosition.top + this.options.offset) - this.options.padding}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    this.tipNode.classList.add('left');
-  }
-
-  /**
-   * Shows the popover on the right of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnRightCenter(elementPosition) {
-    const popoverDimensions = this.getSize();
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    const popoverHeight = popoverDimensions.height;
-    const popoverCenter = popoverHeight / 2;
-    const elementCenter = (elementPosition.bottom - elementPosition.top) / 2;
-    const topCenterPosition = (elementPosition.top - popoverCenter) + elementCenter + this.options.offset;
-
-    this.node.style.left = `${elementPosition.right + popoverMargin}px`;
-    this.node.style.top = `${topCenterPosition}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    this.tipNode.classList.add('left', 'position-center');
-  }
-
-  /**
-   * Shows the popover on the right of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnRightBottom(elementPosition) {
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-    const popoverDimensions = this.getSize();
-
-    this.node.style.left = `${elementPosition.right + popoverMargin}px`;
-    this.node.style.top = `${(elementPosition.bottom + this.options.padding + this.options.offset) - popoverDimensions.height}px`;
-    this.node.style.bottom = '';
-    this.node.style.right = '';
-
-    this.tipNode.classList.add('left', 'position-bottom');
-  }
-
-  /**
-   * Shows the popover on the top of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnTop(elementPosition) {
-    const popoverHeight = this.getSize().height;
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    this.node.style.top = `${elementPosition.top - popoverHeight - popoverMargin}px`;
-    this.node.style.left = `${(elementPosition.left - this.options.padding) + this.options.offset}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    this.tipNode.classList.add('bottom');
-  }
-
-  /**
-   * Shows the popover on the top center of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnTopCenter(elementPosition) {
-    const dimensions = this.getSize();
-    const popoverHeight = dimensions.height;
-    const popoverWidth = dimensions.width / 2;
-
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-    const nodeCenter = this.options.offset + elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
-
-    this.node.style.top = `${elementPosition.top - popoverHeight - popoverMargin}px`;
-    this.node.style.left = `${nodeCenter - popoverWidth - this.options.padding}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    // Add the tip at the top center
-    this.tipNode.classList.add('bottom', 'position-center');
-  }
-
-  /**
-   * Shows the popover on the top right of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnTopRight(elementPosition) {
-    const dimensions = this.getSize();
-    const popoverHeight = dimensions.height;
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    this.node.style.top = `${elementPosition.top - popoverHeight - popoverMargin}px`;
-    this.node.style.left = `${(elementPosition.right + this.options.padding + this.options.offset) - dimensions.width}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    // Add the tip at the top center
-    this.tipNode.classList.add('bottom', 'position-right');
-  }
-
-  /**
-   * Shows the popover on the bottom of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnBottom(elementPosition) {
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    this.node.style.top = `${elementPosition.bottom + popoverMargin}px`;
-    this.node.style.left = `${(elementPosition.left - this.options.padding) + this.options.offset}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    this.tipNode.classList.add('top');
-  }
-
-  /**
-   * Shows the popover on the bottom-center of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnBottomCenter(elementPosition) {
-    const popoverWidth = this.getSize().width / 2;
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-    const nodeCenter = this.options.offset + elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
-
-    this.node.style.top = `${elementPosition.bottom + popoverMargin}px`;
-    this.node.style.left = `${nodeCenter - popoverWidth - this.options.padding}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    // Add the tip at the top center
-    this.tipNode.classList.add('top', 'position-center');
-  }
-
-  /**
-   * Shows the popover on the bottom-right of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnBottomRight(elementPosition) {
-    const dimensions = this.getSize();
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    this.node.style.top = `${elementPosition.bottom + popoverMargin}px`;
-    this.node.style.left = `${(elementPosition.right + this.options.padding + this.options.offset) - dimensions.width}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    // Add the tip at the top center
-    this.tipNode.classList.add('top', 'position-right');
-  }
-
-  /**
-   * Shows the popover on the mid-center of the given position
-   * @param {Position} elementPosition
-   * @private
-   */
-  positionOnMidCenter(elementPosition) {
-    const popoverDimensions = this.getSize();
-    const popoverHeight = popoverDimensions.height;
-    const popoverWidth = popoverDimensions.width / 2;
-    const popoverCenter = popoverHeight / 2;
-
-    const elementCenter = (elementPosition.bottom - elementPosition.top) / 2;
-    const topCenterPosition = (elementPosition.top - popoverCenter) + elementCenter + this.options.offset;
-    const nodeCenter = this.options.offset + elementPosition.left + ((elementPosition.right - elementPosition.left) / 2);
-
-    this.node.style.top = `${topCenterPosition}px`;
-    this.node.style.left = `${nodeCenter - popoverWidth - this.options.padding}px`;
-    this.node.style.right = '';
-    this.node.style.bottom = '';
-
-    // Add the tip at the top center
-    this.tipNode.classList.add('mid-center');
-  }
-
-  /**
-   * Automatically positions the popover around the given position
-   * such that the element and popover remain in view
-   * @todo add the left and right positioning decisions
-   * @param {Position} elementPosition
-   * @private
-   */
-  autoPosition(elementPosition) {
-    const pageSize = this.getFullPageSize();
-    const popoverSize = this.getSize();
-
-    const pageHeight = pageSize.height;
-    const popoverHeight = popoverSize.height;
-    const popoverMargin = this.options.padding + 10;  // adding 10 to give it a little distance from the element
-
-    const pageHeightAfterPopOver = elementPosition.bottom + popoverHeight + popoverMargin;
-
-    // If adding popover would go out of the window height, then show it to the top
-    if (pageHeightAfterPopOver >= pageHeight) {
-      this.positionOnTop(elementPosition);
-    } else {
-      this.positionOnBottom(elementPosition);
-    }
-  }
-}

src/core/position.js

@@ -1,32 +0,0 @@
-/**
- * Responsible for validating positions and is used
- * when manipulating positions across the application
- */
-export default class Position {
-  /**
-   * @param {number} left
-   * @param {number} top
-   * @param {number} right
-   * @param {number} bottom
-   */
-  constructor({
-    left = 0,
-    top = 0,
-    right = 0,
-    bottom = 0,
-  } = {}) {
-    this.left = left;
-    this.right = right;
-    this.top = top;
-    this.bottom = bottom;
-  }
-
-  /**
-   * Checks if the position is valid to be highlighted
-   * @returns {boolean}
-   * @public
-   */
-  canHighlight() {
-    return this.left < this.right && this.top < this.bottom;
-  }
-}

src/core/stage.js

@@ -1,92 +0,0 @@
-import { CLASS_STAGE_NO_ANIMATION, ID_STAGE, STAGE_HTML } from '../common/constants';
-import { createNodeFromString } from '../common/utils';
-import Element from './element';
-
-/**
- * Stage behind the highlighted element to give it a little
- * highlight from rest of the page
- */
-export default class Stage extends Element {
-  /**
-   * @param {Object} options
-   * @param {Window} window
-   * @param {Document} document
-   */
-  constructor(options, window, document) {
-    super();
-
-    this.options = options;
-    this.window = window;
-    this.document = document;
-  }
-
-  /**
-   * Prepares the DOM element if not already there
-   * @private
-   */
-  attachNode() {
-    let stage = this.document.getElementById(ID_STAGE);
-    if (!stage) {
-      stage = createNodeFromString(STAGE_HTML);
-      document.body.appendChild(stage);
-    }
-
-    this.node = stage;
-
-    if (!this.options.animate) {
-      this.node.classList.add(CLASS_STAGE_NO_ANIMATION);
-    } else {
-      this.node.classList.remove(CLASS_STAGE_NO_ANIMATION);
-    }
-  }
-
-  /**
-   * Simply hides the stage
-   * @public
-   */
-  hide() {
-    if (!this.node || !this.node.parentElement) {
-      return;
-    }
-
-    this.node.parentElement.removeChild(this.node);
-  }
-
-  /**
-   * Makes it visible and sets the default properties
-   * @private
-   */
-  setInitialStyle() {
-    this.node.style.display = 'block';
-    this.node.style.left = '0';
-    this.node.style.top = '0';
-    this.node.style.bottom = '';
-    this.node.style.right = '';
-  }
-
-  /**
-   * Shows the stage at provided position
-   * @param {Position} position
-   * @public
-   */
-  show(position) {
-    this.attachNode();
-
-    this.setInitialStyle();
-
-    // Make it two times the padding because, half will be given on left and half on right
-    const requiredPadding = this.options.padding * 2;
-
-    const width = (position.right - position.left) + (requiredPadding);
-    const height = (position.bottom - position.top) + (requiredPadding);
-
-    // Show the stage
-    this.node.style.display = 'block';
-    this.node.style.position = 'absolute';
-    this.node.style.width = `${width}px`;
-    this.node.style.height = `${height}px`;
-    this.node.style.top = `${position.top - (requiredPadding / 2)}px`;
-    this.node.style.left = `${position.left - (requiredPadding / 2)}px`;
-    this.node.style.backgroundColor = this.options.stageBackground;
-  }
-}

src/driver.scss

@@ -1,234 +0,0 @@
-$text-color: #2d2d2d !default;
-$popover-bg: #ffffff !default;
-$stage-bg: #ffffff !default;
-$button-bg: #f1f1f1 !default;
-$disabled-btn-color: #808080 !default;
-
-$popover-z-index: 1000000000 !default;
-$overlay-z-index: 100002 !default;
-$stage-z-index: 100003 !default;
-$highlighted-element-z-index: 100004 !default;
-
-// Note: If you update this duration, make sure to
-// update `ANIMATION_DURATION_MS` constant
-$animation-ms: 300 !default;
-$animation-sec: ($animation-ms / 1000) * 1s !default;
-
-div#driver-popover-item {
-  display: none;
-  position: absolute;
-  background: $popover-bg;
-  color: $text-color;
-  margin: 0;
-  padding: 15px;
-  border-radius: 5px;
-  min-width: 250px;
-  max-width: 300px;
-  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
-  z-index: $popover-z-index;
-
-  .driver-popover-tip {
-    border: 5px solid $popover-bg;
-    content: '';
-    position: absolute;
-
-    &.bottom {
-      bottom: -10px;
-      border-top-color: $popover-bg;
-      border-right-color: transparent;
-      border-bottom-color: transparent;
-      border-left-color: transparent;
-
-      &.position-center {
-        left: 49%;
-      }
-
-      &.position-right {
-        right: 20px;
-      }
-    }
-
-    &.left {
-      left: -10px;
-      top: 10px;
-      border-top-color: transparent;
-      border-right-color: $popover-bg;
-      border-bottom-color: transparent;
-      border-left-color: transparent;
-
-      &.position-center {
-        top: 46%;
-      }
-
-      &.position-bottom {
-        top: auto;
-        bottom: 20px;
-      }
-    }
-
-    &.right {
-      right: -10px;
-      top: 10px;
-      border-top-color: transparent;
-      border-right-color: transparent;
-      border-bottom-color: transparent;
-      border-left-color: $popover-bg;
-
-      &.position-center {
-        top: 46%;
-      }
-
-      &.position-bottom {
-        top: auto;
-        bottom: 20px;
-      }
-    }
-
-    &.top {
-      top: -10px;
-      border-top-color: transparent;
-      border-right-color: transparent;
-      border-bottom-color: $popover-bg;
-      border-left-color: transparent;
-
-      &.position-center {
-        left: 49%;
-      }
-
-      &.position-right {
-        right: 20px;
-      }
-    }
-
-    &.mid-center {
-      display: none;
-    }
-  }
-
-  .driver-popover-footer {
-    display: block;
-    margin-top: 10px;
-
-    button {
-      display: inline-block;
-      padding: 3px 10px;
-      border: 1px solid #d4d4d4;
-      text-decoration: none;
-      text-shadow: 1px 1px 0 #fff;
-      color: $text-color;
-      font: 11px/normal sans-serif;
-      cursor: pointer;
-      outline: 0;
-      background-color: $button-bg;
-      border-radius: 2px;
-      zoom: 1;
-      line-height: 1.3;
-    }
-
-    button.driver-disabled {
-      color: $disabled-btn-color;
-      cursor: default;
-      pointer-events: none;
-    }
-
-    .driver-close-btn {
-      float: left;
-    }
-
-    .driver-close-only-btn {
-      float: right;
-    }
-
-    .driver-btn-group {
-      float: right;
-    }
-  }
-
-  .driver-popover-title {
-    font: 19px/normal sans-serif;
-    margin: 0 0 5px;
-    font-weight: bold;
-    display: block;
-    position: relative;
-    line-height: 1.5;
-    zoom: 1;
-  }
-
-  .driver-popover-description {
-    margin-bottom: 0;
-    font: 14px/normal sans-serif;
-    line-height: 1.5;
-    color: $text-color;
-    font-weight: normal;
-    zoom: 1;
-  }
-}
-
-.driver-clearfix:before {
-  content: "";
-  display: table;
-}
-
-.driver-clearfix:after {
-  clear: both;
-  content: "";
-  display: table;
-}
-
-.driver-stage-no-animation {
-  transition: none !important;
-
-  background: transparent !important;
-  outline: 5000px solid rgba(0, 0, 0, 0.75);
-}
-
-div#driver-page-overlay {
-  background: #000000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  zoom: 1;
-  filter: alpha(opacity=75);
-  opacity: 0.75;
-  z-index: $overlay-z-index !important;
-
-  transition: all $animation-sec;
-}
-
-div#driver-highlighted-element-stage {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 50px;
-  width: 300px;
-  background: $stage-bg;
-  z-index: $stage-z-index !important;
-  display: none;
-  border-radius: 2px;
-
-  transition: all $animation-sec;
-}
-
-.driver-highlighted-element {
-  z-index: $highlighted-element-z-index !important;
-}
-
-.driver-position-relative {
-  position: relative !important;
-}
-
-.driver-fix-stacking {
-  z-index: auto !important;
-  opacity: 1.0 !important;
-  transform: none !important;
-  filter: none !important;
-  perspective: none !important;
-  transform-style: flat !important;
-  transform-box: border-box !important;
-  will-change: unset !important;
-}

src/driver.ts

@@ -0,0 +1,37 @@
+import { initEvents, destroyEvents } from "./events";
+import { destroyHighlight, highlight } from "./highlight";
+import { destroyStage } from "./stage";
+
+export type DriveStep = {
+  element?: string | Element;
+  popover: {
+    title: string;
+    description: string;
+    position: "top" | "bottom" | "left" | "right";
+  };
+};
+
+export function driver() {
+  function init() {
+    document.body.classList.add("driver-active");
+
+    initEvents();
+  }
+
+  function destroy() {
+    document.body.classList.remove("driver-active");
+
+    destroyEvents();
+    destroyHighlight();
+    destroyStage();
+  }
+
+  return {
+    drive: (steps: DriveStep[]) => console.log(steps),
+    highlight: (step: DriveStep) => {
+      init();
+      highlight(step);
+    },
+    destroy,
+  };
+}

src/events.ts

@@ -0,0 +1,19 @@
+import { refreshActiveHighlight } from "./highlight";
+
+let resizeTimeout: number;
+
+function onResize() {
+  if (resizeTimeout) {
+    window.cancelAnimationFrame(resizeTimeout);
+  }
+
+  resizeTimeout = window.requestAnimationFrame(refreshActiveHighlight);
+}
+
+export function initEvents() {
+  window.addEventListener("resize", onResize);
+}
+
+export function destroyEvents() {
+  window.removeEventListener("resize", onResize);
+}

src/highlight.ts

@@ -0,0 +1,73 @@
+import { DriveStep } from "./driver";
+import { refreshStage, trackActiveElement, transitionStage } from "./stage";
+
+let previousHighlight: Element | undefined;
+let activeHighlight: Element | undefined;
+let isTransitioning = false;
+
+export function highlight(step: DriveStep) {
+  const { element } = step;
+  const elemObj =
+    typeof element === "string" ? document.querySelector(element) : element;
+
+  if (!elemObj) {
+    return;
+  }
+
+  previousHighlight = activeHighlight;
+  activeHighlight = elemObj;
+
+  transferHighlight(previousHighlight || elemObj, elemObj);
+}
+
+export function refreshActiveHighlight() {
+  if (!activeHighlight) {
+    return;
+  }
+
+  trackActiveElement(activeHighlight);
+  refreshStage();
+}
+
+function transferHighlight(from: Element, to: Element) {
+  const duration = 400;
+  const start = Date.now();
+  isTransitioning = true;
+
+  const animate = () => {
+    if (!isTransitioning) {
+      return;
+    }
+
+    const elapsed = Date.now() - start;
+
+    if (elapsed < duration) {
+      transitionStage(elapsed, duration, from, to);
+    } else {
+      trackActiveElement(to);
+
+      isTransitioning = false;
+    }
+
+    refreshStage();
+    window.requestAnimationFrame(animate);
+  };
+
+  window.requestAnimationFrame(animate);
+
+  from.classList.remove("driver-active-element");
+  to.classList.add("driver-active-element");
+
+  isTransitioning = true;
+}
+
+export function destroyHighlight() {
+  activeHighlight = undefined;
+  isTransitioning = false;
+  previousHighlight = undefined;
+  activeHighlight = undefined;
+
+  document.querySelectorAll(".driver-active-element").forEach(element => {
+    element.classList.remove("driver-active-element");
+  });
+}

src/index.js

@@ -1,458 +0,0 @@
-import Overlay from './core/overlay';
-import Element from './core/element';
-import Popover from './core/popover';
-import {
-  CLASS_CLOSE_BTN,
-  CLASS_NEXT_STEP_BTN,
-  CLASS_PREV_STEP_BTN,
-  ESC_KEY_CODE,
-  ID_POPOVER,
-  LEFT_KEY_CODE,
-  OVERLAY_OPACITY,
-  OVERLAY_PADDING,
-  RIGHT_KEY_CODE,
-  SHOULD_ANIMATE_OVERLAY,
-  SHOULD_OUTSIDE_CLICK_CLOSE,
-  SHOULD_OUTSIDE_CLICK_NEXT,
-  ALLOW_KEYBOARD_CONTROL,
-} from './common/constants';
-import Stage from './core/stage';
-import { isDomElement } from './common/utils';
-
-/**
- * Plugin class that drives the plugin
- */
-export default class Driver {
-  /**
-   * @param {Object} options
-   */
-  constructor(options = {}) {
-    this.options = {
-      animate: SHOULD_ANIMATE_OVERLAY, // Whether to animate or not
-      opacity: OVERLAY_OPACITY,    // Overlay opacity
-      padding: OVERLAY_PADDING,    // Spacing around the element from the overlay
-      scrollIntoViewOptions: null, // Options to be passed to `scrollIntoView`
-      allowClose: SHOULD_OUTSIDE_CLICK_CLOSE,      // Whether to close overlay on click outside the element
-      keyboardControl: ALLOW_KEYBOARD_CONTROL,     // Whether to allow controlling through keyboard or not
-      overlayClickNext: SHOULD_OUTSIDE_CLICK_NEXT, // Whether to move next on click outside the element
-      stageBackground: '#ffffff',       // Background color for the stage
-      onHighlightStarted: () => null,   // When element is about to be highlighted
-      onHighlighted: () => null,        // When element has been highlighted
-      onDeselected: () => null,         // When the element has been deselected
-      onReset: () => null,              // When overlay is about to be cleared
-      onNext: () => null,               // When next button is clicked
-      onPrevious: () => null,           // When previous button is clicked
-      ...options,
-    };
-
-    this.document = document;
-    this.window = window;
-    this.isActivated = false;
-    this.steps = [];                    // steps to be presented if any
-    this.currentStep = 0;               // index for the currently highlighted step
-    this.currentMovePrevented = false;  // If the current move was prevented
-
-    this.overlay = new Overlay(this.options, window, document);
-
-    this.onResize = this.onResize.bind(this);
-    this.onKeyUp = this.onKeyUp.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.moveNext = this.moveNext.bind(this);
-    this.movePrevious = this.movePrevious.bind(this);
-    this.preventMove = this.preventMove.bind(this);
-
-    // Event bindings
-    this.bind();
-  }
-
-  /**
-   * Getter for steps property
-   * @readonly
-   * @public
-   */
-  getSteps() {
-    return this.steps;
-  }
-
-  /**
-   * Setter for steps property
-   * @param steps
-   * @public
-   */
-  setSteps(steps) {
-    this.steps = steps;
-  }
-
-  /**
-   * Binds any DOM events listeners
-   * @todo: add throttling in all the listeners
-   * @private
-   */
-  bind() {
-    this.window.addEventListener('resize', this.onResize, false);
-    this.window.addEventListener('keyup', this.onKeyUp, false);
-
-    // Binding both touch and click results in popup getting shown and then immediately get hidden.
-    // Adding the check to not bind the click event if the touch is supported i.e. on mobile devices
-    // Issue: https://github.com/kamranahmedse/driver.js/issues/150
-    if (!('ontouchstart' in document.documentElement)) {
-      this.window.addEventListener('click', this.onClick, false);
-    } else {
-      this.window.addEventListener('touchstart', this.onClick, false);
-    }
-  }
-
-  /**
-   * Removes the popover if clicked outside the highlighted element
-   * or outside the
-   * @param e
-   * @private
-   */
-  onClick(e) {
-    if (!this.isActivated || !this.hasHighlightedElement()) {
-      return;
-    }
-
-    // Stop the event propagation on click/tap. `onClick` handles
-    // both touch and click events – which on some browsers causes
-    // the click to close the tour
-    e.stopPropagation();
-
-    const highlightedElement = this.overlay.getHighlightedElement();
-    const popover = this.document.getElementById(ID_POPOVER);
-
-    const clickedHighlightedElement = highlightedElement.node.contains(e.target);
-    const clickedPopover = popover && popover.contains(e.target);
-
-    // Perform the 'Next' operation when clicked outside the highlighted element
-    if (!clickedHighlightedElement && !clickedPopover && this.options.overlayClickNext) {
-      this.handleNext();
-      return;
-    }
-
-    // Remove the overlay If clicked outside the highlighted element
-    if (!clickedHighlightedElement && !clickedPopover && this.options.allowClose) {
-      this.reset();
-      return;
-    }
-
-    const nextClicked = e.target.classList.contains(CLASS_NEXT_STEP_BTN);
-    const prevClicked = e.target.classList.contains(CLASS_PREV_STEP_BTN);
-    const closeClicked = e.target.classList.contains(CLASS_CLOSE_BTN);
-
-    if (closeClicked) {
-      this.reset();
-      return;
-    }
-
-    if (nextClicked) {
-      this.handleNext();
-    } else if (prevClicked) {
-      this.handlePrevious();
-    }
-  }
-
-  /**
-   * Handler for the onResize DOM event
-   * Makes sure highlighted element stays at valid position
-   * @private
-   */
-  onResize() {
-    if (!this.isActivated) {
-      return;
-    }
-
-    this.refresh();
-  }
-
-  /**
-   * Refreshes and repositions the popover and the overlay
-   */
-  refresh() {
-    this.overlay.refresh();
-  }
-
-  /**
-   * Clears the overlay on escape key process
-   * @param event
-   * @private
-   */
-  onKeyUp(event) {
-    // If driver is not active or keyboard control is disabled
-    if (!this.isActivated || !this.options.keyboardControl) {
-      return;
-    }
-
-    // If escape was pressed and it is allowed to click outside to close
-    if (event.keyCode === ESC_KEY_CODE && this.options.allowClose) {
-      this.reset();
-      return;
-    }
-
-    // If there is no highlighted element or there is a highlighted element
-    // without popover or if the popover does not allow buttons - ignore
-    const highlightedElement = this.getHighlightedElement();
-    if (!highlightedElement || !highlightedElement.popover) {
-      return;
-    }
-
-    if (event.keyCode === RIGHT_KEY_CODE) {
-      this.handleNext();
-    } else if (event.keyCode === LEFT_KEY_CODE) {
-      this.handlePrevious();
-    }
-  }
-
-  /**
-   * Moves to the previous step if possible
-   * otherwise resets the overlay
-   * @public
-   */
-  movePrevious() {
-    const previousStep = this.steps[this.currentStep - 1];
-    if (!previousStep) {
-      this.reset();
-      return;
-    }
-
-    this.overlay.highlight(previousStep);
-    this.currentStep -= 1;
-  }
-
-  /**
-   * Prevents the current move. Useful in `onNext` if you want to
-   * perform some asynchronous task and manually move to next step
-   * @public
-   */
-  preventMove() {
-    this.currentMovePrevented = true;
-  }
-
-  /**
-   * Handles the internal "move to next" event
-   * @private
-   */
-  handleNext() {
-    this.currentMovePrevented = false;
-
-    // Call the bound `onNext` handler if available
-    const currentStep = this.steps[this.currentStep];
-    if (currentStep && currentStep.options && currentStep.options.onNext) {
-      currentStep.options.onNext(this.overlay.highlightedElement);
-    }
-
-    if (this.currentMovePrevented) {
-      return;
-    }
-
-    this.moveNext();
-  }
-
-  /**
-   * Handles the internal "move to previous" event
-   * @private
-   */
-  handlePrevious() {
-    this.currentMovePrevented = false;
-
-    // Call the bound `onPrevious` handler if available
-    const currentStep = this.steps[this.currentStep];
-    if (currentStep && currentStep.options && currentStep.options.onPrevious) {
-      currentStep.options.onPrevious(this.overlay.highlightedElement);
-    }
-
-    if (this.currentMovePrevented) {
-      return;
-    }
-
-    this.movePrevious();
-  }
-
-  /**
-   * Moves to the next step if possible
-   * otherwise resets the overlay
-   * @public
-   */
-  moveNext() {
-    const nextStep = this.steps[this.currentStep + 1];
-    if (!nextStep) {
-      this.reset();
-      return;
-    }
-
-    this.overlay.highlight(nextStep);
-    this.currentStep += 1;
-  }
-
-  /**
-   * @returns {boolean}
-   * @public
-   */
-  hasNextStep() {
-    return !!this.steps[this.currentStep + 1];
-  }
-
-  /**
-   * @returns {boolean}
-   * @public
-   */
-  hasPreviousStep() {
-    return !!this.steps[this.currentStep - 1];
-  }
-
-  /**
-   * Resets the steps if any and clears the overlay
-   * @param {boolean} immediate
-   * @public
-   */
-  reset(immediate = false) {
-    this.currentStep = 0;
-    this.isActivated = false;
-    this.overlay.clear(immediate);
-  }
-
-  /**
-   * Checks if there is any highlighted element or not
-   * @returns {boolean}
-   * @public
-   */
-  hasHighlightedElement() {
-    const highlightedElement = this.overlay.getHighlightedElement();
-    return highlightedElement && highlightedElement.node;
-  }
-
-  /**
-   * Gets the currently highlighted element in overlay
-   * @returns {Element}
-   * @public
-   */
-  getHighlightedElement() {
-    return this.overlay.getHighlightedElement();
-  }
-
-  /**
-   * Gets the element that was highlighted before currently highlighted element
-   * @returns {Element}
-   * @public
-   */
-  getLastHighlightedElement() {
-    return this.overlay.getLastHighlightedElement();
-  }
-
-  /**
-   * Defines steps to be highlighted
-   * @param {array} steps
-   * @public
-   */
-  defineSteps(steps) {
-    this.steps = [];
-
-    for (let counter = 0; counter < steps.length; counter++) {
-      const element = this.prepareElementFromStep(steps[counter], steps, counter);
-      if (!element) {
-        continue;
-      }
-
-      this.steps.push(element);
-    }
-  }
-
-  /**
-   * Prepares the step received from the user and returns an instance
-   * of Element
-   *
-   * @param currentStep Step that is being prepared
-   * @param allSteps  List of all the steps
-   * @param index Index of the current step
-   * @returns {null|Element}
-   * @private
-   */
-  prepareElementFromStep(currentStep, allSteps = [], index = 0) {
-    let elementOptions = { ...this.options };
-    let querySelector = currentStep;
-
-    // If the `currentStep` is step definition
-    // then grab the options and element from the definition
-    const isStepDefinition = typeof currentStep !== 'string' && !isDomElement(currentStep);
-
-    if (!currentStep || (isStepDefinition && !currentStep.element)) {
-      throw new Error(`Element is required in step ${index}`);
-    }
-
-    if (isStepDefinition) {
-      querySelector = currentStep.element;
-      elementOptions = { ...this.options, ...currentStep };
-    }
-
-    // If the given element is a query selector or a DOM element?
-    const domElement = isDomElement(querySelector) ? querySelector : this.document.querySelector(querySelector);
-    if (!domElement) {
-      console.warn(`Element to highlight ${querySelector} not found`);
-      return null;
-    }
-
-    let popover = null;
-    if (elementOptions.popover && elementOptions.popover.title) {
-      const mergedClassNames = [
-        this.options.className,
-        elementOptions.popover.className,
-      ].filter(c => c).join(' ');
-
-      const popoverOptions = {
-        ...elementOptions,
-        ...elementOptions.popover,
-        className: mergedClassNames,
-        totalCount: allSteps.length,
-        currentIndex: index,
-        isFirst: index === 0,
-        isLast: allSteps.length === 0 || index === allSteps.length - 1, // Only one item or last item
-      };
-
-      popover = new Popover(popoverOptions, this.window, this.document);
-    }
-
-    const stageOptions = { ...elementOptions };
-    const stage = new Stage(stageOptions, this.window, this.document);
-
-    return new Element({
-      node: domElement,
-      options: elementOptions,
-      popover,
-      stage,
-      overlay: this.overlay,
-      window: this.window,
-      document: this.document,
-    });
-  }
-
-  /**
-   * Initiates highlighting steps from first step
-   * @param {number} index at which highlight is to be started
-   * @public
-   */
-  start(index = 0) {
-    if (!this.steps || this.steps.length === 0) {
-      throw new Error('There are no steps defined to iterate');
-    }
-
-    this.isActivated = true;
-    this.currentStep = index;
-    this.overlay.highlight(this.steps[index]);
-  }
-
-  /**
-   * Highlights the given element
-   * @param {string|{element: string, popover: {}}} selector Query selector or a step definition
-   * @public
-   */
-  highlight(selector) {
-    this.isActivated = true;
-
-    const element = this.prepareElementFromStep(selector);
-    if (!element) {
-      return;
-    }
-
-    this.overlay.highlight(element);
-  }
-}

src/math.ts

@@ -0,0 +1,11 @@
+export function easeInOutQuad(
+  elapsed: number,
+  initialValue: number,
+  amountOfChange: number,
+  duration: number
+): number {
+  if ((elapsed /= duration / 2) < 1) {
+    return (amountOfChange / 2) * elapsed * elapsed + initialValue;
+  }
+  return (-amountOfChange / 2) * (--elapsed * (elapsed - 2) - 1) + initialValue;
+}

src/stage.ts

@@ -0,0 +1,187 @@
+import { easeInOutQuad } from "./math";
+
+export type StageDefinition = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+let activeStagePosition: StageDefinition | undefined;
+let stageSvg: SVGSVGElement | undefined;
+
+// This method calculates the animated new position of the
+// stage (called for each frame by requestAnimationFrame)
+export function transitionStage(
+  elapsed: number,
+  duration: number,
+  from: Element,
+  to: Element
+) {
+  const fromDefinition = activeStagePosition
+    ? activeStagePosition
+    : from.getBoundingClientRect();
+
+  const toDefinition = to.getBoundingClientRect();
+
+  const x = easeInOutQuad(
+    elapsed,
+    fromDefinition.x,
+    toDefinition.x - fromDefinition.x,
+    duration
+  );
+
+  const y = easeInOutQuad(
+    elapsed,
+    fromDefinition.y,
+    toDefinition.y - fromDefinition.y,
+    duration
+  );
+
+  const width = easeInOutQuad(
+    elapsed,
+    fromDefinition.width,
+    toDefinition.width - fromDefinition.width,
+    duration
+  );
+
+  const height = easeInOutQuad(
+    elapsed,
+    fromDefinition.height,
+    toDefinition.height - fromDefinition.height,
+    duration
+  );
+
+  activeStagePosition = {
+    x,
+    y,
+    width,
+    height,
+  };
+
+  renderStage(activeStagePosition);
+}
+
+export function trackActiveElement(element: Element) {
+  if (!element) {
+    return;
+  }
+
+  const definition = element.getBoundingClientRect();
+
+  activeStagePosition = {
+    x: definition.x,
+    y: definition.y,
+    width: definition.width,
+    height: definition.height,
+  };
+
+  renderStage(activeStagePosition);
+}
+
+export function refreshStage() {
+  if (!activeStagePosition) {
+    return;
+  }
+
+  if (!stageSvg) {
+    console.warn("No stage svg found.");
+    return;
+  }
+
+  const windowX = window.innerWidth;
+  const windowY = window.innerHeight;
+
+  stageSvg.setAttribute("viewBox", `0 0 ${windowX} ${windowY}`);
+}
+
+function renderStage(stagePosition: StageDefinition) {
+  if (!stageSvg) {
+    stageSvg = createStageSvg(stagePosition);
+    document.body.appendChild(stageSvg);
+
+    return;
+  }
+
+  const pathElement = stageSvg.firstElementChild as SVGPathElement | null;
+  if (pathElement?.tagName !== "path") {
+    throw new Error("no path element found in stage svg");
+  }
+
+  pathElement.setAttribute("d", generateSvgCutoutPathString(stagePosition));
+}
+
+function createStageSvg(stage: StageDefinition): SVGSVGElement {
+  const windowX = window.innerWidth;
+  const windowY = window.innerHeight;
+
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.classList.add("driver-stage", "driver-stage-animated");
+
+  svg.setAttribute("viewBox", `0 0 ${windowX} ${windowY}`);
+  svg.setAttribute("xmlSpace", "preserve");
+  svg.setAttribute("xmlnsXlink", "http://www.w3.org/1999/xlink");
+  svg.setAttribute("version", "1.1");
+  svg.setAttribute("preserveAspectRatio", "xMinYMin slice");
+
+  svg.style.fillRule = "evenodd";
+  svg.style.clipRule = "evenodd";
+  svg.style.strokeLinejoin = "round";
+  svg.style.strokeMiterlimit = "2";
+  svg.style.zIndex = "10000";
+  svg.style.position = "fixed";
+  svg.style.top = "0";
+  svg.style.left = "0";
+  svg.style.width = "100%";
+  svg.style.height = "100%";
+
+  const cutoutPath = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "path"
+  );
+
+  cutoutPath.setAttribute("d", generateSvgCutoutPathString(stage));
+
+  cutoutPath.style.fill = "rgb(0,0,0)";
+  cutoutPath.style.opacity = `0.7`;
+  cutoutPath.style.pointerEvents = "auto";
+  cutoutPath.style.cursor = "auto";
+
+  svg.appendChild(cutoutPath);
+
+  return svg;
+}
+
+function generateSvgCutoutPathString(stage: StageDefinition) {
+  const padding = 10;
+  const radius = 5;
+
+  const windowX = window.innerWidth;
+  const windowY = window.innerHeight;
+
+  const stageWidth = stage.width + padding * 2;
+  const stageHeight = stage.height + padding * 2;
+
+  // prevent glitches when stage is too small for radius
+  const limitedRadius = Math.min(radius, stageWidth / 2, stageHeight / 2);
+
+  // no value below 0 allowed + round down
+  const normalizedRadius = Math.floor(Math.max(limitedRadius, 0));
+
+  const highlightBoxX = stage.x - padding + normalizedRadius;
+  const highlightBoxY = stage.y - padding;
+  const highlightBoxWidth = stageWidth - normalizedRadius * 2;
+  const highlightBoxHeight = stageHeight - normalizedRadius * 2;
+
+  return `M${windowX},0L0,0L0,${windowY}L${windowX},${windowY}L${windowX},0Z
+    M${highlightBoxX},${highlightBoxY} h${highlightBoxWidth} a${normalizedRadius},${normalizedRadius} 0 0 1 ${normalizedRadius},${normalizedRadius} v${highlightBoxHeight} a${normalizedRadius},${normalizedRadius} 0 0 1 -${normalizedRadius},${normalizedRadius} h-${highlightBoxWidth} a${normalizedRadius},${normalizedRadius} 0 0 1 -${normalizedRadius},-${normalizedRadius} v-${highlightBoxHeight} a${normalizedRadius},${normalizedRadius} 0 0 1 ${normalizedRadius},-${normalizedRadius} z`;
+}
+
+export function destroyStage() {
+  if (stageSvg) {
+    stageSvg.remove();
+    stageSvg = undefined;
+  }
+
+  activeStagePosition = undefined;
+}

src/style.css

@@ -0,0 +1,13 @@
+.driver-active .driver-stage {
+  pointer-events: none;
+}
+
+.driver-active * {
+  pointer-events: none;
+}
+
+.driver-active .driver-active-element,
+.driver-active .driver-active-element * {
+  pointer-events: auto;
+  cursor: auto;
+}