touch-pricker

Free Touch Pricker

(WIP)

Currently supports the following methods on various stages:

• Grandsire
• Stedman
• Erin
• Carter
• Stedman Jump

Based heavily on that created by Mark Davies.

API documentation

Installation

Installation using npm

Install using npm:

npm install --save touch-pricker
Copy

Modify your page to include an element where the pricker will be mounted:

<div id="pricker"></div>
Copy

Then load using your preferred bundler and module syntax, either CommonJS:

const Pricker = require('touch-pricker');

const thePricker = Pricker.create('pricker'); // ID of mount element
Copy

... or using ES6 modules:

import Pricker from 'touch-pricker';

const thePricker = Pricker.create('pricker'); // ID of mount element
Copy

Installation from source

Download the source file of your choice from the dist directory of this repository:

• development - touch-pricker.js
• production - touch-pricker.min.js and touch-pricker.min.js.map

Host the file locally and add to scripts:

<script type="text/css" src="touch-pricker.min.js"></script>
Copy

Modify your page to include an element where the pricker will be mounted:

<div id="pricker"></div>
Copy

... and then load it:

<script type="text/javascript">
  window.onload = function () {
    const thePricker = Pricker.create('pricker'); // ID of mount element
  };
</script>
Copy

See examples/mbd.html for a full example.

Configuration

The Pricker.create() call has the following signature:

Pricker.create(id: string, config: Pricker.Options): Pricker.Pricker;
Copy

This currently supports the following configuration option:

iframe

{
  iframe: true; // default
}
Copy

Controls whether to create the pricker within an <iframe> element in order to isolate it from the parent page. This prevents scripts or styles leaking between the pricker and its host, but makes debugging more difficult.

Development

Prerequisites

1. Install nvm (or manually install a node version compatible with that defined in nvmrc).

Quickstart: build

nvm install
npm i
npm run build
Copy

npm scripts

• build - compiles all sources, dev, prod and test
• build:dev - compiles the development bundle
• build:prod - compiles the production bundle
• lint - lints all sources
• prettify - runs Prettier
• start - opens examples in a browser window and watches for changes
• test - runs tests in PhantomJS and watches for changes