@michaellee2245! This is what I’ve worked out, Here is the complete function with an extra snippet inside the copyClip function.
<!-- AJAX for loading pages in lightbox modal -->
<script>
/*function load_js() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@finsweet/attributes-copyclip@1/copyclip.js';
head.appendChild(script);
}*/
// AJAX MODAL POWER-UP
window.addEventListener('DOMContentLoaded', (event) => {
// ajaxmodal component
function adjaxModal() {
let lightbox = $("[tr-ajaxmodal-element='lightbox']");
let lightboxClose = $("[tr-ajaxmodal-element='lightbox-close']").attr(
'aria-label',
'Close Modal'
);
let lightboxModal = $("[tr-ajaxmodal-element='lightbox-modal']");
let cmsLink = "[tr-ajaxmodal-element='cms-link']";
let cmsPageContent = "[tr-ajaxmodal-element='cms-page-content']";
let initialPageTitle = document.title;
let initialPageUrl = window.location.href;
let focusedLink;
function copyClip() {
document.querySelectorAll('[fs-copyclip-element="click"]').forEach(function (element) {
element.addEventListener('click', function () {
let targetElement = document.querySelector('[fs-copyclip-element="copy-sibling"]');
let textToCopy = targetElement.firstChild.textContent;
navigator.clipboard.writeText(textToCopy).then(
function () {
console.log('Text copied to clipboard');
},
function (err) {
console.error('Failed to copy text: ', err);
}
);
});
});
}
function updatePageInfo(newTitle, newUrl) {
lightboxModal.empty();
document.title = newTitle;
window.history.replaceState({}, '', newUrl);
}
let tl = gsap.timeline({
paused: true,
onReverseComplete: () => {
focusedLink.focus();
updatePageInfo(initialPageTitle, initialPageUrl);
},
onComplete: () => {
lightboxClose.focus();
},
});
tl.set('.navigation', { zIndex: 1 });
tl.set('body', { overflow: 'hidden' });
tl.set(lightbox, { display: 'block', onComplete: () => lightboxModal.scrollTop(0) });
tl.from(lightbox, { opacity: 0, duration: 0.2 });
tl.from(lightboxModal, { y: '5em', duration: 0.2 }, '<');
function keepFocusWithinLightbox() {
let lastFocusableChild = lightbox
.find("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")
.not(':disabled')
.not('[aria-hidden=true]')
.last();
lastFocusableChild.on('focusout', function () {
lightboxClose.focus();
});
}
function lightboxReady() {
//load_js();
copyClip(); // Function to copy the page's url to clipboard
let mm = gsap.matchMedia();
mm.add('(min-width: 991px)', () => {
let share = gsap.timeline({ paused: true });
share
.to('.gallery_copy-link-btn', {
width: '100%',
ease: 'power2.out',
duration: 0.3,
})
.to(
'.gallery_copy-text',
{
display: 'block',
opacity: 1,
duration: 0.1,
ease: 'power2.inOut',
delay: 0.25,
},
0
);
$('.gallery_copy-btn').on('mouseenter', function () {
share.play();
});
$('.gallery_copy-btn').on('mouseleave', function () {
share.reverse();
});
});
}
$(document).on('click', cmsLink, function (e) {
focusedLink = $(this);
initialPageUrl = window.location.href;
e.preventDefault();
let linkUrl = $(this).attr('href');
$.ajax({
url: linkUrl,
success: function (response) {
let cmsContent = $(response).find(cmsPageContent);
let cmsTitle = $(response).filter('title').text();
let cmsUrl = window.location.origin + linkUrl;
updatePageInfo(cmsTitle, cmsUrl);
lightboxModal.append(cmsContent);
tl.play();
keepFocusWithinLightbox();
lightboxReady();
},
});
});
lightboxClose.on('click', function () {
tl.reverse();
});
$(document).on('keydown', function (e) {
if (e.key === 'Escape') tl.reverse();
});
$(document).on('click', lightbox, function (e) {
if (!$(e.target).is(lightbox.find('*'))) tl.reverse();
});
}
adjaxModal();
});
</script>
This should work as is with your setup and should not interfere with the template page setup.
Let me know if this is what you were looking for!
