Resolve #10; downgrade Bootstrap to v3.3.2

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
 

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.
+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)

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();
+      }
+    });
+  });
 }

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<bool> 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;
 }

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<String> 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;
 }

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");
     }
   }

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 <[email protected]>
 homepage: https://github.com/dvorapa/dialog-dart
 environment:
   sdk: ">=1.10.0 <2.0.0"

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());
   });
 }

web/index.html

@@ -5,7 +5,7 @@
 <Meta Name="author" Content="Pavel Dvořák">
 <Meta Name="description" Content="Modern alert, confirm and prompt dialog implementation">
 <Meta Name="keywords" Content="dialog,dart,alert,confirm,prompt,package,dvorapa">
-<Meta Name="version" Content="0.4.0-dev">
+<Meta Name="version" Content="0.4.0">
 <Link Type="text/css" Rel="stylesheet" Href="style.css">
 <Title>Dialog.dart</Title>
 </Head>
@@ -43,8 +43,8 @@ <H3>dialogs/confirm.dart</H3>
 Replaces default confirm dialog.
 
 <Code><Pre>
-querySelector("#confirmButton").onClick.listen((_) {
-  var myConfirm = confirm("Confirmed?!");
+querySelector("#confirmButton").onClick.listen((_) async {
+  var myConfirm = await confirm("Confirmed?!");
   alert(myConfirm.toString());
 });
 </Pre></Code>
@@ -56,8 +56,8 @@ <H3>dialogs/prompt.dart</H3>
 Adds missing prompt dialog.
 
 <Code><Pre>
-querySelector("#promptButton").onClick.listen((_) {
-  var myPrompt = prompt("Prompted?!", "Yes!");
+querySelector("#promptButton").onClick.listen((_) async {
+  var myPrompt = await prompt("Prompted?!", "Yes!");
   alert(myPrompt.toString());
 });
 </Pre></Code>
@@ -68,6 +68,20 @@ <H3>dialog.dart</H3>
 
 Do you need to use them all at once? Try it by importing dialog.dart file.
 
+<H2>Known Issues</H2>
+
+* **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.
+
+<H2>Contributing</H2>
+
+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.
+
+<H2>License</H2>
+
+[The BSD 2-Clause License](https://github.com/dvorapa/dialog-dart/blob/master/LICENSE)
+
 <Script Type="application/dart" Src="index.dart"></Script>
 <Script Src="packages/browser/dart.js"></Script>
 </Body>