<commit_before><p align="center">
  <img src="https://raw.githubusercontent.com/PoslinskiNet/ember-introjs/master/ember-introjs.png" alt="Ember Custom Actions Logo" width="100%">
</p>

[![Build Status](https://api.travis-ci.org/PoslinskiNet/ember-introjs.svg?branch=master)](http://travis-ci.org/PoslinskiNet/ember-introjs)
[![Greenkeeper badge](https://badges.greenkeeper.io/PoslinskiNet/ember-introjs.svg)](https://greenkeeper.io/)
[![Ember Observer Score](https://emberobserver.com/badges/ember-pell.svg)](https://emberobserver.com/addons/ember-pell)
[![NPM package info for ember-introjs](https://img.shields.io/npm/dm/ember-introjs.svg)](http://npmjs.com/package/ember-introjs) &nbsp; [![License info](https://img.shields.io/npm/l/ember-introjs.svg)](http://npmjs.com/package/ember-introjs)

Ember IntroJS wraps [introjs][intro-js] in an Ember Component to guide
users through your app.

Installation
------------------------------------------------------------------------------

`ember install ember-introjs`

## Usage

### 1st option (recommended)
#### Use `intro-js/step` component as a wrapper

```hbs
{{#intro-js/step step=1 intro="Step Component"}}
  <h1>Hello!</h1>
{{/intro-js/step}}
```

You can customize wrapper using:
- `position="top"`
- `intro="Welcome!"`
- `tooltipClass="tooltip-class"`
- `highlightClass="highlight-class"`
- `position="top"`
- `hint="Use it :)"`
- `hintPosition="bottom-left"`

Options are documented in the code as well as in [IntroJS Docs](http://introjs.com/docs)

### 2nd option
#### 1. Declare your steps:
You can declare an array in JavaScript in your controller or parent component:

```javascript
// app/controllers/ticket.js
import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default Controller.extend({
  steps: computed(function() {
    return [
      {
        element: $('#step1'),
        intro: 'Step 1!'
      },
      {
        element: $('#step2'),
        intro: 'Step2!'
      }
    ];
  })
});
```

### 2. Use `intro-js` component
Then to use the steps, you can use the steps in your handlebars template:

```handlebars
{{! app/templates/ticket }}
{{intro-js start-if=true}}
```

## Action Hooks

IntroJS supports a series of hooks for getting notified for when users switch between steps or exit. You can subscribe to these actions using the typical `actions` hash in your Route or Controller:

```javascript
// app/routes/ticket.js
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    introBeforeChange(previousStep, nextStep, introJSComponent,
elementOfNewStep){
      // You could track user interactions here, e.g. analytics.
      this.sendAnalytics(prevStep);
    }
  }
});
```

Then pass the name of the action in the handlebars helper that renders
the component below.

```handlebars
{{intro-js steps=steps start-if=true on-before-change="introBeforeChange"}}
```

### on-before-change (currentStep, nextStep, introJSComponent, nextElement)

Called when the user clicks next (or uses their keyboard). Called before
`on-change`. Given the currentStep, the nextStep, the introJSComponent,
and the DOM element of the next step.

### on-change (step, introJSComponent, currentElement)

Called after `on-before-change` when the user moves a step (backwards or
forward) in the introduction. Gives the current step, the introJS<commit_msg>docs: use action helper in example<commit_after><p align="center">
  <img src="https://raw.githubusercontent.com/PoslinskiNet/ember-introjs/master/ember-introjs.png" alt="Ember Custom Actions Logo" width="100%">
</p>

[![Build Status](https://api.travis-ci.org/PoslinskiNet/ember-introjs.svg?branch=master)](http://travis-ci.org/PoslinskiNet/ember-introjs)
[![Greenkeeper badge](https://badges.greenkeeper.io/PoslinskiNet/ember-introjs.svg)](https://greenkeeper.io/)
[![Ember Observer Score](https://emberobserver.com/badges/ember-pell.svg)](https://emberobserver.com/addons/ember-pell)
[![NPM package info for ember-introjs](https://img.shields.io/npm/dm/ember-introjs.svg)](http://npmjs.com/package/ember-introjs) &nbsp; [![License info](https://img.shields.io/npm/l/ember-introjs.svg)](http://npmjs.com/package/ember-introjs)

Ember IntroJS wraps [introjs][intro-js] in an Ember Component to guide
users through your app.

Installation
------------------------------------------------------------------------------

`ember install ember-introjs`

## Usage

### 1st option (recommended)
#### Use `intro-js/step` component as a wrapper

```hbs
{{#intro-js/step step=1 intro="Step Component"}}
  <h1>Hello!</h1>
{{/intro-js/step}}
```

You can customize wrapper using:
- `position="top"`
- `intro="Welcome!"`
- `tooltipClass="tooltip-class"`
- `highlightClass="highlight-class"`
- `position="top"`
- `hint="Use it :)"`
- `hintPosition="bottom-left"`

Options are documented in the code as well as in [IntroJS Docs](http://introjs.com/docs)

### 2nd option
#### 1. Declare your steps:
You can declare an array in JavaScript in your controller or parent component:

```javascript
// app/controllers/ticket.js
import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default Controller.extend({
  steps: computed(function() {
    return [
      {
        element: $('#step1'),
        intro: 'Step 1!'
      },
      {
        element: $('#step2'),
        intro: 'Step2!'
      }
    ];
  })
});
```

### 2. Use `intro-js` component
Then to use the steps, you can use the steps in your handlebars template:

```handlebars
{{! app/templates/ticket }}
{{intro-js start-if=true}}
```

## Action Hooks

IntroJS supports a series of hooks for getting notified for when users switch between steps or exit. You can subscribe to these actions using the typical `actions` hash in your Route or Controller:

```javascript
// app/routes/ticket.js
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    introBeforeChange(previousStep, nextStep, introJSComponent,
elementOfNewStep){
      // You could track user interactions here, e.g. analytics.
      this.sendAnalytics(prevStep);
    }
  }
});
```

Then pass the name of the action in the handlebars helper that renders
the component below.

```handlebars
{{intro-js steps=steps start-if=true on-before-change=(action "introBeforeChange")}}
```

### on-before-change (currentStep, nextStep, introJSComponent, nextElement)

Called when the user clicks next (or uses their keyboard). Called before
`on-change`. Given the currentStep, the nextStep, the introJSComponent,
and the DOM element of the next step.

### on-change (step, introJSComponent, currentElement)

Called after `on-before-change` when the user moves a step (backwards or
forward) in the introduction. Gives the current step, the introJS
{'fraction_non_alphanumeric': 0.16779811097992917, 'fraction_numerical': 0.004132231404958678, 'mean_word_length': 3.950328707085464, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 16, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4750042', 'n_tokens_mistral': 2175, 'n_tokens_neox': 2042, 'n_words': 581}