First attempt at PointerEvent polyfill trying to address #68

mdbootstrap · Apr 28, 2015 · 6d16383 · 6d16383
1 parent a9f63c1
commit 6d16383
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/bootstrap-hover-dropdown.js b/bootstrap-hover-dropdown.js
@@ -3,7 +3,6 @@
  * Project: Bootstrap Hover Dropdown
  * Author: Cameron Spear
  * Version: v2.1.3
- * Contributors: Mattia Larentis
  * Dependencies: Bootstrap's Dropdown plugin, jQuery
  * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
  * License: MIT
@@ -17,9 +16,8 @@
     // if instantlyCloseOthers is true, then it will instantly
     // shut other nav items when a new one is hovered over
     $.fn.dropdownHover = function (options) {
-        // don't do anything if touch is supported
-        // (plugin causes some issues on mobile)
-        if('ontouchstart' in document) return this; // don't want to affect chaining
+        // this disabled touch actions on the elements so we can hook into Pointer Events
+        this.attr('touch-action', 'pan-y');
 
         // the element we really care about
         // is the dropdown-toggle's parent
@@ -45,7 +43,8 @@
                 settings = $.extend(true, {}, defaults, options, data),
                 timeout, timeoutHover;
 
-            $parent.hover(function (event) {
+            $parent.on('pointerenter', function (event) {
+                if (isPointerTouchEvent(event)) return;
                 // so a neighbor can't open the dropdown
                 if(!$parent.hasClass('open') && !$this.is(event.target)) {
                     // stop this event, stop executing any code
@@ -54,9 +53,10 @@
                 }
 
                 openDropdown(event);
-            }, function () {
+            }).on('pointerleave', function (event) {
+                if (isPointerTouchEvent(event)) return;
                 // clear timer for hover event
-                window.clearTimeout(timeoutHover)
+                window.clearTimeout(timeoutHover);
                 timeout = window.setTimeout(function () {
                     $this.attr('aria-expanded', 'false');
                     $parent.removeClass('open');
@@ -65,7 +65,8 @@
             });
 
             // this helps with button groups!
-            $this.hover(function (event) {
+            $this.on('pointerenter', function (event) {
+                if (isPointerTouchEvent(event)) return;
                 // this helps prevent a double event from firing.
                 // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
                 if(!$parent.hasClass('open') && !$parent.is(event.target)) {
@@ -81,12 +82,14 @@
             $parent.find('.dropdown-submenu').each(function (){
                 var $this = $(this);
                 var subTimeout;
-                $this.hover(function () {
+                $this.on('pointerenter', function (event) {
+                    if (isPointerTouchEvent(event)) return;
                     window.clearTimeout(subTimeout);
                     $this.children('.dropdown-menu').show();
                     // always close submenu siblings instantly
                     $this.siblings().children('.dropdown-menu').hide();
-                }, function () {
+                }).on('pointerleave', function (event) {
+                    if (isPointerTouchEvent(event)) return;
                     var $submenu = $this.children('.dropdown-menu');
                     subTimeout = window.setTimeout(function () {
                         $submenu.hide();
@@ -104,8 +107,9 @@
                 timeoutHover = window.setTimeout(function () {
                     $allDropdowns.find(':focus').blur();
 
-                    if(settings.instantlyCloseOthers === true)
+                    if(settings.instantlyCloseOthers === true) {
                         $allDropdowns.removeClass('open');
+                    }
 
                     // clear timer for hover event
                     window.clearTimeout(timeoutHover);
@@ -114,6 +118,14 @@
                     $this.trigger(showEvent);
                 }, settings.hoverDelay);
             }
+
+            function isPointerTouchEvent(event) {
+                // need to get the originalEvent if jQuery was used to bind the event
+                event = event.originalEvent || event;
+                // I'm not sure we need to check for falsey pointerTypes or if it will cause issues...
+                // In my testing, I found it sometimes be empty when I expected touch, but it was inconsistent
+                return !event.pointerType || event.pointerType === 'touch';
+            }
         });
     };
 

diff --git a/bower.json b/bower.json
@@ -12,7 +12,8 @@
   "homepage": "https://github.com/CWSpear/bootstrap-hover-dropdown",
   "dependencies": {
     "bootstrap": "^3.0.0",
-    "jquery": ">= 1.9.0"
+    "jquery": ">= 1.9.0",
+    "pepjs": ">= 0.3.0"
   },
   "author": {
     "name": "Cameron Spear",

diff --git a/demo.html b/demo.html
@@ -32,20 +32,20 @@
           <li class="dropdown">
             <a href="#" class="dropdown-toggle js-activated">Dropdown <b class="caret"></b></a>
             <ul class="dropdown-menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
+              <li><a href="#Action">Action</a></li>
+              <li><a href="#Another action">Another action</a></li>
+              <li><a href="#Something else here">Something else here</a></li>
               <li class="divider"></li>
               <li class="dropdown-header">Dropdown header</li>
-              <li><a href="#">Separated link</a></li>
-              <li><a href="#">One more separated link</a></li>
+              <li><a href="#Separated link">Separated link</a></li>
+              <li><a href="#One more separated link">One more separated link</a></li>
             </ul>
           </li>
           <li class="dropdown">
             <a href="#" class="dropdown-toggle js-activated" data-toggle="dropdown">I Have a Submenu <b class="caret"></b></a>
             <ul class="dropdown-menu">
-              <li><a tabindex="-1" href="#">Menu Item</a></li>
-              <li><a tabindex="-1" href="#">Bootstrap 3 Does Not Support Submenus</a></li>
+              <li><a tabindex="-1" href="#Menu Item">Menu Item</a></li>
+              <li><a tabindex="-1" href="#Bootstrap 3 Does Not Support Submenus">Bootstrap 3 Does Not Support Submenus</a></li>
 <!--               
               BOOTSTRAP 3 DOES NOT SUPPORT SUBMENUS: https://github.com/twbs/bootstrap/pull/6342#issuecomment-11594010
               <li class="dropdown-submenu">
@@ -282,8 +282,9 @@ <h3>Works with button groups</h3>
   </div> <!-- .container -->
 
   <!-- latest jQuery, Boostrap JS and hover dropdown plugin -->
-  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
-  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
+  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+  <script src="https://code.jquery.com/pep/0.3.0/pep.js"></script>
   <script src="bootstrap-hover-dropdown.js"></script>
 
   <script>