KartraPageSectionRescue.js

/*
 * Kartra Page Section Rescue
 * Author: Brian Katzung <[email protected]>
 * Copyright 2021 by Brian Katzung and Kappa Computer Solutions, LLC
 *
 * This software is provided on a strictly AS-IS basis with no warranty
 * of any kind.
 *
 * Open your published Kartra page, then add the rescue overlay by
 * pasting the following into the developer console at the ">" prompt:
 *
 * $('<script src="URL of script">').appendTo('head')
 */
(function () {
    let sections = $('#page_background_color > .content .container, #page_background_color > .content .container-fluid'), panel = document.createElement('div'), links = [], html = [], css = $('#pagesCustomCSS').html();

    function onClick (ev) {
    let sect = ev.target.dataset.section, ok = () => $(ev.target).addClass('current');

    $('a.current').removeClass('current');
    if ('css' === sect) {
        navigator.clipboard.writeText(css).then(ok);
    } else {
        navigator.clipboard.writeText(sections[parseInt(sect)].innerHTML).then(ok);
    }
    }

    for (let i = 0; i < sections.length; ++i) {
    let $sect = $(sections[i]), $cont = $sect.closest('.content'), cs = $cont[0].style, $bgc = $cont.find('.background_changer'), bs = $bgc[0].style;
    links.push(`<li><a href='javascript:void(0)' data-section="${i}">Section ${i + 1}</a><br><span class='now'>background-color: ${cs.backgroundColor}</span> <span class='now'>padding-top: ${cs.paddingTop}</span> <span class='now'>padding-bottom: ${cs.paddingBottom}</span><br>background-image: ${bs.backgroundImage}<br><span class='now'>filter: ${getComputedStyle($bgc[0]).filter}</span> <span class='now'>opacity: ${bs.opacity}</span></li>`);
    }
    panel.id = 'rescue';
    html.push(`<style>
#rescue { position: absolute; top: 0; left: 0; padding: 10px; max-width: 800px; background-color: #fff; border: solid 1px #ccc; border-radius: 10px; }
#rescue a.current { font-weight: bold; color: #f00; }
#rescue h1, #rescue h2, #rescue p { margin-bottom: 0.5em; }
#rescue .now { white-space: nowrap; }
</style>
<h1>Kartra Page Section Rescue Panel</h2>
<p>To recreate the content of this page, create a new Kartra page with ${sections.length} empty section${(sections.length > 1) ? 's': ''} (or, preferably, a header template or footer template for those sections). Click on each section link below to copy its content to the clipboard. Then paste it into the corresponding section of the new page using the Kartra section source code editor.</p>
<p>Details under each section link can be used to assist in manually restoring section settings using the section configuration editor, as they do not get copied.</p>
<p>NOTE: Rescued pages will NOT be identical to the original and may require significant additional editing.</p>
<p>A bold red link represents the most recently copied content.</p>
`);
    if (css.match(/\S/)) html.push("<p><a href='javascript:void(0)' data-section='css'>Page Custom CSS</a></p>");
    html.push(`<h2>Sections</h2><ul>${links.join('')}</ul>`);
    panel.innerHTML = html.join('');

    $(panel).appendTo(document.body);
    $('#rescue a').on('click', onClick);
})();