Skip to content

Instantly share code, notes, and snippets.

@stewartknapman
Last active March 14, 2019 01:21
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stewartknapman/5283c79fa4b5d1f2dd0b2ddbf9abfa5d to your computer and use it in GitHub Desktop.
Save stewartknapman/5283c79fa4b5d1f2dd0b2ddbf9abfa5d to your computer and use it in GitHub Desktop.
Commonly reused functions in JS
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