Journey.js - Documentation - Recent Changes

Below is a list of the most recent changes made in the Journey.js versions released.

Download Now

v1.7.0 - 21st Apr 2024
Versions

Version 1.7.0:

New Features:

  • Added dialog moving support (unavailable for hints)!

Configuration Options:

  • Added a new configuration option called "dialogMovingEnabled", which states if the dialog can be moved (via the title bar, defaults to false).

Public Functions:

  • Added the parameter "group" to the public function "clearSteps()", which states the group of steps to be removed (defaults to all groups).

UI Improvements:

  • Added a new underline effect to the active dot in the dialog.


Version 1.6.1:

  • Added border hover effect to the "Do not show again" checkbox.
  • The active stage dot shown in the dialog now uses a slightly larger width.
  • The "Back" button on the dialog is now aligned to the right side of the dialog.
  • Added more spacing above the "Back" and "Next" buttons.
  • Added a line separator above the "Back" and "Next" buttons.
  • Fixed a fault that prevented the progress dots from wrapping to the next line when lots of steps were available.
  • Decreased the default font size from 0.9rem to 0.85rem.


Version 1.6.0:

New Features:

  • Added grouping support! This allows you to place your steps into different groups, allowing multiple journeys for your website/web app.

Binding Options:

  • Added a new binding option called "group", which states the group the step should be part of (defaults to "default").

