Skip to content

Instantly share code, notes, and snippets.

View automagisch's full-sized avatar

Koen Houtman automagisch

View GitHub Profile
/*
jQuery plugin for dynamically loading pages
$("#pageHolder").loadPage({
file: 'index.html',
effect: 'slide|fade',
duration: 1000
}).then(function() {
// done loading, this = $(html)
}, function(error) {
@automagisch
automagisch / _casper-tweak.scss
Last active September 22, 2017 15:18
CasperJS missing flexbox properties workaround
/*
In favor of casper.js (regressive UI testing): a very tiny and hacky fix
to get around the flexbox issues... Idea is to have this class put on the body
when we're running phantomjs.
@NOTE: There is only a class on the body 'body.casper-env' that is allowed to
make changes to minimize complexity.
@NOTE: Only apply the casper-env fix when it's needed in the test env. ofcourse
we still need (AND SHOULD) test without making any modifcations. This fix
@automagisch
automagisch / svg-loader.js
Created September 29, 2017 12:58
ES6 Module for SVG find-load-and-replace
/*
SVGLoader 0.1
* dependencies: jQuery
- finds all occurences of any HTML element containing `[data-svg-src]`
- tries to load that svg
- if sucessfull, injects that svg code after the placeholder
- if unsuccessfull, handles that with caution and allows a custom callback
for when it's very wishable to handle that error on the frontend (such as
@automagisch
automagisch / Hookable.js
Last active November 1, 2017 15:06
ES6 Hookable class
/*
Note: handy class to extend when you want a dead simple hook cycle system for anything you'll want to make
triggerable.
usage:
const Hookable = require('./path/to/Hookable...');
class SomeClass extends Hookable {
@automagisch
automagisch / fullscreen.js
Last active July 15, 2020 08:57
FullScreen API prefix-polyfill class (ES6)
/*
Description:
A utility class that shims the default native Fullscreen API implementations
in JavaScript (for the browser). Does nothing if FullScreen is not available
due to browser support / client browser configuration.
Usage:
@automagisch
automagisch / flexify.scss
Created April 5, 2018 13:45
flexify.scss
/*
.flexify should help me make flexbox grids without writing constantly
the same stuff over and over again. This integrates flexbox properties directly
in html, so you can write it like this:
<div class="flexify" data-space-between data-align-center>
<div>A</div>
<div>B</div>
<div C</div>
</div>
@automagisch
automagisch / fun-with-cookies.js
Created June 7, 2018 09:22
browser cookie shortcuts
// get a key-value representation of cookies
let cookies = () => {
let _cookies = document.cookie.split("; ");
let ret = {};
_cookies.forEach(cookie => {
let split = cookie.split("=");
ret[split[0]] = split[1];
});
return ret;
}
@automagisch
automagisch / _underline.scss
Last active July 19, 2018 12:56
Better` text-decoration: underline` control
/*
usage:
---
a.link {
@include underline(red, 1px, 5px, true)
}
---
above renders a red 'underline' with a 1px width, offsetted 5px from the bottom of
@automagisch
automagisch / paginator.js
Created November 28, 2018 11:12
Simple script to help with paginated AJAX calls
import $ from 'jquery';
import EventEmitter from './event-emitter';
export default class Paginator extends EventEmitter {
constructor(props={}) {
super();
this.props = {
@automagisch
automagisch / event-emitter.js
Created November 28, 2018 11:13
A simple approach to an event pattern. Used by extending it onto classes.
/*
An event mocking class
- EventEmitter.events = { event: [], event2: [] ...etc }
- EventEmitter.on('event', d => console.log('adds callbacks with data as d (d=whatever)'))
! You can use EventEmitter.on('event event') to subscribe 1 callback to multiple events. note space separator
- EventEmitter.emit('event', (whatever)); // => runs callbacks from event[evt] added through ~.on(..^)
- Special: EventEmitter.on('*') will be emitted on any 'emit'.
*/
export default class EventEmitter {
constructor() {