npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-introjs

v2.7.0

Published

An Ember Component for intro.js

Downloads

868

Readme

Build Status Greenkeeper badge Ember Observer Score NPM package info for ember-introjs   License info

Ember IntroJS wraps introjs in an Ember Component to guide users through your app.

Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above
  • Node.js v8 or above

Installation

ember install ember-introjs

Usage

1st option (recommended)

Use intro-js/step component as a wrapper

{{#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

2nd option

1. Declare your steps:

You can declare an array in JavaScript in your controller or parent component:

// 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:

{{! 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:

// 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.

{{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 component isntance, and the element of the current step.

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

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.

on-before-exit (step, introJSComponent)

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.

on-exit (step, introJSComponent)

Called after on-before-exit 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.

on-complete (step, introJSComponent)

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 Options

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: `

{{intro-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:

myapp/app/components/my-intro-js.js
import IntroJSComponent from 'ember-introjs/components/intro-js';

export default IntroJSComponent.extend({
  'exit-on-esc': true
});

You can also reopen the class:

import IntroJSComponent from 'ember-introjs/components/intro-js';

IntroJSComponent.reopen({
  'exit-on-esc': true
});

| property | description | |---|---| | steps | For defining steps using JSON configuration (see this example) | | next-label | Next button label | | prev-label | Previous button label | | skip-label | Skip button label | | done-label | Done button label | | tooltip-position | Default tooltip position | | tooltip-class | Adding CSS class to all tooltips | | highlight-class | Additional CSS class for the helperLayer | | exit-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 | | helper-element-padding | Set how much padding to be used around helper element |

See setOption to see an example.

Testing Helpers

Ember IntroJS comes with a set of testing helpers.

To use them, first import them in your tests/test-helper.js file:

// tests/test-helpers.js
import './helpers/ember-introjs';

License

See the LICENSE file included in this repository.

Keep in mind that if you like to use Intro.JS for commercial use, you should buy a commercial license. You can find more information on the intro.js project site: https://introjs.com/#commercial

Contributing

See the Contributing guide for details.

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms, which can be found in the CODE_OF_CONDUCT.md file in this repository.