diff --git a/README.md b/README.md
index 07c79c1..ba49063 100644
--- a/README.md
+++ b/README.md
@@ -2,15 +2,15 @@
Journey.js
[](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)
-[](https://www.npmjs.com/package/jjourney.js)
-[](https://www.nuget.org/packages/jJourney.js/)
+[](https://www.npmjs.com/package/jjourney.js)
+[](https://www.nuget.org/packages/jJourney.js/)
[](https://github.com/williamtroup/Journey.js/blob/main/LICENSE.txt)
[](https://github.com/williamtroup/Journey.js/discussions)
[](https://www.william-troup.com/)
> 🚶 A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!
-> v1.4.0
+> v1.5.0
=m.length-1?d.finishButtonText:d.nextButtonText;ja(a);ka(null,a);G.innerHTML=w.empty;if(d.showProgressDots)for(b=m.length,c=0;cr.innerWidth||
-b.alignRight)a-=g.offsetWidth,a+=b.currentView.element.offsetWidth;if(c+g.offsetHeight>r.innerHeight||b.alignTop)c-=g.offsetHeight+b.currentView.element.offsetHeight;g.style.top=c+"px";g.style.left=a+"px"}else a=ma(),b=Z.max(0,(r.innerWidth-g.offsetWidth)/2+a.left),a=Z.max(0,(r.innerHeight-g.offsetHeight)/2+a.top),g.style.left=b+"px",g.style.top=a+"px"}function I(a){a=k(a)?a:!0;var b=t[m[h]];k(b)&&k(b.currentView.element)&&(b.currentView.element.className=b.currentView.element.className.replace(w.space+
-"journey-js-element-focus",w.empty),k(X)&&(b.currentView.element.style.position=X),a&&y(b.events.onLeave,b.currentView.element))}function ya(a,b){b=t[b];var c=null;a===h?c=n("div","dot-active"):(c=n("div","dot"),c.onclick=function(){I();h=a;D()});G.appendChild(c);d.showProgressDotToolTips&&(x(b.tooltip)?W(c,b.tooltip):W(c,b.title));d.showProgressDotNumbers&&(c.className+=" dot-number",c.innerHTML=(a+1).toString())}function za(){k(z)||(z=n("div","journey-js-tooltip"),z.style.display="none",q.body.appendChild(z),
-q.body.addEventListener("mousemove",function(){O()}),q.addEventListener("scroll",function(){O()}))}function W(a,b){null!==a&&(a.onmousemove=function(c){Aa(c,b)})}function Aa(a,b){na(a);O();U=setTimeout(function(){z.innerHTML=b;z.style.display="block";la(a,z)},d.tooltipDelay)}function O(){k(z)&&(k(U)&&(clearTimeout(U),U=null),"block"===z.style.display&&(z.style.display="none"))}function oa(){for(var a=d.domElementTypes,b=a.length,c=0;cr.innerWidth?c-=b.offsetWidth:c++;e+b.offsetHeight>r.innerHeight?e-=b.offsetHeight:e++;c=m.length-1};f.addDocumentSteps=function(){oa();return f};f.addStep=function(a,b){B(a)&&B(b)&&(pa(a,qa(b)),m.sort(),V());return f};f.removeStep=function(a){if(B(a)){var b=!1,c;for(c in t)if(t.hasOwnProperty(c)){var e=t[c];if(e.currentView.element===a){y(e.events.onRemoveStep,e.currentView.element);m.splice(m.indexOf(e.order),1);delete t[e.order];m.sort();b=!0;break}}b?V():ra(a,"journey-js-hint")}return f};f.clearSteps=function(){V();for(var a in t)if(t.hasOwnProperty(a)){var b=
-t[a];y(b.events.onRemoveStep,b.currentView.element)}t={};m=[];return f};f.clearHints=function(){ra(q.body,"journey-js-hint");return f};f.reverseStepOrder=function(){m.reverse();V();return f};f.setConfiguration=function(a){if(B(a)){var b=!1,c;for(c in a)a.hasOwnProperty(c)&&d.hasOwnProperty(c)&&d[c]!==a[c]&&(d[c]=a[c],b=!0);b&&ta(d)}return f};f.getVersion=function(){return"1.4.0"};(function(a,b,c,e){q=a;r=b;Z=c;sa=e;ta();q.addEventListener("DOMContentLoaded",function(){va();wa();za();oa();var l=void 0,
-E=(l=k(l)?l:!0)?q.addEventListener:q.removeEventListener;l=l?r.addEventListener:r.removeEventListener;d.shortcutKeysEnabled&&E("keydown",Da);l("resize",Ea);E=!1;if(d.browserUrlParametersEnabled){l={};var u=r.location.href.split("?");if(1=h.length-1?d.finishButtonText:
+d.nextButtonText;na(a);oa(null,a);F.innerHTML=w.empty;if(d.showProgressDots)for(b=h.length,c=0;cr.innerWidth||b.alignRight)a-=g.offsetWidth,a+=b.currentView.element.offsetWidth;if(c+g.offsetHeight>r.innerHeight||
+b.alignTop)c-=g.offsetHeight+b.currentView.element.offsetHeight;g.style.top=c+"px";g.style.left=a+"px"}else a=qa(),b=Y.max(0,(r.innerWidth-g.offsetWidth)/2+a.left),a=Y.max(0,(r.innerHeight-g.offsetHeight)/2+a.top),g.style.left=b+"px",g.style.top=a+"px"}function I(a){a=l(a)?a:!0;var b=t[h[k]];l(b)&&l(b.currentView.element)&&(b.currentView.element.className=b.currentView.element.className.replace(w.space+"journey-js-element-focus",w.empty),l(ca)&&(b.currentView.element.style.position=ca),a&&y(b.events.onLeave,
+b.currentView.element))}function Ba(a,b){b=t[b];var c=null;a===k?c=n("div","dot-active"):(c=n("div","dot"),c.onclick=function(){I();k=a;D()});F.appendChild(c);d.showProgressDotToolTips&&(x(b.tooltip)?ba(c,b.tooltip):ba(c,b.title));d.showProgressDotNumbers&&(c.className+=" dot-number",c.innerHTML=(a+1).toString())}function Ca(){l(z)||(z=n("div","journey-js-tooltip"),z.style.display="none",q.body.appendChild(z),q.body.addEventListener("mousemove",function(){P()}),q.addEventListener("scroll",function(){P()}))}
+function ba(a,b){null!==a&&(a.onmousemove=function(c){Da(c,b)})}function Da(a,b){ra(a);P();Z=setTimeout(function(){z.innerHTML=b;z.style.display="block";pa(a,z)},d.tooltipDelay)}function P(){l(z)&&(l(Z)&&(clearTimeout(Z),Z=null),"block"===z.style.display&&(z.style.display="none"))}function sa(){for(var a=d.domElementTypes,b=a.length,c=0;cr.innerWidth?c-=b.offsetWidth:c++;e+b.offsetHeight>r.innerHeight?e-=b.offsetHeight:e++;c=h.length-1};f.addDocumentSteps=function(){sa();return f};f.addStep=function(a,b){B(a)&&B(b)&&(ta(a,ua(b)),h.sort(),aa());return f};f.removeStep=function(a){if(B(a)){var b=!1,c;for(c in t)if(t.hasOwnProperty(c)){var e=t[c];if(e.currentView.element===a){y(e.events.onRemoveStep,e.currentView.element);
+h.splice(h.indexOf(e.order),1);delete t[e.order];h.sort();b=!0;break}}b?aa():ea(a,"journey-js-hint")}return f};f.clearSteps=function(){aa();for(var a in t)if(t.hasOwnProperty(a)){var b=t[a];y(b.events.onRemoveStep,b.currentView.element)}t={};h=[];return f};f.clearHints=function(){ea(q.body,"journey-js-hint");return f};f.reverseStepOrder=function(){h.reverse();aa();return f};f.setConfiguration=function(a){if(B(a)){var b=!1,c;for(c in a)a.hasOwnProperty(c)&&d.hasOwnProperty(c)&&d[c]!==a[c]&&(d[c]=a[c],
+b=!0);b&&wa(d)}return f};f.getVersion=function(){return"1.5.0"};(function(a,b,c,e){q=a;r=b;Y=c;va=e;wa();q.addEventListener("DOMContentLoaded",function(){ya();za();Ca();sa();var m=void 0,E=(m=l(m)?m:!0)?q.addEventListener:q.removeEventListener;m=m?r.addEventListener:r.removeEventListener;d.shortcutKeysEnabled&&E("keydown",Ga);m("resize",Ha);E=!1;if(d.browserUrlParametersEnabled){m={};var u=r.location.href.split("?");if(1
jJourney.js
- 1.4.0
+ 1.5.0
Journey.js
A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!
William Troup
diff --git a/package.json b/package.json
index f94cfe5..e5ed61a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "jjourney.js",
"title": "Journey.js",
"description": "A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!",
- "version": "1.4.0",
+ "version": "1.5.0",
"main": "dist/journey.js",
"homepage": "https://www.william-troup.com/journey-js/",
"author": {
diff --git a/src/journey.js b/src/journey.js
index 3ba87d9..971f5d1 100644
--- a/src/journey.js
+++ b/src/journey.js
@@ -4,7 +4,7 @@
* A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!
*
* @file journey.js
- * @version v1.4.0
+ * @version v1.5.0
* @author Bunoon
* @license MIT License
* @copyright Bunoon 2024
@@ -64,6 +64,9 @@
_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,
@@ -135,6 +138,15 @@
_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 );
@@ -220,6 +232,10 @@
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" ) {
@@ -229,6 +245,8 @@
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;
@@ -243,6 +261,7 @@
setDialogText( bindingOptions );
setDialogPosition( null, bindingOptions );
buildProcessDots();
+ setProgressBarPosition();
fireCustomTrigger( bindingOptions.events.onEnter, bindingOptions.currentView.element );
if ( bindingOptions.sendClick ) {
@@ -373,6 +392,17 @@
}
}
+ 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 + "%";
+ }
+ }
+
/*
* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@@ -520,11 +550,16 @@
_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" );
+ }
};
}
@@ -616,6 +651,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 );
@@ -1286,6 +1322,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();
@@ -1301,6 +1339,7 @@
_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() {
@@ -1324,7 +1363,7 @@
* @returns {string} The version number.
*/
_public.getVersion = function() {
- return "1.4.0";
+ return "1.5.0";
};
diff --git a/src/journey.js.scss b/src/journey.js.scss
index 003aec5..e0c6d1e 100644
--- a/src/journey.js.scss
+++ b/src/journey.js.scss
@@ -1,5 +1,5 @@
/*
- * Journey.js Library v1.4.0
+ * Journey.js Library v1.5.0
*
* Copyright 2024 Bunoon
* Released under the MIT License
@@ -119,6 +119,40 @@ div.journey-js-dialog {
}
}
+ div {
+ &:first-of-type {
+ padding-right: calc( var(--journey-js-dialog-close-button-size) + var(--journey-js-spacing) );
+ }
+ }
+
+ div.title {
+ font-size: large;
+ font-weight: var(--journey-js-title-bold-weight);
+ margin-bottom: var(--journey-js-spacing);
+ }
+
+ div.description {
+ font-weight: var(--journey-js-text-bold-weight);
+ }
+
+ div.checkbox-container {
+ margin-top: var(--journey-js-spacing);
+ margin-bottom: var(--journey-js-spacing);
+
+ 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);
@@ -169,32 +203,16 @@ div.journey-js-dialog {
}
}
}
+}
- div {
- &:first-of-type {
- padding-right: calc( var(--journey-js-dialog-close-button-size) + var(--journey-js-spacing) );
- }
- }
-
- div.title {
- font-size: large;
- font-weight: var(--journey-js-title-bold-weight);
- margin-bottom: var(--journey-js-spacing);
- }
-
- div.description {
- font-weight: var(--journey-js-text-bold-weight);
- }
-
- div.checkbox-container {
- margin-top: var(--journey-js-spacing);
- margin-bottom: var(--journey-js-spacing);
- 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);
@@ -245,6 +263,8 @@ div.journey-js-dialog {
}
div.dot-active {
+ transition: var(--journey-js-transition);
+ transition-property: width;
border-radius: 10px;
height: 10px;
width: 15px;
@@ -253,45 +273,41 @@ div.journey-js-dialog {
color: var(--journey-js-color-white) !important;
}
}
+}
- div.buttons {
- margin-top: var(--journey-js-spacing);
- text-align: right;
- button.back,
- 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);
+/*
+ -------------------------------------------------------------------------
+ Journey.js - Dialog - Progress Bar
+ -------------------------------------------------------------------------
+*/
- &: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.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);
+ border: var(--journey-js-border-size) solid var(--journey-js-dialog-button-border-color);
+ text-wrap: nowrap;
+ overflow: hidden;
- &: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.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;
- &:disabled {
- background-color: var(--journey-js-dialog-button-disabled-background-color) !important;
- color: var(--journey-js-color-gray);
+ 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);
}
}
-
- button.next {
- font-weight: var(--journey-js-title-bold-weight);
- }
}
}
@@ -359,6 +375,55 @@ div.journey-js-dialog {
}
+/*
+ -------------------------------------------------------------------------
+ Journey.js - Dialog - Buttons
+ -------------------------------------------------------------------------
+*/
+
+div.journey-js-dialog {
+ div.buttons {
+ margin-top: var(--journey-js-spacing);
+ text-align: right;
+
+ button.back,
+ 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);
+
+ &: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;
+ }
+
+ &: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);
+ }
+
+ &:disabled {
+ background-color: var(--journey-js-dialog-button-disabled-background-color) !important;
+ color: var(--journey-js-color-gray);
+ }
+ }
+
+ button.next {
+ font-weight: var(--journey-js-title-bold-weight);
+ }
+ }
+}
+
+
/*
-------------------------------------------------------------------------
Journey.js - Hints
diff --git a/test/css/styles.css b/test/css/styles.css
index 21b7f66..98014c6 100644
--- a/test/css/styles.css
+++ b/test/css/styles.css
@@ -44,6 +44,6 @@ div.contents {
padding: 10px;
}
-button {
+div.contents button {
margin: 3px !important;
}
\ No newline at end of file
diff --git a/test/dist/journey.js.bootstrap.html b/test/dist/journey.js.bootstrap.html
index 7f0d427..96b4a91 100644
--- a/test/dist/journey.js.bootstrap.html
+++ b/test/dist/journey.js.bootstrap.html
@@ -28,7 +28,7 @@
Show/Hide:
Start
Show
- Hide
+ Hide
Is Open
Is Complete
Additional Data:
showProgressDotNumbers: false,
shortcutKeysEnabled: true,
showProgressDotToolTips: true,
- closeDialogOnDisabledBackgroundClick: false
+ closeDialogOnDisabledBackgroundClick: false,
+ showProgressBar: false,
+ showProgressBarText: false
} );