Ember Tutorial Component

Ember Add-on for step-by-step guide and feature introduction, built on top of Tether library, that supports auto-scroll, configuration and expiration.

Index

• Demo
• Installation
• Running
• Running Tests
• Usage
• API
• npm Url
• Ongoing Features
• Future Enhancements

Demo

• Live Demo Link Demo

• Demo Gif

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200/tutorial

Running Tests

• ember test
• ember test --server

Usage

  {{ember-tutorial-component
    config=config
  }}

API

Config

config: configuration for the component

{
  data: [{
    target: "css-selector",
    message: "string",
    pointerDirection: "top" | "bottom" | "left" | "right",
    offset: "10px 20px",
    constraints: {
      constrainedAreaContainer: "css-selector",
      scrollableContainer: "css-selector"
    },
    actions: {
      previous: function() {},
      next: function() {}
    },
    mask: {
      enabled: "boolean",
      zIndex: "number"
    }
  },
  ...
  }],
  mask: {
    enabled: "boolean",
    zIndex: "number"
  },
  expiration: {
    localStorageKey: "string",
    duration: "number"
  },
  actions: {
    afterDone: function() {}
  }
}

Data

data provides the configuration for each message that will be displayed.

Parameter	Type	Description
target	String (CSS-Selector)	CSS-Selector for the element that the message box will attach to. If there are more than one selected element from the selector, only the first one will be attached.
message	String	Message that will be displayed on each step.
pointerDirection	String	Direction of the pointer and orientation that the message will attach to the target. Supported Value: top, bottom, left and right Default Value: bottom
offset	String	Offset value of the message box from target attachment. See Tether.io's offset value for more details.
constraints.constrainedAreaContainer	String (CSS-Selector)	Selector for the parent element that the message box will attach to. The message will disappear when it's out of the view of parent element.
constraints.scrollableContainer	String (CSS-Selector)	Scrollable element that will automatically scroll the message box into view. Note that the element should be a positioned element for the scroll behavior to work correctly.
actions.previous	Function	Callback when user clicks previous. It can be used to handle interaction, e.g. click event, along with the message.
actions.next	Function	Callback when user clicks next. It can be used to handle interaction, e.g. click event, along with the message.
mask.enabled	Boolean	If true, shows the mask around the message box, and false otherwise.
mask.zIndex	Number	z-index value for the mask. Default Value: 1000

Mask

mask provides the configuration for the backdrop that will mask the rest of the page, except the message box. Its properties are identical to mask.enabled and mask.zIndex. If it is not included in config, no mask will be displayed.

Parameter	Type	Description
enabled	Boolean	If true, shows the mask around the message box, and false otherwise.
zIndex	Number	z-index value for the mask. Default Value: 1000

Expiration

expiration gives the control on the expiration of the tutorial. It does so by storing the expiration date in localStorage. It will not show the tutorial to the user that has already seen within the specified duration and renew the expiration date for the user that has last seen passed the specified duration.

Parameter	Type	Description
localStorageKey	String	Key to store the expiration date in localStorage
duration	Number	Duration in hour that the user will not see the tutorial until the specified amount of duration has passed. For example, if duration is 10, the users will not see the tutorial after first seen for 10 hours. After that, if the user sees the tutorial again, the expiration will be renewed to the next 10 hours that the user will not be able to see the tutorial again.

actions

actions provides the callback during various steps of the guides.

Parameter	Type	Description
afterDone	Function	Callback when user finishes the tutorial

npm Url

https://www.npmjs.com/package/ember-tutorial-component

Ongoing Features

• Skip tutorial feature/ Close button.
• Style Improvements and better layout for tooltips
• Make features like skip/close optional and configurable.

Future Enhancements

• Support HTML content in tooltips