Alert and confirm

overview/README.md

@@ -20,4 +20,6 @@
 
 ## Layout components
 
-[![List](../ui/list.reel/screenshot.png)](../ui/list.reel)
+[![List](../ui/list.reel/screenshot.png)](../ui/list.reel)
+[![Alert](../ui/alert.reel/screenshot.png)](../ui/alert.reel)
+[![Confirm](../ui/confirm.reel/screenshot.png)](../ui/confirm.reel)

overview/ui/main.reel/main.css

@@ -87,9 +87,6 @@ td:nth-child(2) { background: hsl(0,0%,90%); }
 td:nth-child(3) { background: hsl(0,0%,96%); }
 td:nth-child(4) { background: hsl(0,0%,24%); }
 
-.layout td:nth-child(3) { background: hsl(0,0%,70%); }
-.layout td:nth-child(4) { background: hsl(0,0%,40%); }
-
 .modal td:nth-child(2) {
     background: hsla(0,0%,0%,.1);
 }
@@ -100,3 +97,13 @@ td:nth-child(4) { background: hsl(0,0%,24%); }
 .layout td:nth-child(4) {
     background: hsl(0,0%,40%);
 }
+
+.test-alert {
+    display: inline-block !important;
+}
+
+.test-alert .montage-Overlay {
+    position: relative !important;
+    display: inline-block !important;
+    margin: 0px;
+}

overview/ui/main.reel/main.html

@@ -168,6 +168,20 @@ <h2>Layout components</h2>
                     </td>
                 </tr>
 
+                <tr>
+                    <td>Alert</td>
+                    <td><div data-montage-id="alert" class="test-alert"></div></td>
+                    <td data-montage-skin="light"><div data-montage-id="alert-light" class="test-alert"></div></td>
+                    <td data-montage-skin="dark"><div data-montage-id="alert-dark" class="test-alert"></div></td>
+                </tr>
+
+                <tr>
+                    <td>Confirm</td>
+                    <td><div data-montage-id="confirm" class="test-alert"></div></td>
+                    <td data-montage-skin="light"><div data-montage-id="confirm-light" class="test-alert"></div></td>
+                    <td data-montage-skin="dark"><div data-montage-id="confirm-dark" class="test-alert"></div></td>
+                </tr>
+
 
             </tbody>
         </table>

overview/ui/main.reel/main.js

@@ -1,3 +1,15 @@
 var Component = require("montage/ui/component").Component;
 
-exports.Main = Component.specialize({});
+exports.Main = Component.specialize({
+
+    draw: {
+        value: function() {
+            // There can normally only be one overlay, absolutely-positioned,
+            // so we need to manually mangle the dom and style them to appear inline.
+            var overlays = ["alert", "alert-light", "alert-dark", "confirm", "confirm-light", "confirm-dark"];
+            overlays.forEach(function(overlayName){
+                this[overlayName].element.appendChild(this[overlayName]._overlay.element);
+            }.bind(this));
+        }
+    }
+});

overview/ui/main.reel/main.json

@@ -1,7 +1,13 @@
 {
     "owner": {
         "properties": {
-            "element": {"#": "main"}
+            "element": {"#": "main"},
+            "alert": {"@": "alert"},
+            "alert-light": {"@": "alert-light"},
+            "alert-dark": {"@": "alert-dark"},
+            "confirm": {"@": "confirm"},
+            "confirm-light": {"@": "confirm-light"},
+            "confirm-dark": {"@": "confirm-dark"}
         }
     },
 
@@ -60,5 +66,13 @@
     "list-2": { "prototype": "ui/list.reel", "properties": { "element": {"#": "list-2"}, "content": [1, 2, 3] } },
     "listItem-2": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-2"} } },
     "list-3": { "prototype": "ui/list.reel", "properties": { "element": {"#": "list-3"}, "content": [1, 2, 3] } },
-    "listItem-3": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-3"} } }
+    "listItem-3": { "prototype": "ui/list-item.reel", "properties": { "element": {"#": "listItem-3"} } },
+
+    "alert": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert"}, "title": "Title", "message": "This is an alert"}},
+    "alert-light": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert-light"}, "title": "Title", "message": "This is an alert"}},
+    "alert-dark": { "prototype": "ui/alert.reel", "properties": { "element": {"#": "alert-dark"}, "title": "Title", "message": "This is an alert"}},
+
+    "confirm": { "prototype": "ui/confirm.reel", "properties": { "element": {"#": "confirm"}, "title": "Title", "message": "This is a confirm"}},
+    "confirm-light": { "prototype": "ui/confirm.reel", "properties": { "element": {"#": "confirm-light"}, "title": "Title", "message": "This is a confirm"}},
+    "confirm-dark": { "prototype": "ui/confirm.reel", "properties": { "element": {"#": "confirm-dark"}, "title": "Title", "message": "This is a confirm"}}
 }

test/alert/alert-spec.js

