❤
npm
Sign UpSign In

ember-tutorial-component

3.0.0 • Public • Published

Ember Tutorial Component

npm version Ember badge Build Status Ember Observer Score Code Climate Dependencies Test Coverage

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

  • Live Demo Link Demo

  • Demo Gif ezgif com-video-to-gif 1

Installation

  • git clone this repository
  • npm install
  • bower install

Running

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

Readme

Keywords

Package Sidebar

Install

npm i ember-tutorial-component

Repository

github.com/svkangal/ember-tutorial-component

Homepage

github.com/svkangal/ember-tutorial-component#readme

Weekly Downloads

23

Version

3.0.0

License

MIT

Last publish

Collaborators

  • svkangal
Try on RunKit
Report malware