<!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.