feat: adding hintShowButton option + updating the hint animation

afshinm · afshinm · commit e76c37389061 · 2021-11-06T11:41:52.000Z
diff --git a/src/core/hint.js b/src/core/hint.js
@@ -315,15 +315,16 @@ export function showHintDialog(stepId) {
 
   const tooltipWrapper = createElement("p");
   tooltipWrapper.innerHTML = item.hint;
-
-  const closeButton = createElement("a");
-  closeButton.className = this._options.buttonClass;
-  closeButton.setAttribute("role", "button");
-  closeButton.innerHTML = this._options.hintButtonLabel;
-  closeButton.onclick = hideHint.bind(this, stepId);
-
   tooltipTextLayer.appendChild(tooltipWrapper);
-  tooltipTextLayer.appendChild(closeButton);
+
+  if (this._options.hintShowButton) {
+    const closeButton = createElement("a");
+    closeButton.className = this._options.buttonClass;
+    closeButton.setAttribute("role", "button");
+    closeButton.innerHTML = this._options.hintButtonLabel;
+    closeButton.onclick = hideHint.bind(this, stepId);
+    tooltipTextLayer.appendChild(closeButton);
+  }
 
   arrowLayer.className = "introjs-arrow";
   tooltipLayer.appendChild(arrowLayer);
diff --git a/src/index.js b/src/index.js
@@ -92,6 +92,8 @@ function IntroJs(obj) {
     hintPosition: "top-middle",
     /* Hint button label */
     hintButtonLabel: "Got it",
+    /* Display the "Got it" button? */
+    hintShowButton: true,
     /* Adding animation to hints? */
     hintAnimation: true,
     /* additional classes to put on the buttons */
diff --git a/src/styles/introjs.scss b/src/styles/introjs.scss
@@ -13,35 +13,6 @@ $font_family: "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji",
 $background_color_9: #08c;
 $background_color_10: rgba(136, 136, 136, 0.24);
 
-/*
- Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
- Changed by Afshin Mehrabani
-*/
-/* overrides extra padding on button elements in Firefox */
-
-@keyframes introjspulse {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  25% {
-    transform: scale(0);
-    opacity: 0.1;
-  }
-  50% {
-    transform: scale(0.1);
-    opacity: 0.3;
-  }
-  75% {
-    transform: scale(0.5);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
 .introjs-overlay {
   position: absolute;
   box-sizing: content-box;
@@ -439,7 +410,7 @@ tr.introjs-showElement {
 
   &:hover {
     > .introjs-hint-pulse {
-      border: 5px solid rgba(60, 60, 60, 0.57);
+      background-color: rgba(60, 60, 60, 0.57);
     }
   }
 }
@@ -452,36 +423,50 @@ tr.introjs-showElement {
   position: fixed;
 }
 
+@keyframes introjspulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+  }
+
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
 .introjs-hint-pulse {
   box-sizing: content-box;
-  width: 10px;
-  height: 10px;
-  border: 5px solid rgba(60, 60, 60, 0.27);
+  width: 15px;
+  height: 15px;
   border-radius: 30px;
   background-color: $background_color_10;
   z-index: 10;
   position: absolute;
   transition: all 0.2s ease-out;
+  animation: introjspulse 2s infinite;
 }
 
 .introjs-hint-no-anim {
-  .introjs-hint-dot {
+  .introjs-hint-pulse {
     animation: none;
   }
 }
 
 .introjs-hint-dot {
   box-sizing: content-box;
-  border: 10px solid rgba(146, 146, 146, 0.36);
   background: transparent;
   border-radius: 60px;
   height: 50px;
   width: 50px;
-  animation: introjspulse 3s ease-out;
-  animation-iteration-count: infinite;
   position: absolute;
-  top: -25px;
-  left: -25px;
+  top: -18px;
+  left: -18px;
   z-index: 1;
   opacity: 0;
 }
