Rebuilt ratchet
authorBen Schwarz <ben@germanforblack.com>
Sun, 23 Dec 2012 22:56:26 +0000 (09:56 +1100)
committerBen Schwarz <ben@germanforblack.com>
Sun, 23 Dec 2012 22:56:26 +0000 (09:56 +1100)
dist/ratchet.css
dist/ratchet.js

index ca7fd80..41445d6 100644 (file)
@@ -1128,6 +1128,42 @@ select {
   border: 1px solid #000;
   border-radius: 3px;
   -webkit-overflow-scrolling: touch;
+}/* Modals
+-------------------------------------------------- */
+.modal {
+  position: fixed; top: 0;
+  background-color: #fff;
+  width: 100%;
+
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
+
+  -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
+          transition:         transform .25s ease-in-out, opacity 1ms .25s;
+
+  opacity: 0;
+  overflow: hidden;
+
+  /*  
+      Normally, we'd use '1', … ratchet uses '10'
+      for the title bar, so deal with that.
+  */
+  z-index: 11; 
+
+  min-height: 100%;
+}
+
+/* Modal - When active
+-------------------------------------------------- */
+.modal.active {
+  -webkit-transition: -webkit-transform .25s ease-in-out;
+      transition:     transform: .25 ease-in-out;
+
+  -webkit-transform: translateY(0);
+          transform: translateY(0);
+
+  opacity: 1;
+  height: 100%;
 }/* Slider styles (to be used with sliders.js)
 -------------------------------------------------- */
 
index 515392d..2443542 100644 (file)
@@ -7,6 +7,45 @@
  */
 
 /* ----------------------------------
+ * MODAL v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+  findModals = function ( target ) {
+    var i, 
+        modals = document.querySelectorAll( 'a' );
+
+    for ( ; target && target !== document; target = target.parentNode ) {
+      for ( i = modals.length; i--; ) { if ( modals[i] === target ) return target; }
+    }
+  };
+
+  getModal = function ( event ) {
+    var modal,
+        modalToggle = findModals( event.target );
+
+    if ( !modalToggle || !modalToggle.hash ) return;
+
+    modal = document.querySelector( modalToggle.hash )
+    
+    if ( !modal ) return;
+    return modal;
+  };
+
+  window.addEventListener( 'touchend', function ( event ) {
+    var modal = getModal( event );
+
+    if ( !modal ) return; 
+
+    modal.classList.toggle( 'active' );
+  } );
+
+  window.addEventListener( 'click', function ( event ) { 
+    if ( getModal( event ) ) event.preventDefault();
+  } );
+}();/* ----------------------------------
  * POPOVER v1.0.0
  * Licensed under The MIT License
  * http://opensource.org/licenses/MIT