From: SassNinja Date: Mon, 11 Sep 2017 15:06:17 +0000 (+0200) Subject: Add forceFollow option to dropdown & use it for hoverable dropdowns on touch X-Git-Tag: v6.6.0~3^2~313^2~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2c40da73bf41036c562ccde37066ba7d06a8fd4d;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Add forceFollow option to dropdown & use it for hoverable dropdowns on touch 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. --- diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js index ed054feec..fb59993b2 100644 --- 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 index 000000000..ba9d2db50 --- /dev/null +++ b/test/visual/dropdown/linked-dropdown-toggle.html @@ -0,0 +1,44 @@ + + + + + + + + Foundation for Sites Testing + + + +
+
+
+

Linked Dropdown Toggle

+ +

This test is supposed to show a linked dropdown toggle with enabled hover option.
On desktop mouseover opens the dropdown pane and click opens the link's href.
On mobile the first touch opens the dropdown pane and the second touch (while still opened) opens the link's href.

+ +
+ Linked Hoverable Dropdown + + +
+ + + + + +
+
+
+ + + + +