356 lines
123 KiB
HTML
356 lines
123 KiB
HTML
<!DOCTYPE html><html lang="en"><head><script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-117141635-1")</script><link rel="stylesheet" href="./mini.css"><title>Browser - 30 seconds of code</title><meta charset="utf-8"><meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."><meta name="keywords" content="javascript, snippets, code, programming"><meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#111"><meta property="og:title" content="30 seconds of code"><meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less."/><meta property="og:type" content="website"/><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png"><link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json"><script>const search = (node) => {
|
||
let matchingTags = [];
|
||
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
|
||
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
|
||
if(data.includes(true)){
|
||
x.style.display = '';
|
||
matchingTags.push(x.getAttribute('tags').split(',')[0]);
|
||
}
|
||
else x.style.display = 'none';
|
||
});
|
||
Array.from(node.parentElement.parentElement.getElementsByTagName('h3')).forEach(x => {
|
||
x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
|
||
})
|
||
}
|
||
function scrollToTop(){
|
||
const c = document.querySelector('main').scrollTop;
|
||
if (c > 0) {
|
||
window.requestAnimationFrame(scrollToTop);
|
||
document.querySelector('main').scrollTo(0, c - c / 4);
|
||
}
|
||
};
|
||
function scrollTo(element, to, id, duration) {
|
||
if (duration <= 0) return;
|
||
var difference = to - element.scrollTop;
|
||
var perTick = difference / duration * 40;
|
||
|
||
setTimeout(function() {
|
||
element.scrollTop = element.scrollTop + perTick;
|
||
if (element.scrollTop === to) {
|
||
window.location.href = "#"+id;
|
||
return;
|
||
}
|
||
scrollTo(element, to, id, duration - 40);
|
||
}, 40);
|
||
};
|
||
function loader() {
|
||
registerClickListener();
|
||
if(window.innerWidth >= '768')
|
||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Browser')[0].offsetTop - 130;
|
||
else
|
||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Browser')[0].offsetTop - 65;
|
||
}
|
||
function registerClickListener() {
|
||
document.addEventListener('click', function (event) {
|
||
if( document.getElementById('doc-drawer-checkbox').checked ) {
|
||
if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
|
||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||
}
|
||
}
|
||
if ( event.target.classList.contains('collapse') ) {
|
||
event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
|
||
}
|
||
else if (event.target.classList.contains('clipboard-copy')) {
|
||
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
|
||
const textArea = document.createElement("textarea");
|
||
textArea.value = text.trim();
|
||
document.body.appendChild(textArea);
|
||
textArea.select();
|
||
document.execCommand("Copy");
|
||
document.body.removeChild(textArea);
|
||
let tst = document.createElement('div');
|
||
tst.classList = 'toast';
|
||
tst.innerHTML = 'Snippet copied to clipboard!';
|
||
document.body.appendChild(tst);
|
||
setTimeout(function() {
|
||
tst.style.opacity = 0;
|
||
setTimeout(function() {
|
||
document.body.removeChild(tst);
|
||
},300);
|
||
},1700);
|
||
}
|
||
else if (event.target.classList.contains('scroll-to-top')){
|
||
scrollToTop();
|
||
}
|
||
else if (event.target.classList.contains('sublink-1')){
|
||
if(event.target.getAttribute("href").includes('./')) return;
|
||
event.preventDefault();
|
||
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
|
||
document.getElementById('doc-drawer-checkbox').checked = false;
|
||
}
|
||
}, false);
|
||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header style="height:3.5rem;box-sizing:border-box;overflow:hidden"><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" style="height:3.5rem;padding:.375rem;box-sizing:border-box" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1><label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label></header><div class="row" style="height:calc(100vh - 3.5rem);overflow:hidden"><input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox"><nav class="col-md-4 col-lg-3" style="border-top:0"><div class="input-group vertical"><input class="search" type="text" id="searchInput" onkeyup="search(this)" placeholder="Search..."></div><h3>Adapter</h3><a class="sublink-1" tags="adapter,function" href="./adapter#ary">ary</a> <a class="sublink-1" tags="adapter,function" href="./adapter#call">call</a> <a class="sublink-1" tags="adapter,function,array" href="./adapter#collectinto">collectInto</a> <a class="sublink-1" tags="adapter,function" href="./adapter#flip">flip</a> <a class="sublink-1" tags="adapter,function" href="./adapter#over">over</a> <a class="sublink-1" tags="adapter,function" href="./adapter#overargs">overArgs</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#pipeasyncfunctions">pipeAsyncFunctions</a> <a class="sublink-1" tags="adapter,function" href="./adapter#pipefunctions">pipeFunctions</a> <a class="sublink-1" tags="adapter,function,promise" href="./adapter#promisify">promisify</a> <a class="sublink-1" tags="adapter,function" href="./adapter#rearg">rearg</a> <a class="sublink-1" tags="adapter" href="./adapter#spreadover">spreadOver</a> <a class="sublink-1" tags="adapter,function" href="./adapter#unary">unary</a><h3>Array</h3><a class="sublink-1" tags="array,function" href="./array#all">all</a> <a class="sublink-1" tags="array,function" href="./array#any">any</a> <a class="sublink-1" tags="array" href="./array#bifurcate">bifurcate</a> <a class="sublink-1" tags="array,function" href="./array#bifurcateby">bifurcateBy</a> <a class="sublink-1" tags="array" href="./array#chunk">chunk</a> <a class="sublink-1" tags="array" href="./array#compact">compact</a> <a class="sublink-1" tags="array,object" href="./array#countby">countBy</a> <a class="sublink-1" tags="array" href="./array#countoccurrences">countOccurrences</a> <a class="sublink-1" tags="array,recursion" href="./array#deepflatten">deepFlatten</a> <a class="sublink-1" tags="array,math" href="./array#difference">difference</a> <a class="sublink-1" tags="array,function" href="./array#differenceby">differenceBy</a> <a class="sublink-1" tags="array,function" href="./array#differencewith">differenceWith</a> <a class="sublink-1" tags="array" href="./array#drop">drop</a> <a class="sublink-1" tags="array" href="./array#dropright">dropRight</a> <a class="sublink-1" tags="array,function" href="./array#droprightwhile">dropRightWhile</a> <a class="sublink-1" tags="array,function" href="./array#dropwhile">dropWhile</a> <a class="sublink-1" tags="array" href="./array#everynth">everyNth</a> <a class="sublink-1" tags="array" href="./array#filternonunique">filterNonUnique</a> <a class="sublink-1" tags="array" href="./array#findlast">findLast</a> <a class="sublink-1" tags="array,function" href="./array#findlastindex">findLastIndex</a> <a class="sublink-1" tags="array" href="./array#flatten">flatten</a> <a class="sublink-1" tags="array,function" href="./array#foreachright">forEachRight</a> <a class="sublink-1" tags="array,object" href="./array#groupby">groupBy</a> <a class="sublink-1" tags="array" href="./array#head">head</a> <a class="sublink-1" tags="array" href="./array#indexofall">indexOfAll</a> <a class="sublink-1" tags="array" href="./array#initial">initial</a> <a class="sublink-1" tags="array" href="./array#initialize2darray">initialize2DArray</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithrange">initializeArrayWithRange</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithrangeright">initializeArrayWithRangeRight</a> <a class="sublink-1" tags="array,math" href="./array#initializearraywithvalues">initializeArrayWithValues</a> <a class="sublink-1" tags="array,recursion" href="./array#initializendarray">initializeNDArray</a> <a class="sublink-1" tags="array,math" href="./array#intersection">intersection</a> <a class="sublink-1" tags="array,function" href="./array#intersectionby">intersectionBy</a> <a class="sublink-1" tags="array,function" href="./array#intersectionwith">intersectionWith</a> <a class="sublink-1" tags="array" href="./array#issorted">isSorted</a> <a class="sublink-1" tags="array" href="./array#join">join</a> <a class="sublink-1" tags="array" href="./array#last">last</a> <a class="sublink-1" tags="array,string,utility" href="./array#longestitem">longestItem</a> <a class="sublink-1" tags="array,object,advanced" href="./array#mapobject">mapObject</a> <a class="sublink-1" tags="array,math" href="./array#maxn">maxN</a> <a class="sublink-1" tags="array,math" href="./array#minn">minN</a> <a class="sublink-1" tags="array,function" href="./array#none">none</a> <a class="sublink-1" tags="array" href="./array#nthelement">nthElement</a> <a class="sublink-1" tags="array" href="./array#offset">offset</a> <a class="sublink-1" tags="array,object,function" href="./array#partition">partition</a> <a class="sublink-1" tags="array,recursion" href="./array#permutations">permutations</a> <a class="sublink-1" tags="array" href="./array#pull">pull</a> <a class="sublink-1" tags="array" href="./array#pullatindex">pullAtIndex</a> <a class="sublink-1" tags="array" href="./array#pullatvalue">pullAtValue</a> <a class="sublink-1" tags="array,function,advanced" href="./array#pullby">pullBy</a> <a class="sublink-1" tags="array" href="./array#reducedfilter">reducedFilter</a> <a class="sublink-1" tags="array,function" href="./array#reducesuccessive">reduceSuccessive</a> <a class="sublink-1" tags="array,function" href="./array#reducewhich">reduceWhich</a> <a class="sublink-1" tags="array" href="./array#reject">reject</a> <a class="sublink-1" tags="array" href="./array#remove">remove</a> <a class="sublink-1" tags="array,random" href="./array#sample">sample</a> <a class="sublink-1" tags="array,random" href="./array#samplesize">sampleSize</a> <a class="sublink-1" tags="array,random" href="./array#shuffle">shuffle</a> <a class="sublink-1" tags="array,math" href="./array#similarity">similarity</a> <a class="sublink-1" tags="array,math" href="./array#sortedindex">sortedIndex</a> <a class="sublink-1" tags="array,math,function" href="./array#sortedindexby">sortedIndexBy</a> <a class="sublink-1" tags="array,math" href="./array#sortedlastindex">sortedLastIndex</a> <a class="sublink-1" tags="array,math,function" href="./array#sortedlastindexby">sortedLastIndexBy</a> <a class="sublink-1" tags="array,sort,advanced" href="./array#stablesort">stableSort</a> <a class="sublink-1" tags="array,math" href="./array#symmetricdifference">symmetricDifference</a> <a class="sublink-1" tags="array,function" href="./array#symmetricdifferenceby">symmetricDifferenceBy</a> <a class="sublink-1" tags="array,function" href="./array#symmetricdifferencewith">symmetricDifferenceWith</a> <a class="sublink-1" tags="array" href="./array#tail">tail</a> <a class="sublink-1" tags="array" href="./array#take">take</a> <a class="sublink-1" tags="array" href="./array#takeright">takeRight</a> <a class="sublink-1" tags="array,function" href="./array#takerightwhile">takeRightWhile</a> <a class="sublink-1" tags="array,function" href="./array#takewhile">takeWhile</a> <a class="sublink-1" tags="array" href="./array#tohash">toHash</a> <a class="sublink-1" tags="array,math" href="./array#union">union</a> <a class="sublink-1" tags="array,function" href="./array#unionby">unionBy</a> <a class="sublink-1" tags="array,function" href="./array#unionwith">unionWith</a> <a class="sublink-1" tags="array" href="./array#uniqueelements">uniqueElements</a> <a class="sublink-1" tags="array" href="./array#unzip">unzip</a> <a class="sublink-1" tags="array,function,advanced" href="./array#unzipwith">unzipWith</a> <a class="sublink-1" tags="array" href="./array#without">without</a> <a class="sublink-1" tags="array,math" href="./array#xprod">xProd</a> <a class="sublink-1" tags="array" href="./array#zip">zip</a> <a class="sublink-1" tags="array,object" href="./array#zipobject">zipObject</a> <a class="sublink-1" tags="array,function,advanced" href="./array#zipwith">zipWith</a><h3>Browser</h3><a class="sublink-1" tags="browser,array" href="#arraytohtmllist">arrayToHtmlList</a> <a class="sublink-1" tags="browser" href="#bottomvisible">bottomVisible</a> <a class="sublink-1" tags="browser,string,advanced" href="#copytoclipboard">copyToClipboard</a> <a class="sublink-1" tags="browser,advanced" href="#counter">counter</a> <a class="sublink-1" tags="browser,utility" href="#createelement">createElement</a> <a class="sublink-1" tags="browser,event,advanced" href="#createeventhub">createEventHub</a> <a class="sublink-1" tags="browser,url" href="#currenturl">currentURL</a> <a class="sublink-1" tags="browser" href="#detectdevicetype">detectDeviceType</a> <a class="sublink-1" tags="browser" href="#elementisvisibleinviewport">elementIsVisibleInViewport</a> <a class="sublink-1" tags="browser" href="#getscrollposition">getScrollPosition</a> <a class="sublink-1" tags="browser,css" href="#getstyle">getStyle</a> <a class="sublink-1" tags="browser,css" href="#hasclass">hasClass</a> <a class="sublink-1" tags="browser,utility,advanced,promise" href="#hashbrowser">hashBrowser</a> <a class="sublink-1" tags="browser,css" href="#hide">hide</a> <a class="sublink-1" tags="browser,url" href="#httpsredirect">httpsRedirect</a> <a class="sublink-1" tags="browser" href="#isbrowsertabfocused">isBrowserTabFocused</a> <a class="sublink-1" tags="browser,array" href="#nodelisttoarray">nodeListToArray</a> <a class="sublink-1" tags="browser,event,advanced" href="#observemutations">observeMutations</a> <a class="sublink-1" tags="browser,event" href="#off">off</a> <a class="sublink-1" tags="browser,event" href="#on">on</a> <a class="sublink-1" tags="browser,event,advanced" href="#onuserinputchange">onUserInputChange</a> <a class="sublink-1" tags="browser,utility" href="#prefix">prefix</a> <a class="sublink-1" tags="browser,utility" href="#recordanimationframes">recordAnimationFrames</a> <a class="sublink-1" tags="browser,url" href="#redirect">redirect</a> <a class="sublink-1" tags="browser,function,advanced,promise,url" href="#runasync">runAsync</a> <a class="sublink-1" tags="browser" href="#scrolltotop">scrollToTop</a> <a class="sublink-1" tags="browser" href="#setstyle">setStyle</a> <a class="sublink-1" tags="browser,css" href="#show">show</a> <a class="sublink-1" tags="browser,css" href="#smoothscroll">smoothScroll</a> <a class="sublink-1" tags="browser" href="#toggleclass">toggleClass</a> <a class="sublink-1" tags="browser,utility,random" href="#uuidgeneratorbrowser">UUIDGeneratorBrowser</a><h3>Date</h3><a class="sublink-1" tags="date,math,string,utility" href="./date#formatduration">formatDuration</a> <a class="sublink-1" tags="date" href="./date#getcolontimefromdate">getColonTimeFromDate</a> <a class="sublink-1" tags="date" href="./date#getdaysdiffbetweendates">getDaysDiffBetweenDates</a> <a class="sublink-1" tags="date" href="./date#getmeridiemsuffixofinteger">getMeridiemSuffixOfInteger</a> <a class="sublink-1" tags="date" href="./date#tomorrow">tomorrow</a><h3>Function</h3><a class="sublink-1" tags="function" href="./function#attempt">attempt</a> <a class="sublink-1" tags="function,object" href="./function#bind">bind</a> <a class="sublink-1" tags="function,object" href="./function#bindkey">bindKey</a> <a class="sublink-1" tags="function" href="./function#chainasync">chainAsync</a> <a class="sublink-1" tags="function" href="./function#compose">compose</a> <a class="sublink-1" tags="function" href="./function#composeright">composeRight</a> <a class="sublink-1" tags="function" href="./function#converge">converge</a> <a class="sublink-1" tags="function,recursion" href="./function#curry">curry</a> <a class="sublink-1" tags="function" href="./function#debounce">debounce</a> <a class="sublink-1" tags="function" href="./function#defer">defer</a> <a class="sublink-1" tags="function" href="./function#delay">delay</a> <a class="sublink-1" tags="function,utility" href="./function#functionname">functionName</a> <a class="sublink-1" tags="function" href="./function#hz">hz</a> <a class="sublink-1" tags="function" href="./function#memoize">memoize</a> <a class="sublink-1" tags="function" href="./function#negate">negate</a> <a class="sublink-1" tags="function" href="./function#once">once</a> <a class="sublink-1" tags="function" href="./function#partial">partial</a> <a class="sublink-1" tags="function" href="./function#partialright">partialRight</a> <a class="sublink-1" tags="function,promise" href="./function#runpromisesinseries">runPromisesInSeries</a> <a class="sublink-1" tags="function,promise" href="./function#sleep">sleep</a> <a class="sublink-1" tags="function" href="./function#throttle">throttle</a> <a class="sublink-1" tags="function" href="./function#times">times</a> <a class="sublink-1" tags="function" href="./function#uncurry">uncurry</a> <a class="sublink-1" tags="function,array" href="./function#unfold">unfold</a> <a class="sublink-1" tags="function" href="./function#when">when</a><h3>Math</h3><a class="sublink-1" tags="math" href="./math#approximatelyequal">approximatelyEqual</a> <a class="sublink-1" tags="math,array" href="./math#average">average</a> <a class="sublink-1" tags="math,array,function" href="./math#averageby">averageBy</a> <a class="sublink-1" tags="math" href="./math#binomialcoefficient">binomialCoefficient</a> <a class="sublink-1" tags="math" href="./math#clampnumber">clampNumber</a> <a class="sublink-1" tags="math" href="./math#degreestorads">degreesToRads</a> <a class="sublink-1" tags="math,array" href="./math#digitize">digitize</a> <a class="sublink-1" tags="math" href="./math#distance">distance</a> <a class="sublink-1" tags="math,array,advanced" href="./math#elo">elo</a> <a class="sublink-1" tags="math,recursion" href="./math#factorial">factorial</a> <a class="sublink-1" tags="math,array" href="./math#fibonacci">fibonacci</a> <a class="sublink-1" tags="math,recursion" href="./math#gcd">gcd</a> <a class="sublink-1" tags="math" href="./math#geometricprogression">geometricProgression</a> <a class="sublink-1" tags="math" href="./math#hammingdistance">hammingDistance</a> <a class="sublink-1" tags="math" href="./math#inrange">inRange</a> <a class="sublink-1" tags="math" href="./math#isdivisible">isDivisible</a> <a class="sublink-1" tags="math" href="./math#iseven">isEven</a> <a class="sublink-1" tags="math" href="./math#isprime">isPrime</a> <a class="sublink-1" tags="math,recursion" href="./math#lcm">lcm</a> <a class="sublink-1" tags="math,utility" href="./math#luhncheck">luhnCheck</a> <a class="sublink-1" tags="math,array,function" href="./math#maxby">maxBy</a> <a class="sublink-1" tags="math,array" href="./math#median">median</a> <a class="sublink-1" tags="math,array,function" href="./math#minby">minBy</a> <a class="sublink-1" tags="math" href="./math#percentile">percentile</a> <a class="sublink-1" tags="math" href="./math#powerset">powerset</a> <a class="sublink-1" tags="math,array" href="./math#primes">primes</a> <a class="sublink-1" tags="math" href="./math#radstodegrees">radsToDegrees</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintarrayinrange">randomIntArrayInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomintegerinrange">randomIntegerInRange</a> <a class="sublink-1" tags="math,utility,random" href="./math#randomnumberinrange">randomNumberInRange</a> <a class="sublink-1" tags="math" href="./math#round">round</a> <a class="sublink-1" tags="math,utility" href="./math#sdbm">sdbm</a> <a class="sublink-1" tags="math,array" href="./math#standarddeviation">standardDeviation</a> <a class="sublink-1" tags="math,array" href="./math#sum">sum</a> <a class="sublink-1" tags="math,array,function" href="./math#sumby">sumBy</a> <a class="sublink-1" tags="math" href="./math#sumpower">sumPower</a> <a class="sublink-1" tags="math" href="./math#tosafeinteger">toSafeInteger</a><h3>Node</h3><a class="sublink-1" tags="node,string,utility" href="./node#atob">atob</a> <a class="sublink-1" tags="node,string,utility" href="./node#btoa">btoa</a> <a class="sublink-1" tags="node,utility,string" href="./node#colorize">colorize</a> <a class="sublink-1" tags="node" href="./node#hasflags">hasFlags</a> <a class="sublink-1" tags="node,utility,promise" href="./node#hashnode">hashNode</a> <a class="sublink-1" tags="node" href="./node#istravisci">isTravisCI</a> <a class="sublink-1" tags="node,json" href="./node#jsontofile">JSONToFile</a> <a class="sublink-1" tags="node,array,string" href="./node#readfilelines">readFileLines</a> <a class="sublink-1" tags="node,string" href="./node#untildify">untildify</a> <a class="sublink-1" tags="node,utility,random" href="./node#uuidgeneratornode">UUIDGeneratorNode</a><h3>Object</h3><a class="sublink-1" tags="object,function" href="./object#bindall">bindAll</a> <a class="sublink-1" tags="object,recursion" href="./object#deepclone">deepClone</a> <a class="sublink-1" tags="object" href="./object#defaults">defaults</a> <a class="sublink-1" tags="object,array,type,advanced" href="./object#equals">equals</a> <a class="sublink-1" tags="object,function" href="./object#findkey">findKey</a> <a class="sublink-1" tags="object,function" href="./object#findlastkey">findLastKey</a> <a class="sublink-1" tags="object,recursion" href="./object#flattenobject">flattenObject</a> <a class="sublink-1" tags="object" href="./object#forown">forOwn</a> <a class="sublink-1" tags="object" href="./object#forownright">forOwnRight</a> <a class="sublink-1" tags="object,function" href="./object#functions">functions</a> <a class="sublink-1" tags="object" href="./object#get">get</a> <a class="sublink-1" tags="object,function" href="./object#invertkeyvalues">invertKeyValues</a> <a class="sublink-1" tags="object" href="./object#lowercasekeys">lowercaseKeys</a> <a class="sublink-1" tags="object,function" href="./object#mapkeys">mapKeys</a> <a class="sublink-1" tags="object,function" href="./object#mapvalues">mapValues</a> <a class="sublink-1" tags="object,type" href="./object#matches">matches</a> <a class="sublink-1" tags="object,type,function" href="./object#matcheswith">matchesWith</a> <a class="sublink-1" tags="object,array" href="./object#merge">merge</a> <a class="sublink-1" tags="object" href="./object#nest">nest</a> <a class="sublink-1" tags="object,array" href="./object#objectfrompairs">objectFromPairs</a> <a class="sublink-1" tags="object,array" href="./object#objecttopairs">objectToPairs</a> <a class="sublink-1" tags="object,array" href="./object#omit">omit</a> <a class="sublink-1" tags="object,array,function" href="./object#omitby">omitBy</a> <a class="sublink-1" tags="object,array" href="./object#orderby">orderBy</a> <a class="sublink-1" tags="object,array" href="./object#pick">pick</a> <a class="sublink-1" tags="object,array,function" href="./object#pickby">pickBy</a> <a class="sublink-1" tags="object" href="./object#renamekeys">renameKeys</a> <a class="sublink-1" tags="object" href="./object#shallowclone">shallowClone</a> <a class="sublink-1" tags="object,array,string" href="./object#size">size</a> <a class="sublink-1" tags="object,array" href="./object#transform">transform</a> <a class="sublink-1" tags="object,logic,array" href="./object#truthcheckcollection">truthCheckCollection</a> <a class="sublink-1" tags="object,advanced" href="./object#unflattenobject">unflattenObject</a><h3>String</h3><a class="sublink-1" tags="string" href="./string#bytesize">byteSize</a> <a class="sublink-1" tags="string,array" href="./string#capitalize">capitalize</a> <a class="sublink-1" tags="string,regexp" href="./string#capitalizeeveryword">capitalizeEveryWord</a> <a class="sublink-1" tags="string,array" href="./string#decapitalize">decapitalize</a> <a class="sublink-1" tags="string,browser,regexp" href="./string#escapehtml">escapeHTML</a> <a class="sublink-1" tags="string,regexp" href="./string#escaperegexp">escapeRegExp</a> <a class="sublink-1" tags="string" href="./string#fromcamelcase">fromCamelCase</a> <a class="sublink-1" tags="string,utility,browser,url" href="./string#isabsoluteurl">isAbsoluteURL</a> <a class="sublink-1" tags="string,regexp" href="./string#isanagram">isAnagram</a> <a class="sublink-1" tags="string,utility" href="./string#islowercase">isLowerCase</a> <a class="sublink-1" tags="string,utility" href="./string#isuppercase">isUpperCase</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#mask">mask</a> <a class="sublink-1" tags="string" href="./string#pad">pad</a> <a class="sublink-1" tags="string" href="./string#palindrome">palindrome</a> <a class="sublink-1" tags="string" href="./string#pluralize">pluralize</a> <a class="sublink-1" tags="string,regexp" href="./string#removenonascii">removeNonASCII</a> <a class="sublink-1" tags="string,array" href="./string#reversestring">reverseString</a> <a class="sublink-1" tags="string" href="./string#sortcharactersinstring">sortCharactersInString</a> <a class="sublink-1" tags="string" href="./string#splitlines">splitLines</a> <a class="sublink-1" tags="string,recursion" href="./string#stringpermutations">stringPermutations</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#striphtmltags">stripHTMLTags</a> <a class="sublink-1" tags="string,regexp" href="./string#tocamelcase">toCamelCase</a> <a class="sublink-1" tags="string,regexp" href="./string#tokebabcase">toKebabCase</a> <a class="sublink-1" tags="string,regexp" href="./string#tosnakecase">toSnakeCase</a> <a class="sublink-1" tags="string" href="./string#truncatestring">truncateString</a> <a class="sublink-1" tags="string,browser" href="./string#unescapehtml">unescapeHTML</a> <a class="sublink-1" tags="string,utility,regexp" href="./string#urljoin">URLJoin</a> <a class="sublink-1" tags="string,regexp" href="./string#words">words</a><h3>Type</h3><a class="sublink-1" tags="type" href="./type#gettype">getType</a> <a class="sublink-1" tags="type,array,regexp" href="./type#is">is</a> <a class="sublink-1" tags="type,array" href="./type#isarraylike">isArrayLike</a> <a class="sublink-1" tags="type" href="./type#isboolean">isBoolean</a> <a class="sublink-1" tags="type,array,object,string" href="./type#isempty">isEmpty</a> <a class="sublink-1" tags="type,function" href="./type#isfunction">isFunction</a> <a class="sublink-1" tags="type" href="./type#isnil">isNil</a> <a class="sublink-1" tags="type" href="./type#isnull">isNull</a> <a class="sublink-1" tags="type,math" href="./type#isnumber">isNumber</a> <a class="sublink-1" tags="type,object" href="./type#isobject">isObject</a> <a class="sublink-1" tags="type,object" href="./type#isobjectlike">isObjectLike</a> <a class="sublink-1" tags="type,object" href="./type#isplainobject">isPlainObject</a> <a class="sublink-1" tags="type,function,array,string" href="./type#isprimitive">isPrimitive</a> <a class="sublink-1" tags="type,function,promise" href="./type#ispromiselike">isPromiseLike</a> <a class="sublink-1" tags="type,string" href="./type#isstring">isString</a> <a class="sublink-1" tags="type" href="./type#issymbol">isSymbol</a> <a class="sublink-1" tags="type" href="./type#isundefined">isUndefined</a> <a class="sublink-1" tags="type,json" href="./type#isvalidjson">isValidJSON</a><h3>Utility</h3><a class="sublink-1" tags="utility,array,type" href="./utility#castarray">castArray</a> <a class="sublink-1" tags="utility,regexp" href="./utility#cloneregexp">cloneRegExp</a> <a class="sublink-1" tags="utility" href="./utility#coalesce">coalesce</a> <a class="sublink-1" tags="utility" href="./utility#coalescefactory">coalesceFactory</a> <a class="sublink-1" tags="utility,string" href="./utility#extendhex">extendHex</a> <a class="sublink-1" tags="utility,browser,string,url" href="./utility#geturlparameters">getURLParameters</a> <a class="sublink-1" tags="utility,string,math,advanced" href="./utility#hextorgb">hexToRGB</a> <a class="sublink-1" tags="utility,url,browser" href="./utility#httpget">httpGet</a> <a class="sublink-1" tags="utility,url,browser" href="./utility#httppost">httpPost</a> <a class="sublink-1" tags="utility,browser" href="./utility#isbrowser">isBrowser</a> <a class="sublink-1" tags="utility,function" href="./utility#mostperformant">mostPerformant</a> <a class="sublink-1" tags="utility,function" href="./utility#ntharg">nthArg</a> <a class="sublink-1" tags="utility,string" href="./utility#parsecookie">parseCookie</a> <a class="sublink-1" tags="utility,string,math" href="./utility#prettybytes">prettyBytes</a> <a class="sublink-1" tags="utility,random" href="./utility#randomhexcolorcode">randomHexColorCode</a> <a class="sublink-1" tags="utility" href="./utility#rgbtohex">RGBToHex</a> <a class="sublink-1" tags="utility,string" href="./utility#serializecookie">serializeCookie</a> <a class="sublink-1" tags="utility" href="./utility#timetaken">timeTaken</a> <a class="sublink-1" tags="utility" href="./utility#tocurrency">toCurrency</a> <a class="sublink-1" tags="utility,math" href="./utility#todecimalmark">toDecimalMark</a> <a class="sublink-1" tags="utility,math" href="./utility#toordinalsuffix">toOrdinalSuffix</a> <a class="sublink-1" tags="utility,math" href="./utility#validatenumber">validateNumber</a> <a class="sublink-1" tags="utility,regexp" href="./utility#yesno">yesNo</a></nav><main class="col-sm-12 col-md-8 col-lg-9" style="height:100%;overflow-y:auto;background:#eceef2;padding:0"><a id="top"> </a><h2 style="text-align:center">Browser</h2><div class="card fluid"><h3 id="arraytohtmllist" class="section double-padded">arrayToHtmlList</h3><div class="section double-padded"><p>Converts the given array elements into <code><li></code> tags and appends them to the list of the given id.</p><p>Use <code>Array.map()</code>, <code>document.querySelector()</code>, and an anonymous inner closure to create a list of html tags.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">arrayToHtmlList</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> listID<span class="token punctuation">)</span> <span class="token operator">=></span>
|
||
<span class="token punctuation">(</span>el <span class="token operator">=></span> <span class="token punctuation">(
|
||
(</span>el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#'</span> <span class="token operator">+</span> listID<span class="token punctuation">)),
|
||
(</span>el<span class="token punctuation">.</span>innerHTML <span class="token operator">+=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>item <span class="token operator">=></span> <span class="token template-string"><span class="token string">`<li></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></li>`</span></span><span class="token punctuation">).</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">))
|
||
))();</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">arrayToHtmlList</span><span class="token punctuation">([</span><span class="token string">'item 1'</span><span class="token punctuation">,</span> <span class="token string">'item 2'</span><span class="token punctuation">],</span> <span class="token string">'myListID'</span><span class="token punctuation">);</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="bottomvisible" class="section double-padded">bottomVisible</h3><div class="section double-padded"><p>Returns <code>true</code> if the bottom of the page is visible, <code>false</code> otherwise.</p><p>Use <code>scrollY</code>, <code>scrollHeight</code> and <code>clientHeight</code> to determine if the bottom of the page is visible.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">bottomVisible</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span>
|
||
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight <span class="token operator">+</span> window<span class="token punctuation">.</span>scrollY <span class="token operator">>=</span>
|
||
<span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollHeight <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">bottomVisible</span><span class="token punctuation">();</span> <span class="token comment">// true</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="copytoclipboard" class="section double-padded">copyToClipboard<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>⚠️ <strong>NOTICE:</strong> The same functionality can be easily implemented by using the new asynchronous Clipboard API, which is still experimental but should be used in the future instead of this snippet. Find out more about it <a href="https://github.com/w3c/clipboard-apis/blob/master/explainer.adoc#writing-to-the-clipboard">here</a>.</p><p>Copy a string to the clipboard. Only works as a result of user action (i.e. inside a <code>click</code> event listener).</p><p>Create a new <code><textarea></code> element, fill it with the supplied data and add it to the HTML document. Use <code>Selection.getRangeAt()</code>to store the selected range (if any). Use <code>document.execCommand('copy')</code> to copy to the clipboard. Remove the <code><textarea></code> element from the HTML document. Finally, use <code>Selection().addRange()</code> to recover the original selected range (if any).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">copyToClipboard</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">);</span>
|
||
el<span class="token punctuation">.</span>value <span class="token operator">=</span> str<span class="token punctuation">;</span>
|
||
el<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'readonly'</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">);</span>
|
||
el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>position <span class="token operator">=</span> <span class="token string">'absolute'</span><span class="token punctuation">;</span>
|
||
el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left <span class="token operator">=</span> <span class="token string">'-9999px'</span><span class="token punctuation">;</span>
|
||
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>el<span class="token punctuation">);</span>
|
||
<span class="token keyword">const</span> selected <span class="token operator">=</span>
|
||
document<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">().</span>rangeCount <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> document<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">().</span><span class="token function">getRangeAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">) :</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||
el<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">();</span>
|
||
document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">);</span>
|
||
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>el<span class="token punctuation">);</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>selected<span class="token punctuation">) {</span>
|
||
document<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">().</span><span class="token function">removeAllRanges</span><span class="token punctuation">();</span>
|
||
document<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">().</span><span class="token function">addRange</span><span class="token punctuation">(</span>selected<span class="token punctuation">);
|
||
}
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">copyToClipboard</span><span class="token punctuation">(</span><span class="token string">'Lorem ipsum'</span><span class="token punctuation">);</span> <span class="token comment">// 'Lorem ipsum' copied to clipboard.</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="counter" class="section double-padded">counter<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Creates a counter with the specified range, step and duration for the specified selector.</p><p>Check if <code>step</code> has the proper sign and change it accordingly. Use <code>setInterval()</code> in combination with <code>Math.abs()</code> and <code>Math.floor()</code> to calculate the time between each new text draw. Use <code>document.querySelector().innerHTML</code> to update the value of the selected element. Omit the fourth parameter, <code>step</code>, to use a default step of <code>1</code>. Omit the fifth parameter, <code>duration</code>, to use a default duration of <code>2000</code>ms.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">counter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>selector<span class="token punctuation">,</span> start<span class="token punctuation">,</span> end<span class="token punctuation">,</span> step <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> duration <span class="token operator">=</span> <span class="token number">2000</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> current <span class="token operator">=</span> start<span class="token punctuation">,</span>
|
||
_step <span class="token operator">=</span> <span class="token punctuation">(</span>end <span class="token operator">-</span> start<span class="token punctuation">)</span> <span class="token operator">*</span> step <span class="token operator"><</span> <span class="token number">0</span> <span class="token operator">? -</span>step <span class="token punctuation">:</span> step<span class="token punctuation">,</span>
|
||
timer <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
current <span class="token operator">+=</span> _step<span class="token punctuation">;</span>
|
||
document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>selector<span class="token punctuation">).</span>innerHTML <span class="token operator">=</span> current<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>current <span class="token operator">>=</span> end<span class="token punctuation">)</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>selector<span class="token punctuation">).</span>innerHTML <span class="token operator">=</span> end<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>current <span class="token operator">>=</span> end<span class="token punctuation">)</span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>timer<span class="token punctuation">);
|
||
},</span> Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>duration <span class="token operator">/</span> <span class="token punctuation">(</span>end <span class="token operator">-</span> start<span class="token punctuation">))));</span>
|
||
<span class="token keyword">return</span> timer<span class="token punctuation">;
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">counter</span><span class="token punctuation">(</span><span class="token string">'#my-id'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">);</span> <span class="token comment">// Creates a 2-second timer for the element with id="my-id"</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="createelement" class="section double-padded">createElement</h3><div class="section double-padded"><p>Creates an element from a string (without appending it to the document). If the given string contains multiple elements, only the first one will be returned.</p><p>Use <code>document.createElement()</code> to create a new element. Set its <code>innerHTML</code> to the string supplied as the argument. Use <code>ParentNode.firstElementChild</code> to return the element version of the string.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">createElement</span> <span class="token operator">=</span> str <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">);</span>
|
||
el<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> str<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> el<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">;
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> el <span class="token operator">=</span> <span class="token function">createElement</span><span class="token punctuation">(</span>
|
||
<span class="token template-string"><span class="token string">`<div class="container">
|
||
<p>Hello!</p>
|
||
</div>`</span></span>
|
||
<span class="token punctuation">);</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>el<span class="token punctuation">.</span>className<span class="token punctuation">);</span> <span class="token comment">// 'container'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="createeventhub" class="section double-padded">createEventHub<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Creates a pub/sub (<a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern">publish–subscribe</a>) event hub with <code>emit</code>, <code>on</code>, and <code>off</code> methods.</p><p>Use <code>Object.create(null)</code> to create an empty <code>hub</code> object that does not inherit properties from <code>Object.prototype</code>. For <code>emit</code>, resolve the array of handlers based on the <code>event</code> argument and then run each one with <code>Array.forEach()</code> by passing in the data as an argument. For <code>on</code>, create an array for the event if it does not yet exist, then use <code>Array.push()</code> to add the handler to the array. For <code>off</code>, use <code>Array.findIndex()</code> to find the index of the handler in the event array and remove it using <code>Array.splice()</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">createEventHub</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">({</span>
|
||
hub<span class="token punctuation">:</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">),</span>
|
||
<span class="token function">emit</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> data<span class="token punctuation">) {
|
||
(</span><span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">[]).</span><span class="token function">forEach</span><span class="token punctuation">(</span>handler <span class="token operator">=></span> <span class="token function">handler</span><span class="token punctuation">(</span>data<span class="token punctuation">));
|
||
},</span>
|
||
<span class="token function">on</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> handler<span class="token punctuation">) {</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">])</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[];</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">].</span><span class="token function">push</span><span class="token punctuation">(</span>handler<span class="token punctuation">);
|
||
},</span>
|
||
<span class="token function">off</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> handler<span class="token punctuation">) {</span>
|
||
<span class="token keyword">const</span> i <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">[]).</span><span class="token function">findIndex</span><span class="token punctuation">(</span>h <span class="token operator">=></span> h <span class="token operator">===</span> handler<span class="token punctuation">);</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">> -</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span>hub<span class="token punctuation">[</span>event<span class="token punctuation">].</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">);
|
||
}
|
||
});</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">handler</span> <span class="token operator">=</span> data <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">);</span>
|
||
<span class="token keyword">const</span> hub <span class="token operator">=</span> <span class="token function">createEventHub</span><span class="token punctuation">();</span>
|
||
<span class="token keyword">let</span> increment <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Subscribe: listen for different types of events</span>
|
||
hub<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> handler<span class="token punctuation">);</span>
|
||
hub<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">, ()</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Message event fired'</span><span class="token punctuation">));</span>
|
||
hub<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">, ()</span> <span class="token operator">=></span> increment<span class="token operator">++</span><span class="token punctuation">);</span>
|
||
|
||
<span class="token comment">// Publish: emit events to invoke all handlers subscribed to them, passing the data to them as an argument</span>
|
||
hub<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token string">'hello world'</span><span class="token punctuation">);</span> <span class="token comment">// logs 'hello world' and 'Message event fired'</span>
|
||
hub<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">, {</span> hello<span class="token punctuation">:</span> <span class="token string">'world'</span> <span class="token punctuation">});</span> <span class="token comment">// logs the object and 'Message event fired'</span>
|
||
hub<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">);</span> <span class="token comment">// `increment` variable is now 1</span>
|
||
|
||
<span class="token comment">// Unsubscribe: stop a specific handler from listening to the 'message' event</span>
|
||
hub<span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> handler<span class="token punctuation">);</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="currenturl" class="section double-padded">currentURL</h3><div class="section double-padded"><p>Returns the current URL.</p><p>Use <code>window.location.href</code> to get current URL.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">currentURL</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token punctuation">;</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">currentURL</span><span class="token punctuation">();</span> <span class="token comment">// 'https://google.com'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="detectdevicetype" class="section double-padded">detectDeviceType</h3><div class="section double-padded"><p>Detects wether the website is being opened in a mobile device or a desktop/laptop.</p><p>Use a regular expression to test the <code>navigator.userAgent</code> property to figure out if the device is a mobile device or a desktop/laptop.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">detectDeviceType</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span>
|
||
<span class="token regex">/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">)</span>
|
||
<span class="token operator">?</span> <span class="token string">'Mobile'</span>
|
||
<span class="token punctuation">:</span> <span class="token string">'Desktop'</span><span class="token punctuation">;</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">detectDeviceType</span><span class="token punctuation">();</span> <span class="token comment">// "Mobile" or "Desktop"</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="elementisvisibleinviewport" class="section double-padded">elementIsVisibleInViewport</h3><div class="section double-padded"><p>Returns <code>true</code> if the element specified is visible in the viewport, <code>false</code> otherwise.</p><p>Use <code>Element.getBoundingClientRect()</code> and the <code>window.inner(Width|Height)</code> values to determine if a given element is visible in the viewport. Omit the second argument to determine if the element is entirely visible, or specify <code>true</code> to determine if it is partially visible.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">elementIsVisibleInViewport</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> partiallyVisible <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> bottom<span class="token punctuation">,</span> right <span class="token punctuation">}</span> <span class="token operator">=</span> el<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">();</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> innerHeight<span class="token punctuation">,</span> innerWidth <span class="token punctuation">}</span> <span class="token operator">=</span> window<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> partiallyVisible
|
||
<span class="token operator">?</span> <span class="token punctuation">((</span>top <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&&</span> top <span class="token operator"><</span> innerHeight<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span>bottom <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&&</span> bottom <span class="token operator"><</span> innerHeight<span class="token punctuation">))</span> <span class="token operator">&&</span>
|
||
<span class="token punctuation">((</span>left <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&&</span> left <span class="token operator"><</span> innerWidth<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span>right <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">&&</span> right <span class="token operator"><</span> innerWidth<span class="token punctuation">))
|
||
:</span> top <span class="token operator">>=</span> <span class="token number">0</span> <span class="token operator">&&</span> left <span class="token operator">>=</span> <span class="token number">0</span> <span class="token operator">&&</span> bottom <span class="token operator"><=</span> innerHeight <span class="token operator">&&</span> right <span class="token operator"><=</span> innerWidth<span class="token punctuation">;
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token comment">// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}</span>
|
||
<span class="token function">elementIsVisibleInViewport</span><span class="token punctuation">(</span>el<span class="token punctuation">);</span> <span class="token comment">// false - (not fully visible)</span>
|
||
<span class="token function">elementIsVisibleInViewport</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">);</span> <span class="token comment">// true - (partially visible)</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="getscrollposition" class="section double-padded">getScrollPosition</h3><div class="section double-padded"><p>Returns the scroll position of the current page.</p><p>Use <code>pageXOffset</code> and <code>pageYOffset</code> if they are defined, otherwise <code>scrollLeft</code> and <code>scrollTop</code>. You can omit <code>el</code> to use a default value of <code>window</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">getScrollPosition</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el <span class="token operator">=</span> window<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">({</span>
|
||
x<span class="token punctuation">:</span> el<span class="token punctuation">.</span>pageXOffset <span class="token operator">!==</span> undefined <span class="token operator">?</span> el<span class="token punctuation">.</span>pageXOffset <span class="token punctuation">:</span> el<span class="token punctuation">.</span>scrollLeft<span class="token punctuation">,</span>
|
||
y<span class="token punctuation">:</span> el<span class="token punctuation">.</span>pageYOffset <span class="token operator">!==</span> undefined <span class="token operator">?</span> el<span class="token punctuation">.</span>pageYOffset <span class="token punctuation">:</span> el<span class="token punctuation">.</span>scrollTop
|
||
<span class="token punctuation">});</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">getScrollPosition</span><span class="token punctuation">();</span> <span class="token comment">// {x: 0, y: 200}</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="getstyle" class="section double-padded">getStyle</h3><div class="section double-padded"><p>Returns the value of a CSS rule for the specified element.</p><p>Use <code>Window.getComputedStyle()</code> to get the value of the CSS rule for the specified element.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">getStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> ruleName<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">getComputedStyle</span><span class="token punctuation">(</span>el<span class="token punctuation">)[</span>ruleName<span class="token punctuation">];</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">getStyle</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">),</span> <span class="token string">'font-size'</span><span class="token punctuation">);</span> <span class="token comment">// '16px'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="hasclass" class="section double-padded">hasClass</h3><div class="section double-padded"><p>Returns <code>true</code> if the element has the specified class, <code>false</code> otherwise.</p><p>Use <code>element.classList.contains()</code> to check if the element has the specified class.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hasClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> className<span class="token punctuation">)</span> <span class="token operator">=></span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>className<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hasClass</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p.special'</span><span class="token punctuation">),</span> <span class="token string">'special'</span><span class="token punctuation">);</span> <span class="token comment">// true</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="hashbrowser" class="section double-padded">hashBrowser<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Creates a hash for a value using the <a href="https://en.wikipedia.org/wiki/SHA-2">SHA-256</a> algorithm. Returns a promise.</p><p>Use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto">SubtleCrypto</a> API to create a hash for the given value.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hashBrowser</span> <span class="token operator">=</span> val <span class="token operator">=></span>
|
||
crypto<span class="token punctuation">.</span>subtle<span class="token punctuation">.</span><span class="token function">digest</span><span class="token punctuation">(</span><span class="token string">'SHA-256'</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">TextEncoder</span><span class="token punctuation">(</span><span class="token string">'utf-8'</span><span class="token punctuation">).</span><span class="token function">encode</span><span class="token punctuation">(</span>val<span class="token punctuation">)).</span><span class="token function">then</span><span class="token punctuation">(</span>h <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> hexes <span class="token operator">=</span> <span class="token punctuation">[],</span>
|
||
view <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">DataView</span><span class="token punctuation">(</span>h<span class="token punctuation">);</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> view<span class="token punctuation">.</span>byteLength<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">4</span><span class="token punctuation">)</span>
|
||
hexes<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">((</span><span class="token string">'00000000'</span> <span class="token operator">+</span> view<span class="token punctuation">.</span><span class="token function">getUint32</span><span class="token punctuation">(</span>i<span class="token punctuation">).</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)).</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">8</span><span class="token punctuation">));</span>
|
||
<span class="token keyword">return</span> hexes<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">);
|
||
});</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hashBrowser</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">({</span> a<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> b<span class="token punctuation">: [</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">],</span> foo<span class="token punctuation">: {</span> c<span class="token punctuation">:</span> <span class="token string">'bar'</span> <span class="token punctuation">} })).</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">);</span> <span class="token comment">// '04aa106279f5977f59f9067fa9712afc4aedc6f5862a8defc34552d8c7206393'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="hide" class="section double-padded">hide</h3><div class="section double-padded"><p>Hides all the elements specified.</p><p>Use the spread operator (<code>...</code>) and <code>Array.forEach()</code> to apply <code>display: none</code> to each element specified.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">hide</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>el<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>el<span class="token punctuation">].</span><span class="token function">forEach</span><span class="token punctuation">(</span>e <span class="token operator">=></span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">));</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">hide</span><span class="token punctuation">(</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">));</span> <span class="token comment">// Hides all <img> elements on the page</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="httpsredirect" class="section double-padded">httpsRedirect</h3><div class="section double-padded"><p>Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history.</p><p>Use <code>location.protocol</code> to get the protocol currently being used. If it's not HTTPS, use <code>location.replace()</code> to replace the existing page with the HTTPS version of the page. Use <code>location.href</code> to get the full address, split it with <code>String.split()</code> and remove the protocol part of the URL.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">httpsRedirect</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>location<span class="token punctuation">.</span>protocol <span class="token operator">!==</span> <span class="token string">'https:'</span><span class="token punctuation">)</span> location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'https://'</span> <span class="token operator">+</span> location<span class="token punctuation">.</span>href<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'//'</span><span class="token punctuation">)[</span><span class="token number">1</span><span class="token punctuation">]);
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">httpsRedirect</span><span class="token punctuation">();</span> <span class="token comment">// If you are on http://mydomain.com, you are redirected to https://mydomain.com</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="isbrowsertabfocused" class="section double-padded">isBrowserTabFocused</h3><div class="section double-padded"><p>Returns <code>true</code> if the browser tab of the page is focused, <code>false</code> otherwise.</p><p>Use the <code>Document.hidden</code> property, introduced by the Page Visibility API to check if the browser tab of the page is visible or hidden.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">isBrowserTabFocused</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=> !</span>document<span class="token punctuation">.</span>hidden<span class="token punctuation">;</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">isBrowserTabFocused</span><span class="token punctuation">();</span> <span class="token comment">// true</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="nodelisttoarray" class="section double-padded">nodeListToArray</h3><div class="section double-padded"><p>Converts a <code>NodeList</code> to an array.</p><p>Use <code>Array.prototype.slice()</code> and <code>Function.prototype.call()</code> to convert a <code>NodeList</code> to an array.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">nodeListToArray</span> <span class="token operator">=</span> nodeList <span class="token operator">=></span> Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>slice<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>nodeList<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">nodeListToArray</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>childNodes<span class="token punctuation">);</span> <span class="token comment">// [ <!DOCTYPE html>, html ]</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="observemutations" class="section double-padded">observeMutations<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Returns a new MutationObserver and runs the provided callback for each mutation on the specified element.</p><p>Use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code></a> to observe mutations on the given element. Use <code>Array.forEach()</code> to run the callback for each mutation that is observed. Omit the third argument, <code>options</code>, to use the default <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit">options</a> (all <code>true</code>).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">observeMutations</span> <span class="token operator">=</span> <span class="token punctuation">(</span>element<span class="token punctuation">,</span> callback<span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> observer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MutationObserver</span><span class="token punctuation">(</span>mutations <span class="token operator">=></span> mutations<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>m <span class="token operator">=></span> <span class="token function">callback</span><span class="token punctuation">(</span>m<span class="token punctuation">)));</span>
|
||
observer<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>
|
||
element<span class="token punctuation">,</span>
|
||
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(
|
||
{</span>
|
||
childList<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
attributes<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
attributeOldValue<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
characterData<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
characterDataOldValue<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
subtree<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||
<span class="token punctuation">},</span>
|
||
options
|
||
<span class="token punctuation">)
|
||
);</span>
|
||
<span class="token keyword">return</span> observer<span class="token punctuation">;
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token function">observeMutations</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> console<span class="token punctuation">.</span>log<span class="token punctuation">);</span> <span class="token comment">// Logs all mutations that happen on the page</span>
|
||
obs<span class="token punctuation">.</span><span class="token function">disconnect</span><span class="token punctuation">();</span> <span class="token comment">// Disconnects the observer and stops logging mutations on the page</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="off" class="section double-padded">off</h3><div class="section double-padded"><p>Removes an event listener from an element.</p><p>Use <code>EventTarget.removeEventListener()</code> to remove an event listener from an element. Omit the fourth argument <code>opts</code> to use <code>false</code> or specify it based on the options used when the event listener was added.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">off</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> evt<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> opts <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token operator">=></span> el<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>evt<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> opts<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'!'</span><span class="token punctuation">);</span>
|
||
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">);</span>
|
||
<span class="token function">off</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">);</span> <span class="token comment">// no longer logs '!' upon clicking on the page</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="on" class="section double-padded">on</h3><div class="section double-padded"><p>Adds an event listener to an element with the ability to use event delegation.</p><p>Use <code>EventTarget.addEventListener()</code> to add an event listener to an element. If there is a <code>target</code> property supplied to the options object, ensure the event target matches the target specified and then invoke the callback by supplying the correct <code>this</code> context. Returns a reference to the custom delegator function, in order to be possible to use with <a href="#off"><code>off</code></a>. Omit <code>opts</code> to default to non-delegation behavior and event bubbling.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">on</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> evt<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> opts <span class="token operator">=</span> <span class="token punctuation">{})</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">delegatorFn</span> <span class="token operator">=</span> e <span class="token operator">=></span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span>opts<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token operator">&&</span> fn<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">,</span> e<span class="token punctuation">);</span>
|
||
el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>evt<span class="token punctuation">,</span> opts<span class="token punctuation">.</span>target <span class="token operator">?</span> delegatorFn <span class="token punctuation">:</span> fn<span class="token punctuation">,</span> opts<span class="token punctuation">.</span>options <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>opts<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token keyword">return</span> delegatorFn<span class="token punctuation">;
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'!'</span><span class="token punctuation">);</span>
|
||
<span class="token function">on</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">);</span> <span class="token comment">// logs '!' upon clicking the body</span>
|
||
<span class="token function">on</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">, {</span> target<span class="token punctuation">:</span> <span class="token string">'p'</span> <span class="token punctuation">});</span> <span class="token comment">// logs '!' upon clicking a `p` element child of the body</span>
|
||
<span class="token function">on</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> fn<span class="token punctuation">, {</span> options<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">});</span> <span class="token comment">// use capturing instead of bubbling</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="onuserinputchange" class="section double-padded">onUserInputChange<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Run the callback whenever the user input type changes (<code>mouse</code> or <code>touch</code>). Useful for enabling/disabling code depending on the input device. This process is dynamic and works with hybrid devices (e.g. touchscreen laptops).</p><p>Use two event listeners. Assume <code>mouse</code> input initially and bind a <code>touchstart</code> event listener to the document. On <code>touchstart</code>, add a <code>mousemove</code> event listener to listen for two consecutive <code>mousemove</code> events firing within 20ms, using <code>performance.now()</code>. Run the callback with the input type as an argument in either of these situations.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">onUserInputChange</span> <span class="token operator">=</span> callback <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> type <span class="token operator">=</span> <span class="token string">'mouse'</span><span class="token punctuation">,</span>
|
||
lastTime <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">mousemoveHandler</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> now <span class="token operator">=</span> performance<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">();</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>now <span class="token operator">-</span> lastTime <span class="token operator"><</span> <span class="token number">20</span><span class="token punctuation">)
|
||
(</span>type <span class="token operator">=</span> <span class="token string">'mouse'</span><span class="token punctuation">),</span> <span class="token function">callback</span><span class="token punctuation">(</span>type<span class="token punctuation">),</span> document<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'mousemove'</span><span class="token punctuation">,</span> mousemoveHandler<span class="token punctuation">);</span>
|
||
lastTime <span class="token operator">=</span> now<span class="token punctuation">;
|
||
};</span>
|
||
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'touchstart'</span><span class="token punctuation">, ()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'touch'</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;
|
||
(</span>type <span class="token operator">=</span> <span class="token string">'touch'</span><span class="token punctuation">),</span> <span class="token function">callback</span><span class="token punctuation">(</span>type<span class="token punctuation">),</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'mousemove'</span><span class="token punctuation">,</span> mousemoveHandler<span class="token punctuation">);
|
||
});
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">onUserInputChange</span><span class="token punctuation">(</span>type <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'The user is now using'</span><span class="token punctuation">,</span> type<span class="token punctuation">,</span> <span class="token string">'as an input method.'</span><span class="token punctuation">);
|
||
});</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="prefix" class="section double-padded">prefix</h3><div class="section double-padded"><p>Returns the prefixed version (if necessary) of a CSS property that the browser supports.</p><p>Use <code>Array.findIndex()</code> on an array of vendor prefix strings to test if <code>document.body</code> has one of them defined in its <code>CSSStyleDeclaration</code> object, otherwise return <code>null</code>. Use <code>String.charAt()</code> and <code>String.toUpperCase()</code> to capitalize the property, which will be appended to the vendor prefix string.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">prefix</span> <span class="token operator">=</span> prop <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> capitalizedProp <span class="token operator">=</span> prop<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">).</span><span class="token function">toUpperCase</span><span class="token punctuation">()</span> <span class="token operator">+</span> prop<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">const</span> prefixes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">''</span><span class="token punctuation">,</span> <span class="token string">'webkit'</span><span class="token punctuation">,</span> <span class="token string">'moz'</span><span class="token punctuation">,</span> <span class="token string">'ms'</span><span class="token punctuation">,</span> <span class="token string">'o'</span><span class="token punctuation">];</span>
|
||
<span class="token keyword">const</span> i <span class="token operator">=</span> prefixes<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span>
|
||
prefix <span class="token operator">=></span> <span class="token keyword">typeof</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>style<span class="token punctuation">[</span>prefix <span class="token operator">?</span> prefix <span class="token operator">+</span> capitalizedProp <span class="token punctuation">:</span> prop<span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token string">'undefined'</span>
|
||
<span class="token punctuation">);</span>
|
||
<span class="token keyword">return</span> i <span class="token operator">!== -</span><span class="token number">1</span> <span class="token operator">?</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> prop <span class="token punctuation">:</span> prefixes<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">+</span> capitalizedProp<span class="token punctuation">) :</span> <span class="token keyword">null</span><span class="token punctuation">;
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">prefix</span><span class="token punctuation">(</span><span class="token string">'appearance'</span><span class="token punctuation">);</span> <span class="token comment">// 'appearance' on a supported browser, otherwise 'webkitAppearance', 'mozAppearance', 'msAppearance' or 'oAppearance'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="recordanimationframes" class="section double-padded">recordAnimationFrames</h3><div class="section double-padded"><p>Invokes the provided callback on each animation frame.</p><p>Use recursion. Provided that <code>running</code> is <code>true</code>, continue invoking <code>window.requestAnimationFrame()</code> which invokes the provided callback. Return an object with two methods <code>start</code> and <code>stop</code> to allow manual control of the recording. Omit the second argument, <code>autoStart</code>, to implicitly call <code>start</code> when the function is invoked.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">recordAnimationFrames</span> <span class="token operator">=</span> <span class="token punctuation">(</span>callback<span class="token punctuation">,</span> autoStart <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> running <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
raf<span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">stop</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
running <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||
<span class="token function">cancelAnimationFrame</span><span class="token punctuation">(</span>raf<span class="token punctuation">);
|
||
};</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">start</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
running <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||
<span class="token function">run</span><span class="token punctuation">();
|
||
};</span>
|
||
<span class="token keyword">const</span> <span class="token function-variable function">run</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
raf <span class="token operator">=</span> <span class="token function">requestAnimationFrame</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token function">callback</span><span class="token punctuation">();</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>running<span class="token punctuation">)</span> <span class="token function">run</span><span class="token punctuation">();
|
||
});
|
||
};</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>autoStart<span class="token punctuation">)</span> <span class="token function">start</span><span class="token punctuation">();</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span> start<span class="token punctuation">,</span> stop <span class="token punctuation">};
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">cb</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Animation frame fired'</span><span class="token punctuation">);</span>
|
||
<span class="token keyword">const</span> recorder <span class="token operator">=</span> <span class="token function">recordAnimationFrames</span><span class="token punctuation">(</span>cb<span class="token punctuation">);</span> <span class="token comment">// logs 'Animation frame fired' on each animation frame</span>
|
||
recorder<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">();</span> <span class="token comment">// stops logging</span>
|
||
recorder<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">();</span> <span class="token comment">// starts again</span>
|
||
<span class="token keyword">const</span> recorder2 <span class="token operator">=</span> <span class="token function">recordAnimationFrames</span><span class="token punctuation">(</span>cb<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">);</span> <span class="token comment">// `start` needs to be explicitly called to begin recording frames</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="redirect" class="section double-padded">redirect</h3><div class="section double-padded"><p>Redirects to a specified URL.</p><p>Use <code>window.location.href</code> or <code>window.location.replace()</code> to redirect to <code>url</code>. Pass a second argument to simulate a link click (<code>true</code> - default) or an HTTP redirect (<code>false</code>).</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">redirect</span> <span class="token operator">=</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> asLink <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||
asLink <span class="token operator">?</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> url<span class="token punctuation">) :</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>url<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">redirect</span><span class="token punctuation">(</span><span class="token string">'https://google.com'</span><span class="token punctuation">);</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="runasync" class="section double-padded">runAsync<mark class="tag">advanced</mark></h3><div class="section double-padded"><p>Runs a function in a separate thread by using a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Web Worker</a>, allowing long running functions to not block the UI.</p><p>Create a new <code>Worker</code> using a <code>Blob</code> object URL, the contents of which should be the stringified version of the supplied function. Immediately post the return value of calling the function back. Return a promise, listening for <code>onmessage</code> and <code>onerror</code> events and resolving the data posted back from the worker, or throwing an error.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">runAsync</span> <span class="token operator">=</span> fn <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> worker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Worker</span><span class="token punctuation">(</span>
|
||
<span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">([</span><span class="token template-string"><span class="token string">`postMessage((</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fn<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)());`</span></span><span class="token punctuation">]), {</span>
|
||
type<span class="token punctuation">:</span> <span class="token string">'application/javascript; charset=utf-8'</span>
|
||
<span class="token punctuation">})
|
||
);</span>
|
||
<span class="token keyword">return new</span> <span class="token class-name">Promise</span><span class="token punctuation">((</span>res<span class="token punctuation">,</span> rej<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
worker<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token punctuation">({</span> data <span class="token punctuation">})</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token function">res</span><span class="token punctuation">(</span>data<span class="token punctuation">),</span> worker<span class="token punctuation">.</span><span class="token function">terminate</span><span class="token punctuation">();
|
||
};</span>
|
||
worker<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> err <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token function">rej</span><span class="token punctuation">(</span>err<span class="token punctuation">),</span> worker<span class="token punctuation">.</span><span class="token function">terminate</span><span class="token punctuation">();
|
||
};
|
||
});
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">longRunningFunction</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">1000</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">) {</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator"><</span> <span class="token number">700</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">) {</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> k <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> k <span class="token operator"><</span> <span class="token number">300</span><span class="token punctuation">;</span> k<span class="token operator">++</span><span class="token punctuation">) {</span>
|
||
result <span class="token operator">=</span> result <span class="token operator">+</span> i <span class="token operator">+</span> j <span class="token operator">+</span> k<span class="token punctuation">;
|
||
}
|
||
}
|
||
}</span>
|
||
<span class="token keyword">return</span> result<span class="token punctuation">;
|
||
};</span>
|
||
<span class="token comment">/*
|
||
NOTE: Since the function is running in a different context, closures are not supported.
|
||
The function supplied to `runAsync` gets stringified, so everything becomes literal.
|
||
All variables and functions must be defined inside.
|
||
*/</span>
|
||
<span class="token function">runAsync</span><span class="token punctuation">(</span>longRunningFunction<span class="token punctuation">).</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">);</span> <span class="token comment">// 209685000000</span>
|
||
<span class="token function">runAsync</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token number">10</span> <span class="token operator">**</span> <span class="token number">3</span><span class="token punctuation">).</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">);</span> <span class="token comment">// 1000</span>
|
||
<span class="token keyword">let</span> outsideVariable <span class="token operator">=</span> <span class="token number">50</span><span class="token punctuation">;</span>
|
||
<span class="token function">runAsync</span><span class="token punctuation">(()</span> <span class="token operator">=></span> <span class="token keyword">typeof</span> outsideVariable<span class="token punctuation">).</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">);</span> <span class="token comment">// 'undefined'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="scrolltotop" class="section double-padded">scrollToTop</h3><div class="section double-padded"><p>Smooth-scrolls to the top of the page.</p><p>Get distance from top using <code>document.documentElement.scrollTop</code> or <code>document.body.scrollTop</code>. Scroll by a fraction of the distance from the top. Use <code>window.requestAnimationFrame()</code> to animate the scrolling.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">scrollToTop</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> c <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>c <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">) {</span>
|
||
window<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>scrollToTop<span class="token punctuation">);</span>
|
||
window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> c <span class="token operator">-</span> c <span class="token operator">/</span> <span class="token number">8</span><span class="token punctuation">);
|
||
}
|
||
};</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">scrollToTop</span><span class="token punctuation">();</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="setstyle" class="section double-padded">setStyle</h3><div class="section double-padded"><p>Sets the value of a CSS rule for the specified element.</p><p>Use <code>element.style</code> to set the value of the CSS rule for the specified element to <code>val</code>.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">setStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> ruleName<span class="token punctuation">,</span> val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span>style<span class="token punctuation">[</span>ruleName<span class="token punctuation">]</span> <span class="token operator">=</span> val<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">setStyle</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">),</span> <span class="token string">'font-size'</span><span class="token punctuation">,</span> <span class="token string">'20px'</span><span class="token punctuation">);</span> <span class="token comment">// The first <p> element on the page will have a font-size of 20px</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="show" class="section double-padded">show</h3><div class="section double-padded"><p>Shows all the elements specified.</p><p>Use the spread operator (<code>...</code>) and <code>Array.forEach()</code> to clear the <code>display</code> property for each element specified.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">show</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">...</span>el<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>el<span class="token punctuation">].</span><span class="token function">forEach</span><span class="token punctuation">(</span>e <span class="token operator">=></span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">));</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">show</span><span class="token punctuation">(</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">));</span> <span class="token comment">// Shows all <img> elements on the page</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="smoothscroll" class="section double-padded">smoothScroll</h3><div class="section double-padded"><p>Smoothly scrolls the element on which it's called into the visible area of the browser window.</p><p>Use <code>.scrollIntoView</code> method to scroll the element. Pass <code>{ behavior: 'smooth' }</code> to <code>.scrollIntoView</code> so it scrolls smoothly.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">smoothScroll</span> <span class="token operator">=</span> element <span class="token operator">=></span>
|
||
document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>element<span class="token punctuation">).</span><span class="token function">scrollIntoView</span><span class="token punctuation">({</span>
|
||
behavior<span class="token punctuation">:</span> <span class="token string">'smooth'</span>
|
||
<span class="token punctuation">});</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">smoothScroll</span><span class="token punctuation">(</span><span class="token string">'#fooBar'</span><span class="token punctuation">);</span> <span class="token comment">// scrolls smoothly to the element with the id fooBar</span>
|
||
<span class="token function">smoothScroll</span><span class="token punctuation">(</span><span class="token string">'.fooBar'</span><span class="token punctuation">);</span> <span class="token comment">// scrolls smoothly to the first element with a class of fooBar</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="toggleclass" class="section double-padded">toggleClass</h3><div class="section double-padded"><p>Toggle a class for an element.</p><p>Use <code>element.classList.toggle()</code> to toggle the specified class for the element.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">toggleClass</span> <span class="token operator">=</span> <span class="token punctuation">(</span>el<span class="token punctuation">,</span> className<span class="token punctuation">)</span> <span class="token operator">=></span> el<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span>className<span class="token punctuation">);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">toggleClass</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'p.special'</span><span class="token punctuation">),</span> <span class="token string">'special'</span><span class="token punctuation">);</span> <span class="token comment">// The paragraph will not have the 'special' class anymore</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><div class="card fluid"><h3 id="uuidgeneratorbrowser" class="section double-padded">UUIDGeneratorBrowser</h3><div class="section double-padded"><p>Generates a UUID in a browser.</p><p>Use <code>crypto</code> API to generate a UUID, compliant with <a href="https://www.ietf.org/rfc/rfc4122.txt">RFC4122</a> version 4.</p><pre class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">UUIDGeneratorBrowser</span> <span class="token operator">=</span> <span class="token punctuation">()</span> <span class="token operator">=></span>
|
||
<span class="token punctuation">([</span><span class="token number">1e7</span><span class="token punctuation">]</span> <span class="token operator">+ -</span><span class="token number">1e3</span> <span class="token operator">+ -</span><span class="token number">4e3</span> <span class="token operator">+ -</span><span class="token number">8e3</span> <span class="token operator">+ -</span><span class="token number">1e11</span><span class="token punctuation">).</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[018]/g</span><span class="token punctuation">,</span> c <span class="token operator">=></span>
|
||
<span class="token punctuation">(</span>c <span class="token operator">^</span> <span class="token punctuation">(</span>crypto<span class="token punctuation">.</span><span class="token function">getRandomValues</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">))[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&</span> <span class="token punctuation">(</span><span class="token number">15</span> <span class="token operator">>></span> <span class="token punctuation">(</span>c <span class="token operator">/</span> <span class="token number">4</span><span class="token punctuation">)))).</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)
|
||
);</span>
|
||
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">UUIDGeneratorBrowser</span><span class="token punctuation">();</span> <span class="token comment">// '7982fcfe-5721-4632-bede-6000885be57d'</span>
|
||
</pre><button class="primary clipboard-copy">📋 Copy to clipboard</button></div></div><button class="scroll-to-top">↑</button><footer><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br><img src="" style="vertical-align:text-bottom;padding-right:8px" width="20px" height="20px">Sponsored by <a href="https://www.digitalocean.com">DigitalOcean</a>.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> are licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a> license.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.<br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></footer></main></div></body></html> |