remove touch-listener seeing 300ms delay, use FastClick via CDN. solv…

…e height issue by waiting for animation in js
roycezmw · Oct 2, 2015 · 8dd4cc8 · 8dd4cc8
1 parent c0d54dd
commit 8dd4cc8
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 8 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -93,6 +93,7 @@
 <!-- Custom Theme JavaScript -->
 <script src="{{ "/js/hux-blog.min.js " | prepend: site.baseurl }}"></script>
 
+
 <!-- async load function -->
 <script>
     function async(u, c) {
@@ -107,7 +108,7 @@
 
 <!-- Highlight.js -->
 <script>
-    async("http://cdn.bootcss.com/highlight.js/8.6/highlight.min.js",function(){
+    async("http://cdn.bootcss.com/highlight.js/8.6/highlight.min.js", function(){
         hljs.initHighlightingOnLoad();
     })
     // only load tagcloud.js in tag.html
@@ -122,3 +123,11 @@
     }
 </script>
 <link href="http://cdn.bootcss.com/highlight.js/8.6/styles/github.min.css" rel="stylesheet">
+
+<!--fastClick.js -->
+<script>
+    async("http://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
+        var $nav = document.querySelector("nav");
+        if($nav) FastClick.attach($nav);
+    })
+</script>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -13,6 +13,11 @@
         </div>
 
         <!-- Collect the nav links, forms, and other content for toggling -->
+        <!-- Known Issue, found by Hux:
+            <nav>'s height woule be hold on by its content.
+            so, when navbar scale out, the <nav> will cover tags.
+            also mask any touch event of tags, unfortunately.
+        -->
         <div id="huxblog_navbar">
             <div class="navbar-collapse">
                 <ul class="nav navbar-nav navbar-right">
@@ -35,15 +40,26 @@
     // Drop Bootstarp low-performance Navbar
     // Use customize navbar with high-quality material design animation
     // in high-perf jank-free CSS3 implementation
+    var $body   = document.body;
     var $toggle = document.querySelector('.navbar-toggle');
-    var $navbar = document.querySelector('#huxblog_navbar')
+    var $navbar = document.querySelector('#huxblog_navbar');
+
     $toggle.addEventListener('click', handleMagic)
-    $toggle.addEventListener('touchstart', handleMagic)
     function handleMagic(e){
         if ($navbar.className.indexOf('in') > 0) {
+        // CLOSE
             $navbar.className = " ";
+            // wait until animation end.
+            setTimeout(function(){
+                // prevent frequently toggle
+                if($navbar.className.indexOf('in') < 0) {
+                    $navbar.style.height = "0px"
+                }
+            },400)
         }else{
+        // OPEN
             $navbar.className += " in";
+            $navbar.style.height = "auto"
         }
     }
 </script>
diff --git a/css/hux-blog.css b/css/hux-blog.css
@@ -176,6 +176,7 @@ pre,
     margin: 0px;
   }
   #huxblog_navbar {
+    overflow: hidden;
     opacity: 0;
     transform: scaleX(0);
     transform-origin: top right;
@@ -187,10 +188,10 @@ pre,
   #huxblog_navbar .navbar-collapse {
     transform: scaleY(0);
     transform-origin: top right;
-    transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
+    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
     -webkit-transform: scaleY(0);
     -webkit-transform-origin: top right;
-    -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
+    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   #huxblog_navbar li {
     opacity: 0;

diff --git a/css/hux-blog.min.css b/css/hux-blog.min.css
diff --git a/less/hux-blog.less b/less/hux-blog.less
@@ -156,6 +156,7 @@ pre,.table-responsive{
 	}
 	// HuxBlog-Navbar using genuine Material Design Animation
 	#huxblog_navbar{
+		overflow: hidden; // to solve container-mask-tags issue.
 		opacity: 0;
 		transform: scaleX(0);
 		transform-origin: top right;
@@ -166,10 +167,10 @@ pre,.table-responsive{
 		.navbar-collapse{
 			transform: scaleY(0);
 			transform-origin: top right;
-			transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
+			transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
 			-webkit-transform: scaleY(0);
 			-webkit-transform-origin: top right;
-			-webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
+			-webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
 		}
 		li{
 			opacity: 0;