Parley.js NPM | npm.io

Parley.js

An oversimplified library for HTML5 dialogs

Parley.js is a small utility replacing window.prompt and window.confirm.

Minimum requirements

	Needs	Version	MDN
ECMAScript	`Promise`	ES2015	see
HTML	`<dialog>`	HTML5	see

Without Babel, code also needs async and await keywords (ES2017).

Usage

import * as Parley from "parley.js";
import "parley.js/dist/default.css";
// ...

If you have a bundler that supports SCSS and TypeScript, you can import the source files directly:

import * as Parley from "parley.js/src";
// ...

Also, you can use UNPKG:

<link rel="stylesheet" href="https://unpkg.com/parley.js/dist/default.css" />
<script type="module">
    import * as Parley from "https://unpkg.com/parley.js";
    // ...
</script>

`Parley.fire`

It takes configuration and responds with a Promise. Depending on the input type, configuration and output vary. But if the parley was cancelled (by the cancel button or the escape key) the output is always false.

Base configuration

Name	Description	Default
`title`	The title displayed in parley. Supports HTML	`""`
`message`	The HTML message of the parley.	`""`
`cancelButtonHTML`	The HTML content of the cancel button.	`Cancel"`
`confirmButtonHTML`	The HTML content of the confirm button.	`"OK"`
`value`	The default value.	`undefined`
`inputOptions`	The input-type-specific; see bellow	{}

Input options

Input types	Configuration type	Output / Defaut value type
`"number"` `"range"`	`NumberOptions`	`number`
`"textarea"`	`TextareaOptions`	`string`
`"tel"` `"text"` `"email"` `"search"` `"password"`	`TextOptions`	`string`
`"checkbox"` `"select"` `"radio"`	`SelectOptions`	`string`, `string[]` for checkbox
`"none`	`never`	`boolean`

interface NumberOptions {
    min?: number;
    max?: number;
    step?: number;
    placeholder?: string;
}

interface TextareaOptions {
    rows?: number;
    cols?: number;
    placeholder?: string;
}

interface TextOptions {
    /**
     * Regular expression used to validate the input
     */
    pattern?: RegExp;
    placeholder?: string;
}

interface SelectionOptions {
    /**
     * The key is the value of the input.
     * The value is the label html of the input.
     */
    [value: string]: string;
}