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: 20 days 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 (11 months ago)
• Default Branch: main
• Last Pushed: 2024-08-05T13:07:00.000Z (6 months ago)
• Last Synced: 2024-11-08T10:18:46.736Z (2 months ago)
• Topics: dialog, javascript, javascript-library, min-js, modular
• Language: JavaScript
• Homepage:
• Size: 26.4 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`