Allow step element to be a HTMLElement

Author: kamranahmedse

demo/scripts/demo.js

@@ -3,7 +3,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
   const tourSteps = [
     {
-      element: '#driver-demo-head',
+      element: document.getElementById('driver-demo-head'),
       popover: {
         title: 'Before we start',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',

index.html

@@ -292,9 +292,9 @@ <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 for the item to be highlighted
-  popover: {             // There will be no popover if empty or not given
-    title: 'Title',      // Title on the popover
+  element: '#some-item',  // Query selector string or Node to be highlighted
+  popover: {              // There will be no popover if empty or not given
+    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

readme.md

@@ -182,7 +182,7 @@ Here are the set of options that you can pass while defining steps `defineSteps`
 
 ```javascript
 const stepDefinition = {
-  element: '#some-item',        // Query selector for the item to be highlighted
+  element: '#some-item',        // Query selector string or Node to be highlighted
   stageBackground: '#ffffff',   // This will override the one set in driver
   popover: {                    // There will be no popover if empty or not given
     title: 'Title',             // Title on the popover

src/common/utils.js

@@ -47,3 +47,11 @@ export const getStyleProperty = (element, propertyName, prefixVendor = false) =>
   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/index.js

@@ -17,6 +17,7 @@ import {
   SHOULD_OUTSIDE_CLICK_NEXT,
 } from './common/constants';
 import Stage from './core/stage';
+import { isDomElement } from './common/utils';
 
 /**
  * Plugin class that drives the plugin
@@ -248,10 +249,6 @@ export default class Driver {
     this.steps = [];
 
     steps.forEach((step, index) => {
-      if (!step.element || typeof step.element !== 'string') {
-        throw new Error(`Element (query selector string) missing in step ${index}`);
-      }
-
       const element = this.prepareElementFromStep(step, steps, index);
       if (!element) {
         return;
@@ -272,21 +269,26 @@ export default class Driver {
    * @private
    */
   prepareElementFromStep(currentStep, allSteps = [], index = 0) {
-    let querySelector = '';
     let elementOptions = {};
+    let querySelector = currentStep;
 
-    // If it is just a query selector string
-    if (typeof currentStep === 'string') {
-      querySelector = currentStep;
-    } else {
+    // 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,
       };
     }
 
-    const domElement = this.document.querySelector(querySelector);
+    const domElement = isDomElement(querySelector) ? querySelector : this.document.querySelector(querySelector);
     if (!domElement) {
       console.warn(`Element to highlight ${querySelector} not found`);
       return null;

types/index.d.ts

@@ -138,7 +138,7 @@ declare module 'driver.js' {
       /**
        * Query selector representing the DOM Element
        */
-      element: string;
+      element: string | HTMLElement | Node;
 
       /**
        * Color of stage when this step is active