public/js/app: Use low level functions

1 files changed, 39 insertions, 19 deletions

diff --git a/public/js/app.js b/public/js/app.js
index b615919..87ade66 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,3 +1,17 @@
+/**
+ * Functions
+ */
+function posf (f, a) { for (var i=0; i < a.length; i++) { if (f(a[i])) return i; } return -1; }
+function apos (x, a) { return (typeof x == 'function') ? posf(x,a) : Array.prototype.indexOf.call(a,x) }
+function arem (a, x) { var i = apos(x, a); if (i >= 0) { a.splice(i, 1); } return a; }
+function afind (x, a) { var i = apos(x, a); return (i >= 0) ? a[i] : null; }
+function byClass (el, cl) { return el ? el.getElementsByClassName(cl) : [] }
+function byTag (el, tg) { return el ? el.getElementsByTagName(tg) : [] }
+function hasClass (el, cl) { var a = el.className.split(' '); return afind(cl, a) }
+function addClass (el, cl) { if (el) { var a = el.className.split(' '); if (!afind(cl, a)) { a.unshift(cl); el.className = a.join(' ')}} }
+function remClass (el, cl) { if (el) { var a = el.className.split(' '); arem(a, cl); el.className = a.join(' ') } }
+function togClass (el, cl) { if (hasClass(el, cl)) { remClass(el, cl); return; } addClass(el, cl); }
+
 
 /**
  * Open mobile flyout menu
@@ -9,8 +23,8 @@ document.addEventListener('DOMContentLoaded', function () {
       $el.addEventListener('click', function () {
         var target = $el.dataset.target;
         var $target = document.getElementById(target);
-        $el.classList.toggle('is-active');
-        $target.classList.toggle('is-active');
+        togClass($el, 'is-active');
+        togClass($target, 'is-active');
       });
     });
   }
@@ -32,13 +46,18 @@ document.addEventListener('click', function(event) {
   var menuContainerClick = activeMenuContainer.contains(event.target);
 
   if (!burgerClick && !burgerCompactClick && !menuContainerClick) {
-    activeMenu.classList.remove('is-active');
-    activeBurger.classList.remove('is-active');
-    activeBurgerCompact.classList.remove('is-active');
+    remClass(activeMenu, 'is-active');
+    remClass(activeBurger, 'is-active');
+    remClass(activeBurgerCompact, 'is-active');
   }
 
 });
 
+
+/**
+ * Close flyout menu when tapped outside of its div region
+ * iOS devices
+ */
 document.addEventListener('touchstart', function(event) {
 
   var burgerClick = activeBurger.contains(event.target);
@@ -46,32 +65,33 @@ document.addEventListener('touchstart', function(event) {
   var menuContainerClick = activeMenuContainer.contains(event.target);
 
   if (!burgerClick && !burgerCompactClick && !menuContainerClick) {
-    activeMenu.classList.remove('is-active');
-    activeBurger.classList.remove('is-active');
-    activeBurgerCompact.classList.remove('is-active');
+    remClass(activeMenu, 'is-active');
+    remClass(activeBurger, 'is-active');
+    remClass(activeBurgerCompact, 'is-active');
   }
 
 });
 
+
 /**
  * Hide elements on scroll events
  */
-var pastPosition = window.pageYOffset;
-var navbarHeight = document.getElementById("navbar").offsetHeight;
+var previousPosition = window.pageYOffset;
+var navbar = document.getElementById("navbar");
+var navbarHeight = navbar.offsetHeight;
+
 window.onscroll = function() {
     var currentPosition = window.pageYOffset;
 
-    /*
-    if (pastPosition > currentPosition) {
-      document.getElementById("navbar").style.top = "0";
+    if (previousPosition > currentPosition) {
+      remClass(navbar, 'navbar__headroom')
     } else if (currentPosition > navbarHeight) {
-      document.getElementById("navbar").style.top = "-5em";
+      addClass(navbar, 'navbar__headroom')
     }
-    */
 
-    activeMenu.classList.remove('is-active');
-    activeBurger.classList.remove('is-active');
-    activeBurgerCompact.classList.remove('is-active');
+    previousPosition = currentPosition;
 
-    pastPosition = currentPosition;
+    remClass(activeMenu, 'is-active');
+    remClass(activeBurger, 'is-active');
+    remClass(activeBurgerCompact, 'is-active');
 };