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

Added toast for copy to clipboard

Browse Source 
Shows a toast message for 2 seconds after copying to clipboard.
This commit is contained in:
Angelos Chalaris
2018-01-04 13:54:42 +02:00
parent 3f355ff235
commit 9341f0aaaa
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/mini/flavor.scss
View File

@ -131,6 +131,9 @@ $_drawer-right: false;
@import 'navigation'; @import 'navigation';
$toast-back-color: #212121;
$mark-back-color-var: '--mrk-b-col'; $mark-back-color-var: '--mrk-b-col';
$mark-fore-color-var: '--mrk-f-col'; $mark-fore-color-var: '--mrk-f-col';
$toast-back-color-var: '--tst-b-col'; $toast-back-color-var: '--tst-b-col';
@ -154,6 +157,12 @@ $_include-collapse: false;
@import 'contextual'; @import 'contextual';
.#{$toast-name} {
bottom: calc(var(#{$universal-margin-var}) / 2);
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
/* /*
Custom elements for contextual background elements, toasts and tooltips. Custom elements for contextual background elements, toasts and tooltips.
*/ */

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

@ -14,17 +14,11 @@
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<script> <script>
const search = (node) => { const search = (node) => {
// Hide non-query-matching snippets
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => { Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none' x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none'
}); });
Array.from( node.parentElement.parentElement.children ) Array.from( node.parentElement.parentElement.children )
// Filter out the hidden links
.filter( x => !( x.tagName == 'A' && x.style.display == 'none' ) ) .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) => { .forEach( ( element, index, source) => {
element.style.display = (element.tagName == 'H3' && index + 1 == source.length ? 'none' : element.tagName == 'H3' && source[index + 1].tagName == 'H3' ? 'none' : '') element.style.display = (element.tagName == 'H3' && index + 1 == source.length ? 'none' : element.tagName == 'H3' && source[index + 1].tagName == 'H3' ? 'none' : '')
}) })
@ -42,10 +36,19 @@
const textArea = document.createElement("textarea"); const textArea = document.createElement("textarea");
textArea.value = text.trim(); textArea.value = text.trim();
document.body.appendChild(textArea); document.body.appendChild(textArea);
console.log(textArea.innerText);
textArea.select(); textArea.select();
document.execCommand("Copy"); document.execCommand("Copy");
document.body.removeChild(textArea); 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);
} }
}, false); }, false);
} }