touch-pricker

Free Touch Pricker

(WIP)

Currently supports a pricker for Stedman touches on various stages, based heavily on that created by Mark Davies.

Installation

Installation using npm

Install using npm or yarn:

# npm
npm install --save-dev touch-pricker

# yarn
yarn add --dev touch-pricker

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

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

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

... or using ES6 modules:

import Pricker from 'touch-pricker';

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

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

Host the file locally and add to scripts:

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

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

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

... and then load it:

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

See examples/mbd.html for a full example.

Configuration

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

Pricker.create(id: string, config: any): Pricker.Pricker.Abstract;

This currently supports the following configuration option:

iframe

{
  iframe: true // default
}

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).

2. Install yarn.

Quickstart: build and run tests

nvm install
yarn install
bin/gulp

Available gulp targets

• build - builds source code
• build-tests - builds testcases (depends on build)
• docs - builds TypeDoc documentation
• test - runs unit tests under PhantomJS (default)
• test-browsers - runs unit tests under various browsers (see karma.conf.js)
• watch - rebuild whenever changes are made

Yarn / npm scripts

• build - as above
• lint - calls tslint in isolation
• test - as above
• watch - as above

To test in a browser window

Build tests (bin/gulp build-tests) then load up /jasmine.html.