]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 4428605)
Add forceFollow option to dropdown & use it for hoverable dropdowns on touch
authorSassNinja <kai.falkowski@gmail.com>
Mon, 11 Sep 2017 15:06:17 +0000 (17:06 +0200)
committerSassNinja <kai.falkowski@gmail.com>
Mon, 11 Sep 2017 15:06:17 +0000 (17:06 +0200)
For hoverable dropdowns on touch devices the first touch of a linked toggle mustn't open the link but only open the dropdown pane.
Thus the forceFollow option prevents the default behavior until the second touch is triggered.

js/foundation.dropdown.js patch | blob | blame | history
test/visual/dropdown/linked-dropdown-toggle.html [new file with mode: 0644] patch | blob

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index ed054feeceff92ad24f3205169c7fcc399b0cc4a..fb59993b2c85e9d0f9b0306b74ab5483cbe6aed3 100644 (file)
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -127,7 +127,9 @@ class Dropdown extends Positionable {
    * @private
    */
   _events() {
-    var _this = this;
+    var _this = this,
+        hasTouch = 'ontouchstart' in window || (typeof window.ontouchstart !== 'undefined');
+
     this.$element.on({
       'open.zf.trigger': this.open.bind(this),
       'close.zf.trigger': this.close.bind(this),
@@ -135,8 +137,16 @@ class Dropdown extends Positionable {
       'resizeme.zf.trigger': this._setPosition.bind(this)
     });
 
-    this.$anchors.off('click.zf.trigger')
-      .on('click.zf.trigger', function() { _this._setCurrentAnchor(this); });
+    this.$anchors.off('click.zf.trigger').on('click.zf.trigger', function(e) {
+        _this._setCurrentAnchor(this);
+
+        if (_this.options.forceFollow && hasTouch && _this.options.hover) {
+          var hasClicked = $(this).attr('data-is-click') === true;
+          if (hasClicked === false && _this.$element.attr('aria-hidden') === 'true') {
+            e.preventDefault();
+          }
+        }
+    });
 
     if(this.options.hover){
       this.$anchors.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
@@ -356,7 +366,6 @@ Dropdown.defaults = {
    * @default ''
    */
   positionClass: '',
-
   /**
    * Position of dropdown. Can be left, right, bottom, top, or auto.
    * @option
@@ -407,7 +416,14 @@ Dropdown.defaults = {
    * @type {boolean}
    * @default false
    */
-  closeOnClick: false
-}
+  closeOnClick: false,
+  /**
+   * Boolean to force overide the clicking of toggle link (href) to perform default action, on second touch event for mobile.
+   * @option
+   * @type {boolean}
+   * @default true
+   */
+  forceFollow: true
+};
 
 export {Dropdown};
diff --git a/test/visual/dropdown/linked-dropdown-toggle.html b/test/visual/dropdown/linked-dropdown-toggle.html
new file mode 100644 (file)
index 0000000..ba9d2db
--- /dev/null
+++ b/test/visual/dropdown/linked-dropdown-toggle.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en"> <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Foundation for Sites Testing</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet">
+  </head>
+  <body>    
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Linked Dropdown Toggle</h1>
+
+          <p>This test is supposed to show a linked dropdown toggle <strong>with enabled hover option</strong>.<br>On desktop mouseover opens the dropdown pane and click opens the link's href.<br>On mobile the first touch opens the dropdown pane and the second touch (while still opened) opens the link's href.</p>
+
+          <div class="button-group">
+            <a href="https://www.google.com" class="button" data-toggle="example-dropdown-1">Linked Hoverable Dropdown</a>
+            <button type="button" class=" secondary button" data-toggle="example-dropdown-2">Hoverable Dropdown</button>
+            <button type="button" class=" secondary button" data-toggle="example-dropdown-3">Clickable Dropdown</button>
+          </div>
+
+          <div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
+            This is a linked hover dropdown. Try to open me on a mobile screen size and click again on the toggle while opened.
+          </div>
+          <div class="dropdown-pane" id="example-dropdown-2" data-dropdown data-hover="true" data-hover-pane="true">
+            This is a usual hover dropdown.
+          </div>
+          <div class="dropdown-pane" id="example-dropdown-3" data-dropdown data-close-on-click="true">
+            This is a clickable dropdown.
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git