Adding WebUI files

1 files changed, 98 insertions, 0 deletions

diff --git a/webui/js/main.js b/webui/js/main.js
new file mode 100644
index 0000000..a40c504
--- /dev/null
+++ b/webui/js/main.js
@@ -0,0 +1,98 @@
+/**
+ * Utils
+ */
+
+// Throttle
+//
+const throttle = (callback, limit) => {
+  let timeoutHandler = null;
+  return () => {
+    if (timeoutHandler == null) {
+      timeoutHandler = setTimeout(() => {
+        callback();
+        timeoutHandler = null;
+      }, limit);
+    }
+  };
+};
+
+// addEventListener Helper
+//
+const listen = (ele, e, callback) => {
+  if (document.querySelector(ele) !== null) {
+    document.querySelector(ele).addEventListener(e, callback);
+  }
+};
+
+/**
+ * Functions
+ */
+
+// Auto Hide Header
+//
+let header = document.getElementById('site-header');
+let lastScrollPosition = window.pageYOffset;
+
+const autoHideHeader = () => {
+  let currentScrollPosition = window.pageYOffset;
+  if (currentScrollPosition > lastScrollPosition) {
+    header.classList.remove('slideInUp');
+    header.classList.add('slideOutDown');
+  } else {
+    header.classList.remove('slideOutDown');
+    header.classList.add('slideInUp');
+  }
+  lastScrollPosition = currentScrollPosition;
+};
+
+// Mobile Menu Toggle
+//
+let mobileMenuVisible = false;
+
+const toggleMobileMenu = () => {
+  let mobileMenu = document.getElementById('mobile-menu');
+  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;
+  }
+};
+
+// Featured Image Toggle
+//
+const showImg = () => {
+  document.querySelector('.bg-img').classList.add('show-bg-img');
+};
+
+const hideImg = () => {
+  document.querySelector('.bg-img').classList.remove('show-bg-img');
+};
+
+// ToC Toggle
+//
+const toggleToc = () => {
+  document.getElementById('toc').classList.toggle('show-toc');
+};
+
+if (header !== null) {
+  listen('#menu-btn', 'click', toggleMobileMenu);
+  listen('#toc-btn', 'click', toggleToc);
+  listen('#img-btn', 'click', showImg);
+  listen('.bg-img', 'click', hideImg);
+
+  window.addEventListener(
+    'scroll',
+    throttle(() => {
+      autoHideHeader();
+
+      if (mobileMenuVisible == true) {
+        toggleMobileMenu();
+      }
+    }, 250)
+  );
+}