diff --git a/README.md b/README.md
index defe704..51a1332 100644
--- 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-v0.1.0-blue)](https://www.npmjs.com/package/jjourney.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jJourney.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jjourney.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.2.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)
->
A lightweight, and easy-to-use, JavaScript library for building a website walk-through guide!
-> v0.1.0
+> 🚶 A lightweight, and easy-to-use, JavaScript library for building a website walk-through guide!
+> v0.2.0
![Journey.js](docs/images/main.png)
diff --git a/README_NUGET.md b/README_NUGET.md
index 9253b35..fd45766 100644
--- a/README_NUGET.md
+++ b/README_NUGET.md
@@ -1,13 +1,13 @@
-# Journey.js v0.1.0
+# Journey.js v0.2.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.1.0-blue)](https://www.npmjs.com/package/jjourney.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.1.0-purple)](https://www.nuget.org/packages/jJourney.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.2.0-blue)](https://www.npmjs.com/package/jjourney.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.2.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)
-> A lightweight, and easy-to-use, JavaScript library for building a website walk-through guide!
+> 🚶 A lightweight, and easy-to-use, JavaScript library for building a website walk-through guide!
## What features does Journey.js have?
@@ -54,9 +54,9 @@ Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows
```
-To see a list of all the available binding options you can use for "data-journey-options", click [here](https://github.com/williamtroup/Syntax.js/blob/main/docs/BINDING_OPTIONS.md).
+To see a list of all the available binding options you can use for "data-journey-options", click [here](https://github.com/williamtroup/Journey.js/blob/main/docs/BINDING_OPTIONS.md).
-To see a list of all the available custom triggers you can use for "data-journey-options", click [here](https://github.com/williamtroup/Syntax.js/blob/main/docs/BINDING_OPTIONS_CUSTOM_TRIGGERS.md).
+To see a list of all the available custom triggers you can use for "data-journey-options", click [here](https://github.com/williamtroup/Journey.js/blob/main/docs/BINDING_OPTIONS_CUSTOM_TRIGGERS.md).
### 4. Finishing Up:
diff --git a/dist/journey.js b/dist/journey.js
index 6be4ccd..c703eab 100644
--- a/dist/journey.js
+++ b/dist/journey.js
@@ -1,4 +1,4 @@
-/*! Journey.js v0.1.0 | (c) Bunoon | MIT License */
+/*! Journey.js v0.2.0 | (c) Bunoon | MIT License */
(function() {
function renderDisabledBackground() {
_element_Disabled_Background = createElement("div", "journey-js-disabled-background");
@@ -13,9 +13,9 @@
_element_Dialog = createElement("div", "journey-js-dialog");
_element_Dialog.style.display = "none";
_parameter_Document.body.appendChild(_element_Dialog);
- var closeButton = createElement("button", "close");
- closeButton.onclick = hideDialog;
- _element_Dialog.appendChild(closeButton);
+ _element_Dialog_Close_Button = createElement("button", "close");
+ _element_Dialog_Close_Button.onclick = onDialogClose;
+ _element_Dialog.appendChild(_element_Dialog_Close_Button);
_element_Dialog_Title = createElement("div", "title");
_element_Dialog.appendChild(_element_Dialog_Title);
_element_Dialog_Description = createElement("div", "description");
@@ -29,6 +29,15 @@
_element_Dialog_Next_Button.onclick = onDialogNext;
buttons.appendChild(_element_Dialog_Next_Button);
}
+ function onDialogClose() {
+ var bindingOptions = _elements_Attributes_Json[_elements_Attributes_Keys[_elements_Attributes_Position]];
+ if (isDefined(bindingOptions.element)) {
+ fireCustomTrigger(bindingOptions.onClose, bindingOptions.element);
+ }
+ removeFocusClassFromLastElement(false);
+ hideDisabledBackground();
+ _element_Dialog.style.display = "none";
+ }
function onDialogPrevious() {
removeFocusClassFromLastElement();
_elements_Attributes_Position--;
@@ -38,11 +47,11 @@
showDialogAndSetPosition();
}
function onDialogNext() {
- removeFocusClassFromLastElement();
- _elements_Attributes_Position++;
- if (_elements_Attributes_Position > _elements_Attributes_Keys.length - 1) {
- hideDialog();
+ if (_elements_Attributes_Position === _elements_Attributes_Keys.length - 1) {
+ onDialogClose();
} else {
+ removeFocusClassFromLastElement();
+ _elements_Attributes_Position++;
showDialogAndSetPosition();
}
}
@@ -50,6 +59,7 @@
var bindingOptions = _elements_Attributes_Json[_elements_Attributes_Keys[_elements_Attributes_Position]];
if (isDefined(bindingOptions) && isDefined(bindingOptions.element)) {
showDisabledBackground();
+ _element_Dialog_Close_Button.style.display = _configuration.showCloseButton ? "block" : "none";
bindingOptions.element.className += _string.space + "journey-js-element-focus";
var offset = getOffset(bindingOptions.element);
var scrollPosition = getScrollPosition();
@@ -89,18 +99,17 @@
fireCustomTrigger(bindingOptions.onEnter, bindingOptions.element);
}
}
- function hideDialog() {
- hideDisabledBackground();
- _element_Dialog.style.display = "none";
- }
- function removeFocusClassFromLastElement() {
+ function removeFocusClassFromLastElement(callCustomTrigger) {
+ callCustomTrigger = isDefined(callCustomTrigger) ? callCustomTrigger : true;
var bindingOptions = _elements_Attributes_Json[_elements_Attributes_Keys[_elements_Attributes_Position]];
if (isDefined(bindingOptions.element)) {
bindingOptions.element.className = bindingOptions.element.className.replace(_string.space + "journey-js-element-focus", _string.empty);
if (isDefined(_element_Focus_Element_PositionStyle)) {
bindingOptions.element.style.position = _element_Focus_Element_PositionStyle;
}
- fireCustomTrigger(bindingOptions.onLeave, bindingOptions.element);
+ if (callCustomTrigger) {
+ fireCustomTrigger(bindingOptions.onLeave, bindingOptions.element);
+ }
}
}
function getElements() {
@@ -129,7 +138,7 @@
if (bindingOptions.parsed && isDefinedObject(bindingOptions.result)) {
bindingOptions = buildAttributeOptions(bindingOptions.result);
bindingOptions.element = element;
- if (isDefinedNumber(bindingOptions.order)) {
+ if (isDefinedNumber(bindingOptions.order) && (isDefinedString(bindingOptions.title) || isDefinedString(bindingOptions.description))) {
_elements_Attributes_Json[bindingOptions.order] = bindingOptions;
_elements_Attributes_Keys.push(bindingOptions.order);
}
@@ -162,6 +171,7 @@
function buildAttributeOptionCustomTriggers(options) {
options.onEnter = getDefaultFunction(options.onEnter, null);
options.onLeave = getDefaultFunction(options.onLeave, null);
+ options.onClose = getDefaultFunction(options.onClose, null);
return options;
}
function isDefined(value) {
@@ -301,7 +311,9 @@
_configuration.previousButtonText = getDefaultString(_configuration.previousButtonText, "Previous");
_configuration.nextButtonText = getDefaultString(_configuration.nextButtonText, "Next");
_configuration.finishButtonText = getDefaultString(_configuration.finishButtonText, "Finish");
+ _configuration.showCloseButton = getDefaultBoolean(_configuration.showCloseButton, true);
}
+ var _this = this;
var _parameter_Document = null;
var _parameter_Window = null;
var _configuration = {};
@@ -313,6 +325,7 @@
var _element_Focus_Element_PositionStyle = null;
var _element_Disabled_Background = null;
var _element_Dialog = null;
+ var _element_Dialog_Close_Button = null;
var _element_Dialog_Title = null;
var _element_Dialog_Description = null;
var _element_Dialog_Previous_Button = null;
@@ -321,16 +334,20 @@
this.setConfiguration = function(newOptions) {
_configuration = !isDefinedObject(newOptions) ? {} : newOptions;
buildDefaultConfiguration();
+ if (_this.isOpen()) {
+ onDialogClose();
+ _elements_Attributes_Position = 0;
+ }
return this;
};
this.show = function() {
- if (_elements_Attributes_Position > _elements_Attributes_Keys.length - 1) {
+ if (_elements_Attributes_Position === _elements_Attributes_Keys.length - 1) {
_elements_Attributes_Position = 0;
}
showDialogAndSetPosition();
};
this.hide = function() {
- hideDialog();
+ onDialogClose();
};
this.isOpen = function() {
return _element_Dialog.style.display === "block";
@@ -339,7 +356,7 @@
return _elements_Attributes_Position >= _elements_Attributes_Keys.length - 1;
};
this.getVersion = function() {
- return "0.1.0";
+ return "0.2.0";
};
(function(documentObject, windowObject) {
_parameter_Document = documentObject;
diff --git a/dist/journey.js.css b/dist/journey.js.css
index 9623751..97e00c0 100644
--- a/dist/journey.js.css
+++ b/dist/journey.js.css
@@ -1,5 +1,5 @@
/*
- * Journey.js Library v0.1.0
+ * Journey.js Library v0.2.0
*
* Copyright 2023 Bunoon
* Released under the MIT License
@@ -88,10 +88,12 @@ div.journey-js-dialog button.close:hover::before, div.journey-js-dialog button.c
background: var(--dialog-close-button-hover-color);
transition: var(--transition);
}
+div.journey-js-dialog div:first-of-type {
+ padding-right: calc(var(--dialog-close-button-size) + var(--spacing));
+}
div.journey-js-dialog div.title {
font-size: large;
font-weight: 700;
- padding-right: calc(var(--dialog-close-button-size) + var(--spacing));
}
div.journey-js-dialog div.description {
font-weight: 100;
diff --git a/dist/journey.js.css.map b/dist/journey.js.css.map
index 4695676..0765ee3 100644
--- a/dist/journey.js.css.map
+++ b/dist/journey.js.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/journey.js.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAAA;AAAA;AAAA;AAAA;AAMA;EAEI;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EAEI;EACA;;AAKZ;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;EACA;EACA;EACA;EACA;;AAGJ;AAAA;EACI;EACA;;AAIR;EACI;;;AAMZ;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI","file":"journey.js.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/journey.js.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AAAA;AAAA;AAAA;AAAA;AAMA;EAEI;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EAEI;EACA;;AAMR;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACI;EACA;EACA;EACA;EACA;;AAGJ;AAAA;EACI;EACA;;AAIR;EACI;;;AAMZ;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI","file":"journey.js.css"}
\ No newline at end of file
diff --git a/dist/journey.js.min.css b/dist/journey.js.min.css
index 1d34431..f3290c6 100644
--- a/dist/journey.js.min.css
+++ b/dist/journey.js.min.css
@@ -1,2 +1,2 @@
-/*! Journey.js v0.1.0 | (c) Bunoon | MIT License */
-:root{--color-black:#3b3a3a;--color-white:#F5F5F5;--color-gray:#AAA;--dialog-background-color:#024;--dialog-text-color:var(--color-white);--dialog-border-color:#72A0C1;--dialog-button-background-color:#002D62;--dialog-button-border-color:#3457D5;--dialog-button-text-color:var(--color-white);--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:#024;--dialog-close-button-color:var(--color-white);--dialog-close-button-hover-color:var(--dialog-button-hover-background-color);--dialog-close-button-size:1.1rem;--border-radius:.5rem;--border-size:.5px;--spacing:10px;--transition:all .3s}div.journey-js-dialog{position:absolute;display:none;border-radius:var(--border-radius);background-color:var(--dialog-background-color);color:var(--dialog-text-color);border:var(--border-size) solid var(--dialog-border-color);padding:var(--spacing);font-family:"Montserrat",sans-serif;font-size:.9rem;z-index:1001;width:300px;height:auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}div.journey-js-dialog button.close{position:absolute;top:var(--spacing);right:var(--spacing);width:var(--dialog-close-button-size);height:var(--dialog-close-button-size);border-radius:.25rem;padding:0;background-color:transparent;border:var(--border-size) solid var(--dialog-close-button-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);display:block;transform:rotate(45deg) translateX(0);position:absolute;left:50%;top:0}div.journey-js-dialog button.close::after{transform:rotate(-45deg) translateX(0)}div.journey-js-dialog button.close:hover{cursor:pointer;border:var(--border-size) solid var(--dialog-close-button-hover-color);transition:var(--transition)}div.journey-js-dialog button.close:hover::before,div.journey-js-dialog button.close:hover::after{background:var(--dialog-close-button-hover-color);transition:var(--transition)}div.journey-js-dialog div.title{font-size:large;font-weight:700;padding-right:calc(var(--dialog-close-button-size) + var(--spacing))}div.journey-js-dialog div.description{font-weight:100}div.journey-js-dialog div.buttons{margin-top:var(--spacing);text-align:right}div.journey-js-dialog div.buttons button.previous,div.journey-js-dialog div.buttons button.next{border-radius:var(--border-radius);background-color:var(--dialog-button-background-color);color:var(--dialog-button-text-color);border:var(--border-size) solid var(--dialog-button-border-color);min-width:100px;padding:var(--spacing)}div.journey-js-dialog div.buttons button.previous:not([disabled]):hover,div.journey-js-dialog div.buttons button.next:not([disabled]):hover{cursor:pointer;background-color:var(--dialog-button-hover-background-color);color:var(--dialog-button-hover-text-color);border:var(--border-size) solid var(--dialog-button-hover-border-color);transition:var(--transition)}div.journey-js-dialog div.buttons button.previous:disabled,div.journey-js-dialog div.buttons button.next:disabled{background-color:var(--dialog-button-disabled-background-color)!important;color:var(--color-gray)}div.journey-js-dialog div.buttons button.next{font-weight:700}div.journey-js-disabled-background{z-index:1000;position:fixed;background-color:#000;background-color:rgba(0,0,0,.5);top:0;left:0;height:100%;width:100%}.journey-js-element-focus{z-index:1001!important}
\ No newline at end of file
+/*! Journey.js v0.2.0 | (c) Bunoon | MIT License */
+:root{--color-black:#3b3a3a;--color-white:#F5F5F5;--color-gray:#AAA;--dialog-background-color:#024;--dialog-text-color:var(--color-white);--dialog-border-color:#72A0C1;--dialog-button-background-color:#002D62;--dialog-button-border-color:#3457D5;--dialog-button-text-color:var(--color-white);--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:#024;--dialog-close-button-color:var(--color-white);--dialog-close-button-hover-color:var(--dialog-button-hover-background-color);--dialog-close-button-size:1.1rem;--border-radius:.5rem;--border-size:.5px;--spacing:10px;--transition:all .3s}div.journey-js-dialog{position:absolute;display:none;border-radius:var(--border-radius);background-color:var(--dialog-background-color);color:var(--dialog-text-color);border:var(--border-size) solid var(--dialog-border-color);padding:var(--spacing);font-family:"Montserrat",sans-serif;font-size:.9rem;z-index:1001;width:300px;height:auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}div.journey-js-dialog button.close{position:absolute;top:var(--spacing);right:var(--spacing);width:var(--dialog-close-button-size);height:var(--dialog-close-button-size);border-radius:.25rem;padding:0;background-color:transparent;border:var(--border-size) solid var(--dialog-close-button-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);display:block;transform:rotate(45deg) translateX(0);position:absolute;left:50%;top:0}div.journey-js-dialog button.close::after{transform:rotate(-45deg) translateX(0)}div.journey-js-dialog button.close:hover{cursor:pointer;border:var(--border-size) solid var(--dialog-close-button-hover-color);transition:var(--transition)}div.journey-js-dialog button.close:hover::before,div.journey-js-dialog button.close:hover::after{background:var(--dialog-close-button-hover-color);transition:var(--transition)}div.journey-js-dialog div:first-of-type{padding-right:calc(var(--dialog-close-button-size) + var(--spacing))}div.journey-js-dialog div.title{font-size:large;font-weight:700}div.journey-js-dialog div.description{font-weight:100}div.journey-js-dialog div.buttons{margin-top:var(--spacing);text-align:right}div.journey-js-dialog div.buttons button.previous,div.journey-js-dialog div.buttons button.next{border-radius:var(--border-radius);background-color:var(--dialog-button-background-color);color:var(--dialog-button-text-color);border:var(--border-size) solid var(--dialog-button-border-color);min-width:100px;padding:var(--spacing)}div.journey-js-dialog div.buttons button.previous:not([disabled]):hover,div.journey-js-dialog div.buttons button.next:not([disabled]):hover{cursor:pointer;background-color:var(--dialog-button-hover-background-color);color:var(--dialog-button-hover-text-color);border:var(--border-size) solid var(--dialog-button-hover-border-color);transition:var(--transition)}div.journey-js-dialog div.buttons button.previous:disabled,div.journey-js-dialog div.buttons button.next:disabled{background-color:var(--dialog-button-disabled-background-color)!important;color:var(--color-gray)}div.journey-js-dialog div.buttons button.next{font-weight:700}div.journey-js-disabled-background{z-index:1000;position:fixed;background-color:#000;background-color:rgba(0,0,0,.5);top:0;left:0;height:100%;width:100%}.journey-js-element-focus{z-index:1001!important}
\ No newline at end of file
diff --git a/dist/journey.min.js b/dist/journey.min.js
index f3ba019..9564fef 100644
--- a/dist/journey.min.js
+++ b/dist/journey.min.js
@@ -1,10 +1,11 @@
-/*! Journey.js v0.1.0 | (c) Bunoon | MIT License */
-(function(){function R(){N();k--;0>k&&(k=n.length-1);F()}function S(){N();k++;k>n.length-1?G():F()}function F(){var a=H[n[k]];if(l(a)&&l(a.element)){var c=p.body,b=I;try{c.contains(b)||c.appendChild(b)}catch(u){console.warn(u.message)}a.element.className+=q.space+"journey-js-element-focus";var d=a.element;for(b=c=0;d&&!isNaN(d.offsetLeft)&&!isNaN(d.offsetTop);)c+=d.offsetLeft-d.scrollLeft,b+=d.offsetTop-d.scrollTop,d=d.offsetParent;var g=p.documentElement;d=(r.pageXOffset||g.scrollLeft)-(g.clientLeft||
-0);g=(r.pageYOffset||g.scrollTop)-(g.clientTop||0);b=b-g+a.element.offsetHeight;c-=d;d=a.element;g=null;r.getComputedStyle?g=document.defaultView.getComputedStyle(d,null).getPropertyValue("position"):d.currentStyle&&(g=d.currentStyle.position);d=g;d!==q.empty&&"static"===d.toLowerCase()&&(J=d,a.element.style.position="relative");w.innerHTML=f.previousButtonText;w.disabled=0===k;y.innerHTML=k>=n.length-1?f.finishButtonText:f.nextButtonText;v(a.title)?z.innerHTML=a.title:z.innerHTML=q.empty;v(a.description)?
-A.innerHTML=a.description:A.innerHTML=q.empty;h.style.display="block";c+h.offsetWidth>r.innerWidth&&(c-=h.offsetWidth+a.element.offsetWidth);b+h.offsetHeight>r.innerHeight&&(b-=h.offsetHeight+a.element.offsetHeight);h.style.top=b+"px";h.style.left=c+"px";O(a.onEnter,a.element)}}function G(){var a=p.body,c=I;try{a.contains(c)&&a.removeChild(c)}catch(b){console.warn(b.message)}h.style.display="none"}function N(){var a=H[n[k]];l(a.element)&&(a.element.className=a.element.className.replace(q.space+"journey-js-element-focus",
-q.empty),l(J)&&(a.element.style.position=J),O(a.onLeave,a.element))}function l(a){return null!==a&&void 0!==a&&a!==q.empty}function B(a){return l(a)&&"object"===typeof a}function v(a){return l(a)&&"string"===typeof a}function C(a){return l(a)&&"function"===typeof a}function P(a){return l(a)&&"number"===typeof a}function t(a,c){var b=a.toLowerCase();var d="text"===b;K.hasOwnProperty(b)||(K[b]=d?p.createTextNode(q.empty):p.createElement(b));b=K[b].cloneNode(!1);l(c)&&(b.className=c);return b}function O(a){C(a)&&
-a.apply(null,[].slice.call(arguments,1))}function x(a,c){return v(a)?a:c}function T(a){var c=!0,b=null;try{v(a)&&(b=JSON.parse(a))}catch(d){try{b=eval("("+a+")"),C(b)&&(b=b())}catch(g){f.safeMode||(console.error("Errors in object: "+d.message+", "+g.message),c=!1),b=null}}return{parsed:c,result:b}}function Q(){var a=f,c=f.safeMode;var b=l(c)&&"boolean"===typeof c;a.safeMode=b?c:!0;a=f;b=f.domElementTypes;c=["*"];v(b)?(b=b.split(q.space),0===b.length&&(b=c)):b=B(b)&&b instanceof Array?b:c;a.domElementTypes=
-b;f.previousButtonText=x(f.previousButtonText,"Previous");f.nextButtonText=x(f.nextButtonText,"Next");f.finishButtonText=x(f.finishButtonText,"Finish")}var p=null,r=null,f={},q={empty:"",space:" "},K={},H={},n=[],k=0,J=null,I=null,h=null,z=null,A=null,w=null,y=null;this.setConfiguration=function(a){f=B(a)?a:{};Q();return this};this.show=function(){k>n.length-1&&(k=0);F()};this.hide=function(){G()};this.isOpen=function(){return"block"===h.style.display};this.isComplete=function(){return k>=n.length-
-1};this.getVersion=function(){return"0.1.0"};(function(a,c){p=a;r=c;Q();p.addEventListener("DOMContentLoaded",function(){I=t("div","journey-js-disabled-background");h=t("div","journey-js-dialog");h.style.display="none";p.body.appendChild(h);var b=t("button","close");b.onclick=G;h.appendChild(b);z=t("div","title");h.appendChild(z);A=t("div","description");h.appendChild(A);b=t("div","buttons");h.appendChild(b);w=t("button","previous");w.onclick=R;b.appendChild(w);y=t("button","next");y.onclick=S;b.appendChild(y);
-b=f.domElementTypes;for(var d=b.length,g=0;gk&&(k=m.length-1);J()}function U(){k===m.length-1?x():(H(),k++,J())}function J(){var a=y[m[k]];if(l(a)&&l(a.element)){var c=n.body,b=I;try{c.contains(b)||c.appendChild(b)}catch(u){console.warn(u.message)}z.style.display=f.showCloseButton?"block":"none";a.element.className+=p.space+"journey-js-element-focus";
+var e=a.element;for(b=c=0;e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)c+=e.offsetLeft-e.scrollLeft,b+=e.offsetTop-e.scrollTop,e=e.offsetParent;var h=n.documentElement;e=(q.pageXOffset||h.scrollLeft)-(h.clientLeft||0);h=(q.pageYOffset||h.scrollTop)-(h.clientTop||0);b=b-h+a.element.offsetHeight;c-=e;e=a.element;h=null;q.getComputedStyle?h=document.defaultView.getComputedStyle(e,null).getPropertyValue("position"):e.currentStyle&&(h=e.currentStyle.position);e=h;e!==p.empty&&"static"===e.toLowerCase()&&
+(K=e,a.element.style.position="relative");v.innerHTML=f.previousButtonText;v.disabled=0===k;A.innerHTML=k>=m.length-1?f.finishButtonText:f.nextButtonText;r(a.title)?B.innerHTML=a.title:B.innerHTML=p.empty;r(a.description)?C.innerHTML=a.description:C.innerHTML=p.empty;g.style.display="block";c+g.offsetWidth>q.innerWidth&&(c-=g.offsetWidth+a.element.offsetWidth);b+g.offsetHeight>q.innerHeight&&(b-=g.offsetHeight+a.element.offsetHeight);g.style.top=b+"px";g.style.left=c+"px";G(a.onEnter,a.element)}}
+function H(a){a=l(a)?a:!0;var c=y[m[k]];l(c.element)&&(c.element.className=c.element.className.replace(p.space+"journey-js-element-focus",p.empty),l(K)&&(c.element.style.position=K),a&&G(c.onLeave,c.element))}function l(a){return null!==a&&void 0!==a&&a!==p.empty}function D(a){return l(a)&&"object"===typeof a}function Q(a){return l(a)&&"boolean"===typeof a}function r(a){return l(a)&&"string"===typeof a}function L(a){return l(a)&&"function"===typeof a}function R(a){return l(a)&&"number"===typeof a}
+function t(a,c){var b=a.toLowerCase();var e="text"===b;M.hasOwnProperty(b)||(M[b]=e?n.createTextNode(p.empty):n.createElement(b));b=M[b].cloneNode(!1);l(c)&&(b.className=c);return b}function G(a){L(a)&&a.apply(null,[].slice.call(arguments,1))}function w(a,c){return r(a)?a:c}function N(a,c){return L(a)?a:c}function V(a){var c=!0,b=null;try{r(a)&&(b=JSON.parse(a))}catch(e){try{b=eval("("+a+")"),L(b)&&(b=b())}catch(h){f.safeMode||(console.error("Errors in object: "+e.message+", "+h.message),c=!1),b=
+null}}return{parsed:c,result:b}}function S(){var a=f;var c=f.safeMode;c=Q(c)?c:!0;a.safeMode=c;a=f;var b=f.domElementTypes;c=["*"];r(b)?(b=b.split(p.space),0===b.length&&(b=c)):b=D(b)&&b instanceof Array?b:c;a.domElementTypes=b;f.previousButtonText=w(f.previousButtonText,"Previous");f.nextButtonText=w(f.nextButtonText,"Next");f.finishButtonText=w(f.finishButtonText,"Finish");a=f;c=f.showCloseButton;c=Q(c)?c:!0;a.showCloseButton=c}var W=this,n=null,q=null,f={},p={empty:"",space:" "},M={},y={},m=[],
+k=0,K=null,I=null,g=null,z=null,B=null,C=null,v=null,A=null;this.setConfiguration=function(a){f=D(a)?a:{};S();W.isOpen()&&(x(),k=0);return this};this.show=function(){k===m.length-1&&(k=0);J()};this.hide=function(){x()};this.isOpen=function(){return"block"===g.style.display};this.isComplete=function(){return k>=m.length-1};this.getVersion=function(){return"0.2.0"};(function(a,c){n=a;q=c;S();n.addEventListener("DOMContentLoaded",function(){I=t("div","journey-js-disabled-background");g=t("div","journey-js-dialog");
+g.style.display="none";n.body.appendChild(g);z=t("button","close");z.onclick=x;g.appendChild(z);B=t("div","title");g.appendChild(B);C=t("div","description");g.appendChild(C);var b=t("div","buttons");g.appendChild(b);v=t("button","previous");v.onclick=T;b.appendChild(v);A=t("button","next");A.onclick=U;b.appendChild(A);b=f.domElementTypes;for(var e=b.length,h=0;h
-***Parameter:*** element: '*object*' - The DOM element that the dialog is being hidden for.
\ No newline at end of file
+***Parameter:*** element: '*object*' - The DOM element that the dialog is being hidden for.
+
+### options.onClose( *element* ):
+Fires when the the dialog is closed on a specific DOM element.
+
+***Parameter:*** element: '*object*' - The DOM element that the dialog was closed on.
\ No newline at end of file
diff --git a/docs/CHANGE_LOG.md b/docs/CHANGE_LOG.md
index c88c900..237b951 100644
--- a/docs/CHANGE_LOG.md
+++ b/docs/CHANGE_LOG.md
@@ -1,4 +1,32 @@
# Journey.js - Change Log:
+## Version 0.2.0:
+
+#### **Binding Options:**
+- A "title" or "description" must be set for the binding options for a DOM element to be accepted.
+
+#### **Binding Options - Custom Triggers:**
+- Added a new binding custom trigger called "onClose", which states an event that should be triggered when the dialog is closed on a specific DOM element.
+
+#### **Configuration Options:**
+- Added a new configuration option "showCloseButton" (defaults to true), which states if the close button is shown on the dialog.
+- Calling "setConfiguration()" when the dialog is open will now close it and force the guide back to the start of the journey.
+
+#### **Documentation:**
+- Fixed missing configuration documentation, with minor fixes and improvements elsewhere.
+- Fixed the testing HTML files referencing the wrong global JS variable.
+
+#### **CSS:**
+- Spacing is now applied for the first item in the dialog (to prevent overlaps with the close button).
+
+#### **General Improvements:**
+- Internal cleanups of the core JS code.
+
+#### **Fixes:**
+- Fixed a fault that caused the CSS class "journey-js-element-focus" to remain on an element when the dialog is closed.
+
+
+
+
## Version 0.1.0:
- Everything :)
\ No newline at end of file
diff --git a/docs/CONFIGURATION_OPTIONS.md b/docs/CONFIGURATION_OPTIONS.md
index c265ebf..23d0878 100644
--- a/docs/CONFIGURATION_OPTIONS.md
+++ b/docs/CONFIGURATION_OPTIONS.md
@@ -8,5 +8,9 @@ Below are all the configuration options that can be passed to the "setConfigurat
| Type: | Name: | Description: |
| --- | --- | --- |
-| *boolean* | safeMode | States if safe-mode is enabled (errors will be ignored and logged only, defaults to true). |
-| *Object* | domElementTypes | The DOM element types to lookup (can be either an array of strings, or a space separated string, and defaults to "*"). |
\ No newline at end of file
+| *boolean* | safeMode | States if safe-mode is enabled (errors will be ignored and logged only (defaults to true). |
+| *Object* | domElementTypes | The DOM element types to lookup (can be either an array of strings, or a space separated string, and defaults to "*"). |
+| *string* | previousButtonText | States the text that should be used for the Previous button (defaults to "Previous"). |
+| *string* | nextButtonText | States the text that should be used for the Next button (defaults to "Next"). |
+| *string* | finishButtonText | States the text that should be used for the Finish button (defaults to "Finish"). |
+| *boolean* | showCloseButton | States if the Close button is visible on the dialog (defaults to true). |
\ No newline at end of file
diff --git a/journey.js.nuspec b/journey.js.nuspec
index b4c6586..5d4284d 100644
--- a/journey.js.nuspec
+++ b/journey.js.nuspec
@@ -2,7 +2,7 @@
jJourney.js
- 0.1.0
+ 0.2.0
Journey.js
A lightweight, and easy-to-use, JavaScript library for building a website walk-through guide!
William Troup
diff --git a/package.json b/package.json
index c40eb9e..689b1eb 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "jjourney.js",
"title": "Journey.js",
"description": "A lightweight, and easy-to-use, JavaScript library for building a website walk-through guide!",
- "version": "0.1.0",
+ "version": "0.2.0",
"main": "dist/journey.js",
"author": {
"name": "Bunoon"
diff --git a/src/journey.js b/src/journey.js
index 3e82e01..853053f 100644
--- a/src/journey.js
+++ b/src/journey.js
@@ -4,7 +4,7 @@
* A lightweight, and easy-to-use, JavaScript library for building a website walk-through guide!
*
* @file journey.js
- * @version v0.1.0
+ * @version v0.2.0
* @author Bunoon
* @license MIT License
* @copyright Bunoon 2023
@@ -12,7 +12,9 @@
( function() {
- var // Variables: Constructor Parameters
+ var _this = this,
+
+ // Variables: Constructor Parameters
_parameter_Document = null,
_parameter_Window = null,
@@ -39,6 +41,7 @@
// Variables: Dialog
_element_Dialog = null,
+ _element_Dialog_Close_Button = null,
_element_Dialog_Title = null,
_element_Dialog_Description = null,
_element_Dialog_Previous_Button = null,
@@ -78,9 +81,9 @@
_element_Dialog.style.display = "none";
_parameter_Document.body.appendChild( _element_Dialog );
- var closeButton = createElement( "button", "close" );
- closeButton.onclick = hideDialog;
- _element_Dialog.appendChild( closeButton );
+ _element_Dialog_Close_Button = createElement( "button", "close" );
+ _element_Dialog_Close_Button.onclick = onDialogClose;
+ _element_Dialog.appendChild( _element_Dialog_Close_Button );
_element_Dialog_Title = createElement( "div", "title" );
_element_Dialog.appendChild( _element_Dialog_Title );
@@ -100,6 +103,19 @@
buttons.appendChild( _element_Dialog_Next_Button );
}
+ function onDialogClose() {
+ var bindingOptions = _elements_Attributes_Json[ _elements_Attributes_Keys[ _elements_Attributes_Position ] ];
+
+ if ( isDefined( bindingOptions.element ) ) {
+ fireCustomTrigger( bindingOptions.onClose, bindingOptions.element );
+ }
+
+ removeFocusClassFromLastElement( false );
+ hideDisabledBackground();
+
+ _element_Dialog.style.display = "none";
+ }
+
function onDialogPrevious() {
removeFocusClassFromLastElement();
@@ -113,13 +129,14 @@
}
function onDialogNext() {
- removeFocusClassFromLastElement();
-
- _elements_Attributes_Position++;
+ if ( _elements_Attributes_Position === _elements_Attributes_Keys.length - 1 ) {
+ onDialogClose();
- if ( _elements_Attributes_Position > _elements_Attributes_Keys.length - 1 ) {
- hideDialog();
} else {
+ removeFocusClassFromLastElement();
+
+ _elements_Attributes_Position++;
+
showDialogAndSetPosition();
}
}
@@ -129,7 +146,8 @@
if ( isDefined( bindingOptions ) && isDefined( bindingOptions.element ) ) {
showDisabledBackground();
-
+
+ _element_Dialog_Close_Button.style.display = _configuration.showCloseButton ? "block": "none";
bindingOptions.element.className += _string.space + "journey-js-element-focus";
var offset = getOffset( bindingOptions.element ),
@@ -181,13 +199,9 @@
}
}
- function hideDialog() {
- hideDisabledBackground();
+ function removeFocusClassFromLastElement( callCustomTrigger ) {
+ callCustomTrigger = isDefined( callCustomTrigger ) ? callCustomTrigger : true;
- _element_Dialog.style.display = "none";
- }
-
- function removeFocusClassFromLastElement() {
var bindingOptions = _elements_Attributes_Json[ _elements_Attributes_Keys[ _elements_Attributes_Position ] ];
if ( isDefined( bindingOptions.element ) ) {
@@ -197,7 +211,9 @@
bindingOptions.element.style.position = _element_Focus_Element_PositionStyle;
}
- fireCustomTrigger( bindingOptions.onLeave, bindingOptions.element );
+ if ( callCustomTrigger ) {
+ fireCustomTrigger( bindingOptions.onLeave, bindingOptions.element );
+ }
}
}
@@ -240,7 +256,7 @@
bindingOptions = buildAttributeOptions( bindingOptions.result );
bindingOptions.element = element;
- if ( isDefinedNumber( bindingOptions.order ) ) {
+ if ( isDefinedNumber( bindingOptions.order ) && ( isDefinedString( bindingOptions.title ) || isDefinedString( bindingOptions.description ) ) ) {
_elements_Attributes_Json[ bindingOptions.order ] = bindingOptions;
_elements_Attributes_Keys.push( bindingOptions.order );
}
@@ -289,6 +305,7 @@
function buildAttributeOptionCustomTriggers( options ) {
options.onEnter = getDefaultFunction( options.onEnter, null );
options.onLeave = getDefaultFunction( options.onLeave, null );
+ options.onClose = getDefaultFunction( options.onClose, null );
return options;
}
@@ -517,7 +534,7 @@
*
* @public
*
- * @param {Options} newConfiguration All the configuration options that should be set (refer to "Options" documentation for properties).
+ * @param {Object} newConfiguration All the configuration options that should be set (refer to "Configuration Options" documentation for properties).
*
* @returns {Object} The Journey.js class instance.
*/
@@ -526,6 +543,12 @@
buildDefaultConfiguration();
+ if ( _this.isOpen() ) {
+ onDialogClose();
+
+ _elements_Attributes_Position = 0;
+ }
+
return this;
};
@@ -535,6 +558,7 @@
_configuration.previousButtonText = getDefaultString( _configuration.previousButtonText, "Previous" );
_configuration.nextButtonText = getDefaultString( _configuration.nextButtonText, "Next" );
_configuration.finishButtonText = getDefaultString( _configuration.finishButtonText, "Finish" );
+ _configuration.showCloseButton = getDefaultBoolean( _configuration.showCloseButton, true );
}
@@ -552,7 +576,7 @@
* @public
*/
this.show = function() {
- if ( _elements_Attributes_Position > _elements_Attributes_Keys.length - 1 ) {
+ if ( _elements_Attributes_Position === _elements_Attributes_Keys.length - 1 ) {
_elements_Attributes_Position = 0;
}
@@ -567,7 +591,7 @@
* @public
*/
this.hide = function() {
- hideDialog();
+ onDialogClose();
};
/**
@@ -613,7 +637,7 @@
* @returns {string} The version number.
*/
this.getVersion = function() {
- return "0.1.0";
+ return "0.2.0";
};
diff --git a/src/journey.js.scss b/src/journey.js.scss
index c8ce923..5b5a0b7 100644
--- a/src/journey.js.scss
+++ b/src/journey.js.scss
@@ -1,5 +1,5 @@
/*
- * Journey.js Library v0.1.0
+ * Journey.js Library v0.2.0
*
* Copyright 2023 Bunoon
* Released under the MIT License
@@ -117,10 +117,15 @@ div.journey-js-dialog {
}
}
+ div {
+ &:first-of-type {
+ padding-right: calc( var(--dialog-close-button-size) + var(--spacing) );
+ }
+ }
+
div.title {
font-size: large;
font-weight: 700;
- padding-right: calc( var(--dialog-close-button-size) + var(--spacing) );
}
div.description {
diff --git a/test/dist/journey.js.bootstrap.html b/test/dist/journey.js.bootstrap.html
index 6eca43e..792959f 100644
--- a/test/dist/journey.js.bootstrap.html
+++ b/test/dist/journey.js.bootstrap.html
@@ -45,8 +45,9 @@ Additional Data:
document.getElementById( "header" ).innerText += " - v" + $journey.getVersion();
function setupConfiguration() {
- $syntax.setConfiguration( {
- safeMode: false
+ $journey.setConfiguration( {
+ safeMode: false,
+ showCloseButton: false
} );
}
diff --git a/test/src/journey.js.bootstrap.html b/test/src/journey.js.bootstrap.html
index 05528f1..6fa5bde 100644
--- a/test/src/journey.js.bootstrap.html
+++ b/test/src/journey.js.bootstrap.html
@@ -46,8 +46,9 @@ Additional Data:
document.getElementById( "header" ).innerText += " - v" + $journey.getVersion();
function setupConfiguration() {
- $syntax.setConfiguration( {
- safeMode: false
+ $journey.setConfiguration( {
+ safeMode: false,
+ showCloseButton: false
} );
}