birwin0000/notable-tour

Web Page Tour

About

The Notable Tour library will take the user on a tour of your application.

Notable Tour will highlight different HTMLElements by surrounding the element with a darkened div and providing a text description/instructions for the user to read.

Install

npm i notable-tour

Example

Coming Soon

Instructions

The HTML

For each element you would like Notable Tour to highlight, provide a data-tour element with the text you would like displayed:

<span data-tour="This is text notable tour will display">Highlighted Text Here</span>

Config

Pass an object that overrides any of these values to customize the look of the tour:

        let config = {
            backgroundColor: 'black',
            color: '#ffffff',
            opacity: .8,
            className: 'notable-tour',
            buttons: {
                next: {
                    classes: ["btn", "btn-primary"]
                },
                previous: {
                    classes: ["btn", "btn-primary"]
                },
                end: {
                    classes: ["btn", "btn-primary"]
                },
            },
            theme : 'light'
        };


    tour.start(config);

Themes include:

• light
• dark
• elegant
• fantasy
• robot

Import (React?/Angular?)

import tour from 'notable-tour';

class SomeComponent {
  public doTour() {
    tour();
  }
}

<button (click)="doTour()">Start Tour</button>

notable-tour's Issues

Multiple Tours

Allow multiple tours on one page

Examples:

• One tour launches immediately on page load and shows new features, One tour is a standard help tour
• Different tours cover different features and have different launching points

Improve Code Quality

Based upon this web site:
https://npms.io/about

Components occasionally shift when loading tour data

Occasionally, the components in the web page shift when the tour data displays causing the highlight to be shifted slightly

Directed Style Overrides

Every part of the tour style can be overwritten using configuration settings

Allow Tour entries to be manually ordered

The initial release orders tour entries by location on web page. Allow setting which order the tour happens (Should use taborder?)

Shake Tour start button

By overriding a config option, allow the user to animate the button (shake) a few times to draw the user's attention to the tour.

This shaking will be disabled if the user has already viewed the tour or alternatively, if they have already viewed the web page

Fix Example

Example is failing to run

Replace CSS with SCSS

Tour Override

Allow Tour entries to be overridden by providing an object containing component IDs and a tour entry text description.

Enable Deployment Packing

Themes

Allow user to theme tours

Animation

Tour should use CSS animations from one tour entry to another including:

• Slow Scrolling
• Move the highlighted area to new destination over a period of time
• Move text in and out from side of screen
• Move arrow and morph into new direction over a period of time

Auto-register Tour Start button

Auto-register tour start button so that programmers/implementers can drop a button on a page and have it launch a tour without any programming

• Investigate using an IIFE to register a click event

Video Integration

Allow video to play inside of a tour entry

Meta Tasks

1. Test Code Coverage
2. Github Pipeline
   • Coverage
   • Build Passing
   • Tests Passing
   • Stable Release Version
   • Static Code Analysis Grade (JsHint)
3. Publish to NPM Repo

Sprite-based animation

Improved animation using sprites to improve animation experience

Fix merge actions

Merge actions are failing on the github server when merging into main

Auto-Start Tour

Allow end users the ability to configure the tour to start automatically based upon whether or not a cookie is set on the end-user's browser. If no cookie indicating a tour happened, then the first step in the tour happens automatically.

Note - This feature is probably not recommended enabled as the end-user experience might be impaired, but there may be instances for its usage.

Fantasy Quadrant 1 Arrow head is cut off

Framework Integrations

Integrate with the following frameworks:

• Angular
• React
• Vue

Responsive

Tour should adjust based upon screen width/height.

• Arrow should be dropped on small screens
• Text should reside directly below or above the component