Add additional functions and some comments for older functions.

root/src/assets/scripts/functions.es6

@@ -1,3 +1,14 @@
+let passiveSupported = false;
+
+try {
+  let options = Object.defineProperty({}, 'passive', {
+    get: () => {
+      passiveSupported = true
+    }
+  })
+  window.addEventListener('test', null, options);
+} catch(err) {}
+
 let padLeft = (str , n, pad) => {
   return Array(n - str.length + 1).join(pad || '0') + str
 }
@@ -6,7 +17,8 @@ let padRight = (str , n, pad) => {
   return str + Array(n - str.length + 1).join(pad || '0')
 }
 
-let toggleClass = (el, className) => {
+// Toggle Class `name` on `element(s)`.
+let toggleClass = (className, el) => {
   if (typeof el === 'object' && el.tagName) {
     if (el.classList) {
       el.classList.toggle(className)
@@ -28,6 +40,7 @@ let toggleClass = (el, className) => {
   }
 }
 
+// Add Class `name` to `element(s)`.
 let addClass = (className, el) => {
   if (typeof el === 'object' && el.tagName) {
     if (el.classList)
@@ -41,6 +54,7 @@ let addClass = (className, el) => {
   }
 }
 
+// Remove Class `name` from `element(s)`.
 let removeClass = (className, el) => {
   if (typeof el === 'object' && el.tagName) {
     if (el.classList)
@@ -54,6 +68,7 @@ let removeClass = (className, el) => {
   }
 }
 
+// Has Class `name` on `element`?
 let hasClass = (className, el) => {
   if (el.classList)
     return el.classList.contains(className)
@@ -63,26 +78,23 @@ let hasClass = (className, el) => {
 
 let matchHeight = selector => {
   let heights = {}
-  let elements = document.querySelectorAll(selector)
-  Object.keys(elements).forEach( k => {
-    let el = elements[k]
+  let elements = [...document.querySelectorAll(selector)]
+  elements.forEach(el => {
     let top = el.getBoundingClientRect().top
     el.style.height = ''
     if (heights[top] === undefined || el.offsetHeight > heights[top]) {
       heights[top] = el.offsetHeight
     }
   })
-  Object.keys(elements).forEach( k => {
-    let el = elements[k]
+  elements.forEach(el => {
     let top = el.getBoundingClientRect().top
     el.style.height = heights[top] + 'px'
   })
 }
 
 let masonry = (wrapper, item) => {
-  var cardsEls = document.querySelectorAll(wrapper)
-  Object.keys(cardsEls).forEach(i => {
-    let cardsEl = cardsEls[i]
+  var cardsEls = [...document.querySelectorAll(wrapper)]
+  cardsEls.forEach(cardsEl => {
     let cards = cardsEl.querySelectorAll(item)
     let parentRect = cardsEl.getBoundingClientRect()
     let cardsX = {}
@@ -107,6 +119,7 @@ let masonry = (wrapper, item) => {
   })
 }
 
+// Throttle a function to only run every `XX` milliseconds.
 let throttle = (delay, callback) => {
   let previousCall = new Date().getTime()
   return function() {
@@ -119,6 +132,8 @@ let throttle = (delay, callback) => {
   }
 }
 
+// Bounce a function until calls have stopped for `XX` milliseconds
+// Good for window resize only call function once the user had stopped resizing the window.
 let debounce = (delay, callback) => {
   let timeout = null
   return function() {
@@ -134,6 +149,7 @@ let debounce = (delay, callback) => {
   }
 }
 
+// Ajax get request on a url.
 let get = (url, onload, onerror = () => {}) => {
   var request = new XMLHttpRequest()
   request.open('GET', url, true)
@@ -142,24 +158,98 @@ let get = (url, onload, onerror = () => {}) => {
   request.send()
 }
 
+// Does this `el` match this `query selector`
 let matches = (el, selector) => {
   return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)
 }
 
+// Get closest parent element matching `query` starting at `element`
 let closest = (query, el) => {
-  if (el) {
-    if (matches(el.parentNode, query)) {
+  if (el && el.parentNode != document) {
+    if (matches(query, el.parentNode)) {
       return el.parentNode
     } else {
       return closest(query, el.parentNode)
     }
   }
 }
 
+// Document ready function.
 let ready = fn => {
   if (document.readyState != 'loading'){
     fn();
   } else {
     document.addEventListener('DOMContentLoaded', fn);
   }
 }
+
+let getActiveIndex = els => {
+  let activeIndex = -1
+  Object.keys(els).forEach(i => {
+    if (els[i].classList.contains('active')) {
+      activeIndex = i
+    }
+  })
+  return parseInt(activeIndex)
+}
+
+/*
+ * TODO: Add nesting.
+ */
+let query = (selector, context) => {
+    context = context || document
+    // Redirect simple selectors to the more performant function
+    if (/^(#?[\w-]+|\.[\w-.]+)$/.test(selector)) {
+        switch (selector.charAt(0)) {
+            case '#':
+                // Handle ID-based selectors
+                return [...context.getElementById(selector.substr(1))]
+            case '.':
+                // Handle class-based selectors
+                // Query by multiple classes by converting the selector
+                // string into single spaced class names
+                var classes = selector.substr(1).replace(/\./g, ' ')
+                return [...context.getElementsByClassName(classes)]
+            default:
+                // Handle tag-based selectors
+                return [...context.getElementsByTagName(selector)]
+        }
+    }
+    // Default to `querySelectorAll`
+    return [...context.querySelectorAll(selector)]
+}
+
+let getImageBrightness = (imageSrc, callback) => {
+    var img = document.createElement("img")
+    img.src = imageSrc
+    img.style.display = "none"
+    document.body.appendChild(img)
+
+    var colorSum = 0
+
+    img.onload = function() {
+        // create canvas
+        var canvas = document.createElement("canvas")
+        canvas.width = this.width
+        canvas.height = this.height
+
+        var ctx = canvas.getContext("2d")
+        ctx.drawImage(this,0,0)
+
+        var imageData = ctx.getImageData(0,0,canvas.width,canvas.height)
+        var data = imageData.data
+        var r,g,b,avg
+
+          for(var x = 0; x < data.length; x+=4) {
+            r = data[x]
+            g = data[x+1]
+            b = data[x+2]
+
+            avg = Math.floor((r+g+b)/3)
+            colorSum += avg
+        }
+
+        var brightness = Math.floor(colorSum / (this.width*this.height))
+        callback(brightness)
+    }
+}