From: Connor Sears Date: Sun, 13 Jan 2013 22:42:01 +0000 (-0800) Subject: Merge pull request #135 from benschwarz/feature/modals X-Git-Url: http://git.roojs.org/?a=commitdiff_plain;h=fd486a64003acfe65355cd1df0bc3a7f408051c3;hp=cf8b87d0593c833424fdccbd73fbc1a771556872;p=ratchet Merge pull request #135 from benschwarz/feature/modals Adding modals to the Ratchet component list. --- diff --git a/Makefile b/Makefile index 5f2b8d6..313cd57 100644 --- a/Makefile +++ b/Makefile @@ -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 @@
  • Forms
  • Toggles
  • Popovers
    • +
  • Modals
  • Sliders
  • Push
    • @@ -976,6 +977,35 @@ document + + +
    +

    Modals

    + +
    + +
    + +
    +<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>
+
    + +

    Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.

    + +
    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 @@ + + + + + Modal slideup + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    Modal slideup

    +
    + +
    + Open modal +
    + + + + + \ No newline at end of file