From 07bcff9c31ef1deff5a702be1a072b9af7759230 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 21 Sep 2013 13:17:02 -0700
Subject: [PATCH] Fixing the popover link in the grunt file.

---
 Gruntfile.js                           |  2 +-
 dist/ratchet.css                       |  2 +-
 dist/ratchet.js                        | 64 ++++++++++++++++++++++++++
 examples/components/default/index.html | 61 +++++++++++++-----------
 lib/sass/popovers.scss                 |  2 +-
 5 files changed, 102 insertions(+), 29 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 85e7ec8..f63e6bc 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -27,7 +27,7 @@ module.exports = function(grunt) {
       ratchet: {
         src: [
           '<%= meta.srcPath %>js/modals.js',
-          '<%= meta.srcPath %>js/popover.js',
+          '<%= meta.srcPath %>js/popovers.js',
           '<%= meta.srcPath %>js/push.js',
           '<%= meta.srcPath %>js/segmented-controllers.js',
           '<%= meta.srcPath %>js/sliders.js',
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 4d4bd2e..af5d3ee 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -953,7 +953,7 @@ input[type="button"] {
   bottom: 0;
   left: 0;
   z-index: 10;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
 .popover .button-block {
diff --git a/dist/ratchet.js b/dist/ratchet.js
index f072003..2c19bc6 100644
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@@ -32,6 +32,70 @@
     if (modal) modal.classList.toggle('active');
   });
 }();
+/* ----------------------------------
+ * POPOVER v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var popover;
+
+  var findPopovers = function (target) {
+    var i, popovers = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
+    }
+  };
+
+  var onPopoverHidden = function () {
+    document.body.removeChild(backdrop);
+    popover.style.display = 'none';
+    popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
+  }
+
+  var backdrop = function () {
+    var element = document.createElement('div');
+
+    element.classList.add('backdrop');
+
+    element.addEventListener('touchend', function () {
+      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
+      popover.classList.remove('visible');
+    });
+
+    return element;
+  }();
+
+  var getPopover = function (e) {
+    var anchor = findPopovers(e.target);
+
+    if (!anchor || !anchor.hash) return;
+
+    popover = document.querySelector(anchor.hash);
+
+    if (!popover || !popover.classList.contains('popover')) return;
+
+    return popover;
+  }
+
+  window.addEventListener('touchend', function (e) {
+    var popover = getPopover(e);
+
+    if (!popover) return;
+
+    popover.style.display = 'block';
+    popover.offsetHeight;
+    popover.classList.add('visible');
+
+    popover.parentNode.appendChild(backdrop);
+  });
+
+  window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); });
+
+}();
+
 /* ----------------------------------
  * PUSH v1.0.0
  * Licensed under The MIT License
diff --git a/examples/components/default/index.html b/examples/components/default/index.html
index e48848f..8e52790 100644
--- a/examples/components/default/index.html
+++ b/examples/components/default/index.html
@@ -8,8 +8,17 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <link rel="stylesheet" href="../../../dist/ratchet.css">
     <script src="../../../dist/ratchet.js"></script>
+    <script src="../../../docs/js/fingerblast.js"></script>
+    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+
+    <script>
+      $(function() {
+        $(window).on('load', function () { new FingerBlast('.content'); });
+      });
+    </script>
 
     <style>
+      
       [class*="bar"] {
         position: relative;
       }
@@ -25,6 +34,32 @@
 <!-- ontouchstart property makes :active/:hover behaviors work on everything -->
 <body ontouchstart="">
 
+  <!-- POPOVER ============================================================ -->
+  <div id="myPopover" class="popover">
+    <header class="popover-header">
+      <a class="button" href="#">
+        Open
+      </a>
+      <h3 class="title">Popover title</h3>
+      <a class="button" href="#">
+        Filter
+      </a>
+    </header>
+    <ul class="table-view">
+      <li>Item1</li>
+      <li>Item2</li>
+      <li>Item3</li>
+      <li class="table-view-divider">With counts</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
+      <li>Item2 <span class="count">1</span></li>
+      <li>Item3 <span class="count">1</span></li>
+      <li class="table-view-divider">With chevrons</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
+      <li>Item2 <span class="chevron"></span></li>
+      <li>Item3 <span class="chevron"></span></li>
+    </ul>
+  </div>
+
   <div class="content">
 
   <header class="bar-title">
@@ -59,32 +94,6 @@
     </ul>
   </div>
 
-  <!-- POPOVER ============================================================ -->
-  <div id="myPopover" class="popover">
-    <header class="popover-header">
-      <a class="button" href="#">
-        Open
-      </a>
-      <h3 class="title">Popover title</h3>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-    <ul class="table-view">
-      <li>Item1</li>
-      <li>Item2</li>
-      <li>Item3</li>
-      <li class="table-view-divider">With counts</li>
-      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-      <li>Item2 <span class="count">1</span></li>
-      <li>Item3 <span class="count">1</span></li>
-      <li class="table-view-divider">With chevrons</li>
-      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-      <li>Item2 <span class="chevron"></span></li>
-      <li>Item3 <span class="chevron"></span></li>
-    </ul>
-  </div>
-
   <!-- TITLEBAR ============================================================ -->
 
   <!-- Title-bar left and right buttons -->
diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss
index 4768c37..bc3d4ea 100644
--- a/lib/sass/popovers.scss
+++ b/lib/sass/popovers.scss
@@ -106,7 +106,7 @@
   bottom: 0;
   left: 0;
   z-index: 10;
-  background-color: rgba(0,0,0,.5);
+  background-color: rgba(0,0,0,.15);
 }
 
 // Block level buttons in popovers