{"id":15015901,"url":"https://github.com/poslinskinet/ember-introjs","last_synced_at":"2025-04-09T16:09:17.693Z","repository":{"id":26539944,"uuid":"29993310","full_name":"PoslinskiNet/ember-introjs","owner":"PoslinskiNet","description":"An Ember Component for intro.js","archived":false,"fork":false,"pushed_at":"2023-07-11T04:51:27.000Z","size":5422,"stargazers_count":82,"open_issues_count":13,"forks_count":29,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T16:09:09.145Z","etag":null,"topics":["ember-addon","emberjs","introjs","introjs-component","javascript"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PoslinskiNet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-01-28T23:16:03.000Z","updated_at":"2024-10-10T08:35:47.000Z","dependencies_parsed_at":"2024-06-20T23:22:50.195Z","dependency_job_id":"5b37dec0-1774-4102-b9b3-c39246b9f0eb","html_url":"https://github.com/PoslinskiNet/ember-introjs","commit_stats":{"total_commits":397,"total_committers":22,"mean_commits":"18.045454545454547","dds":0.7153652392947103,"last_synced_commit":"2ee37d699ed9efe516322fc2bdd923951c68b3b6"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoslinskiNet%2Fember-introjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoslinskiNet%2Fember-introjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoslinskiNet%2Fember-introjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoslinskiNet%2Fember-introjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PoslinskiNet","download_url":"https://codeload.github.com/PoslinskiNet/ember-introjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065283,"owners_count":21041871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember-addon","emberjs","introjs","introjs-component","javascript"],"created_at":"2024-09-24T19:48:07.397Z","updated_at":"2025-04-09T16:09:17.677Z","avatar_url":"https://github.com/PoslinskiNet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/PoslinskiNet/ember-introjs/master/ember-introjs.png\" alt=\"Ember Custom Actions Logo\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n[![Build Status](https://api.travis-ci.org/PoslinskiNet/ember-introjs.svg?branch=master)](http://travis-ci.org/PoslinskiNet/ember-introjs)\n[![Greenkeeper badge](https://badges.greenkeeper.io/PoslinskiNet/ember-introjs.svg)](https://greenkeeper.io/)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-pell.svg)](https://emberobserver.com/addons/ember-pell)\n[![NPM package info for ember-introjs](https://img.shields.io/npm/dm/ember-introjs.svg)](http://npmjs.com/package/ember-introjs) \u0026nbsp; [![License info](https://img.shields.io/npm/l/ember-introjs.svg)](http://npmjs.com/package/ember-introjs)\n\nEmber IntroJS wraps [introjs][intro-js] in an Ember Component to guide\nusers through your app.\n\n\nCompatibility\n------------------------------------------------------------------------------\n\n* Ember.js v2.18 or above\n* Ember CLI v2.13 or above\n* Node.js v8 or above\n\n\nInstallation\n------------------------------------------------------------------------------\n\n`ember install ember-introjs`\n\n## Usage\n\n### 1st option (recommended)\n#### Use `intro-js/step` component as a wrapper\n\n```handlebars\n{{#intro-js/step step=1 intro=\"Step Component\"}}\n  \u003ch1\u003eHello!\u003c/h1\u003e\n{{/intro-js/step}}\n```\n\nYou can customize wrapper using:\n- `position=\"top\"`\n- `intro=\"Welcome!\"`\n- `tooltipClass=\"tooltip-class\"`\n- `highlightClass=\"highlight-class\"`\n- `position=\"top\"`\n- `hint=\"Use it :)\"`\n- `hintPosition=\"bottom-left\"`\n\nOptions are documented in the code as well as in [IntroJS Docs](http://introjs.com/docs)\n\n### 2nd option\n#### 1. Declare your steps:\nYou can declare an array in JavaScript in your controller or parent component:\n\n```javascript\n// app/controllers/ticket.js\nimport Controller from '@ember/controller';\nimport { computed } from '@ember/object';\n\nexport default Controller.extend({\n  steps: computed(function() {\n    return [\n      {\n        element: $('#step1'),\n        intro: 'Step 1!'\n      },\n      {\n        element: $('#step2'),\n        intro: 'Step2!'\n      }\n    ];\n  })\n});\n```\n\n### 2. Use `intro-js` component\nThen to use the steps, you can use the steps in your handlebars template:\n\n```handlebars\n{{! app/templates/ticket }}\n{{intro-js start-if=true}}\n```\n\n## Action Hooks\n\nIntroJS 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:\n\n```javascript\n// app/routes/ticket.js\nimport Ember from 'ember';\n\nexport default Ember.Route.extend({\n  actions: {\n    introBeforeChange(previousStep, nextStep, introJSComponent,\nelementOfNewStep){\n      // You could track user interactions here, e.g. analytics.\n      this.sendAnalytics(prevStep);\n    }\n  }\n});\n```\n\nThen pass the name of the action in the handlebars helper that renders\nthe component below.\n\n```handlebars\n{{intro-js steps=steps start-if=true on-before-change=(action \"introBeforeChange\")}}\n```\n\n### on-before-change (currentStep, nextStep, introJSComponent, nextElement)\n\nCalled when the user clicks next (or uses their keyboard). Called before\n`on-change`. Given the currentStep, the nextStep, the introJSComponent,\nand the DOM element of the next step.\n\n### on-change (step, introJSComponent, currentElement)\n\nCalled after `on-before-change` when the user moves a step (backwards or\nforward) in the introduction. Gives the current step, the introJS\ncomponent isntance, and the element of the current step.\n\n### on-after-change (step, introJSComponent, currentElement)\n\nCalled after `on-change` when the user moves a step (backwards or\nforward) in the introduction. Gives the current step, the introJS\ncomponent isntance, and the element of the current step.\n\n### on-before-exit (step, introJSComponent)\n\nCalled when the user quits the intro via the \"Skip\" button, hitting\n`escape`, or clicking outside the overlay. Given the current step, and\nthe introJS component.\n\n### on-exit (step, introJSComponent)\n\nCalled after `on-before-exit` when the user quits the intro via the \"Skip\" button, hitting\n`escape`, or clicking outside the overlay. Given the current step, and\nthe introJS component.\n\n### on-complete (step, introJSComponent)\n\nCalled when the user finishes the intro by clicking \"Done\" or hitting\nright on the keyboard until the end. Called with the last step and the\nintroJS component instance.\n\n## Intro JS Options\n\nIntro JS has a variety of options available to it. You can see the full\nlist [here](https://github.com/usablica/intro.js#options), but we also\nprovided the full list below. You'll notice that in the list below\noptions all follow the dasherized convention of HTML and ember-cli\nfilenames. The original list uses camelCase names, and so does IntroJS.\nEmber IntroJS will do the conversion for you.\n\nYou can also set other options using the Handlebars helper syntax:\n`\n```handlebars\n{{intro-js steps=steps show-bullets=true}}\n```\n\nOr you could extend your own base class to override defaults\ninstead of specifying them every time in the Handlebars helper:\n\n```javascript\nmyapp/app/components/my-intro-js.js\nimport IntroJSComponent from 'ember-introjs/components/intro-js';\n\nexport default IntroJSComponent.extend({\n  'exit-on-esc': true\n});\n```\n\nYou can also reopen the class:\n\n```javascript\nimport IntroJSComponent from 'ember-introjs/components/intro-js';\n\nIntroJSComponent.reopen({\n  'exit-on-esc': true\n});\n```\n\n| property | description |\n|---|---|\n| `steps` | For defining steps using JSON configuration (see [this](https://github.com/usablica/intro.js/blob/master/example/programmatic/index.html) example) |\n| `next-label` | Next button label |\n| `prev-label` | Previous button label |\n| `skip-label` | Skip button label |\n| `done-label` | Done button label |\n| `tooltip-position` | Default tooltip position |\n| `tooltip-class` | Adding CSS class to all tooltips |\n| `highlight-class` | Additional CSS class for the helperLayer |\n| `exit-on-esc` | Exit introduction when pressing Escape button, `true` or `false` |\n| `exit-on-overlay-click` | Exit introduction when clicking on overlay layer, `true` or `false` |\n| `show-step-numbers` | Show steps number in the red circle or not, `true` or `false` |\n| `keyboard-navigation` | Navigating with keyboard or not, `true` or `false` |\n| `show-buttons` | Show introduction navigation buttons or not, `true` or `false` |\n| `show-bullets` | Show introduction bullets or not, `true` or `false` |\n| `show-progress` | Show introduction progress or not, `true` or `false` |\n| `scroll-to-element` | Auto scroll to highlighted element if it's outside of viewport, `true` or `false` |\n| `overlay-opacity` | Adjust the overlay opacity, `Number` |\n| `disable-interaction` | Disable an interaction inside element or not, `true` or `false` |\n| `helper-element-padding` | Set how much padding to be used around helper element |\n\nSee [setOption](https://github.com/usablica/intro.js/#introjssetoptionoption-value) to see an example.\n\n### Testing Helpers\n\nEmber IntroJS comes with a set of testing helpers.\n\nTo use them, first import them in your `tests/test-helper.js` file:\n\n```javascript\n// tests/test-helpers.js\nimport './helpers/ember-introjs';\n```\n\nLicense\n------------------------------------------------------------------------------\n\nSee the LICENSE file included in this repository.\n\nKeep 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\n\n\u003c!-- Links --\u003e\n[intro-js]: https://github.com/usablica/intro.js/\n[hooks]: https://github.com/usablica/intro.js#introjsstart\n\nContributing\n------------------------------------------------------------------------------\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## Code of Conduct\nPlease note that this project is released with a Contributor Code of\nConduct. By participating in this project you agree to abide by its\nterms, which can be found in the `CODE_OF_CONDUCT.md` file in this\nrepository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposlinskinet%2Fember-introjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposlinskinet%2Fember-introjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposlinskinet%2Fember-introjs/lists"}