From 6781b635ee490a8525d35a79ca839a518b8fa79b Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 09:56:26 +1100 Subject: [PATCH] Rebuilt ratchet --- dist/ratchet.css | 36 ++++++++++++++++++++++++++++++++++++ dist/ratchet.js | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) diff --git a/dist/ratchet.css b/dist/ratchet.css index ca7fd80..41445d6 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -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) -------------------------------------------------- */ diff --git a/dist/ratchet.js b/dist/ratchet.js index 515392d..2443542 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -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 -- 2.39.2