Last active
March 14, 2019 01:21
-
-
Save stewartknapman/5283c79fa4b5d1f2dd0b2ddbf9abfa5d to your computer and use it in GitHub Desktop.
Commonly reused functions in JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
/* | |
Array Functions | |
*/ | |
// For each item in Array | |
each: function (arr, callback, ctx) { | |
var r; | |
for (var i = 0; i < arr.length; i++) { | |
ctx = ctx || arr[i]; | |
r = callback.apply(ctx, [arr[i], i]); | |
if (r == false) break; | |
} | |
}, | |
// For each item in Object | |
eachIn: function (obj, callback, ctx) { | |
var r, i = 0; | |
for (var k in obj) { | |
if (obj.hasOwnProperty(k)) { | |
ctx = ctx || obj[k]; | |
r = callback.apply(ctx, [k, obj[k], i]); | |
if (r == false) break; | |
i++; | |
} | |
} | |
}, | |
// Return true if item is in Array | |
inArray: function (needle, haystack) { | |
var found = false; | |
this.each(haystack, function (hay) { | |
if (needle === hay) found = true; | |
}); | |
return found; | |
}, | |
// return the last item in the array | |
last: function (arr) { | |
return arr[arr.length - 1]; | |
}, | |
/* | |
String Functions | |
*/ | |
// Captialse the first char in String | |
capitalise: function (str) { | |
return str[0].toUpperCase() + str.slice(1); | |
}, | |
// Turn 'my string' or 'my-string' into 'myString' | |
camelCase: function (str) { | |
return str.replace(/([\-\s]\w)/g, function (s) { | |
return s[1].toUpperCase(); | |
}); | |
}, | |
selectorToStr: function (str) { | |
// remove selector elements from a string so they can be used as a class name or attribute | |
return str.replace(/[\[\].#]/g, ''); | |
}, | |
/* | |
Number Functions | |
*/ | |
isNumber: function (n) { | |
return !isNaN(parseFloat(n)) && isFinite(n); | |
}, | |
/* | |
DOM Functions | |
*/ | |
insertAfter: function (el, refNode) { | |
refNode.parentNode.insertBefore(el, refNode.nextSibling); | |
}, | |
windowWidth: function () { | |
var w = window, | |
d = document, | |
e = d.documentElement, | |
g = d.getElementsByTagName('body')[0]; | |
return w.innerWidth || e.clientWidth || g.clientWidth; | |
}, | |
windowHeight: function () { | |
var w = window, | |
d = document, | |
e = d.documentElement, | |
g = d.getElementsByTagName('body')[0]; | |
return w.innerHeight || e.clientHeight || g.clientHeight; | |
}, | |
/* | |
Event Functions | |
*/ | |
// Run code when the page is ready | |
ready: function (callback, ctx) { | |
if (typeof callback !== 'function') return; | |
if (document.readyState !== "loading") { | |
callback.apply(ctx); | |
} else { | |
document.addEventListener("DOMContentLoaded", function () { | |
callback.apply(ctx); | |
}); | |
} | |
}, | |
// https://gomakethings.com/checking-event-target-selectors-with-event-bubbling-in-vanilla-javascript/ | |
documentEventListener: function (event, selector, callback, ctx) { | |
document.addEventListener(event, function (e) { | |
var target = e.target || e.srcElement; | |
ctx = ctx || this; | |
if(target.matches(selector) || target.closest(selector)) { | |
if (target.closest(selector)) { | |
target = target.closest(selector); | |
} | |
callback.apply(ctx, [e, target]); | |
} | |
}); | |
}, | |
// Make thing not happen until finished? | |
// i.e. don't act on every window resize event, just the last one when we need it. | |
debounce: function (callback, wait, ctx) { | |
var timeout, timestamp, args; | |
wait = wait || 100; | |
var later = function() { | |
var last = new Date().getTime() - timestamp; | |
if (last < wait && last >= 0) { | |
timeout = setTimeout(later, wait - last); | |
} else { | |
timeout = null; | |
callback.apply(ctx, args); | |
} | |
}; | |
return function () { | |
ctx = ctx || this; | |
args = arguments; | |
timestamp = new Date().getTime(); | |
if (!timeout) timeout = setTimeout(later, wait); | |
}; | |
}, | |
// Don't swamp us with events | |
// good for things like scroll and resize | |
throttle: function (callback, limit, ctx) { | |
limit = limit || 200; | |
var wait = false; | |
return function () { | |
if (!wait) { | |
callback.apply(ctx, arguments); | |
wait = true; | |
setTimeout(function () { | |
wait = false; | |
}, limit); | |
} | |
} | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment