mithril-tour-component

Tour Guide Component for Mithril.js

Usage no npm install needed!

<script type="module">
  import mithrilTourComponent from 'https://cdn.skypack.dev/mithril-tour-component';
</script>

README

Mithril Tour Component

Tour Guide Component for Mithril.js

version License Downloads Dependencies

Install

Usage

Node.js / Browserify

var m = require('mithril')
var TourComponent = require('mithril-tour-component')

Note: lib/styles/tour.css is also required.

Browser

<link href="path/to/mithril-tour-component/lib/styles/tour.css" rel="stylesheet" />
<script src="path/to/mithril.js" type="text/javascript"></script>
<script src="path/to/mithril-tour-component/build/tour.min.js" type="text/javascript"></script>

Documentation

TourComponent

Creates and returns a component class constructor which takes two arguments:

Function TourComponent (Object options, Array Indicators)

Options

  • skipped - Boolean - Disable rendering of indicators completely.
  • dismissed - Array - Array of indicators that have been skipped. Useful for those remembering where the user is occasions.
  • onskip - Function(event, identifier) - Global skip handler
  • ondismiss - Function(event, identifier) - Global dismiss handler

Example:

var dismissed = [1]
var skipped = false

TourComponent({
  skipped: skipped,
  dismissed: dismissed,

  ondismiss: function (event, identifier) {
    dismissed.push(identifier)
    // save to localstorage, etc.
  },

  onskip: function (event, identifier) {
    skipped = true
    // save to localstorage, etc.
  }
}, /* ... Indicators ... */)

Indicators

Each indicator is an Object that contains properties the properties of an Indicator are as follows:

  • id - Number / String - Indicator / Tooltip identifier, Optional
  • x - Number - x position on the page, Optional when using .element
  • y - Number - y position on the page, Optional when using .element
  • element - Object - Attach indicator to element
  • element.selector - String - Target element selector
  • element.position - Possible options include: right, left, bottom right, bottom left, top right, top left, top, bottom
  • element.offset - Object - x and y offsets, Optional
  • ondismiss - Function(event, identifier) - When a tooltip / indicator is dismissed (removed from page)
  • onclick - Function(event, identifier) - When the indicator is clicked on.
  • onskip - Function(event, identifier) - When the tour is completely skipped (all indicators are removed.)
  • onclose - Function(event, identifier) - When the tooltip backdrop is closed (not considered dismissing / confirming)
  • tooltip - Object - Tooltip settings
  • tooltip.content - Array - Mithril children placed in the content section of the tooltip
  • tooltip.footer - Object - Tooltip footer settings
  • tooltip.footer.skipText
  • tooltip.footer.skipLinkText
  • tooltip.footer.dismissText

Example:

TourComponent(/* ... options ... */, [{
  id: 1, // optional

  element: {
    selector: '.rotate-button',
    position: 'right',

    // Offset defaults
    offset: {
      x: 5,
      y: 10
    }
  },

  tooltip: {
    content: [
      m('p', 'Rotate list of links when clicked, give it a whirl!')
    ],

    footer: {
      skipText: 'Been here before? ',
      skipLinkText: 'Yes, disable tour!',
      dismissText: 'Thanks!'
    }
  }
}])

Example Usage

See index.html

Building

  1. npm install -g browserify uglify-js
  2. npm run build

License

Licensed under The MIT License.