Skip to content

Commit

Permalink
added syntax highlighting and enhanced formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@mttbernardini
mttbernardini committed Sep 26, 2015
1 parent 70e6652 commit 6d944ec
Showing 1 changed file with 58 additions and 48 deletions.
106 changes: 58 additions & 48 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,51 @@
## The difference ##

There are various types of dialog windows, generally they are divided into Modal dialogs and Modeless dialogs.

The difference between those is that the modal dialog requires an input from the user, it cannot be hidden and it doesn't allow to focus the opener window till the dialog is closed.

The modeless dialog instead allows to focus the opener window cause it doesn't require the response from the user, so it can be hidden too.


## The problem ##

What are the behaviors of the modal dialogs and modeless dialogs in JavaScript? The modal dialogs block the execution of the script till the user gives the input, and the modeless dialogs don't exist in the pure JavaScript.

So, if you need to show a modal dialog to the user and in the meantime do some other code in JavaScript you can't by using the default dialogs offered by JavaScript (alert(), prompt() and confirm()), because they block the execution of any code.


## The solution ##

Using JQuery in you project will make it easier to find a nice plugin which does this task (also better than this library). However, if you're not planning to use JQuery, it seems meaningless to import that huge framework to only integrate a plugin: at this point this library is the perfect solution if you only need the personalized dialogs and nothing else.

So I solved the problem making a function named `dialog()` which provides an asynchronous modal dialog: *modal*, because the user cannot hide it or focus the opener window, *asynchronous*, because it allows the execution of code not related with the dialog.


## How it works ##

How to use the main function is very easy. First of all you have to include the script and the style (which you can modify) of the AMD in the `<head>` of your page:
Using the main function is very easy. First of all you have to include the script and the style (which you can modify) of the AMD in the `<head>` of your page:

```
```html
<link rel="stylesheet" type="text/css" href="dialog/style.css">
<script type="text/javascript" src="dialog/script.js"></script>
```


### The `dialogSettings` object ###

The JavaScript code integrates 3 objects, the first it's a global object which includes the default values and behaviors of the function that shows the dialog: `dialogSettings`, which has the following properties:

- `defType`: default to *"alert"*, specify the default type of the dialog. Its possible values are *"alert"*, *"prompt"* and *"confirm"*.
- `defTitle`: default to *"Message"*, specify the default title of the dialog.
- `defContent`: default to *"<i>Missing text</i>"*, specify the default content of the dialog.
- `okText`: default to *"OK"*, specify the text of the ok button.
- `continueText`: default to *"Continue"*, specify the text of the continue button.
- `cancelText`: default to *"Cancel"*, specify the text of the cancel button.


Changing this properties may be useful to localize the dialog box. For example, adding this code to the personal html page will show a confirm dialog with content in Italian, if the function `dialog()` is called without parameters:

```
<script type="text/javascript">
```javascript
dialogSettings = {
defType: "confirm",
defTitle: "Conferma",
Expand All @@ -47,14 +56,15 @@ Changing this properties may be useful to localize the dialog box. For example,
continueText: "Continua",
cancelText: "Annulla"
};
</script>

<button onclick="dialog()">Try it</button>
// Show the default dialog
dialog();
```

### The `dialog()` function ###

The second object is the main function that will show the dialog box: `dialog()`.

To specify the content, the type, the tile, etc... of the dialog you have to pass an object as first parameter to the function which has the following properties:

- `type`: specify the type of the dialog. Its possible values are *"alert"*, *"prompt"* and *"confirm"*.
Expand All @@ -67,16 +77,15 @@ To specify the content, the type, the tile, etc... of the dialog you have to pas

This is an example of an AMD:

```
<script type="text/javascript">
var parameters = {
type: "prompt",
title: "Example",
content: "What's your name?",
}
</script>
<button onclick="dialog(parameters)">Try it</button>
```javascript
var parameters = {
type: "prompt",
title: "Example",
content: "What's your name?",
}

// Show the dialog
dialog(parameters);
```


Expand All @@ -93,37 +102,37 @@ In fact, cause this kind of dialog boxes are asynchronous they allow the executi

This is the previous example, but with some callback functions:

```javascript
var parameters = {
type: "prompt",
title: "Example",
content: "What's your name?",
callBack: "check(returnObj)",
id: "first",
vars: {foo: "bar"}
}

function check(obj) {
if (obj.id=="first" && obj.boolean)
dialog({
type: "confirm",
content: "Do you want your name printed on a message?",
vars: {foo: obj.vars.foo, name: obj.value!=""?obj.value:"Unnamed"},
callBack: "check(returnObj)",
id: "second"
});
else if (obj.id=="second" && obj.boolean)
dialog({
//NB: default type is alert, so we don't need to specify it
title: "Print out",
content: "Hello "+obj.vars.name+"<br>Foo: "+obj.vars.foo
});
}

// Start the chain
dialog(parameters);
```
<script type="text/javascript">
var parameters = {
type: "prompt",
title: "Example",
content: "What's your name?",
callBack: "check(returnObj)",
id: "first",
vars: {foo: "bar"}
}
function check(obj) {
if (obj.id=="first" && obj.boolean)
dialog({
type: "confirm",
content: "Do you want your name printed on a message?",
vars: {foo: obj.vars.foo, name: obj.value!=""?obj.value:"Unnamed"},
callBack: "check(returnObj)",
id: "second"
});
else if (obj.id=="second" && obj.boolean)
dialog({
//NB: default type is alert, so we don't need to specify it
title: "Print out",
content: "Hello "+obj.vars.name+"<br>Foo: "+obj.vars.foo
});
}
</script>
<button onclick="dialog(parameters)">Try it</button>
```


## Live demo ##

Expand All @@ -143,16 +152,17 @@ You can also see the changelog of the various releases with the date of when the

You can see the changelog [here][2]</a>.


## License and sharing ##

Version: 1.0
Made by: Matteo Bernardini, [@mttbernardini][4].
Made by: Matteo Bernardini, [@mttbernardini][4].
This project is shared with license CC, by-nc-sa:

- **Attribution**: You are free to distribute the codes, download it and use it, but you must declare who's the owner.
- **No Commercial**: You aren't allowed to use the codes for commercial or lucrative purposes.
- **Share Alike**: you are free to edit the codes as you like, but please leave the commented part of the codes which includes the description, the version, the owner, and the license. If you modify the code you must re-share it with the same license.


To see the integral declaration of the Creative Commons license [see here][3].


Expand Down

0 comments on commit 6d944ec

Please sign in to comment.