Spaces:

aletrn
/

driver.js

Running

App Files Files Community

kamrify commited on May 11, 2023

Commit

8480986

1 Parent(s): e3d3deb

Add bring-in-view functionality

Browse files

Files changed (5) hide show

index.html +122 -8
src/driver.ts +3 -1
src/events.ts +5 -3
src/highlight.ts +29 -0
src/popover.ts +12 -0

index.html CHANGED Viewed

@@ -19,18 +19,34 @@
         -moz-osx-font-smoothing: grayscale;
       }
       .container {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100vh;
-        max-width: 1200px;
         margin: 0 auto;
       }
       h1 {
-        margin: 40px 0 10px;
         font-size: 48px;
         font-weight: 600;
         text-align: center;
@@ -69,12 +85,23 @@
         display: block;
         cursor: pointer;
       }
     </style>
   </head>
   <body>
     <div class="container">
-      <h1>driver.js <sup>next</sup></h1>
-      <p>Rewritten and enhanced version of driver.js</p>
       <div class="buttons">
         <button id="highlight-btn">Animated Highlight</button>
@@ -93,6 +120,91 @@
         <li>No dependencies</li>
         <li>MIT Licensed</li>
       </ul>
     </div>
     <script type="module">
       import { driver } from "./src/driver.ts";
@@ -104,7 +216,9 @@
       document
         .getElementById("simple-highlight-btn")
         .addEventListener("click", () => {
-          driver({ animate: false }).highlight({ element: "ul" });
         });
       document

         -moz-osx-font-smoothing: grayscale;
       }
+      p {
+        line-height: 1.5;
+        margin-bottom: 15px;
+      }
+      .page-header {
+        text-align: center;
+        margin-bottom: 10px;
+      }
       .container {
         display: flex;
         flex-direction: column;
+        max-width: 500px;
         margin: 0 auto;
+        text-align: left;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin: 30px 0 10px;
       }
       h1 {
         font-size: 48px;
         font-weight: 600;
         text-align: center;
         display: block;
         cursor: pointer;
       }
+      pre {
+        margin-bottom: 20px;
+        border: 1px solid #ccc;
+        background: whitesmoke;
+        border-radius: 5px;
+        padding: 10px;
+        line-height: 1.75;
+      }
     </style>
   </head>
   <body>
     <div class="container">
+      <div class="page-header">
+        <h1>driver.js <sup>next</sup></h1>
+        <p>Rewritten and enhanced version of driver.js</p>
+      </div>
       <div class="buttons">
         <button id="highlight-btn">Animated Highlight</button>
         <li>No dependencies</li>
         <li>MIT Licensed</li>
       </ul>
+      <h2>Yet another Tour Library?</h2>
+      <p>
+        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.
+      </p>
+      <p>
+        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.
+      </p>
+      <h2>Installation</h2>
+      <p>You can install it using yarn or npm, whatever you prefer.</p>
+      <pre>
+yarn add driver.js
+npm install driver.js</pre
+      >
+      <p>
+        Or include it using CDN — put the version as [email protected] in the name
+      </p>
+      <pre>https://unpkg.com/driver.js/dist/driver.min.js</pre>
+      <h2>Usage and Demo</h2>
+      <p id="large-paragraph-text">
+        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!
+      </p>
+      <p>
+        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!
+      </p>
+      <p>
+        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!
+      </p>
+      <p>
+        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!
+      </p>
+      <p>
+        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!
+      </p>
+      <p>
+        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!
+      </p>
+      <p>
+        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!
+      </p>
+      <p>
+        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!
+      </p>
     </div>
     <script type="module">
       import { driver } from "./src/driver.ts";
       document
         .getElementById("simple-highlight-btn")
         .addEventListener("click", () => {
+          driver({ animate: false }).highlight({
+            element: "#large-paragraph-text",
+          });
         });
       document

src/driver.ts CHANGED Viewed

