Journey.js - Documentation - Recent Changes

Version 2.2.0:

New Features:

• Bigger dialog support (unavailable for hints).

Building Options:

• Added a new binding option called "offset" (defaults to 0), which states the additional offset to use for the dialog position.
• Added a new binding option called "useLargerDisplay" (defaults to false), which states if the bigger display for the dialog should be used (uses a new class called "journey-js-dialog-lg").

Configuration Options:

• Added a new configuration option called "hintClickPositionOffset" (defaults to 0), which states the additional offset to use for hints that are shown at the mouse position.
• Added a new configuration option called "tooltipOffset" (defaults to 0), which states the additional offset to use for the tooltip position.

General Improvements:

• Moved from ES2016 to ES2020.
• Added an ignore path for ".DS_Store" files when packing the NuGet package.
• Added more strict types around variables and objects.
• Updated to the latest NPM packages.

Version 2.1.0:

Building Options:

• Added a new binding option called "ignore" (defaults to false), which states if the element should be ignored in the journey.
• Added a new binding option called "moveToNextOnClick" (defaults to false), which states if the journey should move to the next step element the focused element is clicked.

Configuration Options:

• BREAKING: All text configuration settings are now under a new section called "text".
• BREAKING: All event configuration settings are now under a new section called "events".
• Added a new configuration option called "showStepNumbersInTitle" (defaults to false), which states if the step number should be shown in the dialog title bar.

Improvements:

• Massive reorganization of all the .ts files in the project.
• Updated to the latest NPM packages.
• Minor type improvements.

Fixes:

• Fixed an issue that caused the buttons in the display to use the wrong font.

Version 2.0.3:

• Fixed bad HTML in the README files.
• Moved all string concatenation to use string templates.
• Appending/Removing classes from elements now uses the "classList" object.
• Updated to the latest NPM packages.

Version 2.0.2:

• Fixed CDN links pointing to the wrong version.
• Added a "build-all" script option so that everything (including minimized versions) can be built with one command.
• Minor CSS layout improvements.
• Removed deprecated "cancelBubble" usages and replaced them with "stopPropagation()".
• Rewritten "getStyleValueByName()" to use the modern implementation to get a style.
• Fixed a type mismatch between the PublicApi structure and the implementation.
• Improved more type implementations.
• The "import" public API function will now show the select files dialog if no files are passed.

Version 2.0.1:

• Updated file headers to show the correct name of the file.
• Added more strict types around variables and objects.
• Updated packages.
• Renames the SASS "foundation" folder to "sass".
• Minor documentation updates.

Version 2.0.0:

Language Shift:

• The entire project has been rewritten in TypeScript, allowing all components to be exported, which allows better support for libraries such as React, Angular, etc.
• Added CDN links for the minimized version of the files.
• The TypeScript code is compiled to ES2016 instead of ES5 (older browsers, such as IE, are no longer supported).

Building:

• You can now run separate builds to produce CJS, ESM, and minimized project versions.
• All files not required for the NPM packages have now been excluded.

Testing:

• Removed the "src" and "dist" folders under "test". Only the dist versions remain, removing duplication.
• Added "BUILD_INSTRUCTIONS.md" to help first-time users set up their dev environments.

Version 1.7.2:

• Added export support for the global "$journey" object, which can now be imported as "journey.js".

Version 1.7.1:

• The public functions "start()", "show()", and "hide()" will now only fire if the right conditions are met (dialog open/closed, etc).
• All text translations now allow empty text to be passed (which will prevent them from defaulting to the English version).

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