Improve javascript

assets/js/main.js

@@ -1,3 +1,53 @@
+/**
+ * Utils
+ */
+
+// Load and run script via AJAX
+//
+const loadScript = (source, beforeEl, async = true, defer = true) => {
+  return new Promise((resolve, reject) => {
+    let script = document.createElement('script');
+    const prior = beforeEl || document.getElementsByTagName('script')[0];
+
+    script.async = async;
+    script.defer = defer;
+
+    function onloadHander(_, isAbort) {
+      if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
+        script.onload = null;
+        script.onreadystatechange = null;
+        script = undefined;
+
+        if (isAbort) { reject(); } else { resolve(); }
+      }
+    }
+
+    script.onload = onloadHander;
+    script.onreadystatechange = onloadHander;
+
+    script.src = source;
+    prior.parentNode.insertBefore(script, prior);
+  });
+}
+
+// Throttle
+//
+const throttle = (callback, limit) => {
+  let timeoutHandler = null;
+  return () => {
+    if (timeoutHandler == null) {
+      timeoutHandler = setTimeout(() => {
+        callback();
+        timeoutHandler = null;
+      }, limit);
+    }
+  };
+};
+
+/**
+ * Functions
+ */
+
 // Auto Hide Header
 //
 let lastScrollPosition = window.pageYOffset;
@@ -19,21 +69,23 @@ const autoHideHeader = () => {
 // Mobile Menu Toggle
 //
 let mobileMenu = document.getElementById('mobile-menu');
+let mobileMenuVisible = false;
+
+const mobileMenuToggle = () => {
+  if (mobileMenuVisible == false) {
+    mobileMenu.style.animationName = 'bounceInRight';
+    mobileMenu.style.webkitAnimationName = 'bounceInRight';
+    mobileMenu.style.display = 'block';
+    mobileMenuVisible = true;
+  } else {
+    mobileMenu.style.animationName = 'bounceOutRight';
+    mobileMenu.style.webkitAnimationName = 'bounceOutRight'
+    mobileMenuVisible = false;
+  }
+}
 
 if (haveHeader == true) {
-  document.getElementById('menu-btn').addEventListener('click', () => {
-    if (mobileMenu.style.display == 'none') {
-      mobileMenu.style.display = 'block';
-    } else {
-      mobileMenu.classList.remove('bounceInRight');
-      mobileMenu.classList.add('bounceOutRight');
-      setTimeout(() => {
-        mobileMenu.style.display = 'none';
-        mobileMenu.classList.remove('bounceOutRight');
-        mobileMenu.classList.add('bounceInRight');
-      }, 750);
-    }
-  });
+  document.getElementById('menu-btn').addEventListener('click', mobileMenuToggle);
 }
 
 // Show Featured Image
@@ -53,33 +105,8 @@ let comments = document.getElementById('comments');
 let commentsLoader = document.getElementById('comments-loader');
 
 const avJsUrl = '//cdn1.lncld.net/static/js/3.0.4/av-min.js';
-const valineJsUrl = '//unpkg.com/valine@1.3.0/dist/Valine.min.js';
-
-const loadScript = (source, beforeEl, async = true, defer = true) => {
-  return new Promise((resolve, reject) => {
-    let script = document.createElement('script');
-    const prior = beforeEl || document.getElementsByTagName('script')[0];
-
-    script.async = async;
-    script.defer = defer;
+const valineJsUrl = '//unpkg.com/valine@1.3.1/dist/Valine.min.js';
 
-    function onloadHander(_, isAbort) {
-      if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
-        script.onload = null;
-        script.onreadystatechange = null;
-        script = undefined;
-
-        if (isAbort) { reject(); } else { resolve(); }
-      }
-    }
-
-    script.onload = onloadHander;
-    script.onreadystatechange = onloadHander;
-
-    script.src = source;
-    prior.parentNode.insertBefore(script, prior);
-  });
-}
 const loadComments = () => {
   loadScript(avJsUrl).then(() => {
     loadScript(valineJsUrl).then(() => {
@@ -106,10 +133,12 @@ if ((haveComments == true) && (comments.offsetTop < window.innerHeight)) {
   commentsLoaded = true;
 }
 
-window.addEventListener('scroll', () => {
+window.addEventListener('scroll', throttle(() => {
   if (haveHeader == true) {
     autoHideHeader();
-    mobileMenu.style.display = 'none'; //Hide Mobile Menu When Scroll
+    if (mobileMenuVisible == true) {
+      mobileMenuToggle();
+    }
   }
 
   if ((haveComments == true) && (commentsLoaded == false)) {
@@ -119,4 +148,4 @@ window.addEventListener('scroll', () => {
       commentsLoaded = true;
     }
   }
-});
+}, 250));

layouts/partials/header.html

@@ -25,8 +25,8 @@
 			</div>
 		</div>
 	</header>
-	<div id="mobile-menu" class="animated bounceInRight" style="display: none;">
-		<ul >
+	<div id="mobile-menu" class="animated" style="display: none;">
+		<ul>
 			{{- range .Site.Menus.main }}
 			<li><a href="{{ .URL }}">{{ .Name }}</a></li>
 			{{- end }}