46 lines
1.9 KiB
JavaScript
46 lines
1.9 KiB
JavaScript
|
HTMLElement.prototype.wrap = function (wrapper) {
|
||
|
|
this.parentNode.insertBefore(wrapper, this);
|
||
|
|
this.parentNode.removeChild(this);
|
||
|
|
wrapper.appendChild(this);
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('DOMContentLoaded', () => {
|
||
|
|
document.querySelectorAll('figure.highlight').forEach(element => {
|
||
|
|
const box = document.createElement('div');
|
||
|
|
element.wrap(box);
|
||
|
|
box.classList.add('highlight-container');
|
||
|
|
box.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard"></i></div>');
|
||
|
|
var button = element.parentNode.querySelector('.copy-btn');
|
||
|
|
button.addEventListener('click', event => {
|
||
|
|
var target = event.currentTarget;
|
||
|
|
var code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n');
|
||
|
|
var ta = document.createElement('textarea');
|
||
|
|
ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
|
||
|
|
ta.style.position = 'absolute';
|
||
|
|
ta.style.opacity = '0';
|
||
|
|
ta.readOnly = true;
|
||
|
|
ta.value = code;
|
||
|
|
document.body.append(ta);
|
||
|
|
const selection = document.getSelection();
|
||
|
|
const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
|
||
|
|
ta.select();
|
||
|
|
ta.setSelectionRange(0, code.length);
|
||
|
|
ta.readOnly = false;
|
||
|
|
var result = document.execCommand('copy');
|
||
|
|
target.querySelector('i').className = result ? 'fa fa-check' : 'fa fa-times';
|
||
|
|
ta.blur(); // For iOS
|
||
|
|
target.blur();
|
||
|
|
if (selected) {
|
||
|
|
selection.removeAllRanges();
|
||
|
|
selection.addRange(selected);
|
||
|
|
}
|
||
|
|
document.body.removeChild(ta);
|
||
|
|
});
|
||
|
|
button.addEventListener('mouseleave', event => {
|
||
|
|
setTimeout(() => {
|
||
|
|
event.target.querySelector('i').className = 'fa fa-clipboard';
|
||
|
|
}, 300);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|