334 lines
114 KiB
HTML
334 lines
114 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 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="favicon.png"><link rel="icon" type="image/png" href="favicon.png"><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();
|
||
document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h3')).filter(v => v.innerHTML === 'Browser')[0].offsetTop - 60;
|
||
}
|
||
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" 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="favicon.png" style="height:3.5rem" 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,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,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#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,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,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,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#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><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#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> and <code>document.querySelector()</code> 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>
|
||
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 punctuation">(</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>innerHTML <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>
|
||
</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>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="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>JSON<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="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>
|
||
URL<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/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br/>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br/>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></footer></main></div></body></html> |