Name: ember-introjs
Owner: simplabs
Description: An Ember Component for intro.js
Created: 2015-08-26 17:59:05.0
Updated: 2017-04-07 14:40:36.0
Pushed: 2015-08-26 19:42:52.0
Homepage: null
Size: 110
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Ember IntroJS wraps introjs in an Ember Component to guide users through your app.
ember install npm:ember-introjs
bower install
To declare your steps, you need to declare an array in JavaScript in your Controller:
pp/controllers/ticket.js
rt Ember from 'ember';
rt default Ember.Controller.extend({
eps: Ember.computed(function(){
return [
{
element: $('#step1'),
intro: 'Step 1!'
},
{
element: $('#step2'),
intro: 'Step2!'
}
];
Then to use the steps, you can use the steps in your handlebars template:
app/templates/ticket }}
tro-js steps=steps start-if=true}}
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:
pp/routes/ticket.js
rt Ember from 'ember';
rt default Ember.Route.extend({
tions: {
introBeforeChange: function(previousStep, nextStep, introJSComponent,
entOfNewStep){
// 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.
tro-js steps=steps start-if=true on-before-change="introBeforeChange"}}
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.
Called after on-before-change
when the user moves a step (backwards or
forward) in the introduction. Gives the current step, the introJS
component isntance, and the element of the current step.
Called after on-change
when the user moves a step (backwards or
forward) in the introduction. Gives the current step, the introJS
component isntance, and the element of the current step.
Called when the user quits the intro via the “Skip” button, hitting
escape
, or clicking outside the overlay. Given the current step, and
the introJS component.
Called when the user finishes the intro by clicking “Done” or hitting right on the keyboard until the end. Called with the last step and the introJS component instance.
Intro JS has a variety of options available to it. You can see the full list here, but we also provided the full list below. You'll notice that in the list below options all follow the dasherized convention of HTML and ember-cli filenames. The original list uses camelCase names, and so does IntroJS. Ember IntroJS will do the conversion for you.
You can also set other options using the Handlebars helper syntax: `
tro-js steps=steps show-bullets=true}}
Or you could extend your own base class to override defaults instead of specifying them every time in the Handlebars helper:
p/app/components/my-intro-js.js
rt IntroJSComponent from 'ember-introjs/components/intro-js';
rt default IntroJSComponent.extend({
xit-on-esc': true
You can also reopen the class:
rt IntroJSComponent from 'ember-introjs/components/intro-js';
oJSComponent.reopen({
xit-on-esc': true
steps
: For defining steps using JSON configuration (see
this
example)next-label
: Next button labelprev-label
: Previous button labelskip-label
: Skip button labeldone-label
: Done button labeltooltip-position
: Default tooltip positiontooltip-class
: Adding CSS class to all tooltipshighlight-class
: Additional CSS class for the helperLayerexit-on-esc
: Exit introduction when pressing Escape button, true
or
false
exit-on-overlay-click
: Exit introduction when clicking on overlay
layer, true
or false
show-step-numbers
: Show steps number in the red circle or not, true
or false
keyboard-navigation
: Navigating with keyboard or not, true
or
false
show-buttons
: Show introduction navigation buttons or not, true
or
false
show-bullets
: Show introduction bullets or not, true
or false
show-progress
: Show introduction progress or not, true
or false
scroll-to-element
: Auto scroll to highlighted element if it's outside
of viewport, true
or false
overlay-opacity
: Adjust the overlay opacity, Number
disable-interaction
: Disable an interaction inside element or not,
true
or false
See setOption to see an example.
Ember IntroJS comes with a set of testing helpers.
To use them, first import them in your tests/test-helper.js
file:
ests/test-helpers.js
rt 'ember-introjs/helpers';
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
See the LICENSE file included in this repository.