Resolve #8 and infinite dialogs issue

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.5.0
+
+* Resolved issues with Bootstrap
+* Fixed removing dialogs when closed
+
 ## 0.4.1
 
 * Fixed enter key bug in prompt

README.md

@@ -56,17 +56,11 @@ querySelector("#promptButton").onClick.listen((_) async {
 
 #### 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.
+Do you need to use them all at once? Try to import dialog.dart file only!
 
 ## 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.
+Please fill in an issue or a pull request on project's [GitHub page](https://github.com/dvorapa/dialog-dart).
 
 ## License
 

lib/dialogs/alert.dart

@@ -9,13 +9,12 @@ void alert([String message = ""]) {
   alertDialog
     ..showDialog()
     ..okButton.focus()
-    ..modalBackdrop.onClick.first.then((_) => alertDialog.closeDialog())
-    ..xButton.onClick.first.then((_) => alertDialog.closeDialog())
-    ..okButton.onClick.first.then((_) => alertDialog.closeDialog());
+    ..dialogBackdrop.onClick.first.then((_) => alertDialog.closeDialog());
 
-  querySelectorAll("button").forEach((ButtonElement buttons) {
+  querySelectorAll(".modal button").forEach((ButtonElement buttons) {
+    buttons.onClick.first.then((e) => alertDialog.closeDialog());
     buttons.onKeyDown.listen((e) {
-      if (e is KeyboardEvent && e.keyCode == KeyCode.ESC) {
+      if (e.keyCode == KeyCode.ESC) {
         alertDialog.closeDialog();
       }
     });

lib/dialogs/confirm.dart

@@ -11,26 +11,22 @@ Future<bool> confirm([String message = ""]) async {
   confirmDialog
     ..showDialog()
     ..okButton.focus()
-    ..modalBackdrop.onClick.first.then((_) {
+    ..dialogBackdrop.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) {
+  querySelectorAll(".modal button").forEach((ButtonElement buttons) {
+    buttons.onClick.first.then((e) {
+      if (e.target == confirmDialog.okButton) {
+        c.complete(true);
+      } else {
+        c.complete(false);
+      }
+      confirmDialog.closeDialog();
+    });
     buttons.onKeyDown.listen((e) {
-      if (e is KeyboardEvent && e.keyCode == KeyCode.ESC) {
+      if (e.keyCode == KeyCode.ESC) {
         c.complete(false);
         confirmDialog.closeDialog();
       }

lib/dialogs/prompt.dart

@@ -9,57 +9,51 @@ Future<String> prompt([String message = "", String value = ""]) async {
 
   LabelElement label = new LabelElement()
     ..classes.add("control-label")
-    ..htmlFor = "TextInputInDialog"
+    ..htmlFor = "dialogInput"
     ..text = message;
   BRElement br = new BRElement();
   InputElement input = new InputElement(type: "text")
     ..classes.add("form-control")
-    ..id = "TextInputInDialog"
+    ..id = "dialogInput"
     ..value = value;
 
   Dialog promptDialog = new Dialog([label, br, input], "Prompt", true);
 
   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();
-    });
+  promptDialog.dialogBackdrop.onClick.first.then((_) {
+    c.complete(null);
+    promptDialog.closeDialog();
+  });
 
-  querySelectorAll("button").forEach((ButtonElement buttons) {
-    buttons.onKeyDown.listen((e) {
-      if (e is KeyboardEvent && e.keyCode == KeyCode.ESC) {
+  querySelectorAll(".modal button").forEach((ButtonElement buttons) {
+    buttons.onClick.first.then((e) {
+      if (e.target == promptDialog.okButton) {
+        c.complete(input.value);
+      } else {
         c.complete(null);
-        promptDialog.closeDialog();
       }
+      promptDialog.closeDialog();
     });
-  });
-  querySelectorAll("input").forEach((InputElement inputs) {
-    inputs.onKeyDown.listen((e) {
-      if (e is KeyboardEvent && e.keyCode == KeyCode.ESC) {
+    buttons.onKeyDown.listen((e) {
+      if (e.keyCode == KeyCode.ESC) {
         c.complete(null);
         promptDialog.closeDialog();
-      } else if (e is KeyboardEvent && e.keyCode == KeyCode.ENTER) {
-        e.preventDefault();
-        c.complete(input.value);
-        promptDialog.closeDialog();
       }
     });
   });
 
+  input.onKeyDown.listen((e) {
+    if (e.keyCode == KeyCode.ENTER) {
+      e.preventDefault();
+      c.complete(input.value);
+      promptDialog.closeDialog();
+    } else if (e.keyCode == KeyCode.ESC) {
+      c.complete(null);
+      promptDialog.closeDialog();
+    }
+  });
+
   return c.future;
 }

lib/src/dialog_class.dart

@@ -1,3 +1,5 @@
+library dialog.src.dialog_class;
+
 import "dart:html";
 
 class Dialog {
@@ -7,96 +9,87 @@ class Dialog {
   String cancelName;
   String okName;
   DivElement dialog = new DivElement();
-  DivElement modalBackdrop = new DivElement();
+  DivElement dialogBackdrop = new DivElement();
   ButtonElement xButton = new ButtonElement();
   ButtonElement cancelButton = new ButtonElement();
   ButtonElement okButton = new ButtonElement();
 
   Dialog(this.content, this.title, [this.cancelable = false,
       this.cancelName = "Cancel", this.okName = "OK"]) {
     if (querySelectorAll(
-        "[href*='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css']").isEmpty) {
+        "[href*='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css']").isEmpty) {
       LinkElement link = new LinkElement()
         ..href =
-        "//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
+        "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
         ..rel = "stylesheet"
         ..type = "text/css";
       document.querySelector("head").insertAdjacentElement("beforeEnd", link);
     }
 
-    dialog.classes.addAll(["modal", "fade"]);
-    modalBackdrop.classes.addAll(["modal-backdrop", "fade"]);
-    dialog.children.add(modalBackdrop);
-    DivElement modalDialog = new DivElement()
+    dialog
+      ..classes.addAll(["modal", "fade"])
+      ..style.display = "block";
+    dialogBackdrop
+      ..classes.addAll(["modal-backdrop", "fade"])
+      ..style.zIndex = "auto";
+    dialog.children.add(dialogBackdrop);
+    DivElement dialogModal = new DivElement()
       ..classes.addAll(["modal-dialog", "modal-sm"]);
-    dialog.children.add(modalDialog);
-    DivElement modalContent = new DivElement()..classes.add("modal-content");
-    modalDialog.children.add(modalContent);
+    dialog.children.add(dialogModal);
+    DivElement dialogContent = new DivElement()..classes.add("modal-content");
+    dialogModal.children.add(dialogContent);
 
-    DivElement modalHeader = new DivElement()
+    DivElement dialogHeader = new DivElement()
       ..classes.add("modal-header")
       ..style.border = "0";
-
     xButton
       ..classes.add("close")
       ..text = new String.fromCharCode(215);
-    modalHeader.children.add(xButton);
-
-    HeadingElement modalTitle = new HeadingElement.h4()
+    dialogHeader.children.add(xButton);
+    HeadingElement dialogTitle = new HeadingElement.h4()
       ..classes.add("modal-title")
       ..text = title;
-    modalHeader.children.add(modalTitle);
+    dialogHeader.children.add(dialogTitle);
+    dialogContent.children.add(dialogHeader);
 
-    modalContent.children.add(modalHeader);
-
-    DivElement modalBody = new DivElement()
+    DivElement dialogBody = new DivElement()
       ..classes.add("modal-body")
       ..nodes.addAll(content)
       ..style.paddingBottom = "0"
       ..style.paddingTop = "0";
+    dialogContent.children.add(dialogBody);
 
-    modalContent.children.add(modalBody);
-
-    DivElement modalFooter = new DivElement()
+    DivElement dialogFooter = new DivElement()
       ..classes.add("modal-footer")
       ..style.border = "0";
-
     if (cancelable == true) {
       cancelButton
         ..classes.addAll(["btn", "btn-default"])
-        ..tabIndex = 1
         ..text = cancelName;
-      modalFooter.children.add(cancelButton);
+      dialogFooter.children.add(cancelButton);
     }
-
     okButton
       ..classes.addAll(["btn", "btn-primary"])
-      ..tabIndex = 0
       ..text = okName;
-    modalFooter.children.add(okButton);
-
-    modalContent.children.add(modalFooter);
-
-    document.body.children.add(dialog);
+    dialogFooter.children.add(okButton);
+    dialogContent.children.add(dialogFooter);
   }
 
   void showDialog() {
-    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");
+    if (document.body.classes.contains("modal-open") == false) {
+      document.body.children.add(dialog);
+      dialogBackdrop..classes.add("in");
+      dialog..classes.add("in");
+      document.body.classes.add("modal-open");
     }
   }
 
   void closeDialog() {
-    if (document.body.classes.contains("opennedDialog") == true) {
-      modalBackdrop.style.display = "none";
-      dialog.style.display = "none";
-      document.body.classes.remove("opennedDialog");
+    if (document.body.classes.contains("modal-open") == true) {
+      document.body
+        ..children.remove(dialog)
+        ..children.remove(dialogBackdrop)
+        ..classes.remove("modal-open");
     }
   }
 }

pubspec.yaml

@@ -1,5 +1,5 @@
 name: dialog
-version: 0.4.1+1
+version: 0.5.0
 description: Modern alert, confirm and prompt dialog implementation
 author: Pavel Dvořák <[email protected]>
 homepage: https://github.com/dvorapa/dialog-dart

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.1+1">
+<Meta Name="version" Content="0.5.0">
 <Link Type="text/css" Rel="stylesheet" Href="style.css">
 <Title>Dialog.dart</Title>
 </Head>
@@ -68,21 +68,11 @@ <H4>dialogs/prompt.dart</H4>
 
 <H4>dialog.dart</H4>
 
-Do you need to use them all at once? Try it by importing dialog.dart file.
-
-<H2>Known Issues</H2>
-
-<Ul>
-<Li><B>Bootstrap doesn't use the newest version!</B></Li>
-<Li><B>Why don't you use pub's Bootstrap?</B></Li>
-<Ul>
-<Li>In v3.3.4 is a bug, which displays backdrop in the front. I'm waiting for the fix in the next release.</Li>
-</Ul>
-</Ul>
+Do you need to use them all at once? Try to import dialog.dart file only!
 
 <H2>Contributing</H2>
 
-Please fill in an issue or a pull request on project's <a href="https://github.com/dvorapa/dialog-dart">GitHub page</a>. In PR please observe the style of commit messages using the imperative mood.
+Please fill in an issue or a pull request on project's <a href="https://github.com/dvorapa/dialog-dart">GitHub page</a>.
 
 <H2>License</H2>