Fixing the popover link in the grunt file.

11 years ago · 07bcff9c31
5 changed files with 102 additions and 29 deletions
--- 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',
--- 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 {
--- 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
--- 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 -->
--- 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