Merge pull request #58 from indyplanets/touch-bug

Adds timeout flags to aid in stopping double touch/click events for some...
mrjasonweaver · Aug 11, 2013 · 1e78df7 · 1e78df7
2 parents 43dc9ae + e2c52ea
commit 1e78df7
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -83,6 +83,9 @@ Initialize
 * * *
 ### Changelog
 
+#### v.1.1 : August 11th, 2013
+* Adds timeout flags to aid in stopping double touch/click events for some Android browsers
+
 #### v.1.0.1 : August 5th, 2013
 * Fixes hover out bug if user clicks arrow on large screens
 

diff --git a/coffeescripts/jquery.flexnav.coffee b/coffeescripts/jquery.flexnav.coffee
@@ -1,7 +1,7 @@
 ###
-	FlexNav.js 1.0
+	FlexNav.js 1.1
 
-	Copyright 2013, Jason Weaver http://jasonweaver.name
+	Created by Jason Weaver http://jasonweaver.name
 	Released under http://unlicense.org/
 
 //
@@ -20,6 +20,7 @@ $.fn.flexNav = (options) ->
     options
 
   $nav = $(@)
+  flag = false
 
   # Set some classes in the markup
   $nav.addClass('with-js')
@@ -109,7 +110,11 @@ $.fn.flexNav = (options) ->
     bs = settings['buttonSelector']
     $btnParent = if ($(@).is(bs)) then $(@) else $(@).parent(bs)
     $thisNav = $btnParent.data('navEl')
-    $thisNav.toggleClass('show')
+    if flag is false
+      flag = true
+      setTimeout( -> flag = false
+      100)
+      $thisNav.toggleClass('show')
   )
 
   # Toggle for sub-menus
@@ -118,16 +123,20 @@ $.fn.flexNav = (options) ->
     e.stopPropagation()
     $sub = $(@).parent('.item-with-ul').find('>ul')
     $touchButton = $(@).parent('.item-with-ul').find('>span.touch-button')
-    # remove class of show from all elements that are not current
-    if $nav.hasClass('lg-screen') is true
-      $(@).parent('.item-with-ul').siblings().find('ul.show').removeClass('show').hide()
-    # add class of show to current
-    if $sub.hasClass('show') is true
-      $sub.removeClass('show').slideUp(settings.animationSpeed)
-      $touchButton.removeClass('active')
-    else if $sub.hasClass('show') is false
-      $sub.addClass('show').slideDown(settings.animationSpeed)
-      $touchButton.addClass('active')
+    if flag is false
+      flag = true
+      setTimeout( -> flag = false
+      100)
+      # remove class of show from all elements that are not current
+      if $nav.hasClass('lg-screen') is true
+        $(@).parent('.item-with-ul').siblings().find('ul.show').removeClass('show').hide()
+      # add class of show to current
+      if $sub.hasClass('show') is true
+        $sub.removeClass('show').slideUp(settings.animationSpeed)
+        $touchButton.removeClass('active')
+      else if $sub.hasClass('show') is false
+        $sub.addClass('show').slideDown(settings.animationSpeed)
+        $touchButton.addClass('active')
   )
 
   # Sub ul's should have a class of 'open' if an element has focus

diff --git a/css/flexnav.css b/css/flexnav.css
@@ -156,7 +156,7 @@
     top: 0;
     right: auto;
     max-width: 1080px; }
