diff options
author | Connor Sears <connor@connorsears.com> | 2013-01-14 02:42:01 +0400 |
---|---|---|
committer | Connor Sears <connor@connorsears.com> | 2013-01-14 02:42:01 +0400 |
commit | fd486a64003acfe65355cd1df0bc3a7f408051c3 (patch) | |
tree | 31992a4e1e787780a2b508ef811183ab79e2dd31 | |
parent | cf8b87d0593c833424fdccbd73fbc1a771556872 (diff) | |
parent | 438a177661bcf65e32115372303696650cdc1999 (diff) |
Merge pull request #135 from benschwarz/feature/modals
Adding modals to the Ratchet component list.
-rw-r--r-- | Makefile | 2 | ||||
-rw-r--r-- | dist/ratchet.css | 26 | ||||
-rw-r--r-- | dist/ratchet.js | 24 | ||||
-rw-r--r-- | docs/css/docs.css | 6 | ||||
-rw-r--r-- | docs/index.html | 30 | ||||
-rw-r--r-- | lib/css/modals.css | 27 | ||||
-rw-r--r-- | lib/js/modals.js | 25 | ||||
-rw-r--r-- | test/components/modals.html | 73 |
8 files changed, 212 insertions, 1 deletions
@@ -4,7 +4,7 @@ build: mkdir -p dist - cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css + cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/modals.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css cat lib/js/*.js > ./dist/ratchet.tmp.js @echo "/**\n * ==================================\n * Ratchet v1.0.0\n * Licensed under The MIT License\n * http://opensource.org/licenses/MIT\n * ==================================\n */\n" > ./dist/copywrite.txt cat ./dist/copywrite.txt ./dist/ratchet.tmp.js > ./dist/ratchet.js diff --git a/dist/ratchet.css b/dist/ratchet.css index ca7fd80..4fe7f49 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1128,6 +1128,32 @@ select { border: 1px solid #000; border-radius: 3px; -webkit-overflow-scrolling: touch; +}/* Modals +-------------------------------------------------- */ +.modal { + position: fixed; + top: 0; + opacity: 0; + z-index: 11; + width: 100%; + min-height: 100%; + overflow: hidden; + background-color: #fff; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; + transition: transform .25s ease-in-out, opacity 1ms .25s; +} + +/* Modal - When active +-------------------------------------------------- */ +.modal.active { + opacity: 1; + height: 100%; + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform: .25 ease-in-out; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); }/* Slider styles (to be used with sliders.js) -------------------------------------------------- */ diff --git a/dist/ratchet.js b/dist/ratchet.js index 515392d..4059da3 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -7,6 +7,30 @@ */ /* ---------------------------------- + * MODAL v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + var findModals = function (target) { + var i; + var modals = document.querySelectorAll('a'); + for (; target && target !== document; target = target.parentNode) { + for (i = modals.length; i--;) { if (modals[i] === target) return target; } + } + }; + + var getModal = function (event) { + var modalToggle = findModals(event.target); + if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash); + }; + + window.addEventListener('touchend', function (event) { + var modal = getModal(event); + if (modal) modal.classList.toggle('active'); + }); +}();/* ---------------------------------- * POPOVER v1.0.0 * Licensed under The MIT License * http://opensource.org/licenses/MIT diff --git a/docs/css/docs.css b/docs/css/docs.css index fbf2ca2..8cb6847 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -648,6 +648,12 @@ h6 { opacity: 1 !important; } +/* Modal example */ +.iphone .iphone-content .modal { position: absolute; } +.iphone .iphone-content .modal .content { margin-top: 44px; } +#myModal.active { background: #cecece; } +#modalsInPhone #iwindow > .button { margin: 10px; } + /* Slider examples */ .component-example-fullbleed .slider, .component-example-fullbleed .slider li, diff --git a/docs/index.html b/docs/index.html index 96c1c6f..fd2a413 100644 --- a/docs/index.html +++ b/docs/index.html @@ -58,6 +58,7 @@ <li><a href="#forms">Forms</a></li> <li><a href="#toggles">Toggles</a></li> <li><a href="#popovers">Popovers</a></li> + <li><a href="#modals">Modals</a></li> <li><a href="#sliders">Sliders</a></li> <li><a href="#push">Push</a></li> </ul> @@ -976,6 +977,35 @@ document </pre> </article> + + <!-- Modals --> + <article class="component" id="modals"> + <h3 class="component-title">Modals</h3> + + <div class="component-example"> + + </div> + +<pre class="prettyprint"> +<a href="#myModal" class="button">Open modal</a> + +<div id="myModal" class="modal"> + <header class="bar-title"> + <h1 class="title">Modal</h1> + <a class="button" href="#myModal"> + Close + </a> + </header> + + <div class="content content-padded"> + <p>The contents of my modal</p> + </div> +</div> +</pre> + + <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p> + + </article> <!-- Slider --> <article class="component" id="sliders"> diff --git a/lib/css/modals.css b/lib/css/modals.css new file mode 100644 index 0000000..e0debc2 --- /dev/null +++ b/lib/css/modals.css @@ -0,0 +1,27 @@ +/* Modals +-------------------------------------------------- */ +.modal { + position: fixed; + top: 0; + opacity: 0; + z-index: 11; + width: 100%; + min-height: 100%; + overflow: hidden; + background-color: #fff; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; + transition: transform .25s ease-in-out, opacity 1ms .25s; +} + +/* Modal - When active +-------------------------------------------------- */ +.modal.active { + opacity: 1; + height: 100%; + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform: .25 ease-in-out; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +}
\ No newline at end of file diff --git a/lib/js/modals.js b/lib/js/modals.js new file mode 100644 index 0000000..4448107 --- /dev/null +++ b/lib/js/modals.js @@ -0,0 +1,25 @@ +/* ---------------------------------- + * MODAL v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + var findModals = function (target) { + var i; + var modals = document.querySelectorAll('a'); + for (; target && target !== document; target = target.parentNode) { + for (i = modals.length; i--;) { if (modals[i] === target) return target; } + } + }; + + var getModal = function (event) { + var modalToggle = findModals(event.target); + if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash); + }; + + window.addEventListener('touchend', function (event) { + var modal = getModal(event); + if (modal) modal.classList.toggle('active'); + }); +}();
\ No newline at end of file diff --git a/test/components/modals.html b/test/components/modals.html new file mode 100644 index 0000000..b094550 --- /dev/null +++ b/test/components/modals.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Modal slideup</title> + + <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> + + <link rel="stylesheet" href="../../lib/css/base.css"> + <link rel="stylesheet" href="../../lib/css/bars.css"> + <link rel="stylesheet" href="../../lib/css/lists.css"> + <link rel="stylesheet" href="../../lib/css/forms.css"> + <link rel="stylesheet" href="../../lib/css/buttons.css"> + <link rel="stylesheet" href="../../lib/css/chevrons.css"> + <link rel="stylesheet" href="../../lib/css/counts.css"> + <link rel="stylesheet" href="../../lib/css/segmented-controllers.css"> + <link rel="stylesheet" href="../../lib/css/popovers.css"> + <link rel="stylesheet" href="../../lib/css/modals.css"> + <link rel="stylesheet" href="../../lib/css/sliders.css"> + <link rel="stylesheet" href="../../lib/css/toggles.css"> + <link rel="stylesheet" href="../../lib/css/push.css"> + <script src="../../lib/js/push.js"></script> + <script src="../../lib/js/toggles.js"></script> + <script src="../../lib/js/sliders.js"></script> + <script src="../../lib/js/popovers.js"></script> + <script src="../../lib/js/modals.js"></script> + <script src="../../lib/js/segmented-controllers.js"></script> + </head> + <body> + + <header class="bar-title"> + <h1 class="title">Modal slideup</h1> + </header> + + <div class="content content-padded"> + <a href="#myModal" class="button">Open modal</a> + </div> + + <div id="myModal" class="modal"> + <header class="bar-title"> + <h1 class="title">Modal</h1> + <a class="button" href="#myModal"> + Close + </a> + </header> + + <div class="content content-padded"> + <p>Honey, check it out, you got me mesmerized + With your black hair and fat-ass thighs + Street poetry is my everyday + But yo, I gotta stop when you trot my way + If I was workin at the club you would not pay + Aiyyo, my man phife diggy, he got somthin to say</p> + + <p>I like em brown, yellow, puero rican or hatian + Name is phife dawg from the zulu nation + Told you in the jam that we can get down + Now lets knock the boots like the group h-town + You got bbd all on your bedroom wall + But Im above the rim and this is how I ball + A pretty little somethin on the new york street + This is how I represent over this here beat</p> + <p>Talkin bout you</p> + + <p>Yo, I took you out</p> + <p>But sex was on my mind for the whole damn route + My mind was in a frenzy and a horny state + But I couldnt drop dimes cause *you couldnt relate*</p> + </div> + </div> + + </body> +</html>
\ No newline at end of file |