andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated web script

Browse Source 
Used emoji for clipboard icons, added persistent scroll to top button with proper smooth scrolling.
This commit is contained in:
Angelos Chalaris
2018-01-09 14:50:18 +02:00
parent 7d9a6ca0d3
commit 28fa5411c4
4 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/mini/flavor.scss
View File

@ -437,3 +437,20 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
.token.entity {
cursor: help;
}
button.scroll-to-top {
border-radius: 100%;
font-size: 1.5rem;
line-height: 1;
box-sizing: border-box;
width: 2.75rem;
height: 2.75rem;
position: fixed;
bottom: 1rem;
right: 2rem;
background: var(#{$back-color-var});
box-shadow: 0 .25rem .25rem 0 rgba(0,0,0,0.125),0 .125rem .125rem -.125rem rgba(0,0,0,0.25);
&:hover, &:focus {
background: var(#{$secondary-back-color-var});
}
}

4
scripts/web.js
View File

@ -169,7 +169,7 @@ try {
.replace(/<\/h3>/g, `${taggedSnippet[1].includes('advanced')?'<mark class="tag">advanced</mark>':''}</h3>`)
.replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
.replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
'<button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard">&nbsp;Copy to clipboard</button>' +
'<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
'</div></div>';
} else {
output += md
@ -185,7 +185,7 @@ try {
.replace(/<\/h3>/g, '</h3><div class="section double-padded">')
.replace(/<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm, (match, p1) => `<pre class="language-js">${Prism.highlight(unescapeHTML(p1), Prism.languages.javascript)}</pre>`)
.replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
'<button class="primary clipboard-copy"><img src="clipboard.svg" alt="clipboard">&nbsp;Copy to clipboard</button>' +
'<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
'</div></div>';
}
}

2
static-parts/index-end.html
View File

@ -1,6 +1,6 @@
<button class="scroll-to-top">&uarr;</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>
<a href="#top"><span style="display: inline-block;float: right;padding-right: 2em;">Back to top</span></a>
</footer>
</main>
</div>

10
static-parts/index-start.html
View File

@ -27,6 +27,13 @@
x.style.display = matchingTags.includes(x.innerText.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 loader() {
registerClickListener();
}
@ -54,6 +61,9 @@
},300);
},1700);
}
else if (event.target.classList.contains('scroll-to-top')){
scrollToTop();
}
}, false);
}
</script>