107 lines
3.3 KiB
JavaScript
107 lines
3.3 KiB
JavaScript
var codeBlockSelector = ".article--content pre";
|
|
var codeBlocks = $(codeBlockSelector);
|
|
|
|
var appendHTML = `
|
|
<div class="code-controls">
|
|
<span class="code-controls-toggle"><span class='cf-icon More'></span></span>
|
|
<ul class="code-control-options">
|
|
<li class='copy-code'><span class='cf-icon Duplicate_New'></span> <span class="message">Copy</span></li>
|
|
<li class='fullscreen-toggle'><span class='cf-icon ExpandB'></span> Fill window</li>
|
|
</ul>
|
|
</div>
|
|
`
|
|
|
|
// Wrap all codeblocks with a new 'codeblock' div
|
|
$(codeBlocks).each(function() {
|
|
$(this).wrap("<div class='codeblock'></div>");
|
|
});
|
|
|
|
// Append code controls to all codeblock divs
|
|
$('.codeblock').append(appendHTML);
|
|
|
|
//////////////////////////// CODE CONTROLS TOGGLING ////////////////////////////
|
|
|
|
// Click outside of the code-controls to close them
|
|
$(document).click(function() {
|
|
$('.code-controls').removeClass('open')
|
|
});
|
|
|
|
// Click the code controls toggle to open code controls
|
|
$('.code-controls-toggle').click(function() {
|
|
$(this).parent('.code-controls').toggleClass('open');
|
|
})
|
|
|
|
// Stop event propagation for clicks inside of the code-controls div
|
|
$('.code-controls').click(function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
/////////////////////////////// COPY TO CLIPBOARD //////////////////////////////
|
|
|
|
// Update button text during lifecycles
|
|
function updateText(element, currentText, newText) {
|
|
let inner = (element)[0].innerHTML;
|
|
inner = inner.replace(currentText, newText)
|
|
|
|
element[0].innerHTML = inner
|
|
}
|
|
|
|
// Trigger copy success state lifecycle
|
|
function copyLifeCycle(element, state) {
|
|
let stateData = ((state === 'success') ? {state: 'success', message: 'Copied!'} : {state: 'failed', message: 'Copy failed!'})
|
|
|
|
updateText(element, 'Copy', stateData.message)
|
|
element.addClass(stateData.state)
|
|
|
|
setTimeout(function() {
|
|
updateText(element, stateData.message, 'Copy');
|
|
element.removeClass(stateData.state)
|
|
}, 2500)
|
|
}
|
|
|
|
// Trigger copy failure state lifecycle
|
|
|
|
$('.copy-code').click(function() {
|
|
let text = $(this).closest('.code-controls').prev('pre')[0].innerText
|
|
|
|
const copyContent = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
copyLifeCycle($(this), 'success')
|
|
} catch (err) {
|
|
copyLifeCycle($(this), 'failed')
|
|
}
|
|
}
|
|
|
|
copyContent()
|
|
})
|
|
|
|
/////////////////////////////// FULL WINDOW CODE ///////////////////////////////
|
|
|
|
/*
|
|
On click, open the fullscreen code modal and append a clone of the selected codeblock.
|
|
Disable scrolling on the body.
|
|
Disable user selection on everything but the fullscreen codeblock.
|
|
*/
|
|
$('.fullscreen-toggle').click(function() {
|
|
var code = $(this).closest('.code-controls').prev('pre').clone();
|
|
|
|
$('#fullscreen-code-placeholder').replaceWith(code[0]);
|
|
$('body').css('overflow', 'hidden');
|
|
$('body > div:not(.fullscreen-code)').css('user-select', 'none');
|
|
$('.fullscreen-code').fadeIn();
|
|
})
|
|
|
|
/*
|
|
On click, close the fullscreen code block.
|
|
Reenable scrolling on the body.
|
|
Reenable user selection on everything.
|
|
Close the modal and replace the code block with the placeholder element.
|
|
*/
|
|
$('.fullscreen-close').click(function() {
|
|
$('body').css('overflow', 'auto');
|
|
$('body > div:not(.fullscreen-code)').css('user-select', '');
|
|
$('.fullscreen-code').fadeOut();
|
|
$('.fullscreen-code pre').replaceWith('<div id="fullscreen-code-placeholder"></div>')
|
|
});
|