118 lines
3.5 KiB
JavaScript
118 lines
3.5 KiB
JavaScript
import $ from 'jquery';
|
|
|
|
function initialize() {
|
|
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 {
|
|
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>'
|
|
);
|
|
});
|
|
}
|
|
|
|
export { initialize };
|