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

Parley.close and Parley.cancel

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