Public Functions:

  • Added the parameter "group" to the public function "start()", which states the group of steps to use when starting the journey (defaults to "default).
  • Added the parameter "group" to the public function "show()", which states the group of steps to use when resuming a journey (defaults to the last group started).

Improvements:

  • The "onDoNotShowAgainChange" custom trigger now fires when the checkbox state is changed (instead of when the dialog closes).


Version 1.5.1:

  • Fixed a fault that caused the progress bar to render incorrectly when the progress dots are disabled.


Version 1.5.0:

New Features:

  • Added progress bar support! This is shown under the progress dots.
  • Added scroll to element support!

Binding Options:

  • Added a new binding option called "removeHintWhenViewed", which states if a hint should be removed when clicked (defaults to false).

Configuration Options:

  • Added a new configuration option called "showProgressBar", which states if the progress bar should be shown (defaults to false).
  • Added a new configuration option called "showProgressBarText", which states if the progress bar text should be shown (defaults to null).
  • Added a new configuration option called "scrollToElements", which states if the document view should be scrolled to view the current journey step (defaults to false).

Improvements:

  • Refactored the SCSS file to be more organized, and easier to read.
  • Smoother transition when the progress dots are updated.


Version 1.4.0:

New Features:

  • Added close confirmation message support! This will only show when the text is configured.

Binding Options - Custom Triggers:

  • Added a new binding custom trigger called "onAddStep", which states an event that should be triggered when a step is added (not hints).
  • Added a new binding custom trigger called "onRemoveStep", which states an event that should be triggered when a step is removed (not hints).

Configuration Options:

  • Added a new configuration option called "closeDialogConfirmationText", which states the confirmation message text that should be shown when closing the dialog (defaults to null).
  • Added a new configuration option called "closeDialogOnDisabledBackgroundClick", which states if the dialog should be closed when the disabled background is clicked (defaults to false).

Public Functions:

  • Added a new public function called "addDocumentSteps()", which will search the document body for new steps and add them.
  • Added a new public function called "removeStep()", which will remove a step from the journey, or a hint.
  • Added a new public function called "clearSteps()", which will remove all the steps from the journey.
  • Added a new public function called "clearHints()", which will remove all the hints from the page.
  • Added a new public function called "reverseStepOrder()", which will remove the order that the steps in the journey are shown in.

Fixes:

  • Fixed a fault that prevented the public functions "start()", "show()", and "hide()" from returning the correct scope.
  • Fixed errors in the public function documentation.
  • Fixed a fault that allows invalid objects to be passed to the "addStep()" public function.
  • Fixed the dialog being shown in the wrong position when the window is scrolled to a different position.


Version 1.3.0:

New Features:

  • Added smooth transition when the dialog is moved to different DOM elements in the journey.
  • Added a custom tooltip, which uses the default theme colors!

Binding Options:

  • Added a new binding option called "showDisabledBackground", which states if the disabled background should be shown for this step (defaults to true).
  • Added a new binding option called "tooltip", which states a custom tooltip to use for its progress dot in the main dialog (defaults to null).

Binding Options - Custom Triggers:

  • Added a new binding custom trigger called "onStart", which states an event that should be triggered when the journey is at the start.

Configuration Options:

  • Added a new configuration option called "showProgressDotToolTips", which states if the progress dot tooltips should be shown (defaults to true).

Fixes:

  • Fixed a fault that prevented the shortcut keys from being disabled when the configuration option "shortcutKeysEnabled" is set to false.


Version 1.2.0:

New Features:

  • The "Do not show again" checkbox shown in the dialog can now be styled!

Binding Options:

  • BREAKING: The binding attribute "data-journey-js" has been renamed to "data-journey-js".
  • BREAKING: All binding option custom triggers are now available under a new area called "events".

Configuration Options:

  • Added a new configuration option called "objectErrorText", which states the error text that should be shown when an object error is detected (defaults to "Errors in object: {{error_1}}, {{error_2}}").
  • Added a new configuration option called "attributeNotValidErrorText", which states the error text that should be shown when a binding object isn't valid (defaults to "The attribute '{{attribute_name}}' is not a valid object.").
  • Added a new configuration option called "attributeNotSetErrorText", which states the error text that should be shown when a binding attribute isn't set (defaults to "The attribute '{{attribute_name}}' has not been set correctly.").

Improvements:

  • Added "use strict" support internally and updated all public functions to use the new scope.
  • All default parameters are now read more accurately and apply the correct defaults.
  • The public function "setConfiguration()" will now only update the configuration (and refresh the displays) if something in the configuration has been changed.

Fixes:

  • Fixed a minor formatting issue in the "package.json" file.


Version 1.1.1:

  • Added translation support for Frisian (fy).
  • Added translation support for Sinhalese (si).
  • Added translation support for Tagalog (tl).
  • Added translation support for Tamil (ta).
  • Added translation support for Taiwanese (zh-tw).
  • Added translation support for Telugu (te).
  • Added translation support for Afrikaans (af).
  • Added translation support for Armenian (hy).
  • Added translation support for Belarusian (be).
  • Added translation support for Catalan (ca).
  • Added translation support for Esperanto (eo).


Version 1.1.0:

New Features:

  • Added a new folder to "dist" called translations, and add translation files for the following languages:
    1. ar Arabic
    2. bn Bengali
    3. bg Bulgarian
    4. zh Chinese (simplified)
    5. da Danish
    6. nl Dutch
    7. en English (default)
    8. et Estonian
    9. fa Farsi
    10. fi Finnish
    11. fr French
    12. gl Galician
    13. ka Georgian
    14. de German
    15. el Greek
    16. he Hebrew
    17. hi Hindi
    18. hu Hungarian
    19. is Icelandic
    20. id Indonesian
    21. ga Irish
    22. it Italian
    23. ja Japanese
    24. ko Korean
    25. lv Latvian
    26. lt Lithuanian
    27. lb Luxembourgish
    28. ms Malay
    29. ne Nepali
    30. no Norwegian
    31. pl Polish
    32. pt Portuguese
    33. ro Romanian
    34. sk Slovak
    35. sl Slovenian
    36. es Spanish
    37. sv Swedish
    38. th Thai
    39. tr Turkish
    40. uk Ukrainian

General Improvements:

  • Added Math injection directly into the main instance.
  • Added JSON injection directly into the main instance.

CSS:

  • Added a new ":root" variable called "--heat-js-default-font".

Documentation:

  • Added install instructions into the main README files.
  • Added documentation to state how issues and feature requests should be made.

Fixes:

  • Fixed the "journey.js.nuspec" file including the ".github" folder when NuGet PACK is called.
  • Fixed spacing issues in the dialog that occur when additional CSS libraries are not included.


Version 1.0.3:

  • Fixed the buttons not having any spacing around them by default.
  • Fixed a fault that prevented the hints from closing correctly (due to element binding existing).
  • Fixed a fault that caused a single progress dot to appear when only one item is available.


Version 1.0.2:

  • All hover transition effects now work for hovering, and not hovering, which results in a smoother display.
  • Removed the outline effect for the "Back", "Next", and "Finish" buttons.
  • Removed replicated HEX colors (all now reference the original ":root" variable).
  • Added an ":active" states for all buttons, dots, and the close button (now shows a slightly lighter background color).
  • Minor documentation improvements.


Version 1.0.1:

  • Fixed some missing CSS files in test HTML files, and updated the files to use the correct markup.
  • Fixed some incorrectly formatted markup in the documentation.


Version 1.0.0:

New Features:

  • Do not show again! This will show a checkbox, which will ask if the journey dialog should be shown again (calls a custom trigger to state the option selected).

Configuration Options:

  • Added a new configuration option "showDoNotShowAgain" (defaults to false), which states if the "Do not show again" checkbox should be shown.
  • Added a new configuration option "doNotShowAgainText" (defaults to "Do not show again"), which states the text to use for the "Do not show again" checkbox.

Configuration Options - Custom Triggers:

  • Added a new configuration custom trigger called "onDoNotShowAgainChange", which states an event that should be triggered when the "Do not show again" checkbox is changed (on close).

General Improvements:

  • BREAKING: All ":root" variables now start with "--journey-js-", which will prevent collisions with other libraries.
  • Updated project homepage URL.


Version 0.8.0:

Binding Options:

  • Added a new binding option called "alignHintToClickPosition", which states if the hint should be shown at the mouse position (defaults to false).

Configuration Options:

  • Added a new configuration option "showProgressDotNumbers" (defaults to false), which states if the progress dots should show the step numbers in them.
  • Added a new configuration option "showButtons" (defaults to true), which states if the main buttons should be shown.
  • Added a new configuration option "closeButtonToolTipText" (defaults to "Close"), which states the tooltip text to use for the "Close" button.

General Improvements:

  • The progress dots will now show tooltips (which is the title of the step being focused).

CSS:

  • The "Close" button now uses slightly thicker lines for the X.
  • Added more default padding around the progress dots area.

Documentation:

  • Added missing binding documentation for "alignTop" and "alignRight".

Fixes:

  • Fixed a fault that allowed the shortcut keys (for journey navigation) to still work when a hint is shown.


Version 0.7.0:

New Features:

  • Added hints support! This will draw a small icon in the top left of an element, that can be clicked to show a hint.

Binding Options:

  • Added a new binding option called "isHint", which states if the element should show the dialog as a hint (will not be included in the main journey).

Configuration Options:

  • Renamed the configuration option "previousButtonText" to "backButtonText" (the default text is now "Back").

Public Functions:

  • Added new public function "start()", which is used to start the journey from the beginning.
  • Added new public function "addStep()", which is used to add a new step to the current journey.

CSS:

  • Added active progress DOT is now slightly larger in width (makes it a bit more clear).
  • Renamed the CSS class "button.previous" to "button.back".

Documentation:

  • Fixed spelling and grammar mistakes across all the documentation.


Version 0.6.0:

Binding Options:

  • Added a new binding option called "alignTop", which states if the dialog should be aligned to the top of the element.
  • Added a new binding option called "alignRight", which states if the dialog should be aligned to the right of the element.

Binding Options - Custom Triggers:

  • Added a new binding custom trigger called "onOpen", which states an event that should be triggered when the dialog is first opened.

Shortcut Keys:

  • Added a new shortcut key "Up", which will move to the first element in the journey.
  • Added a new shortcut key "Down", which will move to the last element in the journey.

Documentation:

  • Added examples to all documentation areas.
  • Reorganized the documentation for the project.


Version 0.5.0:

New Features:

  • Browser URL parameters support! This will allow you to force Journey.js to open when the page has finished loading and state what step to start on.

Configuration Options:

  • Added a new configuration option "browserUrlParametersEnabled" (defaults to true), which states if browser URL parameter reading support is enabled.


Version 0.4.0:

New Features:

  • Progress dots are now shown on the dialog! This allows you to jump to specific areas of the journey!

Configuration Options:

  • Added a new configuration option "showProgressDots" (defaults to true), which states if the progress dots are shown on the dialog.

Binding Options:

  • Added a new binding option called "attach", which states if the dialog should be attached to the element (otherwise, it's centred in the window) Defaults to true.
  • Added a new binding option called "sendClick", which states if the active DOM element should fire any assigned click event (defaults to false).

Binding Options - Custom Triggers:

  • Added a new binding custom trigger called "onFinish", which states an event that should be triggered when the dialog is closed on the final step DOM element.

Documentation:

  • Project description update.

Fixes:

  • Fixed the dialog showing in the wrong position when the element is aligned off the right side of the screen.


Version 0.3.0:

New Features:

  • Added shortcut keys "Left", "Right", and "Escape", which move to the previous/next element in the journey, and close the dialog.

Configuration Options:

  • Added a new configuration option "shortcutKeysEnabled" (defaults to true), which states if the shortcut keys (for navigation) are enabled.

CSS:

  • Added CSS ":root" variable "--dialog-close-button-background-color", which states the background color to use for the close button.
  • Added CSS ":root" variable "--dialog-close-button-border-color", which states the border color to use for the close button.
  • Added CSS ":root" variable "--dialog-close-button-hover-background-color", which states the background color to use for the close button when hovered.
  • Renamed one or two of the other ":root" variables for the Close button.

General Improvements:

  • The attribute "data-journey-js" is now removed from all elements after they are processed.

Fixes:

  • Fixed the previous buttons event sometimes allowing a loop back to the end.


Version 0.2.1:

  • Added Code of Conduct, Contributing, and Security Policy.


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 :)