diff --git a/CHANGELOG.md b/CHANGELOG.md index bb9b6b5..b6d6ffd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,13 @@ ## 0.4.0 -* Reworked to work completely using async/await -* Resolved bugs +* Resolved bugged order using dart:async +* Added onKeyDown listeners for Enter or ESC ## 0.3.0 -* Correctly formatted -* Screenshots added to the description -* Added some other Bootstrap styles +* Formatted by dartfmt +* Added screenshots to the description +* Added a few additional Bootstrap styles ## 0.2.0 diff --git a/README.md b/README.md index ee5063c..6517717 100644 --- a/README.md +++ b/README.md @@ -31,8 +31,8 @@ querySelector("#alertButton").onClick.listen((_) { Replaces default confirm dialog. ```Dart -querySelector("#confirmButton").onClick.listen((_) { - var myConfirm = confirm("Confirmed?!"); +querySelector("#confirmButton").onClick.listen((_) async { + var myConfirm = await confirm("Confirmed?!"); alert(myConfirm.toString()); }); ``` @@ -44,8 +44,8 @@ querySelector("#confirmButton").onClick.listen((_) { Adds missing prompt dialog. ```Dart -querySelector("#promptButton").onClick.listen((_) { - var myPrompt = prompt("Prompted?!", "Yes!"); +querySelector("#promptButton").onClick.listen((_) async { + var myPrompt = await prompt("Prompted?!", "Yes!"); alert(myPrompt.toString()); }); ``` @@ -54,4 +54,18 @@ querySelector("#promptButton").onClick.listen((_) { ### dialog.dart -Do you need to use them all at once? Try it by importing dialog.dart file. \ No newline at end of file +Do you need to use them all at once? Try it by importing dialog.dart file. + +## Known Issues + +* **Bootstrap doesn't use the newest version!** +* **Why don't you use pub's Bootstrap?** + * In v3.3.4 is a bug, which displays backdrop in the front. I'm waiting for the fix in the next release. + +## Contributing + +Please fill in an issue or a pull request on project's [GitHub page](https://github.com/dvorapa/dialog-dart). In PR please observe the style of commit messages using the imperative mood. + +## License + +[The BSD 2-Clause License](https://github.com/dvorapa/dialog-dart/blob/master/LICENSE) \ No newline at end of file diff --git a/lib/dialogs/alert.dart b/lib/dialogs/alert.dart index 94618fc..03eb028 100644 --- a/lib/dialogs/alert.dart +++ b/lib/dialogs/alert.dart @@ -5,10 +5,19 @@ import "../src/dialog_class.dart"; void alert([String message = ""]) { Dialog alertDialog = new Dialog([new Text(message)], "Alert"); + alertDialog ..showDialog() ..okButton.focus() ..modalBackdrop.onClick.first.then((_) => alertDialog.closeDialog()) ..xButton.onClick.first.then((_) => alertDialog.closeDialog()) ..okButton.onClick.first.then((_) => alertDialog.closeDialog()); + + querySelectorAll("button").forEach((ButtonElement buttons) { + buttons.onKeyDown.listen((e) { + if (e is KeyboardEvent && e.keyCode == KeyCode.ESC) { + alertDialog.closeDialog(); + } + }); + }); } diff --git a/lib/dialogs/confirm.dart b/lib/dialogs/confirm.dart index cbe9308..ed84cb7 100644 --- a/lib/dialogs/confirm.dart +++ b/lib/dialogs/confirm.dart @@ -1,23 +1,41 @@ library dialog.confirm; +import "dart:async"; import "dart:html"; import "../src/dialog_class.dart"; -bool confirm([String message = ""]) { +Future confirm([String message = ""]) async { + Completer c = new Completer(); Dialog confirmDialog = new Dialog([new Text(message)], "Confirm", true); + confirmDialog ..showDialog() ..okButton.focus() - ..modalBackdrop.onClick.first - .then((_) => false) - .then((_) => confirmDialog.closeDialog()) - ..xButton.onClick.first - .then((_) => false) - .then((_) => confirmDialog.closeDialog()) - ..cancelButton.onClick.first - .then((_) => false) - .then((_) => confirmDialog.closeDialog()) - ..okButton.onClick.first - .then((_) => true) - .then((_) => confirmDialog.closeDialog()); + ..modalBackdrop.onClick.first.then((_) { + c.complete(false); + confirmDialog.closeDialog(); + }) + ..xButton.onClick.first.then((_) { + c.complete(false); + confirmDialog.closeDialog(); + }) + ..cancelButton.onClick.first.then((_) { + c.complete(false); + confirmDialog.closeDialog(); + }) + ..okButton.onClick.first.then((_) { + c.complete(true); + confirmDialog.closeDialog(); + }); + + querySelectorAll("button").forEach((ButtonElement buttons) { + buttons.onKeyDown.listen((e) { + if (e is KeyboardEvent && e.keyCode == KeyCode.ESC) { + c.complete(false); + confirmDialog.closeDialog(); + } + }); + }); + + return c.future; } diff --git a/lib/dialogs/prompt.dart b/lib/dialogs/prompt.dart index 4f3f6f9..a60d012 100644 --- a/lib/dialogs/prompt.dart +++ b/lib/dialogs/prompt.dart @@ -1,9 +1,12 @@ library dialog.prompt; +import "dart:async"; import "dart:html"; import "../src/dialog_class.dart"; -String prompt([String message = "", String value = ""]) { +Future prompt([String message = "", String value = ""]) async { + Completer c = new Completer(); + LabelElement label = new LabelElement() ..classes.add("control-label") ..htmlFor = "TextInputInDialog" @@ -15,19 +18,47 @@ String prompt([String message = "", String value = ""]) { ..value = value; Dialog promptDialog = new Dialog([label, br, input], "Prompt", true); - promptDialog - ..showDialog() - ..modalBackdrop.onClick.first - .then((_) => null) - .then((_) => promptDialog.closeDialog()) - ..xButton.onClick.first - .then((_) => null) - .then((_) => promptDialog.closeDialog()) - ..cancelButton.onClick.first - .then((_) => null) - .then((_) => promptDialog.closeDialog()) - ..okButton.onClick.first - .then((_) => input.value) - .then((_) => promptDialog.closeDialog()); + + promptDialog.showDialog(); input.focus(); + + promptDialog + ..modalBackdrop.onClick.first.then((_) { + c.complete(null); + promptDialog.closeDialog(); + }) + ..xButton.onClick.first.then((_) { + c.complete(null); + promptDialog.closeDialog(); + }) + ..cancelButton.onClick.first.then((_) { + c.complete(null); + promptDialog.closeDialog(); + }) + ..okButton.onClick.first.then((_) { + c.complete(input.value); + promptDialog.closeDialog(); + }); + + querySelectorAll("button").forEach((ButtonElement buttons) { + buttons.onKeyDown.listen((e) { + if (e is KeyboardEvent && e.keyCode == KeyCode.ESC) { + c.complete(null); + promptDialog.closeDialog(); + } + }); + }); + querySelectorAll("input").forEach((InputElement inputs) { + inputs.onKeyDown.listen((e) { + if (e is KeyboardEvent && e.keyCode == KeyCode.ESC) { + c.complete(null); + promptDialog.closeDialog(); + } else if (e is KeyboardEvent && e.keyCode == KeyCode.ENTER) { + c.complete(input.value); + promptDialog.closeDialog(); + } + }); + }); + + return c.future; } diff --git a/lib/src/dialog_class.dart b/lib/src/dialog_class.dart index 50c4f3b..24b8e18 100644 --- a/lib/src/dialog_class.dart +++ b/lib/src/dialog_class.dart @@ -15,20 +15,20 @@ class Dialog { Dialog(this.content, this.title, [this.cancelable = false, this.cancelName = "Cancel", this.okName = "OK"]) { if (querySelectorAll( - "[href*='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css']").isEmpty) { + "[href*='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css']").isEmpty) { LinkElement link = new LinkElement() ..href = - "//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" + "//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" ..rel = "stylesheet" ..type = "text/css"; document.querySelector("head").insertAdjacentElement("beforeEnd", link); } - dialog.classes.add("modal fade"); - modalBackdrop..classes.add("modal-backdrop fade"); + dialog.classes.addAll(["modal", "fade"]); + modalBackdrop.classes.addAll(["modal-backdrop", "fade"]); dialog.children.add(modalBackdrop); DivElement modalDialog = new DivElement() - ..classes.add("modal-dialog modal-sm"); + ..classes.addAll(["modal-dialog", "modal-sm"]); dialog.children.add(modalDialog); DivElement modalContent = new DivElement()..classes.add("modal-content"); modalDialog.children.add(modalContent); @@ -63,13 +63,15 @@ class Dialog { if (cancelable == true) { cancelButton - ..classes.add("btn btn-default") + ..classes.addAll(["btn", "btn-default"]) + ..tabIndex = 1 ..text = cancelName; modalFooter.children.add(cancelButton); } okButton - ..classes.add("btn btn-primary") + ..classes.addAll(["btn", "btn-primary"]) + ..tabIndex = 0 ..text = okName; modalFooter.children.add(okButton); @@ -79,21 +81,21 @@ class Dialog { } void showDialog() { - if (!(document.body.classes.contains("opennedDialog"))) { - dialog - ..classes.add("in") - ..style.display = "block"; + if (document.body.classes.contains("opennedDialog") == false) { modalBackdrop ..classes.add("in") ..style.height = "100%"; + dialog + ..classes.add("in") + ..style.display = "block"; document.body.classes.add("opennedDialog"); } } void closeDialog() { - if (document.body.classes.contains("opennedDialog")) { - dialog.style.display = "none"; + if (document.body.classes.contains("opennedDialog") == true) { modalBackdrop.style.display = "none"; + dialog.style.display = "none"; document.body.classes.remove("opennedDialog"); } } diff --git a/pubspec.yaml b/pubspec.yaml index d2eb644..1afbbb1 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,7 +1,7 @@ name: dialog -version: 0.4.0-dev +version: 0.4.0 description: Modern alert, confirm and prompt dialog implementation -author: Pavel Dvořák +author: Pavel Dvořák homepage: https://github.com/dvorapa/dialog-dart environment: sdk: ">=1.10.0 <2.0.0" diff --git a/web/index.dart b/web/index.dart index 3edd02d..abd0142 100644 --- a/web/index.dart +++ b/web/index.dart @@ -5,12 +5,12 @@ main() { querySelector("#alertButton").onClick.listen((_) { alert("Alerted?!"); }); - querySelector("#confirmButton").onClick.listen((_) { - var myConfirm = confirm("Confirmed?!"); + querySelector("#confirmButton").onClick.listen((_) async { + var myConfirm = await confirm("Confirmed?!"); alert(myConfirm.toString()); }); - querySelector("#promptButton").onClick.listen((_) { - var myPrompt = prompt("Prompted?!", "Yes!"); + querySelector("#promptButton").onClick.listen((_) async { + var myPrompt = await prompt("Prompted?!", "Yes!"); alert(myPrompt.toString()); }); } diff --git a/web/index.html b/web/index.html index 00faf48..cbad393 100644 --- a/web/index.html +++ b/web/index.html @@ -5,7 +5,7 @@ - + Dialog.dart @@ -43,8 +43,8 @@