-  .oldie .flexnav li { 
+  .oldie .flexnav li {
     position: relative;
     list-style: none;
     float: left;
@@ -177,7 +177,7 @@
     border-bottom: none;
     overflow: visible; }
   .oldie .flexnav li > ul {
-    background:#acaca1;
+    background: #acaca1;
     position: absolute;
     top: auto;
     left: 0;
@@ -186,9 +186,6 @@
     overflow: visible; }
   .oldie .flexnav li ul li ul {
     top: 0; }
-   .oldie .flexnav li ul li {
-    padding-bottom: 0;
-    margin-bottom: 0;}
   .oldie .flexnav li ul li a {
     border-bottom: none; }
   .oldie .flexnav li ul.open {

diff --git a/index.html b/index.html
@@ -111,7 +111,7 @@ <h2>Options</h2>
           <div class="article-wrap">
             <div class="block"><img src="http://jasonweaver.name/img/devices.png" alt="devices" class="img-devices"></div>
             <div class="block">
-              <h2>Get FlexNav v1.0.1</h2>
+              <h2>Get FlexNav v1.1</h2>
               <p><a href="https://github.com/indyplanets/flexnav" class="callout">Download on GitHub &rarr;</a></p>
             </div>
             <div class="block">

diff --git a/js/jquery.flexnav.js b/js/jquery.flexnav.js
@@ -1,7 +1,7 @@
 /*
-	FlexNav.js 1.0
+	FlexNav.js 1.1
 
-	Copyright 2013, Jason Weaver http://jasonweaver.name
+	Created by Jason Weaver http://jasonweaver.name
 	Released under http://unlicense.org/
 
 //
@@ -14,7 +14,7 @@
   $ = jQuery;
 
   $.fn.flexNav = function(options) {
-    var $nav, breakpoint, resetMenu, resizer, selector, settings, showMenu;
+    var $nav, breakpoint, flag, resetMenu, resizer, selector, settings, showMenu;
     settings = $.extend({
       'animationSpeed': 250,
       'transitionOpacity': true,
@@ -23,6 +23,7 @@
       'hoverIntentTimeout': 150
     }, options);
     $nav = $(this);
+    flag = false;
     $nav.addClass('with-js');
     if (settings.transitionOpacity === true) {
       $nav.addClass('opacity');
@@ -94,23 +95,35 @@
       bs = settings['buttonSelector'];
       $btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
       $thisNav = $btnParent.data('navEl');
-      return $thisNav.toggleClass('show');
+      if (flag === false) {
+        flag = true;
+        setTimeout(function() {
+          return flag = false;
+        }, 100);
+        return $thisNav.toggleClass('show');
+      }
     });
     $('.touch-button').on('touchstart click', function(e) {
       var $sub, $touchButton;
       e.preventDefault();
       e.stopPropagation();
       $sub = $(this).parent('.item-with-ul').find('>ul');
       $touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');
-      if ($nav.hasClass('lg-screen') === true) {
-        $(this).parent('.item-with-ul').siblings().find('ul.show').removeClass('show').hide();
-      }
-      if ($sub.hasClass('show') === true) {
-        $sub.removeClass('show').slideUp(settings.animationSpeed);
-        return $touchButton.removeClass('active');
-      } else if ($sub.hasClass('show') === false) {
-        $sub.addClass('show').slideDown(settings.animationSpeed);
-        return $touchButton.addClass('active');
+      if (flag === false) {
+        flag = true;
+        setTimeout(function() {
+          return flag = false;
+        }, 100);
+        if ($nav.hasClass('lg-screen') === true) {
+          $(this).parent('.item-with-ul').siblings().find('ul.show').removeClass('show').hide();
+        }
+        if ($sub.hasClass('show') === true) {
+          $sub.removeClass('show').slideUp(settings.animationSpeed);
+          return $touchButton.removeClass('active');
+        } else if ($sub.hasClass('show') === false) {
+          $sub.addClass('show').slideDown(settings.animationSpeed);
+          return $touchButton.addClass('active');
+        }
       }
     });
     $nav.find('.item-with-ul *').focus(function() {

diff --git a/js/jquery.flexnav.min.js b/js/jquery.flexnav.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flexnav",
-    "version": "0.8.0",
+    "version": "1.1",
     "repository": "https://github.com/indyplanets/flexnav",
     "license": "http://unlicense.org/",
     "devDependencies": {

diff --git a/single-page-pattern.html b/single-page-pattern.html
@@ -85,7 +85,7 @@ <h2>Section 5</h2>
           <div class="article-wrap">
             <div class="block"><img src="http://jasonweaver.name/img/devices.png" alt="devices" class="img-devices"></div>
             <div class="block">
-              <h2>Get FlexNav v1.0.1</h2>
+              <h2>Get FlexNav v1.1</h2>
               <p><a href="https://github.com/indyplanets/flexnav" class="callout">Download on GitHub &rarr;</a></p>
             </div>
             <div class="block">