Skip to content

Instantly share code, notes, and snippets.

View dutchcelt's full-sized avatar

Egor Kloos dutchcelt

View GitHub Profile
@dutchcelt
dutchcelt / getElementsByAttribute.js
Last active February 11, 2024 20:33
A function to get elements by Attribute name
const getElementsByAttribute = (target, attr) => {
const nodeArray = [];
const considerNode = node => node.hasAttribute(attr) ? 1 : 3;
const treeWalker = document.createTreeWalker(target, 1, { acceptNode: considerNode }, false);
while(treeWalker.nextNode()) nodeArray.push(treeWalker.currentNode);
return nodeArray
};
@dutchcelt
dutchcelt / pubsub.mjs
Created December 11, 2017 13:38
Very basic Pub/Sub
/**
* Very simple Pub/Sub implementation using Symbols and setImmediate.
*/
const topics = {};
const getTokens = (str, obj) => Object.getOwnPropertySymbols(obj).filter(t => t.toString() === `Symbol(${str})`);
export default {
subscribe: (topic, listener) => {
const token = Symbol(topic);
topics[token] = listener;
@dutchcelt
dutchcelt / loadStyles.js
Last active February 11, 2024 20:34
Dynamically Load CSS files
let hasPreload = false;
try {
hasPreload = document.createElement("link").relList.supports("preload");
} catch(err) {}
const hasStyle = href => [...document.styleSheets].some(ss => href === ss.href);
const defaults = {
media: 'all',
crossorigin: undefined,
@dutchcelt
dutchcelt / unit.js
Created September 10, 2017 10:34
Unit test example
import test from 'tape';
// For each unit test you write,
// answer these questions:
test('What component aspect are you testing?', assert => {
const actual = 'What is the actual output?';
const expected = 'What is the expected output?';
assert.equal(actual, expected,
'What should the feature do?');
@dutchcelt
dutchcelt / setPassiveEvent.js
Last active February 11, 2024 20:34
Detect support for passive events
let passive = false;
window.addEventListener("detectPassiveSupport", null, Object.defineProperty({}, 'passive', {
get: function() {
passive = { passive: true };
}
}));
export { passive as default };
@dutchcelt
dutchcelt / scrollPosition.js
Last active February 11, 2024 20:35
Restore a scroll position after a content change
import passive from './setPassiveEvent.js';
// DOMMouseScroll is specific to Firefox
const eventTypes = ['mousewheel', 'touchmove', 'DOMMouseScroll'];
class ScrollPosition {
constructor(viewport) {
this.viewport = viewport || document.body;
this.scrollPosition = this.getScrollPosition();
@dutchcelt
dutchcelt / ordinalConverter.js
Last active February 11, 2024 20:35
Convert an index value to an ordinal value
// Source: https://stackoverflow.com/questions/13627308/add-st-nd-rd-and-th-ordinal-suffix-to-a-number
const ordinalConverter = (i) => {
const ordinal = ["st","nd","rd"][((i+90)%100-10)%10-1]||"th";
return `${i}${ordinal}`;
};
export ordinalConverter;
@dutchcelt
dutchcelt / basicDomReady.js
Last active February 11, 2024 20:35
Basic domReady
function domReady(fn) {
(/d$|^i|^c/).test(document.readyState) ? requestAnimationFrame(fn) : document.addEventListener('DOMContentLoaded', fn);
}
@dutchcelt
dutchcelt / removeStylesheet.js
Created August 26, 2016 13:59
Remove Stylesheet with MutationObserver
export default function(reg) {
// select the target node
const HEAD = document.querySelector('head');
// configuration of the observer:
const CONFIG = { attributes: false, childList: true, characterData: false };
// create an observer instance
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
const node = mutation.addedNodes[0];
@dutchcelt
dutchcelt / domReady
Last active February 11, 2024 20:35
document.readyState with a Promise()
/**
* Module file domReady.js
*/
let domReady = () => {
return new Promise((resolve, reject) => {
(document.readyState) || reject("Can't resolve document readystate");
let listener;
(/d$|^i|^c/).test(document.readyState) ? resolve() : document.addEventListener("DOMContentLoaded", listener = event => {
document.removeEventListener("DOMContentLoaded", listener);