Skip to content

Instantly share code, notes, and snippets.

View Fabiantjoeaon's full-sized avatar

Fabian Fabiantjoeaon

View GitHub Profile
@Fabiantjoeaon
Fabiantjoeaon / mouseMove.js
Last active October 30, 2016 16:04
Vanilla JS on mousemove. Make sure to add 'data-offset' attribute and specified class to element.
const mouseMoveEls = Array.from(document.getElementsByClassName('transform__mm'));
document.addEventListener( 'mousemove', (e) => {
const width = window.outerWidth;
const height = window.outerHeight;
const offsetX = 0.5 - e.pageX / width;
const offsetY = 0.5 - e.pageY / height;
mouseMoveEls.forEach((el, i) => {
const dataOffset = parseInt(el.getAttribute('data-offset'));
const translate = `translate3d(${Math.round(offsetX * dataOffset)}px, ${Math.round(offsetY * dataOffset)}px, 0px)`;
@Fabiantjoeaon
Fabiantjoeaon / windowResize.js
Created August 17, 2016 20:16
Three on window resize
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize, false );
@Fabiantjoeaon
Fabiantjoeaon / iife.js
Created September 1, 2016 18:11
ES6 IIFE stored in scoped variable
let fn;
(fn = () => {
})();
fn();
@Fabiantjoeaon
Fabiantjoeaon / getURL.js
Created September 2, 2016 09:27
ES6 retrieve GET parameters from URL
/**
* Retrieve parameter values from URL
* @param {name} name of paramater
* @param {url} URL to fetch parameter from | optional
* @returns URL param value || null
*/
const getURLParemeters = ( name, url ) => {
if (!url) url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
@Fabiantjoeaon
Fabiantjoeaon / ellipsis.css
Created September 9, 2016 08:01
Elegant overflow with text-overflow: ellipsis; Concatenated text with '...'.
width: 200px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@Fabiantjoeaon
Fabiantjoeaon / scroll.js
Last active November 6, 2019 19:01
Vanilla JS (ES6) smooth scrolling w/ Easing functions
const scrollToItemId = (containerId, srollToId) => {
const scrollContainer = document.getElementById(containerId);
const item = document.getElementById(scrollToId);
//with animation
const from = scrollContainer.scrollTop;
const by = item.offsetTop - scrollContainer.scrollTop;
if (from < item.offsetTop) {
if (item.offsetTop > scrollContainer.scrollHeight - scrollContainer.clientHeight) {
by = (scrollContainer.scrollHeight - scrollContainer.clientHeight) - scrollContainer.scrollTop;
@Fabiantjoeaon
Fabiantjoeaon / mapTree.js
Last active October 30, 2016 16:03
Object tree mapper, executes map for every node in tree. Src: @mpjme, https://www.youtube.com/watch?v=2jp8N6Ha7tY
const mapTree = (node,mapper) => {
return {
value: mapper(node.value),
nodes: node.nodes
? node.nodes.map( x =>
mapTree(x, mapper)
)
: null
}
}
if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement /*, fromIndex*/) {
'use strict';
if (this == null) {
throw new TypeError('Array.prototype.includes called on null or undefined');
}
var O = Object(this);
var len = parseInt(O.length, 10) || 0;
if (len === 0) {
@Fabiantjoeaon
Fabiantjoeaon / ambientLight.js
Last active October 30, 2016 16:02
Useful HTML5 Web API uses, most change in the future, and have limited browser support, so be sure to look these up before implementing them. src: https://www.youtube.com/watch?v=NCGLPp778JY
// Listen for ambient lighting in room
window.addEventListener('devicelight', (e) => {
console.log(`${e.value} lux`);
});
@Fabiantjoeaon
Fabiantjoeaon / localStorageMiddleware.js
Created May 5, 2017 08:46
Redux middleware for saving to local storage on action intercept
const localStorageMiddleware = store => next => action => {
if (action.type === REGISTER || action.type === LOGIN) {
if (!action.error) {
window.localStorage.setItem('jwt', action.payload.user.token);
agent.setToken(action.payload.user.token);
}
} else if (action.type === LOGOUT) {
window.localStorage.setItem('jwt', '');
agent.setToken(null);
}