Patches

Author: SoorajSNBlaze333

dist/index.css

@@ -95,6 +95,18 @@
   outline: none;
 }
 
+.tooltip-helper-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tooltip-helper-footer > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .tooltip-helper-next-sequence,
 .tooltip-helper-prev-sequence {
   background-color: rgb(22, 121, 251);

dist/index.js

@@ -9,11 +9,13 @@ const confirmationHTML = `<div id="tooltip-helper-confirmation" class="tooltip-h
   </div>
 </div>`;
 
-const prevButtonHTML = `<button id="tooltip-helper-prev-sequence" class="tooltip-helper-prev-sequence mt-2">Previous</button>`;
-
-const nextButtonHTML = `<button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence mt-2 ml-2">Next</button>`;
-
-const closeButtonHTML = `<button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>`;const offset = 10;
+const footerHTML = `<div class="tooltip-helper-footer mt-2">
+  <button id="tooltip-helper-end-sequence" class="tooltip-helper-end-sequence">Quit</button>
+  <div>
+    <button id="tooltip-helper-prev-sequence" class="tooltip-helper-prev-sequence">Previous</button>
+    <button id="tooltip-helper-next-sequence" class="tooltip-helper-next-sequence ml-2">Next</button>
+  </div>
+</div>`;const offset = 10;
 var sequenceIndex = 0;
 
 const createStage = (sequence, originalSequence) => {
@@ -27,8 +29,8 @@ const createStage = (sequence, originalSequence) => {
   let styles = getComputedStyle(elem);
   let elemBoundaries = elem.getBoundingClientRect();
   let position = {
-    x: elemBoundaries.left,
-    y: elemBoundaries.top + elemBoundaries.height + offset
+    x: elemBoundaries.left < offset ? offset : Math.round(elemBoundaries.left),
+    y: Math.round(elemBoundaries.top + elemBoundaries.height + offset)
   };
 
   let activeElement = getElement("#tooltip-helper-backdrop .tooltip-helper-active");
@@ -37,20 +39,19 @@ const createStage = (sequence, originalSequence) => {
     activeElement.classList.add("tooltip-helper-active");
     backdrop.append(activeElement);
   }
-  activeElement.style.top = elemBoundaries.top + "px";
-  activeElement.style.left = elemBoundaries.left + "px";
+  activeElement.style.top = Math.round(elemBoundaries.top) + "px";
+  activeElement.style.left = Math.round(elemBoundaries.left) + "px";
   activeElement.style.height = elemBoundaries.height + "px";
   activeElement.style.width = elemBoundaries.width + "px";
   activeElement.style.borderRadius = styles.borderRadius;
 
   let descriptionElement = getElement("#tooltip-helper-backdrop .tooltip-helper-active-description");
   if (!descriptionElement) {
     descriptionElement = document.createElement("div");
+    descriptionElement.style.willChange = "transform";
     descriptionElement.classList.add("tooltip-helper-active-description");
-    descriptionElement.innerHTML += closeButtonHTML;
-    descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'>" + description + "</p>";
-    descriptionElement.innerHTML += prevButtonHTML;
-    descriptionElement.innerHTML += nextButtonHTML;
+    descriptionElement.innerHTML += "<p id='tooltip-helper-active-description-text' class='mt-2 mb-2'></p>";
+    descriptionElement.innerHTML += footerHTML;
     backdrop.append(descriptionElement);
   }
   const prevBtn = getElementById("tooltip-helper-prev-sequence");
@@ -68,8 +69,19 @@ const createStage = (sequence, originalSequence) => {
       nextBtn.innerText = "Next";
     }
   }
-  descriptionElement.style.transform = "translateX(" + position.x + "px) translateY(" + position.y + "px)";
   getElementById("tooltip-helper-active-description-text").innerHTML = description;
+  if (descriptionElement.offsetWidth <= window.innerWidth) {
+    descriptionElement.style.width = Math.round(window.innerWidth - (position.x * 2)) + "px";
+  } 
+  if (descriptionElement.offsetWidth + position.x > window.innerWidth) {
+    let offset = Math.round(window.innerWidth - Math.round(elemBoundaries.right));
+    let right =  Math.round(((descriptionElement.offsetWidth + position.x) - window.innerWidth) + offset);
+    position.x -= right;
+  }
+  if (descriptionElement.offsetHeight + position.y > window.innerHeight) {
+    position.y = Math.round((elemBoundaries.top - descriptionElement.offsetHeight) - offset);
+  }
+  descriptionElement.style.transform = "translate3d(" + position.x + "px, " + position.y + "px, 0px)";
 };
 
 const startSequence = (sequence) => {
@@ -82,9 +94,11 @@ const startSequence = (sequence) => {
 
 const endSequence = () => {
   getElement('body').classList.remove('stop-scroll');
-  getElementById("tooltip-helper-backdrop").style.background = "transparent";
   const element = getElementById("tooltip-helper-backdrop");
+  element.removeEventListener('click', function() {});
+  element.style.background = "transparent";
   element.parentNode.removeChild(element);
+  sequenceIndex = 0;
 };
 
 const next = (sequence) => {

dist/index.min.js

@@ -1,3 +1,104 @@
 ---
 title: "Tooltip Sequence"
 ---
+
+# unpkg
+
+In your `base.html` add the unpkg to the head tag
+```html
+<link rel="stylesheet" href="https://unpkg.com/tooltip-sequence@latest/dist/index.css">
+<script src="https://unpkg.com/tooltip-sequence@latest/dist/index.min.js"></script>
+
+<script>
+  const options = {
+    welcomeText: "Let us take you on a quick tour of the page!",
+    confirmText: "Let's start",
+    cancelText: "Maybe later",
+    sequence: [
+      {
+        element: "#brand-name",
+        description: "This is the brand name of the App.",
+      },
+      {
+        element: "#home-nav",
+        description: "Click here to go to Home page",
+      },
+      {
+        element: "#edit-profile",
+        description: "This is the edit profile button",
+      },
+    ],
+  };
+  createSequence(options);
+</script>
+```
+
+# npm
+
+## Installation
+
+Install the package using
+
+```sh
+npm install tooltip-sequence --save
+```
+
+## Usage
+
+```js
+import createSequence from "tooltip-sequence";
+import "tooltip-sequence/dist/index.css";
+
+const options = {
+  welcomeText: "Let us take you on a quick tour of the page!",
+  confirmText: "Let's start",
+  cancelText: "Maybe later",
+  sequence: [
+    {
+      element: "#brand-name",
+      description: "This is the brand name of the App.",
+    },
+    {
+      element: "#home-nav",
+      description: "Click here to go to Home page",
+    },
+    {
+      element: "#edit-profile",
+      description: "This is the edit profile button",
+    },
+  ],
+};
+createSequence(options);
+```
+
+You can add any number of elements to your options using either a class or an id selector.
+
+## Customizing the Tooltips
+
+You can customize any element that is created by overriding the classes.
+
+## Development
+
+You need [Hugo](https://gohugo.io/) to run the dev server. If you have [Homebrew](https://brew.sh/) you can do the following:
+
+```sh
+brew install hugo
+```
+
+Check this [Hugo installation page](https://gohugo.io/getting-started/installing/) for installing on other systems.
+
+Then clone the repo, install dependencies, and start the server locally.
+
+```sh
+git clone https://github.com/SoorajSNBlaze333/tooltip-sequence.git
+cd tooltip-sequence
+npm i
+npm start
+```
+
+Open [`http://localhost:1313`](http://localhost:1313) in your browser.
+
+| Scripts              | Description                          |
+| -------------------- | ------------------------------------ |
+| `npm start`          | Starts a local dev server            |
+| `npm run production` | For generating production docs files |

docs/content/_index.md

@@ -6,13 +6,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <title itemprop="name">{{ .Title }}</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
-    <link rel="stylesheet" href="/main.css" />
-    <script src="/main.js"></script>
-    <!-- <link rel="stylesheet" href="https://unpkg.com/[email protected].0/dist/index.css">
-    <script src="https://unpkg.com/[email protected].0/dist/index.min.js"></script> -->
+    <!-- <link rel="stylesheet" href="/main.css" />
+    <script src="/main.js"></script> -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected].2/dist/index.css">
+    <script src="https://unpkg.com/[email protected].2/dist/index.min.js"></script>
   </head>
-  <body class="bg-white">
-    <main class="container mx-auto my-12 px-3 md:px-1" id="main">
+  <body class="bg-white" style="height: 100vh; width: 100vw; margin: 0; padding: 0">
+    <main class="container-fluid h-100 w-100 p-0 m-0" id="main">
       {{ block "main" . }}{{ end }}
     </main>
   </body>