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