Skip to content

Instantly share code, notes, and snippets.

@aloverso

aloverso/test-module.min.js

Created March 26, 2024 20:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aloverso/ccccdce36fad07241f1d5c67cd21d9a4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aloverso/ccccdce36fad07241f1d5c67cd21d9a4 to your computer and use it in GitHub Desktop.
Download ZIP
Test JS module load
Raw
test-module.min.js
function logGoogleEvent(action,label=void 0){"function"==typeof window.gtag&&window.gtag("event",action,{event_category:"Page feedback",event_label:label})}const LANG_TO_CONTENT={en:{ratingPrompt:"Did you find what you were looking for on this page?",ratingPositive:"Yes",ratingNegative:"No",commentPromptPositive:"Great! We're looking for ways to improve this page — what ideas come to mind?",commentPromptNegative:"Sorry to hear that. What were you looking for today?",commentPromptDisclaimer:"Your feedback helps improve this web page. For specific questions about your situation, ",commentPromptDisclaimerLink:"contact us",commentSubmit:"Send feedback",commentSubmitLoading:"Sending...",commentConfirmation:"Thanks for sharing your thoughts!",emailPrompt:"To hear about paid feedback opportunities in the future, join our user testing list.",emailLabel:"Email address",emailSubmit:"Join the list",emailSubmitLoading:"Joining...",errorMessage:"Try again, please. We didn't get your answer because of a technical issue.",emailConfirmation:"Thanks for signing up!"},es:{ratingPrompt:"¿Encontraste lo que buscabas en esta página?",ratingPositive:"Sí",ratingNegative:"No",commentPromptPositive:"¡Excelente! Estamos buscando formas de mejorar esta página. ¿Qué ideas se te ocurren?",commentPromptNegative:"Lamentamos escuchar eso. ¿De que se trataba su búsqueda?",commentPromptDisclaimer:"Sus comentarios nos ayudan a mejorar nuestro sitio de web. Si tiene preguntas específicas sobre su situación, ",commentPromptDisclaimerLink:"por favor póngase en contacto con nosotros",commentSubmit:"Enviar comentarios",commentSubmitLoading:"Enviando...",commentConfirmation:"¡Gracias por compartir tus ideas!",emailPrompt:"Para conocer mas oportunidades de comentarios pagados en el futuro, sea parte de nuestra lista de prueba de usuarios.",emailLabel:"Dirección de correo electrónico",emailSubmit:"Sea parte de la lista",emailSubmitLoading:"Enviando...",errorMessage:"Por favor, inténtalo de nuevo. No obtuvimos su respuesta debido a un problema técnico.",emailConfirmation:"¡Gracias por registrarte!"}},API_URL="https://innovation.nj.gov/app/feedback/dev",JSON_HEADER={"Content-Type":"application/json"};class NJFeedbackWidget extends window.HTMLElement{constructor(){super(),this.rating=!1,this.feedbackId=void 0,this.retryRating=!1,this.language=new URL(window.location).searchParams.get("lang")??"en"}connectedCallback(){this.innerHTML=this.getHTML(),this.applyListeners(),this.addStyling(),document.addEventListener("changeLanguage",this.handleChangeLanguage.bind(this))}disconnectedCallback(){document.removeEventListener("changeLanguage",this.handleChangeLanguage.bind(this))}handleChangeLanguage(e){this.language=e.detail,this.innerHTML=this.getHTML(),this.applyListeners()}applyListeners(){this.querySelector("#yesButton").addEventListener("click",_e=>{this.handleRating(!0)}),this.querySelector("#noButton").addEventListener("click",_e=>{this.handleRating(!1)}),this.querySelector("#commentForm").addEventListener("submit",e=>{e.preventDefault();const submitButton=document.getElementById("commentSubmit");submitButton.disabled=!0,submitButton.textContent=LANG_TO_CONTENT[this.language].commentSubmitLoading,this.hideElement("#commentSubmitError");e=e.target.elements.comment.value,e=this.retryRating||null==this.feedbackId?{comment:e,rating:this.rating,pageURL:window.location.href}:{feedbackId:this.feedbackId,comment:e};fetch(API_URL+"/comment",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(e)}).then(response=>response.json()).then(data=>{null==this.feedbackId&&(this.feedbackId=data.feedbackId),"Success"===data.message&&null!=this.feedbackId?(this.hideElement("#commentPrompt"),this.showElement("#emailPrompt")):this.showElement("#commentSubmitError")}).catch(e=>{this.showElement("#commentSubmitError")}).finally(()=>{submitButton.disabled=!1,submitButton.textContent=LANG_TO_CONTENT[this.language].commentSubmit})}),this.querySelector("#emailForm").addEventListener("submit",e=>{e.preventDefault();const submitButton=document.getElementById("emailSubmit");submitButton.disabled=!0,submitButton.textContent=LANG_TO_CONTENT[this.language].emailSubmitLoading,this.hideElement("#emailSubmitError");e={feedbackId:this.feedbackId,email:e.target.elements.email.value};fetch(API_URL+"/email",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(e)}).then(response=>response.json()).then(data=>{"Success"===data.message&&null!=data.feedbackId?(this.hideElement("#emailPrompt"),this.showElement("#emailConfirmation","flex")):this.showElement("#emailSubmitError")}).catch(e=>{this.showElement("#emailSubmitError")}).finally(()=>{submitButton.disabled=!1,submitButton.textContent=LANG_TO_CONTENT[this.language].emailSubmit})})}handleRating(rating){(this.rating=rating)||(this.querySelector("#commentPromptText").innerText=LANG_TO_CONTENT[this.language].commentPromptNegative),this.hideElement("#ratingPrompt"),this.showElement("#commentPrompt");let onlySaveRatingToAnalytics=!1;var postData;(onlySaveRatingToAnalytics=this.hasAttribute("only-save-rating-to-analytics")?"true"===this.getAttribute("only-save-rating-to-analytics"):onlySaveRatingToAnalytics)?logGoogleEvent("Clicked initial button",rating?"Yes":"No"):(document.getElementById("commentSubmit").disabled=!0,postData={pageURL:window.location.href,rating:rating},fetch(API_URL+"/rating",{method:"POST",headers:JSON_HEADER,body:JSON.stringify(postData)}).then(response=>response.json()).then(data=>{"Success"===data.message&&null!=data.feedbackId?(this.feedbackId=data.feedbackId,logGoogleEvent("Clicked initial button",rating?"Yes":"No")):this.retryRating=!0}).catch(e=>{this.retryRating=!0}).finally(()=>{document.getElementById("commentSubmit").disabled=!1}))}showElement(selector,displayType="block"){this.querySelector(selector).style.display=displayType}hideElement(selector){this.querySelector(selector).style.display="none"}getHTML(){var content=LANG_TO_CONTENT[this.language],contactLink=this.hasAttribute("contact-link")?this.getAttribute("contact-link"):"https://www.nj.gov/nj/feedback.html";return`
<div class="feedback-container">
<div id="ratingPrompt" class="flex-box">
<span class="feedback-text">${content.ratingPrompt}</span>
<div class="feedback-button-group">
<button id="yesButton" class="feedback-button">
${content.ratingPositive}
</button>
<button id="noButton" class="feedback-button">
${content.ratingNegative}
</button>
</div>
</div>
<div id="commentPrompt">
<form id="commentForm">
<div class="grid-box">
<div>
<label id="commentPromptText" for="comment" class="feedback-text"
>${content.commentPromptPositive}</label
>
<p class="disclaimer-text">
${content.commentPromptDisclaimer}<a
target="_blank"
rel="noopener noreferrer"
href="${contactLink}"
>${content.commentPromptDisclaimerLink}</a
>.
</p>
</div>
<div>
<textarea
type="text"
id="comment"
name="comment"
class="feedback-input"
required
></textarea>
<div id="commentSubmitError" class="error-text">
${content.errorMessage}
</div>
<button
id="commentSubmit"
class="feedback-button float-right submit-button"
type="submit"
>
${content.commentSubmit}
</button>
</div>
</div>
</form>
</div>
<div id="emailPrompt">
<form id="emailForm">
<div class="grid-box">
<div>
<div class="feedback-text">${content.commentConfirmation}</div>
<p class="disclaimer-text">${content.emailPrompt}</p>
</div>
<div>
<label for="email" class="email-label">${content.emailLabel}</label>
<input
type="email"
id="email"
name="email"
class="feedback-input email-input"
required
/>
<div id="emailSubmitError" class="error-text">
${content.errorMessage}
</div>
<button
id="emailSubmit"
class="feedback-button float-right submit-button"
type="submit"
>
${content.emailSubmit}
</button>
</div>
</div>
</form>
</div>
<div id="emailConfirmation" class="email-confirmation">
<img
src="https://beta.nj.gov/files/feedback-widget/check_icon.svg"
alt=""
/>
<div class="email-confirmation-text">${content.emailConfirmation}</div>
</div>
</div>
`}addStyling(){var style=document.createElement("style");style.textContent=`
.feedback-container {
background-color: #f0f0f0;
padding: 1.9rem 2.5rem;
}
.flex-box {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.grid-box {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5rem;
}
@media screen and (max-width: 765px) {
.flex-box {
justify-content: center;
}
.grid-box {
grid-template-columns: 1fr;
}
}
.feedback-text {
font-weight: 600;
font-size: 22px;
color: #1b1b1b;
}
.disclaimer-text {
margin: 1rem 0;
}
.email-label {
font-weight: 600;
margin: 0.5rem 0;
}
.email-input {
margin-bottom: 0.5rem;
}
.error-text {
font-size: 14px;
color: #D63E04;
margin-bottom: 0.75rem;
}
.submit-button {
margin-top: 0.75rem;
}
.email-confirmation {
display: flex;
align-items: center;
}
.email-confirmation-text {
font-weight: 600;
font-size: 22px;
margin-left: 1rem;
}
.feedback-button-group {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.feedback-button {
font-family: inherit;
font-weight: 600;
font-size: 16px;
color: #1b1b1b !important;
background-color: #ffffff;
border-style: solid;
border-width: 2px;
border-color: #1b1b1b;
border-radius: 4px;
padding: 0.75rem 3rem;
cursor: pointer;
text-decoration: none;
text-align: center;
}
.feedback-button.float-right {
float: right;
}
.feedback-button:hover {
border-color: #3d4551;
background-color: #3d4551;
color: #ffffff !important;
text-decoration: none;
}
.feedback-button:disabled {
opacity: 0.65;
}
@media screen and (max-width: 450px) {
.feedback-button-group {
justify-content: center;
}
.feedback-button {
width: 100%;
}
}
.feedback-input {
width: 100%;
border: 1px solid #a9aeb1;
border-radius: 0px;
padding: 0.5rem;
}
.feedback-input:focus {
outline: none;
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
#commentPrompt,
#emailPrompt,
#emailFormSubmitted,
#commentSubmitError,
#emailSubmitError,
#emailConfirmation {
display: none;
}
`,document.querySelector("head").appendChild(style)}}window.customElements.define("feedback-widget",NJFeedbackWidget);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment