Create modal.dart (#13)

dvorapa · Oct 5, 2018 · 82886f3 · 82886f3
1 parent 1b26411
commit 82886f3
Show file tree

Hide file tree

Showing 14 changed files with 141 additions and 39 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,4 +18,4 @@ doc/api/
                  # project includes source files written in JavaScript.
 *.js_
 *.js.deps
-*.js.map
+*.js.map
diff --git 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
diff --git 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.
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git 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
@@ -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
@@ -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>
diff --git a/lib/bootstrap.css b/lib/bootstrap.css
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,24 +67,24 @@ 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);
   }
 
   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
@@ -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 <[email protected]>
 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