https://github.com/awman3703/modular-dialog-js
Modular HTML dialog JS lib
https://github.com/awman3703/modular-dialog-js
dialog javascript javascript-library min-js modular
Last synced: 5 months ago
JSON representation
Modular HTML dialog JS lib
- Host: GitHub
- URL: https://github.com/awman3703/modular-dialog-js
- Owner: AwMan3703
- License: other
- Created: 2024-03-05T22:49:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-07T14:24:53.000Z (9 months ago)
- Last Synced: 2025-02-07T15:27:57.449Z (9 months ago)
- Topics: dialog, javascript, javascript-library, min-js, modular
- Language: JavaScript
- Homepage:
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Modular HTML dialog windows
Custom modular HTML dialogs. Don't let the `window.prompt/alert/etc.` functions limit you!
###### Also useful to prevent user mistakenly blocking window dialogs.
### Contents
- `modularDialog.js` - the library itself
- `modularDialog.css` - template for styling the dialog
### Usage
#### CSS
Edit the modularDialog.css file to customize the dialog's appearance. If not edited, the dialog windows' styles will default to the browser's built-in.
#### JavaScript
The `Dialog()` functions takes two parameters:
- `parent` - the node to append the dialog to
- `structure` - an object defining the dialog's structure
and what inputs the dialog needs to provide and return (see example below).
Structure xample:
```
{
title : "",
description : "", --optional
inputs : { --optional
"[inputname]" : { ... (input data) },
"[inputname2]" : { ... (input data) },
"[inputname3]" : { ... (input data) },
"[inputname4]" : { ... (input data) }
},
options : {
completeDialog : {
label : "",
callback : () => {}
},
abortDialog : {
label : "",
callback : () => {}
}
}
}
```
Input data:
```
description : "" --optional
type : "text|number|checkbox|"
defaultValue : [default input value]
attributes : { } [all HTML attributes to apply to the input, format: {"attrName" : "attrValue"}]
```
Default options:
- completeDialog - returns an `object` in which:
- the keys correspond to the ones in the `structure.inputs` field
- the values hold the dialog's `HTMLInput` elements, so that their value can be read
- abortDialog - returns `null`