Merge pull request #18 from williamtroup/1.5.0

1.5.0
williamtroup · Apr 9, 2024 · c9eed4c · c9eed4c
2 parents 2a52492 + 1412f30
commit c9eed4c
Show file tree

Hide file tree

Showing 65 changed files with 392 additions and 203 deletions.
diff --git a/README.md b/README.md
@@ -2,15 +2,15 @@
 Journey.js
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Journey.js%2C%20a%20free%20JavaScript%journey%builder&url=https://github.com/williamtroup/Journey.js&hashtags=javascript,html,journey,guide)
-[![npm](https://img.shields.io/badge/npmjs-v1.4.0-blue)](https://www.npmjs.com/package/jjourney.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.4.0-purple)](https://www.nuget.org/packages/jJourney.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.5.0-blue)](https://www.npmjs.com/package/jjourney.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.5.0-purple)](https://www.nuget.org/packages/jJourney.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Journey.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Journey.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://www.william-troup.com/)
 </h1>
 
 > <p align="center">🚶 A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!</p>
-> <p align="center">v1.4.0</p>
+> <p align="center">v1.5.0</p>
 <br />
 
 ![Journey.js](docs/images/main.png)
@@ -30,6 +30,7 @@ Journey.js
 - Hints support (not included in the main journey).
 - 51 language translations available!
 - Customizable tooltips.
+- Show progress dots, or a progress bar, or both!
 <br />
 <br />
 

diff --git a/README_NUGET.md b/README_NUGET.md
@@ -1,8 +1,8 @@
-# Journey.js v1.4.0
+# Journey.js v1.5.0
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Journey.js%2C%20a%20free%20JavaScript%journey%builder&url=https://github.com/williamtroup/Journey.js&hashtags=javascript,html,journey,guide)
-[![npm](https://img.shields.io/badge/npmjs-v1.4.0-blue)](https://www.npmjs.com/package/jjourney.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.4.0-purple)](https://www.nuget.org/packages/jJourney.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.5.0-blue)](https://www.npmjs.com/package/jjourney.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.5.0-purple)](https://www.nuget.org/packages/jJourney.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Journey.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Journey.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://www.william-troup.com/)
@@ -22,6 +22,7 @@
 - Hints support (not included in the main journey).
 - 51 language translations available!
 - Customizable tooltips.
+- Show progress dots, or a progress bar, or both!
 
 
 ## Where can I find the documentation?

diff --git a/dist/journey.js b/dist/journey.js
@@ -1,7 +1,8 @@
-/*! Journey.js v1.4.0 | (c) Bunoon 2024 | MIT License */
+/*! Journey.js v1.5.0 | (c) Bunoon 2024 | MIT License */
 (function() {
   var _parameter_Document = null, _parameter_Window = null, _parameter_Math = null, _parameter_Json = null, _public = {}, _configuration = {}, _configuration_ShortcutKeysEnabled = true, _enum_KeyCodes = {escape:27, left:37, up:38, right:39, down:40}, _string = {empty:"", space:" "}, _elements_Type = {}, _elements_Attributes_Json = {}, _elements_Attributes_Keys = [], _elements_Attributes_Position = 0, _element_Focus_Element_PositionStyle = null, _element_Disabled_Background = null, _element_Dialog = 
-  null, _element_Dialog_Close_Button = null, _element_Dialog_Title = null, _element_Dialog_Description = null, _element_Dialog_CheckBox_Container = null, _element_Dialog_CheckBox_Input = null, _element_Dialog_ProgressDots = null, _element_Dialog_Buttons = null, _element_Dialog_Back_Button = null, _element_Dialog_Next_Button = null, _element_ToolTip = null, _element_ToolTip_Timer = null, _attribute_Name_Options = "data-journey-js";
+  null, _element_Dialog_Close_Button = null, _element_Dialog_Title = null, _element_Dialog_Description = null, _element_Dialog_CheckBox_Container = null, _element_Dialog_CheckBox_Input = null, _element_Dialog_ProgressDots = null, _element_Dialog_ProgressBar = null, _element_Dialog_ProgressBar_Percentage = null, _element_Dialog_ProgressBar_Percentage_Text = null, _element_Dialog_Buttons = null, _element_Dialog_Back_Button = null, _element_Dialog_Next_Button = null, _element_ToolTip = null, _element_ToolTip_Timer = 
+  null, _attribute_Name_Options = "data-journey-js";
   function renderDisabledBackground() {
     _element_Disabled_Background = createElement("div", "journey-js-disabled-background");
     _element_Disabled_Background.onclick = function() {
@@ -35,6 +36,12 @@
     _element_Dialog_CheckBox_Input = buildCheckBox(_element_Dialog_CheckBox_Container, _configuration.doNotShowAgainText).input;
     _element_Dialog_ProgressDots = createElement("div", "progress-dots");
     _element_Dialog.appendChild(_element_Dialog_ProgressDots);
+    _element_Dialog_ProgressBar = createElement("div", "progress-bar");
+    _element_Dialog.appendChild(_element_Dialog_ProgressBar);
+    _element_Dialog_ProgressBar_Percentage = createElement("div", "progress-bar-percentage");
+    _element_Dialog_ProgressBar.appendChild(_element_Dialog_ProgressBar_Percentage);
+    _element_Dialog_ProgressBar_Percentage_Text = createElement("p", "progress-bar-percentage-text");
+    _element_Dialog_ProgressBar_Percentage.appendChild(_element_Dialog_ProgressBar_Percentage_Text);
     _element_Dialog_Buttons = createElement("div", "buttons");
     _element_Dialog.appendChild(_element_Dialog_Buttons);
     _element_Dialog_Back_Button = createElement("button", "back");
@@ -96,13 +103,18 @@
       _element_Dialog_Close_Button.style.display = _configuration.showCloseButton ? "block" : "none";
       _configuration_ShortcutKeysEnabled = true;
       bindingOptions.currentView.element.className += _string.space + "journey-js-element-focus";
+      if (_configuration.scrollToElements) {
+        bindingOptions.currentView.element.scrollIntoView();
+      }
       var lastPositionStyle = getStyleValueByName(bindingOptions.currentView.element, "position");
       if (lastPositionStyle !== _string.empty && lastPositionStyle.toLowerCase() === "static") {
         _element_Focus_Element_PositionStyle = lastPositionStyle;
         bindingOptions.currentView.element.style.position = "relative";
       }
       showElementBasedOnCondition(_element_Dialog_CheckBox_Container, _configuration.showDoNotShowAgain);
       showElementBasedOnCondition(_element_Dialog_ProgressDots, _configuration.showProgressDots && _elements_Attributes_Keys.length > 1);
+      showElementBasedOnCondition(_element_Dialog_ProgressBar, _configuration.showProgressBar && _elements_Attributes_Keys.length > 1);
+      showElementBasedOnCondition(_element_Dialog_ProgressBar_Percentage_Text, _configuration.showProgressBarText);
       showElementBasedOnCondition(_element_Dialog_Buttons, _configuration.showButtons);
       _element_Dialog_Back_Button.innerHTML = _configuration.backButtonText;
       _element_Dialog_Back_Button.disabled = _elements_Attributes_Position === 0;
@@ -114,6 +126,7 @@
       setDialogText(bindingOptions);
       setDialogPosition(null, bindingOptions);
       buildProcessDots();
+      setProgressBarPosition();
       fireCustomTrigger(bindingOptions.events.onEnter, bindingOptions.currentView.element);
       if (bindingOptions.sendClick) {
         bindingOptions.currentView.element.click();
@@ -208,6 +221,13 @@
       dot.innerHTML = (keyIndex + 1).toString();
     }
   }
+  function setProgressBarPosition() {
+    if (_configuration.showProgressBar) {
+      var pixelsPerStage = _element_Dialog_ProgressDots.offsetWidth / _elements_Attributes_Keys.length, width = (_elements_Attributes_Position + 1) * pixelsPerStage, percentageComplete = _parameter_Math.ceil((_elements_Attributes_Position + 1) / _elements_Attributes_Keys.length * 100);
+      _element_Dialog_ProgressBar_Percentage.style.width = width + "px";
+      _element_Dialog_ProgressBar_Percentage_Text.innerHTML = percentageComplete + "%";
+    }
+  }
   function renderToolTip() {
     if (!isDefined(_element_ToolTip)) {
       _element_ToolTip = createElement("div", "journey-js-tooltip");
@@ -308,10 +328,14 @@
       cancelBubble(e);
       _element_Dialog_CheckBox_Container.style.display = "none";
       _element_Dialog_ProgressDots.style.display = "none";
+      _element_Dialog_ProgressBar.style.display = "none";
       _element_Dialog_Buttons.style.display = "none";
       _configuration_ShortcutKeysEnabled = false;
       setDialogText(bindingOptions);
       setDialogPosition(e, bindingOptions);
+      if (bindingOptions.removeHintWhenViewed) {
+        clearElementsByClassName(bindingOptions.currentView.element, "journey-js-hint");
+      }
     };
   }
   function buildDocumentEvents(addEvents) {
@@ -371,6 +395,7 @@
     options.isHint = getDefaultBoolean(options.isHint, false);
     options.alignHintToClickPosition = getDefaultBoolean(options.alignHintToClickPosition, false);
     options.showDisabledBackground = getDefaultBoolean(options.showDisabledBackground, true);
+    options.removeHintWhenViewed = getDefaultBoolean(options.removeHintWhenViewed, false);
     options = buildAttributeOptionStrings(options);
     return buildAttributeOptionCustomTriggers(options);
   }
@@ -716,6 +741,8 @@
     _configuration.tooltipDelay = getDefaultNumber(_configuration.tooltipDelay, 750);
     _configuration.showProgressDotToolTips = getDefaultBoolean(_configuration.showProgressDotToolTips, true);
     _configuration.closeDialogOnDisabledBackgroundClick = getDefaultBoolean(_configuration.closeDialogOnDisabledBackgroundClick, false);
+    _configuration.showProgressBar = getDefaultBoolean(_configuration.showProgressBar, false);
+    _configuration.scrollToElements = getDefaultBoolean(_configuration.scrollToElements, false);
     buildDefaultConfigurationStrings();
     buildDefaultConfigurationCustomTriggers();
   }
@@ -729,12 +756,13 @@
     _configuration.attributeNotValidErrorText = getDefaultString(_configuration.attributeNotValidErrorText, "The attribute '{{attribute_name}}' is not a valid object.");
     _configuration.attributeNotSetErrorText = getDefaultString(_configuration.attributeNotSetErrorText, "The attribute '{{attribute_name}}' has not been set correctly.");
     _configuration.closeDialogConfirmationText = getDefaultString(_configuration.closeDialogConfirmationText, null);
+    _configuration.showProgressBarText = getDefaultBoolean(_configuration.showProgressBarText, false);
   }
   function buildDefaultConfigurationCustomTriggers() {
     _configuration.onDoNotShowAgainChange = getDefaultFunction(_configuration.onDoNotShowAgainChange, null);
   }
   _public.getVersion = function() {
-    return "1.4.0";
+    return "1.5.0";
   };
   (function(documentObject, windowObject, mathObject, jsonObject) {
     _parameter_Document = documentObject;

diff --git a/dist/journey.js.css b/dist/journey.js.css
@@ -1,5 +1,5 @@
 /*
- * Journey.js Library v1.4.0
+ * Journey.js Library v1.5.0
  *
  * Copyright 2024 Bunoon
  * Released under the MIT License
@@ -89,6 +89,30 @@ div.journey-js-dialog *::before, div.journey-js-dialog *::after {
   box-sizing: border-box;
   line-height: normal;
 }
+div.journey-js-dialog div:first-of-type {
+  padding-right: calc(var(--journey-js-dialog-close-button-size) + var(--journey-js-spacing));
+}
+div.journey-js-dialog div.title {
+  font-size: large;
+  font-weight: var(--journey-js-title-bold-weight);
+  margin-bottom: var(--journey-js-spacing);
+}
+div.journey-js-dialog div.description {
+  font-weight: var(--journey-js-text-bold-weight);
+}
+div.journey-js-dialog div.checkbox-container {
+  margin-top: var(--journey-js-spacing);
+  margin-bottom: var(--journey-js-spacing);
+}
+div.journey-js-dialog div.checkbox-container input {
+  margin-right: var(--journey-js-spacing);
+}
+
+/*
+    -------------------------------------------------------------------------
+    Journey.js - Dialog - Close Button
+    -------------------------------------------------------------------------
+*/
 div.journey-js-dialog button.close {
   position: absolute;
   top: var(--journey-js-spacing);
@@ -130,24 +154,12 @@ div.journey-js-dialog button.close:hover {
 div.journey-js-dialog button.close:hover::before, div.journey-js-dialog button.close:hover::after {
   background: var(--journey-js-dialog-close-button-hover-x-color);
 }
-div.journey-js-dialog div:first-of-type {
-  padding-right: calc(var(--journey-js-dialog-close-button-size) + var(--journey-js-spacing));
-}
-div.journey-js-dialog div.title {
-  font-size: large;
-  font-weight: var(--journey-js-title-bold-weight);
-  margin-bottom: var(--journey-js-spacing);
-}
-div.journey-js-dialog div.description {
-  font-weight: var(--journey-js-text-bold-weight);
-}
-div.journey-js-dialog div.checkbox-container {
-  margin-top: var(--journey-js-spacing);
-  margin-bottom: var(--journey-js-spacing);
-}
-div.journey-js-dialog div.checkbox-container input {
-  margin-right: var(--journey-js-spacing);
-}
+
+/*
+    -------------------------------------------------------------------------
+    Journey.js - Dialog - Progress Dots
+    -------------------------------------------------------------------------
+*/
 div.journey-js-dialog div.progress-dots {
   margin-top: var(--journey-js-spacing);
   margin-bottom: var(--journey-js-spacing);
@@ -193,49 +205,44 @@ div.journey-js-dialog div.progress-dots div.dot-number {
   color: var(--journey-js-color-gray) !important;
 }
 div.journey-js-dialog div.progress-dots div.dot-active {
+  transition: var(--journey-js-transition);
+  transition-property: width;
   border-radius: 10px;
   height: 10px;
   width: 15px;
   background-color: var(--journey-js-dialog-button-border-color);
   border: var(--journey-js-border-size) solid var(--journey-js-dialog-button-border-color);
   color: var(--journey-js-color-white) !important;
 }
-div.journey-js-dialog div.buttons {
-  margin-top: var(--journey-js-spacing);
-  text-align: right;
-}
-div.journey-js-dialog div.buttons button.back,
-div.journey-js-dialog div.buttons button.next {
+
+/*
+    -------------------------------------------------------------------------
+    Journey.js - Dialog - Progress Bar
+    -------------------------------------------------------------------------
+*/
+div.journey-js-dialog div.progress-bar {
   border-radius: var(--journey-js-border-radius);
+  margin-top: var(--journey-js-spacing);
+  margin-bottom: var(--journey-js-spacing);
   background-color: var(--journey-js-dialog-button-background-color);
-  color: var(--journey-js-dialog-button-text-color);
   border: var(--journey-js-border-size) solid var(--journey-js-dialog-button-border-color);
-  min-width: 100px;
-  padding: var(--journey-js-spacing);
-  transition: var(--journey-js-transition);
-  outline: none;
-  margin-left: var(--journey-js-spacing);
-}
-div.journey-js-dialog div.buttons button.back:not([disabled]):active,
-div.journey-js-dialog div.buttons button.next:not([disabled]):active {
-  background-color: var(--journey-js-dialog-button-active-background-color) !important;
-  color: var(--journey-js-dialog-button-active-text-color) !important;
-  border: var(--journey-js-border-size) solid var(--journey-js-dialog-button-active-border-color) !important;
-}
-div.journey-js-dialog div.buttons button.back:not([disabled]):hover,
-div.journey-js-dialog div.buttons button.next:not([disabled]):hover {
-  cursor: pointer;
-  background-color: var(--journey-js-dialog-button-hover-background-color);
-  color: var(--journey-js-dialog-button-hover-text-color);
-  border: var(--journey-js-border-size) solid var(--journey-js-dialog-button-hover-border-color);
+  text-wrap: nowrap;
+  overflow: hidden;
 }
-div.journey-js-dialog div.buttons button.back:disabled,
-div.journey-js-dialog div.buttons button.next:disabled {
-  background-color: var(--journey-js-dialog-button-disabled-background-color) !important;
-  color: var(--journey-js-color-gray);
+div.journey-js-dialog div.progress-bar div.progress-bar-percentage {
+  min-height: 10px;
+  background-color: var(--journey-js-dialog-button-border-color);
+  transition: var(--journey-js-transition);
+  transition-property: width;
+  text-align: center;
+  padding: 0 !important;
+  margin: 0 !important;
 }
-div.journey-js-dialog div.buttons button.next {
-  font-weight: var(--journey-js-title-bold-weight);
+div.journey-js-dialog div.progress-bar div.progress-bar-percentage p.progress-bar-percentage-text {
+  padding: calc(var(--journey-js-spacing) / 2) !important;
+  font-size: smaller;
+  margin: 0 !important;
+  color: var(--journey-js-color-white);
 }
 
 /*
@@ -289,6 +296,49 @@ div.journey-js-dialog label.checkbox span.check-mark::before {
   border-width: 0 2.5px 2.5px 0;
 }
 
+/*
+    -------------------------------------------------------------------------
+    Journey.js - Dialog - Buttons
+    -------------------------------------------------------------------------
+*/
+div.journey-js-dialog div.buttons {
+  margin-top: var(--journey-js-spacing);
+  text-align: right;
+}
+div.journey-js-dialog div.buttons button.back,
+div.journey-js-dialog div.buttons button.next {
+  border-radius: var(--journey-js-border-radius);
+  background-color: var(--journey-js-dialog-button-background-color);
+  color: var(--journey-js-dialog-button-text-color);
+  border: var(--journey-js-border-size) solid var(--journey-js-dialog-button-border-color);
+  min-width: 100px;
+  padding: var(--journey-js-spacing);
+  transition: var(--journey-js-transition);
+  outline: none;
+  margin-left: var(--journey-js-spacing);
+}
+div.journey-js-dialog div.buttons button.back:not([disabled]):active,
+div.journey-js-dialog div.buttons button.next:not([disabled]):active {
+  background-color: var(--journey-js-dialog-button-active-background-color) !important;
+  color: var(--journey-js-dialog-button-active-text-color) !important;
+  border: var(--journey-js-border-size) solid var(--journey-js-dialog-button-active-border-color) !important;
+}
+div.journey-js-dialog div.buttons button.back:not([disabled]):hover,
+div.journey-js-dialog div.buttons button.next:not([disabled]):hover {
+  cursor: pointer;
+  background-color: var(--journey-js-dialog-button-hover-background-color);
+  color: var(--journey-js-dialog-button-hover-text-color);
+  border: var(--journey-js-border-size) solid var(--journey-js-dialog-button-hover-border-color);
+}
+div.journey-js-dialog div.buttons button.back:disabled,
+div.journey-js-dialog div.buttons button.next:disabled {
+  background-color: var(--journey-js-dialog-button-disabled-background-color) !important;
+  color: var(--journey-js-color-gray);
+}
+div.journey-js-dialog div.buttons button.next {
+  font-weight: var(--journey-js-title-bold-weight);
+}
+
 /*
     -------------------------------------------------------------------------
     Journey.js - Hints