refactor: rely on Touch plugin for dropdownMenu tap event

diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js
index b1e89a4163006ef02a696f3de423ed1b7e0441ee..899a2406419ec2749eae78dc48d34b9060798cfc 100644 (file)
--- a/js/foundation.dropdownMenu.js
+++ b/js/foundation.dropdownMenu.js
@@ -6,7 +6,7 @@ import { Nest } from './foundation.util.nest';
 import { Box } from './foundation.util.box';
 import { rtl as Rtl } from './foundation.util.core';
 import { Plugin } from './foundation.plugin';
-
+import { Touch } from './foundation.util.touch'
 
 /**
  * DropdownMenu module.
@@ -14,6 +14,7 @@ import { Plugin } from './foundation.plugin';
  * @requires foundation.util.keyboard
  * @requires foundation.util.box
  * @requires foundation.util.nest
+ * @requires foundation.util.touch
  */
 
 class DropdownMenu extends Plugin {
@@ -30,6 +31,8 @@ class DropdownMenu extends Plugin {
     this.options = $.extend({}, DropdownMenu.defaults, this.$element.data(), options);
     this.className = 'DropdownMenu'; // ie9 back compat
 
+    Touch.init($); // Touch init is idempotent, we just need to make sure it's initialied.
+
     this._init();
 
     Keyboard.register('DropdownMenu', {
@@ -74,7 +77,6 @@ class DropdownMenu extends Plugin {
       }
     }
     this.changed = false;
-    this.isTouchMove = false;
     this._events();
   };
 
@@ -269,19 +271,16 @@ class DropdownMenu extends Plugin {
    * @private
    */
   _addBodyHandler() {
-    var $body = $(document.body),
-        _this = this;
-    $body.off('mouseup.zf.dropdownMenu touchend.zf.dropdownMenu')
-         .on('mouseup.zf.dropdownMenu touchend.zf.dropdownMenu', function(e) {
-           var $link = _this.$element.find(e.target);
-           if ($link.length || _this.isTouchMove){
-             _this.isTouchMove = false;
-             return;
-           }
-
-           _this._hide();
-           $body.off('mouseup.zf.dropdownMenu touchend.zf.dropdownMenu');
-         });
+    const $body = $(document.body);
+    $body
+      .off('click.zf.dropdownMenu tap.zf.dropdownMenu')
+      .on('click.zf.dropdownMenu tap.zf.dropdownMenu', (e) => {
+        var $link = this.$element.find(e.target);
+        if ($link.length) return;
+
+        this._hide();
+        $body.off('click.zf.dropdownMenu tap.zf.dropdownMenu');
+      });
   }
 
   /**

diff --git a/js/foundation.util.touch.js b/js/foundation.util.touch.js
index 436146d7d236df4bac68b6b08cc226d3ba5e55ce..cdc9d07b6d89647dbf5a3025e675b5f16dc05d14 100644 (file)
--- a/js/foundation.util.touch.js
+++ b/js/foundation.util.touch.js
@@ -22,6 +22,8 @@ function onTouchEnd() {
 
 function onTouchMove(e) {
   if ($.spotSwipe.preventDefault) { e.preventDefault(); }
+
+  // Moved: swipe
   if(isMoving) {
     var x = e.touches[0].pageX;
     var y = e.touches[0].pageY;
@@ -41,6 +43,11 @@ function onTouchMove(e) {
       $(this).trigger('swipe', dir).trigger(`swipe${dir}`);
     }
   }
+  // Otherwise: tap
+  else {
+    $(this).trigger('tap');
+  }
+
 }
 
 function onTouchStart(e) {