0c575a4d68
Updated injectors to be simpler and easier to use. Updated styling to deal with rendering problems and make the loading faster.
99 lines
6.6 KiB
HTML
99 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="./mini.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
|
<script>
|
|
WebFont.load({
|
|
google: {
|
|
families: ['Roboto:400,400i,500,700,700i', 'Roboto Mono:400,400i,700,700i']
|
|
}
|
|
});
|
|
</script>
|
|
<title>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">
|
|
<link rel="stylesheet" href="prism.css">
|
|
<script>
|
|
const search = (node) => {
|
|
// Hide non-query-matching snippets
|
|
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
|
|
x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none'
|
|
});
|
|
Array.from( node.parentElement.parentElement.children )
|
|
// Filter out the hidden links
|
|
.filter( x => !( x.tagName == 'A' && x.style.display == 'none' ) )
|
|
// set the display for each element based on if it's a H3
|
|
// If it's the last element and an H3, hide it
|
|
// Otherwise if it's and H3 and the next element is an H3, hide it
|
|
// Otherwise display it
|
|
.forEach( ( element, index, source) => {
|
|
element.style.display = (element.tagName == 'H3' && index + 1 == source.length ? 'none' : element.tagName == 'H3' && source[index + 1].tagName == 'H3' ? 'none' : '')
|
|
})
|
|
}
|
|
function loader() {
|
|
clipboard();
|
|
exampleMaker();
|
|
registerClickListener();
|
|
}
|
|
function clipboard() {
|
|
const snippets = document.querySelectorAll(":not(pre) + pre");
|
|
snippets.forEach(snippet => {
|
|
const button = document.createElement("button");
|
|
button.className = 'primary clipboard-copy';
|
|
button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg> Copy to clipboard';
|
|
snippet.parentElement.appendChild(button);
|
|
});
|
|
}
|
|
function exampleMaker() {
|
|
const examples = document.querySelectorAll("pre + pre");
|
|
examples.forEach(el => {
|
|
let label = document.createElement('label');
|
|
label.className = 'collapse';
|
|
label.innerHTML = 'Show examples';
|
|
el.parentNode.insertBefore(label, el);
|
|
});
|
|
}
|
|
function registerClickListener() {
|
|
document.addEventListener('click', function (event) {
|
|
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);
|
|
console.log(textArea.innerText);
|
|
textArea.select();
|
|
document.execCommand("Copy");
|
|
document.body.removeChild(textArea);
|
|
}
|
|
}, false);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="loader()">
|
|
<a href="https://github.com/Chalarangelo/30-seconds-of-code/fork" class="github-corner" aria-label="View source on Github"><svg width="90" height="90" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" 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: 5.5rem;">
|
|
<h1 class="logo" href="https://github.com/Chalarangelo/30-seconds-of-code"><img src="favicon.png" style="height: 4rem;"/><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>
|
|
</h1>
|
|
<label for="doc-drawer-checkbox" class="button drawer-toggle" id="menu-toggle"></label>
|
|
</header>
|
|
<div class="row" style="height: calc(100vh - 5.875rem);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="group">
|
|
<input class="search" type="text" id="searchInput" onkeyup="search(this)">
|
|
<label id="search-label">Search for snippet...</label>
|
|
</div>
|
|
<label for="doc-drawer-checkbox" class="button drawer-close"></label>
|