dialogs/confirm.dart

Replaces default confirm dialog.
-querySelector("#confirmButton").onClick.listen((_) {
-  var myConfirm = confirm("Confirmed?!");
+querySelector("#confirmButton").onClick.listen((_) async {
+  var myConfirm = await confirm("Confirmed?!");
   alert(myConfirm.toString());
 });
 
@@ -56,8 +56,8 @@

dialogs/prompt.dart

Adds missing prompt dialog.
-querySelector("#promptButton").onClick.listen((_) {
-  var myPrompt = prompt("Prompted?!", "Yes!");
+querySelector("#promptButton").onClick.listen((_) async {
+  var myPrompt = await prompt("Prompted?!", "Yes!");
   alert(myPrompt.toString());
 });
 
@@ -68,6 +68,20 @@

dialog.dart

Do you need to use them all at once? Try it by importing dialog.dart file. +

Known Issues

+ +* **Bootstrap doesn't use the newest version!** +* **Why don't you use pub's Bootstrap?** + * In v3.3.4 is a bug, which displays backdrop in the front. I'm waiting for the fix in the next release. + +

Contributing

+ +Please fill in an issue or a pull request on project's [GitHub page](https://github.com/dvorapa/dialog-dart). In PR please observe the style of commit messages using the imperative mood. + +

License

+ +[The BSD 2-Clause License](https://github.com/dvorapa/dialog-dart/blob/master/LICENSE) +