mithril-tour-component

1.0.4 • Public • Published

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.

Package Sidebar

Install

npm i mithril-tour-component

Weekly Downloads

1

Version

1.0.4

License

MIT

Last publish

Collaborators

  • nijikokun