@@ -0,0 +1,27 @@
+var TestPageLoader = require("montage-testing/testpageloader").TestPageLoader;
+
+TestPageLoader.queueTest("alert-test", function(testPage) {
+
+    describe("test/alert/alert-spec", function() {
+        it("should load", function() {
+            expect(testPage.loaded).toBe(true);
+        });
+
+        describe("Alert", function() {
+            it("can be created", function() {
+                expect(testPage.test.templateObjects.alert).toBeDefined();
+            });
+
+            it("can be shown", function() {
+                var alert = testPage.test.templateObjects.alert;
+
+                alert.show();
+
+                testPage.waitForComponentDraw(alert._overlay);
+                runs(function() {
+                    expect(testPage.iframe.contentDocument.body.contains(alert._overlay.element)).toBeTruthy();
+                });
+            });
+        });
+    });
+});

test/alert/alert-test.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Alert Test</title>
+    <script type="text/javascript" src="../../node_modules/montage/montage.js" data-package="../../"></script>
+    <link rel="stylesheet" href="../../ui/text.reel/text.css">
+    <script type="text/montage-serialization">
+        {
+            "test": {
+                "prototype": "test/alert/alert-test[Test]"
+            },
+
+            "alert": {
+                "prototype": "ui/alert.reel",
+                "properties": {
+                    "element": {"#": "alert"},
+                    "title": "A Title",
+                    "message": "A message"
+                }
+            }
+        }
+    </script>
+
+</head>
+<body>
+<h1>Alert</h1>
+
+<div data-montage-id="alert"></div>
+
+</body>
+</html>

test/alert/alert-test.js

@@ -0,0 +1,4 @@
+var TestController = require("montage-testing/test-controller").TestController;
+
+exports.Test = TestController.specialize({
+});

test/all.js

@@ -1,7 +1,9 @@
 require("montage-testing").run(require,[
     // Please keep in alphabetical order
+    "test/alert/alert-spec",
     "test/button/button-spec",
     "test/checkbox/checkbox-spec",
+    "test/confirm/confirm-spec",
     "test/slider/slider-spec",
     "test/number-field/number-field-spec",
     "test/radio-button/radio-button-spec",

test/confirm/confirm-spec.js

@@ -0,0 +1,43 @@
+var TestPageLoader = require("montage-testing/testpageloader").TestPageLoader;
+
+TestPageLoader.queueTest("confirm-test", function(testPage) {
+
+    describe("test/confirm/confirm-spec", function() {
+        it("should load", function() {
+            expect(testPage.loaded).toBe(true);
+        });
+
+        describe("Confirm", function() {
+            it("can be created", function() {
+                expect(testPage.test.templateObjects.confirm).toBeDefined();
+            });
+
+            it("can be shown", function() {
+                var confirm = testPage.test.templateObjects.confirm;
+
+                confirm.show();
+
+                testPage.waitForComponentDraw(confirm._overlay);
+                runs(function() {
+                    expect(testPage.iframe.contentDocument.body.contains(confirm._overlay.element)).toBeTruthy();
+                });
+            });
+
+            it("uses the configured ok label", function() {
+                var confirm = testPage.test.templateObjects.confirm;
+
+                confirm.okLabel = "Okay";
+
+                expect(confirm._okButton.label).toBe("Okay");
+            });
+
+            it("uses the configured cancel label", function() {
+                var confirm = testPage.test.templateObjects.confirm;
+
+                confirm.cancelLabel = "Nay";
+
+                expect(confirm._cancelButton.label).toBe("Nay");
+            });
+        });
+    });
+});

test/confirm/confirm-test.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Confirm Test</title>
+    <script type="text/javascript" src="../../node_modules/montage/montage.js" data-package="../../"></script>
+    <script type="text/montage-serialization">
+        {
+            "test": {
+                "prototype": "test/confirm/confirm-test[Test]"
+            },
+
+            "confirm": {
+                "prototype": "ui/confirm.reel",
+                "properties": {
+                    "element": {"#": "confirm"},
+                    "title": "A Title",
+                    "message": "A message",
+                    "okLabel": "Okay",
+                    "cancelLabel": "Nay"
+                }
+            }
+        }
+    </script>
+
+</head>
+<body>
+<h1>Confirm</h1>
+
+<div data-montage-id="confirm"></div>
+
+</body>
+</html>

test/confirm/confirm-test.js

@@ -0,0 +1,4 @@
+var TestController = require("montage-testing/test-controller").TestController;
+
+exports.Test = TestController.specialize({
+});

ui/alert.reel/README.md

@@ -0,0 +1,46 @@
+# Alert
+
+![Alert](screenshot.png)
+
+The alert displays a message to the user, popping up above other content.
+
+## How to use
+
+```json
+"alert": {
+    "prototype": "ui/alert.reel",
+    "properties": {
+        "element": {"#": "alert"},
+        "title": "A Title",
+        "message": "A message",
+        "okLabel": "Ok"
+    }
+}
+```
+
+```html
+<div data-montage-id="alert"></span>
+```
+
+
+
+## Available properties
+
+* `title` - The text to appear in the title bar.
+* `message` - The text to appear in the body.
+* `okLabel` - The text to appear in the button to dismiss the alert.
+
+
+
+## Customizing with CSS
+
+* `.digit-Alert` - The container element
+* `.digit-Alert-header` - The header element
+* `.digit-Alert-content` - The main content element
+* `.digit-Alert-footer` - The footer element
+
+```css
+.digit-Alert-header {
+    background: red;
+}
+```