Implement dialogs

Gruntfile.js

@@ -39,7 +39,8 @@ module.exports = function(grunt) {
           'lib/css/holo-dark/sliders.css': 'lib/sass/holo-dark/sliders.scss',
           'lib/css/holo-dark/spinners.css': 'lib/sass/holo-dark/spinners.scss',
           'lib/css/holo-dark/stack.css': 'lib/sass/holo-dark/stack.scss',
-          'lib/css/holo-dark/tabs.css': 'lib/sass/holo-dark/tabs.scss'
+          'lib/css/holo-dark/tabs.css': 'lib/sass/holo-dark/tabs.scss',
+          'lib/css/holo-dark/dialogs.css': 'lib/sass/holo-dark/dialogs.scss'
         }
       }
     },

dist/fries.css

@@ -367,6 +367,140 @@ a {
     -webkit-box-flex: 1;
     box-flex: 1; }
 
+.dialogs {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  visibility: hidden;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 999;
+  -webkit-transition: opacity 0.1s ease-out;
+  -moz-transition: opacity 0.1s ease-out;
+  transition: opacity 0.1s ease-out; }
+  .dialogs.on {
+    opacity: 1;
+    visibility: visible; }
+
+.dialog {
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -ms-border-radius: 2px;
+  border-radius: 2px;
+  background-color: #222222;
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+  width: 85%;
+  margin: 50% auto;
+  opacity: 0;
+  -webkit-transform: scale3d(0.7, 0.7, 1);
+  -moz-transform: scale3d(0.7, 0.7, 1);
+  transform: scale3d(0.7, 0.7, 1); }
+  .dialog .dialog-title-region {
+    height: 56px;
+    border-bottom: solid 2px #33b5e5;
+    padding: 0 15px; }
+    .dialog .dialog-title-region .title {
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 56px; }
+  .dialog .dialog-content ul.list li {
+    padding: 5px 15px; }
+  .dialog ul.dialog-actions {
+    list-style: none;
+    border-top: 1px solid #424242;
+    height: 48px; }
+    .dialog ul.dialog-actions li {
+      float: left;
+      display: inline-block;
+      width: 50%;
+      border-right: 1px solid #424242; }
+      .dialog ul.dialog-actions li a {
+        display: block;
+        color: white;
+        font-size: 12px;
+        height: 47px;
+        text-align: center;
+        line-height: 48px; }
+        .dialog ul.dialog-actions li a:active {
+          background-color: rgba(51, 181, 229, 0.6); }
+      .dialog ul.dialog-actions li:first-child a {
+        border-bottom-left-radius: 2px; }
+      .dialog ul.dialog-actions li:last-child {
+        border: none; }
+        .dialog ul.dialog-actions li:last-child a {
+          border-bottom-right-radius: 2px; }
+  .dialog.push {
+    -webkit-animation: push 0.2s;
+    -moz-animation: push 0.2s;
+    animation: push 0.2s; }
+  .dialog.pop {
+    -webkit-animation: pop 0.2s;
+    -moz-animation: pop 0.2s;
+    animation: pop 0.2s; }
+  .dialog.on {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1);
+    -moz-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1); }
+
+@-webkit-keyframes push {
+  from {
+    opacity: 0;
+    -webkit-transform: scale3d(0.7, 0.7, 1); }
+
+  to {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1); } }
+
+@-moz-keyframes push {
+  from {
+    opacity: 0;
+    -moz-transform: scale3d(0.7, 0.7, 1); }
+
+  to {
+    opacity: 1;
+    -moz-transform: scale3d(1, 1, 1); } }
+
+@keyframes push {
+  from {
+    opacity: 0;
+    transform: scale3d(0.7, 0.7, 1); }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1); } }
+
+@-webkit-keyframes pop {
+  from {
+    opacity: 1;
+    -webkit-transform: scale3d(1, 1, 1); }
+
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(0.7, 0.7, 1); } }
+
+@-moz-keyframes pop {
+  from {
+    opacity: 1;
+    -moz-transform: scale3d(1, 1, 1); }
+
+  to {
+    opacity: 0;
+    -moz-transform: scale3d(0.7, 0.7, 1); } }
+
+@keyframes pop {
+  from {
+    opacity: 1;
+    transform: scale3d(1, 1, 1); }
+
+  to {
+    opacity: 0;
+    transform: scale3d(0.7, 0.7, 1); } }
+
 form {
   width: 100%;
   -webkit-box-sizing: border-box;

dist/fries.js

@@ -91,6 +91,98 @@
   window.addEventListener('popstate', checkActionOverflow, false);
   window.addEventListener('push', checkActionOverflow, false);
 
+}());;this.fries = this.fries || {};
+
+(function () {
+
+  var Dialog = function (options) {
+    this.init(options);
+  };
+
+  Dialog.prototype = {
+
+    _dialog: null,
+
+    _settings: {
+      selector: null,
+      callbackOk: function () {
+        this.hide();
+      },
+      callbackCancel: function () {
+        this.hide();
+      }
+    },
+
+    init: function (options) {
+      this._settings = this.merge(this._settings, options);
+
+      if (!this._settings.selector) 
+        throw new Error('Missing parameter: selector');
+
+      this._dialog = document.querySelector(this._settings.selector);
+
+      // Throw an error if the element isn't on the DOM
+      if (!this._dialog) 
+        throw new Error('Could not find an element in the DOM using: ' + this._settings.selector);
+
+      // Attach the event handlers
+      this._dialog.querySelector('.dialog-ok-button').addEventListener('click', (this._settings.callbackOk).bind(this), false);
+      this._dialog.querySelector('.dialog-cancel-button').addEventListener('click', (this._settings.callbackCancel).bind(this), false);
+    },
+
+    show: function () {
+      var self = this._dialog;
+
+      self.parentNode.classList.add('on'); // Shows .dialogs (overlay)
+      self.parentNode.removeEventListener('webkitTransitionEnd');
+      self.parentNode.addEventListener('webkitTransitionEnd', onTransitionEnd, false);
+
+      function onTransitionEnd() {
+        self.parentNode.removeEventListener('webkitTransitionEnd', onTransitionEnd);
+        self.classList.add('on');
+        self.classList.add('push');
+      }
+    },
+
+    hide: function () {
+      var self = this._dialog;
+
+      self.classList.remove('push');
+      self.classList.remove('on');
+      self.classList.add('pop');
+
+      self.addEventListener('webkitAnimationEnd', onAnimationEnd, false);
+
+      function onAnimationEnd() {
+        self.removeEventListener('webkitAnimationEnd', onAnimationEnd);
+        self.classList.remove('pop');
+        self.parentNode.classList.remove('on');
+        self.parentNode.addEventListener('webkitTransitionEnd', onTransitionEnd);
+      }
+
+      function onTransitionEnd() {
+        self.parentNode.removeEventListener('webkitTransitionEnd', onTransitionEnd);
+      }
+
+      this.destroy();
+    },
+
+    destroy: function () {
+
+    },
+
+    merge: function (obj1, obj2) {
+      var obj3 = {},
+          attrname;
+      for (attrname in obj1) { obj3[attrname] = obj1[attrname]; }
+      for (attrname in obj2) { obj3[attrname] = obj2[attrname]; }
+      return obj3;
+    }
+
+  };
+
+  this.fries.Dialog = Dialog;
+
 }());;(function() {
 
   var prettifyInput = function () {

examples/index.html

@@ -59,6 +59,49 @@ <h1 class="intro">Fries Demo</h1>
       <p>This demo is an example of what you can build with Fries. Try it out, check the source, and play with it.</p>
 
     </div>
+
+    <div class="dialogs">
+      <div id="choose-ringtone" class="dialog">
+        <header class="dialog-title-region">
+          <h1 class="title">Choose ringtone</h1>
+        </header>
+        <div class="dialog-content">
+          <ul class="list">
+            <li class="list-item-single-line">
+              <label>Default ringtone</label>
+              <label class="input-radio-wrapper pull-right">
+                <input type="radio" name="ringtone" class="input-radio" selected>
+                <div class="input-radio-inner">
+                  <div class="input-radio-button"></div>
+                </div>
+              </label>
+            </li>
+            <li class="list-item-single-line">
+              <label>Silent</label>
+              <label class="input-radio-wrapper pull-right">
+                <input type="radio" name="ringtone" class="input-radio">
+                <div class="input-radio-inner">
+                  <div class="input-radio-button"></div>
+                </div>
+              </label>
+            </li>
+            <li class="list-item-single-line">
+              <label>Aldebaran</label>
+              <label class="input-radio-wrapper pull-right">
+                <input type="radio" name="ringtone" class="input-radio">
+                <div class="input-radio-inner">
+                  <div class="input-radio-button"></div>
+                </div>
+              </label>
+            </li>
+          </ul>
+        </div>
+        <ul class="dialog-actions">
+          <li><a href="javascript: void(0);" class="dialog-cancel-button">Cancel</a></li>
+          <li><a href="javascript: void(0);" class="dialog-ok-button">OK</a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 
   <script src="../dist/fries.min.js"></script>