Add dialog component

index.html

@@ -9,6 +9,7 @@
         <script src="bower_components/polymer/polymer.min.js"></script>
         <link rel="import" href="src/components/shapeshifter.html">
         <link rel="import" href="src/components/header.html">
+        <link rel="import" href="src/components/dialog.html">
         <link rel="import" href="src/components/app.html">
         <link rel="import" href="src/components/record-item.html">
         <link rel="import" href="src/components/list-view.html">

src/components/dialog.html

@@ -0,0 +1,87 @@
+<polymer-element name="safe-dialog" on-click="{{ close }}">
+    <template>
+        <style>
+            :host {
+                position: absolute;
+                z-index: 10;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                background-color: transparent;
+                -webkit-transition: background-color 0.5s;
+                display: none;
+            }
+
+            :host.open {
+                background-color: rgba(0, 0, 0, 0.5);
+            }
+
+            .inner {
+                display: block;
+                position: absolute;
+                bottom: 0;
+                width: 100%;
+            }
+
+            .inner > * {
+                display: block;
+                padding: 13.5px 15px;
+                min-height: 23px;
+                background: #fff;
+                margin: 5px;
+                text-align: center;
+                -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
+                -webkit-transform: translate3d(0, 100%, 0);
+                opacity: 0;
+            }
+
+            :host.open .inner > * {
+                -webkit-transform: translate3d(0, 0, 0);
+                opacity: 1;
+            }
+        </style>
+        <div class="inner">
+            <content></content>
+        </div>
+    </template>
+    <script>
+        Polymer("safe-dialog", {
+            enteredView: function() {
+                var self = this;
+                this.addEventListener("webkitTransitionEnd", function() {
+                    this.transitionEnd.apply(self, arguments);
+                }, false);
+            },
+            open: function() {
+                var items = this.children.array();
+                var del = 0.2/items.length;
+                for (var i=0; i<items.length; i++) {
+                    items[i].style["-webkit-transition-delay"] = (i*del) + "s";
+                }
+                this.style.display = "block";
+                var self = this;
+                this.transCount = items.length * 2 + 1;
+                setTimeout(function() {
+                    self.classList.add("open");
+                }, 10);
+            },
+            close: function() {
+                var items = this.children.array();
+                var del = 0.2/items.length;
+                for (var i=0; i<items.length; i++) {
+                    items[i].style["-webkit-transition-delay"] = ((items.length-i-1)*del) + "s";
+                }
+                this.transCount = items.length * 2 + 1;
+                this.classList.remove("open");
+            },
+            transitionEnd: function(event) {
+                this.transCount--;
+                if (!this.classList.contains("open") && !this.transCount) {
+                    this.style.display = "none";
+                }
+            }
+        });
+    </script>
+</polymer-element>