s00d / intro.ts

Step-by-step guide and feature introduction

Intro.TS

Step-by-step guide and feature introduction

Advantages

Fast, Easy, Typescript, not use virtual dom, Events

Works easier and faster than the original, completely written in ts

Examples

• Basic usage
• Multi Page
• VUE

Installation

Require this package in your package.json or install it by running:

npm install intro-ts

Usage

<a href="http://example.com/" data-intro="Hello step one!" data-step="1"></a>
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-interaction="no" data-position='right' data-scrollTo='tooltip'>
  data
</div>

require('intro-ts/lib/style.scss') // or require('intro-ts/lib/style.min.css'); or you can add other styles
const { IntroTS } = require('intro-ts');
const intro = new IntroTS();
intro.setOptions({
  additionalButtons: {
    name: 'test', label: 'test', className: 'introts-button', callback: function () {
      intro.stop()
    }
  },
});
intro.addEventListener('start', (data) => {
  console.log('start');
})
intro.addEventListener('next', (data) => {
  console.log(data);
})
intro.start();

intro attributes

Name	Required	Default	Description
data-intro	yes		The tooltip text of step
data-step	no		Optionally define the number (priority) of step
data-position	no	right	Optionally define the position of tooltip, top, left, right, bottom, bottom-left-aligned (same as bottom), bottom-middle-aligned, bottom-right-aligned or auto (to detect the position of element and assign the correct position automatically). Default is bottom
data-interaction	no	no	Optionally To disable interactions with elements inside the highlighted box, yes or no.
data-scroll-to	no		Optionally define the element to scroll to querySelector.

how to use in the browser?

<link href="./lib/style.min.css" rel="stylesheet">
<script type="text/javascript" src="./lib/intro.js"></script>
<script>
  function start() {
    var intro = new window.IntroTS();
    intro.start();
  }
</script>

CDN

<link href="https://cdn.jsdelivr.net/npm/intro-ts/lib/bandle/style.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/intro-ts/lib/intro.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/intro-ts/lib/hints.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/intro-ts/lib/plugin_vue.js"></script>

Options

  /** Next button label in tooltip box */
  nextLabel: string,
  /** Previous button label in tooltip box */
  prevLabel: string,
  /** Skip button label in tooltip box */
  skipLabel: string,
  /** Done button label in tooltip box */
  doneLabel: string|null,
  /** Default tooltip box position */
  tooltipPosition: 'bottom'|'top'|'floating',
  /** Hide previous button in the first step? Otherwise, it will be disabled button. */
  hidePrev: boolean,
  /** Hide next button in the last step? Otherwise, it will be disabled button. */
  hideNext: boolean,
  /** CSS class that is added to the helperLayer */
  highlight: boolean,
  /** Close introduction when pressing Escape button? */
  exitOnEsc: boolean,
  /** Close introduction when clicking on overlay layer? */
  exitOnOverlayClick: boolean,
  /** Show step numbers in introduction? */
  showStepNumbers: boolean,
  /** Let user use keyboard to navigate the tour? */
  keyboardNavigation: boolean,
  /** Show tour control buttons? */
  showButtons: boolean,
  /** Show tour bullets? */
  showBullets: boolean,
  /** Show tour progress? */
  showProgress: boolean,
  /** Scroll to highlighted element? */
  scrollToElement: boolean,
  /** Set the overlay opacity */
  overlayOpacity: number,
  /** Precedence of positions, when auto is enabled */
  positionPrecedence: Array<"bottom"|"top"|"right"|"left">,
  /** Set how much padding to be used around helper element */
  helperElementPadding: number,
  /** additional buttons, see examples */
  additionalButtons: Array<{name: string, label: string, className: string, callback: () => void}>

Events

Name	Description
init	Block with guide created
start	launch guide
finish	close guide
previous	previous step
next	next step
stop	stop click
event	all events

intro.addEventListener('start', (data) => {
  console.log('start');
})

Methods

all methods are described in ts

setOption(option: string, value: string) // set option
setOptions(options: Options) // set options, see Options type
refresh() // program refresh
start(step?:null|number) // show guide, you can pass a step to run
getStep() - get the current step number
addStep(element: HTMLElement|string, intro: string, step: number = 1, position = 'right') // add a step programmatically
addSteps(data: Array<{element: HTMLElement, intro: string, position:string}>) //  add multiple steps programmatically
next(step?: number|null) // programmatically switch step
previous(step?: number|null) // programmatically switch step
stop() // programmatically stop guide

HINTS

<div class="span6" data-hint='test'>data</div>

require('intro-ts/lib/style.scss') // or require('intro-ts/lib/style.min.css'); or you can add other styles
const { IntroTS } = require('intro-ts');
const { Hints } = require('intro-ts');
var intro = new IntroTS();
var hints = new Hints(); // or require('intro-ts/lib/hints.js'); or see https://s00d.github.io/intro.ts/example/hello-world/index.html
intro.setOptions({
  additionalButtons: {
    name: 'hints', label: 'HINTS', className: 'introts-button', callback: function () {
      intro.stop()
      hints.enableHints()
    }
  },
});
intro.addEventListener('start', (data) => {
  hints.hideHints();
})
intro.addEventListener('next', (data) => {
  console.log(data);
})
intro.start();

enableHints() - show hints 
hideHints() - hide hints
hideHint(stepId: number) -  hide hint by step number

PLUGINS

VUE

<link href="./lib/style.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./lib/plugin_vue.js"></script> 
<!--or let { introVuePlugin } = require('intro-ts')-->
...
<div class="container-narrow" id="index">
  <div class="masthead" v-intro="{intro: 'Get it, use it.', step: 1, interaction: 'no', position: 'right', hint: 'test'}" >
  </div>
</div>

<script>
  window.onload = function () {
    Vue.use(window.introPlugin);
    // or Vue.use(introVuePlugin);
    new Vue({
      el: '#index',
      methods: {
        start() {
          this.$intro.setOptions({
            additionalButtons: {
              name: 'hints', label: 'HINTS', className: 'introts-button', callback: function () {
                this.$intro.stop()
                this.$hints.enableHints()
              }
            },
          });
          this.$intro.addEventListener('start', (data) => {
            this.$hints.hideHints();
          })
          this.$intro.start();
        },
      }
    })
  }

</script>

Bugs

If you have any problems, please create Issues here

intro.ts's Issues

mergeOptions overwrites individual options with the whole Options object

intro.ts/src/Helpers/mergeOptions.ts

Line 36 in 5446ba7

oldOptions[i] = newOptions

This causes, for example, that setting 'Done' as doneLabel shows [object Object] instead in the button.