@@ -1,13 +1,15 @@
 import { destroyStage } from "./stage";
 import { destroyEvents, initEvents } from "./events";
 import { Config, configure, getConfig } from "./config";
 import { destroyHighlight, highlight } from "./highlight";
 import "./style.css";
-import { destroyHooks, register } from "./hooks";
 export type DriveStep = {
   element?: string | Element;
 };
 let isInitialized = false;

+import { Popover } from "./popover";
 import { destroyStage } from "./stage";
 import { destroyEvents, initEvents } from "./events";
 import { Config, configure, getConfig } from "./config";
 import { destroyHighlight, highlight } from "./highlight";
+import { destroyHooks, register } from "./hooks";
 import "./style.css";
 export type DriveStep = {
   element?: string | Element;
+  popover?: Popover;
 };
 let isInitialized = false;

src/events.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { refreshActiveHighlight } from "./highlight";
 let resizeTimeout: number;
-function onResize() {
   if (resizeTimeout) {
     window.cancelAnimationFrame(resizeTimeout);
   }
@@ -64,9 +64,11 @@ export function onDriverClick(
 }
 export function initEvents() {
-  window.addEventListener("resize", onResize);
 }
 export function destroyEvents() {
-  window.removeEventListener("resize", onResize);
 }

 let resizeTimeout: number;
+function requireRefresh() {
   if (resizeTimeout) {
     window.cancelAnimationFrame(resizeTimeout);
   }
 }
 export function initEvents() {
+  window.addEventListener("resize", requireRefresh);
+  window.addEventListener("scroll", requireRefresh);
 }
 export function destroyEvents() {
+  window.removeEventListener("resize", requireRefresh);
+  window.removeEventListener("scroll", requireRefresh);
 }

src/highlight.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { DriveStep } from "./driver";
 import { refreshStage, trackActiveElement, transitionStage } from "./stage";
 import { getConfig } from "./config";
 let previousHighlight: Element | undefined;
 let activeHighlight: Element | undefined;
@@ -47,11 +48,15 @@ function transferHighlight(from: Element, to: Element) {
     if (getConfig("animate") && elapsed < duration) {
       transitionStage(elapsed, duration, from, to);
     } else {
       trackActiveElement(to);
       currentTransitionCallback = undefined;
     }
     refreshStage();
     window.requestAnimationFrame(animate);
   };
@@ -62,6 +67,30 @@ function transferHighlight(from: Element, to: Element) {
   to.classList.add("driver-active-element");
 }
 export function destroyHighlight() {
   activeHighlight = undefined;
   currentTransitionCallback = undefined;

 import { DriveStep } from "./driver";
 import { refreshStage, trackActiveElement, transitionStage } from "./stage";
 import { getConfig } from "./config";
+import { refreshPopover, renderPopover } from "./popover";
 let previousHighlight: Element | undefined;
 let activeHighlight: Element | undefined;
     if (getConfig("animate") && elapsed < duration) {
       transitionStage(elapsed, duration, from, to);
     } else {
+      bringInView(to);
       trackActiveElement(to);
+      renderPopover(to);
       currentTransitionCallback = undefined;
     }
     refreshStage();
+    refreshPopover();
     window.requestAnimationFrame(animate);
   };
   to.classList.add("driver-active-element");
 }
+function bringInView(element: Element) {
+  if (!element || isElementInView(element)) {
+    return;
+  }
+  element.scrollIntoView({
+    behavior: "smooth",
+    inline: "center",
+    block: "center",
+  });
+}
+function isElementInView(element: Element) {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
 export function destroyHighlight() {
   activeHighlight = undefined;
   currentTransitionCallback = undefined;

src/popover.ts ADDED Viewed

	@@ -0,0 +1,12 @@

+export type Popover = {
+  title?: string;
+  description: string;
+  preferredPosition?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+};
+export function renderPopover(element: Element) {
+  console.log("rendering", element);
+}
+export function refreshPopover() {}