https://github.com/gromnitsky/plain-dialogs

HTML5 dialog element based alert/confirm/prompt; modal/non-modal variants, promisified API, no fancy CSS by default.
https://github.com/gromnitsky/plain-dialogs

alert confirm dialog-element prompt

Last synced: about 6 hours ago
JSON representation

HTML5 dialog element based alert/confirm/prompt; modal/non-modal variants, promisified API, no fancy CSS by default.

• Host: GitHub
• URL: https://github.com/gromnitsky/plain-dialogs
• Owner: gromnitsky
• Created: 2017-12-02T20:54:51.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-09-06T13:04:37.000Z (about 4 years ago)
• Last Synced: 2024-10-09T21:07:39.153Z (about 1 month ago)
• Topics: alert, confirm, dialog-element, prompt
• Language: JavaScript
• Homepage: http://gromnitsky.users.sourceforge.net/js/examples/plain-dialogs/smoke.html
• Size: 37.1 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# plain-dialogs

[HTML5 dialog element](https://demo.agektmr.com/dialog/) based

alert/confirm/prompt; modal/non-modal variants, promisified API, no

fancy CSS by default.

[Demo](http://gromnitsky.users.sourceforge.net/js/examples/plain-dialogs/smoke.html)

    npm i plain-dialogs

| file                    | lang  | type       | minified |

| ----------------------- | ----- | ---------- | -------- |

| `dist/plain-dialogs.js` | es6   | UMD        | x        |

| `index.mjs`             | es6   | es6 module |          |

Use [dialog-polyfil](https://github.com/GoogleChrome/dialog-polyfill)

for non-Chromium browsers (just include .css & .js *before*

plain-dialogs lib; you don't need to initialize anything).

An unstyled modal alert:

![](doc/alert.png)

The same dialog after applying some CSS:

![](doc/alert-css.png)

## Why?

The Chromium team [actively

discourages](https://developers.google.com/web/updates/2017/03/dialogs-policy)

us from using `window.alert` et al., sometimes even [implicitly

preventing](https://bugs.chromium.org/p/chromium/issues/detail?id=476350)

us from doing so.

One of the alternatives is to use a "native" dialog element that is

supported by Chrome since forever but is still under a flag in

Firefox.

Unfortunately, this means that the old sync pattern of

    let r = confirm('are you sure?')

    if (r) erase_all_the_monies()

doesn't work w/ "new" dialog elements. To ask a user we need to create

a `` dom node, fill it w/ the text of the question, add 2

buttons w/ the proper event listeners, wait for an answer, remove the

node from the document.

This is what this lib does automatically, allowing us to write:

    plainDialogs.confirm('are you sure?').then(erase_all_the_monies)

or

    let r = await plainDialogs.confirm2('are you sure?')

    if (r) erase_all_the_monies()

## API

Every fn return a promise. The last arg of every fn is an option

hash. The default opts are:

~~~

{

    modal: true,

    escape: true,

    title: undefined

}

~~~

### alert

    > await plainDialogs.alert('Hi, mom!')

    true

    > await plainDialogs.alert('
Hi, mom!
', {escape: false})

    true


### confirm

Reject a promise on clicking Cancel:

    > try { await plainDialogs.confirm('really?') } catch (e) { console.log(`result: ${e}`) }

    result: false

### confirm2

Return a promise that always resolves. Here, a user clicks Cancel:

    > await plainDialogs.confirm2('really?')

    false

### prompt

Reject a promise on clicking Cancel:

    > await plainDialogs.prompt('Діти, хто це?', 'Це їжачок.')

    Uncaught (in promise) null

### prompt2

Return a promise that always resolves.  If a user clicks Cancel,

resolves to null.

## Styling

By default there's no styling whatsoever. Every fn creates a tmp

`` node w/ `b59LdZ-dlg` class. Create a dialog & use the

Elements tab in Developer Tools to discover more. See `test/smoke.js`

for examples.

~~~

.b59LdZ-dlg {

  width: 275px;

  background: red;

}

~~~

## License

MIT.