<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            height: 100%;
            font-family: 'Helvetica Neue', Arial;
            font-size: 16px;
        }

        .form-container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            width: 1000px;
            max-width: 1000px;
            height: 500px;
            margin: 0 auto;
            padding: 2em 0em;
        }

        .form-content {
            width: 550px;
            height: auto;
            display: flex;
            flex-direction: column;
        }

        .form-content h1 {
            align-self: center;
            text-align: center;
        }

        input {
            width: 100%;
            padding: .5em;
            margin-bottom: 1em;
            border: 2px solid #582C83;
            border-radius: 6px;
        }

        input[type="text"] {
            outline: none;
        }

        input:focus {
            border: 2px solid #8246AF;
        }

        #form-buttons {
            display: flex;
            justify-content: flex-end;
        }

        #form-buttons button {
            color: #ffffff;
            font-size: 16px;
            background-color: #582C83;
            border: 2px solid #582C83;
            border-radius: 6px;
            padding: 0.5em 1.33em;
            margin-left: 1em;
            box-sizing: border-box;
            text-align: center;
            transition: .35s ease-in-out;
        }

        #form-buttons #reset-button {
            color: #582C83;
            border-color: #582C83;
            background-color: #fff;
        }

        #form-buttons #submit-button:hover {
            color: #fff;
            background-color: #8246AF;
            border-color: #8246AF;
        }

        #form-buttons #reset-button:hover {
            color: #582C83;
            background-color: #E7E8EA;
        }

        #display-url {
            display: none;
            margin-top: 50px;
            flex-direction: column;
        }

        #copy-button {
            font-size: 16px;
            color: #582C83;
            padding: 0.5em 1.33em;
            text-decoration: underline;
            background-color: #E7E8EA;
            border: 2px solid #D6D8DA;
            border-radius: 6px;
            width: fit-content;
            align-self: end;
            text-decoration: none;
            transition: .15s ease-in;
        }

        #copy-button:hover {
            text-decoration: underline;
            transform: scale(1.05);
        }

        #copy-message {
            visibility: hidden;
            align-self: center;
            transition: .15 ease-in;
        }

        #cache-info {
            margin: 3em 0em;
        }

        #cache-info p:first-child {
            font-weight: bold;
        }

        #cache-info p a {
            font-weight: bold;
        }

        @media only screen and (max-width: 969px) {
            .form-container {
                width: 550px;
                max-width: 500px;
                height: 500px;
                margin: 0 auto;
                padding: 2em 0em;
            }

            .form-content {
                width: 350px;
                height: auto;
                display: flex;
                flex-direction: column;
            }

            #cache-info {
                margin: 1em 0em;
            }
        }
    </style>
</head>

<body>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9BRL2EP1PL"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'G-9BRL2EP1PL');
    </script>

    <div class="form-container">
        <div class="form-content">
            <h1>AEM URL Generator</h1>
            <form onsubmit="jsFunction();return false">
                <label>Paste the link to the file<input type="text" id="link-from-AEM" placeholder="https://author-p74555-e653308.adobeaemcloud.com/assetdetails.html/content/dam/ad-reviewed-materials/adv/adv1100s/ADV1100%20Brokerage%20UW%20Guidelines%20(BR).pdf"></label>
                <br>
                <div id="form-buttons">
                    <button type="submit" id="submit-button">Submit</button>
                    <button type="reset" id="reset-button">Reset</button>
                </div>
            </form>

            <div id="display-url">
                <label>Generated URL: <input id="final-url" readonly /></label>
                <button id="copy-button">Click to Copy</button>
            </div>
            <p id="copy-message">URL Copied!</p>
            <div id="cache-info">
                <p>Is the generated link not showing the most recent version of the file?</p>
                <p><a href="https://author-p74555-e653308.adobeaemcloud.com/mnt/overlay/dam/gui/content/s7dam/cdninvalidation/cdninvalidationwizard.html" target="_blank" rel="noopener">Visit this page<span><svg style="padding-left:.25em;" id="b" xmlns="http://www.w3.org/2000/svg" width="13" length="auto" viewBox="0 0 512.1 512">
                                <g id="c">
                                    <path d="m352,0c-12.9,0-24.6,7.8-29.6,19.8-5,12-2.2,25.7,6.9,34.9l41.4,41.3-169.3,169.4c-12.5,12.5-12.5,32.8,0,45.3s32.8,12.5,45.3,0l169.3-169.4,41.4,41.4c9.2,9.2,22.9,11.9,34.9,6.9s19.8-16.6,19.8-29.6V32c0-17.7-14.3-32-32-32h-128.1ZM80,32C35.8,32,0,67.8,0,112v320c0,44.2,35.8,80,80,80h320c44.2,0,80-35.8,80-80v-112c0-17.7-14.3-32-32-32s-32,14.3-32,32v112c0,8.8-7.2,16-16,16H80c-8.8,0-16-7.2-16-16V112c0-8.8,7.2-16,16-16h112c17.7,0,32-14.3,32-32s-14.3-32-32-32h-112Z" style="fill:currentColor;"></path>
                                </g>
                            </svg></span></a> and enter the generated link to clear the cache and refresh AEM with the
                    most up-to-date version of the file.</p>
            </div>
        </div>

    </div>

    <script>
        const submit_button = document.getElementById("submit-button");
        const reset_button = document.getElementById("reset-button");
        const copy_url_button = document.getElementById("copy-button");
        // listen for submit button to be clicked
        submit_button.addEventListener("click", (event) => {
            // base URL for assets folder in AEM
            var base_URL = "https://assets.fglife.com/is/content/fglife/";
            // get the three input fields and access their string values
            var link = document.getElementById("link-from-AEM").value;
            // the AEM URL that will link to the material
            var final_URL = "";
            // split the provided link into two parts and grab the latter
            var second_part = link.split('content/dam/')[1];
            if (second_part.split('&_charset_=utf8')) {
                second_part = second_part.split('&_charset_=utf8')[0];
            }
            // combine all components to form the final URL
            function createURL() {
                final_URL += base_URL + second_part;
                return final_URL;
            }
            createURL();
            console.log(final_URL);
            document.getElementById("final-url").value = final_URL;
            document.getElementById("display-url").style.display = "flex";
            event.preventDefault();
        });
        reset_button.addEventListener("click", () => {
            document.getElementById("final-url").value = "";
            document.getElementById("display-url").style.display = "none";
            document.getElementById("copy-message").style.display = "none";
        });
        copy_url_button.addEventListener("click", () => {
            var copy_text = document.getElementById("final-url");
            copy_text.select();
            navigator.clipboard.writeText(copy_text.value).then(() => {
                    document.getElementById("copy-message").style.visibility = "visible";
                    setTimeout(function() {
                        document.getElementById("copy-message").style.visibility = "hidden";
                    }, 5000);
                })
                .catch(() => {
                    alert("Something went wrong");
                })
        });
    </script>
</body>

</html>

No notes defined.