From edd7dca2dffd9b2cd1a85a332faa81e180bf0c36 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sun, 11 Jun 2023 02:49:32 +0100 Subject: [PATCH] Refactor stage padding and radius --- index.html | 300 ++-- package.json | 12 +- pnpm-lock.yaml | 3918 +++++----------------------------------------- src/config.ts | 4 + src/highlight.ts | 28 +- src/popover.ts | 11 +- src/stage.ts | 19 +- 7 files changed, 594 insertions(+), 3698 deletions(-) diff --git a/index.html b/index.html index 002fb4b..a109122 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,8 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + 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; @@ -121,7 +121,7 @@ - + @@ -134,19 +134,15 @@

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. + 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. + 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

@@ -157,120 +153,100 @@ 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

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 + 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!

- 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. + 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. + 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. + 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. + 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. + 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. + 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. + 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. + 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. + 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! + 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!