Merge pull request #3 from williamtroup/0.3.0

0.3.0

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-v0.2.1-blue)](https://www.npmjs.com/package/jjourney.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.2.1-purple)](https://www.nuget.org/packages/jJourney.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jjourney.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.3.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://github.com/williamtroup)
 </h1>
 
 > <p align="center">🚶 A lightweight, and easy-to-use, JavaScript library for building a website walk-through guide!</p>
-> <p align="center">v0.2.1</p>
+> <p align="center">v0.3.0</p>
 <br />
 
 ![Journey.js](docs/images/main.png)
@@ -24,6 +24,7 @@ Journey.js
 - Fully styled in CSS/SASS and compatible with the Bootstrap library.
 - Full CSS theme support (using :root variables, with a default dark-mode theme).
 - Custom triggers for actions (when the dialog is shown for an element, or hidden, etc).
+- Shortcut keys (click [here](docs/SHORTCUT_KEYS.md) to see the full list).
 <br />
 <br />
 

README_NUGET.md

@@ -1,8 +1,8 @@
-# Journey.js v0.2.1
+# Journey.js v0.3.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-v0.2.1-blue)](https://www.npmjs.com/package/jjourney.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.2.1-purple)](https://www.nuget.org/packages/jJourney.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jjourney.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.3.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://github.com/williamtroup)
@@ -17,6 +17,7 @@
 - Fully styled in CSS/SASS and compatible with the Bootstrap library.
 - Full CSS theme support (using :root variables, with a default dark-mode theme).
 - Custom triggers for actions (when the dialog is shown for an element, or hidden, etc).
+- Shortcut keys (click [here](https://github.com/williamtroup/Journey.js/blob/main/docs/SHORTCUT_KEYS.md) to see the full list).
 
 
 ## What browsers are supported?

dist/journey.js

@@ -1,4 +1,4 @@
-/*! Journey.js v0.2.1 | (c) Bunoon | MIT License */
+/*! Journey.js v0.3.0 | (c) Bunoon | MIT License */
 (function() {
   function renderDisabledBackground() {
     _element_Disabled_Background = createElement("div", "journey-js-disabled-background");
@@ -39,12 +39,11 @@
     _element_Dialog.style.display = "none";
   }
   function onDialogPrevious() {
-    removeFocusClassFromLastElement();
-    _elements_Attributes_Position--;
-    if (_elements_Attributes_Position < 0) {
-      _elements_Attributes_Position = _elements_Attributes_Keys.length - 1;
+    if (_elements_Attributes_Position > 0) {
+      removeFocusClassFromLastElement();
+      _elements_Attributes_Position--;
+      showDialogAndSetPosition();
     }
-    showDialogAndSetPosition();
   }
   function onDialogNext() {
     if (_elements_Attributes_Position === _elements_Attributes_Keys.length - 1) {
@@ -141,6 +140,7 @@
           if (isDefinedNumber(bindingOptions.order) && (isDefinedString(bindingOptions.title) || isDefinedString(bindingOptions.description))) {
             _elements_Attributes_Json[bindingOptions.order] = bindingOptions;
             _elements_Attributes_Keys.push(bindingOptions.order);
+            element.removeAttribute(_attribute_Name_Journey);
           }
         } else {
           if (!_configuration.safeMode) {
@@ -157,6 +157,27 @@
     }
     return result;
   }
+  function buildDocumentEvents(addEvents) {
+    addEvents = isDefined(addEvents) ? addEvents : true;
+    var documentFunc = addEvents ? _parameter_Document.addEventListener : _parameter_Document.removeEventListener;
+    if (_configuration.shortcutKeysEnabled) {
+      documentFunc("keydown", onWindowKeyDown);
+    }
+  }
+  function onWindowKeyDown(e) {
+    if (_this.isOpen()) {
+      if (e.keyCode === _enum_KeyCodes.escape) {
+        e.preventDefault();
+        onDialogClose();
+      } else if (e.keyCode === _enum_KeyCodes.left) {
+        e.preventDefault();
+        onDialogPrevious();
+      } else if (e.keyCode === _enum_KeyCodes.right) {
+        e.preventDefault();
+        onDialogNext();
+      }
+    }
+  }
   function buildAttributeOptions(newOptions) {
     var options = !isDefinedObject(newOptions) ? {} : newOptions;
     options.order = getDefaultNumber(options.order, 0);
@@ -312,11 +333,13 @@
     _configuration.nextButtonText = getDefaultString(_configuration.nextButtonText, "Next");
     _configuration.finishButtonText = getDefaultString(_configuration.finishButtonText, "Finish");
     _configuration.showCloseButton = getDefaultBoolean(_configuration.showCloseButton, true);
+    _configuration.shortcutKeysEnabled = getDefaultBoolean(_configuration.shortcutKeysEnabled, true);
   }
   var _this = this;
   var _parameter_Document = null;
   var _parameter_Window = null;
   var _configuration = {};
+  var _enum_KeyCodes = {escape:27, left:37, right:39};
   var _string = {empty:"", space:" "};
   var _elements_Type = {};
   var _elements_Attributes_Json = {};
@@ -356,7 +379,7 @@
     return _elements_Attributes_Position >= _elements_Attributes_Keys.length - 1;
   };
   this.getVersion = function() {
-    return "0.2.1";
+    return "0.3.0";
   };
   (function(documentObject, windowObject) {
     _parameter_Document = documentObject;
@@ -366,6 +389,7 @@
       renderDisabledBackground();
       renderDialog();
       getElements();
+      buildDocumentEvents();
     });
     if (!isDefined(_parameter_Window.$journey)) {
       _parameter_Window.$journey = this;

dist/journey.js.css

@@ -1,5 +1,5 @@
 /*
- * Journey.js Library v0.2.1
+ * Journey.js Library v0.3.0
  *
  * Copyright 2023 Bunoon
  * Released under the MIT License
@@ -22,10 +22,14 @@
   --dialog-button-hover-background-color: #007FFF;
   --dialog-button-hover-border-color: var(--dialog-button-border-color);
   --dialog-button-hover-text-color: var(--dialog-button-text-color);
-  --dialog-button-disabled-background-color: #002244;
-  --dialog-close-button-color: var(--color-white);
-  --dialog-close-button-hover-color: var(--dialog-button-hover-background-color);
+  --dialog-button-disabled-background-color: var(--dialog-background-color);
+  --dialog-close-button-background-color: var(--dialog-button-background-color);
+  --dialog-close-button-border-color: #3457D5;
   --dialog-close-button-size: 1.1rem;
+  --dialog-close-button-x-color: var(--color-white);
+  --dialog-close-button-hover-background-color: #007FFF;
+  --dialog-close-button-hover-x-color: var(--dialog-close-button-x-color);
+  --dialog-close-button-hover-border-color: var(--dialog-close-button-border-color);
   --border-radius: 0.5rem;
   --border-size: 0.5px;
   --spacing: 10px;
@@ -62,14 +66,14 @@ div.journey-js-dialog button.close {
   height: var(--dialog-close-button-size);
   border-radius: 0.25rem;
   padding: 0;
-  background-color: transparent;
-  border: var(--border-size) solid var(--dialog-close-button-color);
+  background-color: var(--dialog-close-button-background-color);
+  border: var(--border-size) solid var(--dialog-close-button-border-color);
 }
 div.journey-js-dialog button.close::before, div.journey-js-dialog button.close::after {
   content: "";
   width: 1px;
   height: 100%;
-  background: var(--dialog-close-button-color);
+  background: var(--dialog-close-button-x-color);
   display: block;
   transform: rotate(45deg) translateX(0px);
   position: absolute;
@@ -81,11 +85,12 @@ div.journey-js-dialog button.close::after {
 }
 div.journey-js-dialog button.close:hover {
   cursor: pointer;
-  border: var(--border-size) solid var(--dialog-close-button-hover-color);
+  border: var(--border-size) solid var(--dialog-close-button-hover-border-color);
   transition: var(--transition);
+  background-color: var(--dialog-close-button-hover-background-color);
 }
 div.journey-js-dialog button.close:hover::before, div.journey-js-dialog button.close:hover::after {
-  background: var(--dialog-close-button-hover-color);
+  background: var(--dialog-close-button-hover-x-color);
   transition: var(--transition);
 }
 div.journey-js-dialog div:first-of-type {