From 86da34423edc24fc1c5801348cbfa74da3f26d49 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Mon, 12 Jun 2023 03:00:04 +0100 Subject: [PATCH] Add support for hiding buttons --- index.html | 606 +++++++++++++++++++++++++------------------------ src/config.ts | 2 + src/popover.ts | 15 +- 3 files changed, 329 insertions(+), 294 deletions(-) diff --git a/index.html b/index.html index c9ba2f8..c4dabf7 100644 --- a/index.html +++ b/index.html @@ -1,40 +1,57 @@ - - - - Vite App + + + + Vite App - - - -
-
-

driver.js next

-

Rewritten and enhanced version of driver.js

-
+ + + +
+
+

driver.js next

+

Rewritten and enhanced version of driver.js

+
-
- - - - - - - - - - -
+
+ + + + + + + + + + +
-
    -
  • Written in TypeScript
    • -
  • Lightweight — only 5kb gzipped
    • -
  • No dependencies
    • -
  • MIT Licensed
    • -
+
    +
  • Written in TypeScript
    • +
  • Lightweight — only 5kb gzipped
    • +
  • No dependencies
    • +
  • MIT Licensed
    • +
-

Yet another Tour Library?

-

- No, it is not. Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of - overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with - some component, using it as a focus shifter to bring user's attention to some component on page, or using it to - simulate those "Turn off the Lights" widgets that you might have seen on video players online, etc. -

-

- Driver.js is written in Vanilla JS, has zero dependencies and is highly customizable. It has several options - allowing you to manipulate how it behaves and also provides you the hooks to manipulate the elements as they are - highlighted, about to be highlighted, or deselected. -

+

Yet another Tour Library?

+

+ No, it is not. Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of + overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with + some component, using it as a focus shifter to bring user's attention to some component on page, or using it to + simulate those "Turn off the Lights" widgets that you might have seen on video players online, etc. +

+

+ Driver.js is written in Vanilla JS, has zero dependencies and is highly customizable. It has several options + allowing you to manipulate how it behaves and also provides you the hooks to manipulate the elements as they are + highlighted, about to be highlighted, or deselected. +

-

Installation

-

You can install it using yarn or npm, whatever you prefer.

+

Installation

+

You can install it using yarn or npm, whatever you prefer.

- 
+  
 yarn add driver.js
 npm install driver.js

+  >
 
-      
Or include it using CDN — put the version as driver.js@0.5 in the name

+  
Or include it using CDN — put the version as driver.js@0.5 in the name

 
-      
https://unpkg.com/driver.js/dist/driver.min.js

+  
https://unpkg.com/driver.js/dist/driver.min.js

 
-      
Usage and Demo

+  
Usage and Demo

 
-      

-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in
-        inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae
-        tempore voluptates! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea
-        eligendi id in inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi
-        recusandae tempore voluptates!
-      

-      

-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in
-        inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae
-        tempore voluptates!
-      

-      

-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in
-        inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae
-        tempore voluptates!
-      

-      

-        

-          First -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-        

-          Second -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-        

-          Third -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-        

-          Fourth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-        

-          Fifth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-        

-          Sixth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-        

-          Seventh -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-        

-          Eighth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-        

-          Ninth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod
-          tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam
-          veniam! Doloribus eos id quaerat.
-        

-      

-      

-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in
-        inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae
-        tempore voluptates!
-      

-      

-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in
-        inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae
-        tempore voluptates!
-      

-      

-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in
-        inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae
-        tempore voluptates!
-      

-      

-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in
-        inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae
-        tempore voluptates!
-      

-      

-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in
-        inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae
-        tempore voluptates!
-      

-
- - + document.getElementById("destroy-btn").addEventListener("click", () => { + driver().destroy(); + }); + + diff --git a/src/config.ts b/src/config.ts index 0dd9604..997fdd4 100644 --- a/src/config.ts +++ b/src/config.ts @@ -6,6 +6,7 @@ export type Config = { stagePadding?: number; stageRadius?: number; popoverOffset?: number; + showButtons?: boolean; }; let currentConfig: Config = {}; @@ -19,6 +20,7 @@ export function configure(config: Config = {}) { stagePadding: 10, stageRadius: 5, popoverOffset: 10, + showButtons: true, ...config, }; } diff --git a/src/popover.ts b/src/popover.ts index eb3797f..6a93ac5 100644 --- a/src/popover.ts +++ b/src/popover.ts @@ -11,6 +11,7 @@ export type Popover = { description: string; side?: Side; align?: Alignment; + showButtons?: boolean; }; export type PopoverDOM = { @@ -41,7 +42,7 @@ export function renderPopover(element: Element, step: DriveStep) { document.body.appendChild(popover.wrapper); } - const { title, description } = step.popover || {}; + const { title, description, showButtons = undefined } = step.popover || {}; if (title) { popover.title.innerText = title; @@ -57,6 +58,18 @@ export function renderPopover(element: Element, step: DriveStep) { popover.description.style.display = "none"; } + if (getConfig("showButtons") === true) { + popover.footer.style.display = "flex"; + } else { + popover.footer.style.display = "none"; + } + + if (showButtons === true) { + popover.footer.style.display = "flex"; + } else if (showButtons === false) { + popover.footer.style.display = "none"; + } + // Reset the popover position const popoverWrapper = popover.wrapper; popoverWrapper.style.display = "block";