Merge pull request #135 from benschwarz/feature/modals

Adding modals to the Ratchet component list.

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

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)
 -------------------------------------------------- */
 

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

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,

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>
@@ -977,6 +978,35 @@ document
 
         </article>
         
+        <!-- Modals -->
+        <article class="component" id="modals">
+          <h3 class="component-title">Modals</h3>
+
+          <div class="component-example">
+            
+          </div>
+
+<pre class="prettyprint">
+&lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
+
+&lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
+  &lt;header class=&quot;bar-title&quot;&gt;
+    &lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
+    &lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
+      Close
+    &lt;/a&gt;
+  &lt;/header&gt;
+  
+  &lt;div class=&quot;content content-padded&quot;&gt;
+    &lt;p&gt;The contents of my modal&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</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">
           <h3 class="component-title">Sliders</h3>

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);
+}

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');
+  });
+}();

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>