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";
// ...
Copy

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

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

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>
Copy

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;
}
Copy

Parley.close and Parley.cancel

Both functions close the parley immediately. While Parley.cancel() causes to return false, Parley.close() returns the user value.