From 82886f3cb5a591d2649aa6a6b4df7deada4d94ce Mon Sep 17 00:00:00 2001
From: dvorapa <dvorapa@seznam.cz>
Date: Fri, 5 Oct 2018 21:02:06 +0200
Subject: [PATCH] Create modal.dart (#13)

---
 .gitignore                |  2 +-
 CHANGELOG.md              |  6 ++++-
 LICENSE                   |  2 +-
 README.md                 | 20 +++++++++++---
 example/index.dart        |  5 ++++
 example/index.html        | 28 ++++++++++++++-----
 lib/bootstrap.css         |  2 +-
 lib/dialog.dart           |  5 ++++
 lib/dialogs/alert.dart    |  2 +-
 lib/dialogs/confirm.dart  |  2 +-
 lib/dialogs/modal.dart    | 57 +++++++++++++++++++++++++++++++++++++++
 lib/dialogs/prompt.dart   |  2 +-
 lib/src/dialog_class.dart | 40 ++++++++++++++-------------
 pubspec.yaml              |  7 +++--
 14 files changed, 141 insertions(+), 39 deletions(-)
 create mode 100644 lib/dialogs/modal.dart

diff --git a/.gitignore b/.gitignore
index dbef116..2e7f80d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,4 +18,4 @@ doc/api/
                  # project includes source files written in JavaScript.
 *.js_
 *.js.deps
-*.js.map
+*.js.map
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0166ec7..227b365 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.7.0
+
+* **New** modal dialog
+
 ## 0.6.2
 
 * Bootstrap 4 support
@@ -38,4 +42,4 @@
 
 * **New** alert dialog
 * **New** confirm dialog
-* **New** prompt dialog
+* **New** prompt dialog
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
index 65e2d31..6751011 100644
--- a/LICENSE
+++ b/LICENSE
@@ -20,4 +20,4 @@ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/README.md b/README.md
index edc719a..8959d1e 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,14 @@
 # Dialog.dart
 
-Modern alert, confirm and prompt dialog implementation
+Modern modal dialog implementation containing remakes of alert & confirm dialogs supplemented by prompt & custom modal dialogs
 
 ## Description
 
-This package replaces default alert and confirm dialogs from Dart's Window class and adds missing prompt dialog. Default system dialogs called by that prompts are superseded by modern modal design.
+This package replaces default alert & confirm dialogs from Dart's Window class and adds missing prompt & custom modal dialogs. Default system dialogs called by that prompts are superseded by modern modal design.
 
 ## Usage
 
-Usage is almost the same as set in the Dart's Window class and completely the same as described in the WHATWG HTML Standard. For each dialog there is just one file to import only the dialog you really need. There is also one file to import all three dialogs at once if you want to use them all.
+Usage is almost the same as set in the Dart's Window class and completely the same as described in the WHATWG HTML Standard. For each dialog there is just one file to import only the dialog you really need. There is also one file to import all four dialogs at once if you want to use them all.
 
 ```Dart
 import "package:dialog/~file~";
@@ -54,6 +54,20 @@ querySelector("#promptButton").onClick.listen((_) async {
 
 ![Image of prompt](https://raw.githubusercontent.com/dvorapa/dialog-dart/master/prompt.png)
 
+#### dialogs/modal.dart
+
+Adds fully customizable modal dialog.
+
+```Dart
+querySelector("#modalButton").onClick.listen((_) async {
+  var myModal = await modal(
+      "Surprise", [Text("Boo!")], "Eek!", "Huh?", "Haha!", "Come on!", true);
+  alert(myModal.toString());
+});
+```
+
+![Image of modal](https://raw.githubusercontent.com/dvorapa/dialog-dart/master/modal.png)
+
 #### dialog.dart
 
 Do you need to use them all at once? Try to import dialog.dart file only!
diff --git a/example/index.dart b/example/index.dart
index abd0142..fdbc042 100644
--- a/example/index.dart
+++ b/example/index.dart
@@ -13,4 +13,9 @@ main() {
     var myPrompt = await prompt("Prompted?!", "Yes!");
     alert(myPrompt.toString());
   });
+  querySelector("#modalButton").onClick.listen((_) async {
+    var myModal = await modal(
+        "Surprise", [Text("Boo!")], "Eek!", "Huh?", "Haha!", "Come on!", true);
+    alert(myModal.toString());
+  });
 }
diff --git a/example/index.html b/example/index.html
index 31f8693..2ef2e14 100644
--- a/example/index.html
+++ b/example/index.html
@@ -3,23 +3,23 @@
 <Head>
 <Meta Charset="utf-8">
 <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.6.2">
+<Meta Name="description" Content="Modern modal dialog implementation containing remakes of alert & confirm dialogs supplemented by prompt & custom modal dialogs">
+<Meta Name="keywords" Content="dialog,dart,alert,confirm,prompt,modal,package,dvorapa">
+<Meta Name="version" Content="0.7.0">
 <Title>Dialog.dart</Title>
 </Head>
 <Body>
 <H1>Dialog.dart</H1>
 
-Modern alert, confirm and prompt dialog implementation
+Modern modal dialog implementation containing remakes of alert & confirm dialogs supplemented by prompt & custom modal dialogs
 
 <H2>Description</H2>
 
-This package replaces default alert and confirm dialogs from Dart's Window class and adds missing prompt dialog. Default system dialogs called by that prompts are superseded by modern modal design.
+This package replaces default alert & confirm dialogs from Dart's Window class and adds missing prompt & custom modal dialogs. Default system dialogs called by that prompts are superseded by modern modal design.
 
 <H2>Usage</H2>
 
-Usage is almost the same as set in the Dart's Window class and completely the same as described in the WHATWG HTML Standard. For each dialog there is just one file to import only the dialog you really need. There is also one file to import all three dialogs at once if you want to use them all.
+Usage is almost the same as set in the Dart's Window class and completely the same as described in the WHATWG HTML Standard. For each dialog there is just one file to import only the dialog you really need. There is also one file to import all four dialogs at once if you want to use them all.
 
 <Code><Pre>
 import "package:dialog/~file~";
@@ -65,6 +65,20 @@ <H4>dialogs/prompt.dart</H4>
 
 <Button Id="promptButton">Prompt me!</Button>
 
+<H4>dialogs/modal.dart</H4>
+
+Adds fully customizable modal dialog.
+
+<Code><Pre>
+querySelector("#modalButton").onClick.listen((_) async {
+  var myModal = await modal(
+      "Surprise", [Text("Boo!")], "Eek!", "Huh?", "Haha!", "Come on!", true);
+  alert(myModal.toString());
+});
+</Pre></Code>
+
+<Button Id="modalButton">Surprise me!</Button>
+
 <H4>dialog.dart</H4>
 
 Do you need to use them all at once? Try to import dialog.dart file only!
@@ -79,4 +93,4 @@ <H2>License</H2>
 
 <Script Defer Src="index.dart.js"></Script>
 </Body>
-</Html>
+</Html>
\ No newline at end of file
diff --git a/lib/bootstrap.css b/lib/bootstrap.css
index fe27dfa..043ed4f 100644
--- a/lib/bootstrap.css
+++ b/lib/bootstrap.css
@@ -10022,4 +10022,4 @@
 		background-position: 0 0;
 	}
 }
-/*# sourceMappingURL=bootstrap.css.map */
+/*# sourceMappingURL=bootstrap.css.map */
\ No newline at end of file
diff --git a/lib/dialog.dart b/lib/dialog.dart
index fd95830..a29d0d5 100644
--- a/lib/dialog.dart
+++ b/lib/dialog.dart
@@ -7,7 +7,12 @@ library dialog;
 
 /// Replaces default alert dialog.
 export "dialogs/alert.dart";
+
 /// Replaces default confirm dialog.
 export "dialogs/confirm.dart";
+
+/// Adds fully customizable modal dialog.
+export "dialogs/modal.dart";
+
 /// Adds missing prompt dialog.
 export "dialogs/prompt.dart";
diff --git a/lib/dialogs/alert.dart b/lib/dialogs/alert.dart
index ec38381..fa8b3c1 100644
--- a/lib/dialogs/alert.dart
+++ b/lib/dialogs/alert.dart
@@ -4,7 +4,7 @@ import "dart:html";
 import "../src/dialog_class.dart";
 
 void alert([String message = ""]) {
-  Dialog alertDialog = Dialog([Text(message)], "Alert");
+  Dialog alertDialog = Dialog("Alert", [Text(message)]);
 
   alertDialog
     ..showDialog()
diff --git a/lib/dialogs/confirm.dart b/lib/dialogs/confirm.dart
index 7506e60..33b0ed7 100644
--- a/lib/dialogs/confirm.dart
+++ b/lib/dialogs/confirm.dart
@@ -6,7 +6,7 @@ import "../src/dialog_class.dart";
 
 Future<dynamic> confirm([String message = ""]) async {
   Completer c = Completer();
-  Dialog confirmDialog = Dialog([Text(message)], "Confirm", true);
+  Dialog confirmDialog = Dialog("Confirm", [Text(message)], true);
 
   confirmDialog
     ..showDialog()
diff --git a/lib/dialogs/modal.dart b/lib/dialogs/modal.dart
new file mode 100644
index 0000000..3c57f53
--- /dev/null
+++ b/lib/dialogs/modal.dart
@@ -0,0 +1,57 @@
+library dialog.modal;
+
+import "dart:async";
+import "dart:html";
+import "../src/dialog_class.dart";
+
+Future<dynamic> modal(
+    [String title = "Modal",
+    List<Node> content = const [],
+    String successText,
+    String cancelText,
+    dynamic onSuccess,
+    dynamic onCancel,
+    bool cancellable,
+    Element whatToFocus]) async {
+  Completer c = Completer();
+
+  Dialog modalDialog = Dialog(title, content, cancellable, successText,
+      cancelText, onSuccess, onCancel);
+
+  whatToFocus ??= modalDialog.okButton;
+
+  modalDialog.showDialog();
+  whatToFocus.focus();
+
+  whatToReturn(bool howClosed) {
+    if (howClosed == true) {
+      c.complete(onSuccess);
+    } else if (howClosed == false) {
+      c.complete(onCancel);
+    }
+  }
+
+  modalDialog.dialogBackdrop.onClick.first.then((_) {
+    whatToReturn(false);
+    modalDialog.closeDialog();
+  });
+
+  querySelectorAll(".modal button").forEach((Element buttons) {
+    buttons.onClick.first.then((e) {
+      if (e.target == modalDialog.okButton) {
+        whatToReturn(true);
+      } else {
+        whatToReturn(false);
+      }
+      modalDialog.closeDialog();
+    });
+    buttons.onKeyDown.listen((e) {
+      if (e.keyCode == KeyCode.ESC) {
+        whatToReturn(false);
+        modalDialog.closeDialog();
+      }
+    });
+  });
+
+  return c.future;
+}
diff --git a/lib/dialogs/prompt.dart b/lib/dialogs/prompt.dart
index 6973d8c..9ea7941 100644
--- a/lib/dialogs/prompt.dart
+++ b/lib/dialogs/prompt.dart
@@ -16,7 +16,7 @@ Future<dynamic> prompt([String message = "", String value = ""]) async {
     ..id = "dialogInput"
     ..value = value;
 
-  Dialog promptDialog = Dialog([label, input], "Prompt", true);
+  Dialog promptDialog = Dialog("Prompt", [label, input], true);
 
   promptDialog.showDialog();
   input.focus();
diff --git a/lib/src/dialog_class.dart b/lib/src/dialog_class.dart
index c02ec1e..301917e 100644
--- a/lib/src/dialog_class.dart
+++ b/lib/src/dialog_class.dart
@@ -3,21 +3,25 @@ library dialog.src.dialog_class;
 import "dart:html";
 
 class Dialog {
-  List<Node> content;
   String title;
-  bool cancelable;
-  String cancelName;
-  String okName;
-  DivElement dialog = DivElement();
-  DivElement dialogBackdrop = DivElement();
-  ButtonElement xButton = ButtonElement();
-  ButtonElement cancelButton = ButtonElement();
-  ButtonElement okButton = ButtonElement();
+  List<Node> content;
+  String successText;
+  String cancelText;
+  dynamic onSuccess;
+  dynamic onCancel;
+  bool cancellable;
+  final DivElement dialog = DivElement();
+  final DivElement dialogBackdrop = DivElement();
+  final ButtonElement xButton = ButtonElement();
+  final ButtonElement cancelButton = ButtonElement();
+  final ButtonElement okButton = ButtonElement();
 
-  Dialog(this.content, this.title,
-      [this.cancelable = false,
-      this.cancelName = "Cancel",
-      this.okName = "OK"]) {
+  Dialog(this.title, this.content,
+      [this.cancellable = false,
+      this.successText = "OK",
+      this.cancelText = "Cancel",
+      this.onSuccess = true,
+      this.onCancel = false]) {
     if (document.querySelector("body").style.color != 'rgb(51, 51, 51)' &&
         querySelectorAll("[href*='packages/dialog/bootstrap.css']").isEmpty) {
       LinkElement link = LinkElement()
@@ -63,15 +67,15 @@ class Dialog {
     DivElement dialogFooter = DivElement()
       ..classes.add("modal-footer")
       ..style.border = "0";
-    if (cancelable == true) {
+    if (cancellable == true) {
       cancelButton
         ..classes.addAll(["btn", "btn-secondary"])
-        ..text = cancelName;
+        ..text = cancelText;
       dialogFooter.children.add(cancelButton);
     }
     okButton
       ..classes.addAll(["btn", "btn-primary"])
-      ..text = okName;
+      ..text = successText;
     dialogFooter.children.add(okButton);
     dialogContent.children.add(dialogFooter);
   }
@@ -79,8 +83,8 @@ class Dialog {
   void showDialog() {
     if (document.body.classes.contains("modal-open") == false) {
       document.body.children.add(dialog);
-      dialogBackdrop..classes.add("show");
-      dialog..classes.add("show");
+      dialogBackdrop.classes.add("show");
+      dialog.classes.add("show");
       document.body.classes.add("modal-open");
     }
   }
diff --git a/pubspec.yaml b/pubspec.yaml
index 0776d67..cfa733a 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,11 +1,10 @@
 name: dialog
-version: 0.6.2
-description: Modern alert, confirm and prompt dialog implementation
+version: 0.7.0
+description: Modern modal dialog implementation containing remakes of alert & confirm dialogs supplemented by prompt & custom modal dialogs
 author: Pavel Dvořák <dvorapa1995@gmail.com>
 homepage: https://github.com/dvorapa/dialog-dart
-documentation:
 environment:
   sdk: ">=2.0.0 <3.0.0"
 dev_dependencies:
   build_runner: ^0.10.0
-  build_web_compilers: ^0.4.0
+  build_web_compilers: ^0.4.0
\ No newline at end of file