From b89b5e025c5da7c16b723a3dc68e49bac0de570b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pavel=20Dvo=C5=99=C3=A1k?= Date: Fri, 24 Jul 2015 23:37:19 +0200 Subject: [PATCH] Resolve #8 and infinite dialogs issue --- CHANGELOG.md | 5 +++ README.md | 10 +---- lib/dialogs/alert.dart | 9 ++--- lib/dialogs/confirm.dart | 26 ++++++------- lib/dialogs/prompt.dart | 56 ++++++++++++--------------- lib/src/dialog_class.dart | 81 ++++++++++++++++++--------------------- pubspec.yaml | 2 +- web/index.html | 16 ++------ 8 files changed, 88 insertions(+), 117 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 47394db..a298add 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index eff5797..edc719a 100644 --- a/README.md +++ b/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 diff --git a/lib/dialogs/alert.dart b/lib/dialogs/alert.dart index 03eb028..442f412 100644 --- a/lib/dialogs/alert.dart +++ b/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(); } }); diff --git a/lib/dialogs/confirm.dart b/lib/dialogs/confirm.dart index ed84cb7..3f904c9 100644 --- a/lib/dialogs/confirm.dart +++ b/lib/dialogs/confirm.dart @@ -11,26 +11,22 @@ Future 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(); } diff --git a/lib/dialogs/prompt.dart b/lib/dialogs/prompt.dart index 8d3d8db..3724f73 100644 --- a/lib/dialogs/prompt.dart +++ b/lib/dialogs/prompt.dart @@ -9,12 +9,12 @@ Future 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); @@ -22,44 +22,38 @@ Future prompt([String message = "", String value = ""]) async { 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; } diff --git a/lib/src/dialog_class.dart b/lib/src/dialog_class.dart index 24b8e18..12257f5 100644 --- a/lib/src/dialog_class.dart +++ b/lib/src/dialog_class.dart @@ -1,3 +1,5 @@ +library dialog.src.dialog_class; + import "dart:html"; class Dialog { @@ -7,7 +9,7 @@ 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(); @@ -15,88 +17,79 @@ 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.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"); } } } diff --git a/pubspec.yaml b/pubspec.yaml index e712593..a2c2218 100644 --- a/pubspec.yaml +++ b/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 homepage: https://github.com/dvorapa/dialog-dart diff --git a/web/index.html b/web/index.html index 1488e56..96241d9 100644 --- a/web/index.html +++ b/web/index.html @@ -5,7 +5,7 @@ - + Dialog.dart @@ -68,21 +68,11 @@

dialogs/prompt.dart

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

License