diff --git a/assets/src/js/admin/main.js b/assets/src/js/admin/main.js index f3b52dc6..4aa16586 100644 --- a/assets/src/js/admin/main.js +++ b/assets/src/js/admin/main.js @@ -149,7 +149,10 @@ document.addEventListener('DOMContentLoaded', () => { form.append('options', JSON.stringify(options)); form.append('_nonce', plausible.nonce); - button.children[0].classList.remove('hidden'); + if (button.children.length > 0) { + button.children[0].classList.remove('hidden'); + } + button.setAttribute('disabled', 'disabled'); plausible.ajax(form, button); @@ -330,8 +333,15 @@ document.addEventListener('DOMContentLoaded', () => { } ).then(response => { if (button) { - button.children[0].classList += ' hidden'; - button.removeAttribute('disabled'); + if (button.children.length > 0) { + button.children[0].classList += ' hidden'; + } + + if (button.id === 'connect_plausible_analytics' && response.status === 200) { + button.innerText = plausible_analytics_i18n.connected; + } else { + button.removeAttribute('disabled'); + } } if (response.status === 200) { diff --git a/assets/src/js/admin/main.min.js b/assets/src/js/admin/main.min.js index 04d91fa4..25c81f31 100644 --- a/assets/src/js/admin/main.min.js +++ b/assets/src/js/admin/main.min.js @@ -1 +1 @@ -document.addEventListener("DOMContentLoaded",()=>{if(!document.location.href.includes("plausible_analytics")){return}let plausible={nonceElem:document.getElementById("_wpnonce"),nonce:"",showWizardElem:document.getElementById("show_wizard"),domainNameElem:document.getElementById("domain_name"),apiTokenElem:document.getElementById("api_token"),createAPITokenElems:document.getElementsByClassName("plausible-create-api-token"),buttonElems:document.getElementsByClassName("plausible-analytics-button"),stepElems:document.getElementsByClassName("plausible-analytics-wizard-next-step"),init:function(){if(document.location.hash===""&&document.getElementById("plausible-analytics-wizard")!==null){document.location.hash="#welcome_slide"}if(this.nonceElem!==null){this.nonce=this.nonceElem.value}this.toggleWizardStep();window.addEventListener("hashchange",this.toggleWizardStep);if(this.showWizardElem!==null){this.showWizardElem.addEventListener("click",this.showWizard)}if(this.domainNameElem!==null){this.domainNameElem.addEventListener("keyup",this.disableConnectButton)}if(this.apiTokenElem!==null){this.apiTokenElem.addEventListener("keyup",this.disableConnectButton)}if(this.createAPITokenElems.length>0){for(let i=0;i0){for(let i=0;i0){for(let i=0;in);if(currentlyCompletedSteps.length<1){return}currentlyCompletedSteps.forEach(function(step){let completedStep=document.getElementById("completed-step-"+step);let inactiveStep=document.getElementById("step-"+step);completedStep.classList.remove("hidden");inactiveStep.classList+=" hidden"})},ajax:function(data,button=null,showMessages=true){return fetch(ajaxurl,{method:"POST",body:data}).then(response=>{if(button){button.children[0].classList+=" hidden";button.removeAttribute("disabled")}if(response.status===200){return response.json()}return false}).then(response=>{if(showMessages===true){plausible.showMessages()}let event=new CustomEvent("plausibleAjaxDone",{detail:response});document.dispatchEvent(event);return response.data})},showMessages:function(){let messages=plausible.fetchMessages();messages.then(function(messages){if(messages.error!==false){plausible.showMessage(messages.error,"error")}else if(messages.notice!==false){plausible.showMessage(messages.notice,"notice")}else if(messages.success!==false){plausible.showMessage(messages.success,"success")}if(messages.additional.length===0||document.getElementById("plausible-analytics-wizard")!==null){return}if(messages.additional.id!==undefined&&messages.additional.message){plausible.showAdditionalMessage(messages.additional.message,messages.additional.id)}else if(messages.additional.id!==undefined&&messages.additional.message===""){plausible.removeAdditionalMessage(messages.additional.id)}})},fetchMessages:function(){let data=new FormData;data.append("action","plausible_analytics_messages");let result=plausible.ajax(data,null,false);return result.then(function(response){return response})},showMessage:function(message,type="success"){if(type==="error"){document.getElementById("icon-error").classList.remove("hidden");document.getElementById("icon-success").classList.add("hidden");document.getElementById("icon-notice").classList.add("hidden")}else if(type==="notice"){document.getElementById("icon-notice").classList.remove("hidden");document.getElementById("icon-error").classList.add("hidden");document.getElementById("icon-success").classList.add("hidden")}else{document.getElementById("icon-success").classList.remove("hidden");document.getElementById("icon-error").classList.add("hidden");document.getElementById("icon-notice").classList.add("hidden")}let notice=document.getElementById("plausible-analytics-notice");document.getElementById("plausible-analytics-notice-text").innerHTML=message;notice.classList.remove("hidden");setTimeout(function(){notice.classList.replace("opacity-0","opacity-100")},200);if(type!=="error"){setTimeout(function(){notice.classList.replace("opacity-100","opacity-0");setTimeout(function(){notice.classList+=" hidden"},200)},2e3)}},showAdditionalMessage:function(html,target){let targetElem=document.querySelector(`[name='${target}']`);let container=targetElem.closest(".plausible-analytics-group");container.innerHTML+=html},removeAdditionalMessage:function(target){let targetElem=document.querySelector(`[name="${target}"]`);let container=targetElem.closest(".plausible-analytics-group");let additionalMessage;if(container.children.length>0){for(let i=0;i{if(!document.location.href.includes("plausible_analytics")){return}let plausible={nonceElem:document.getElementById("_wpnonce"),nonce:"",showWizardElem:document.getElementById("show_wizard"),domainNameElem:document.getElementById("domain_name"),apiTokenElem:document.getElementById("api_token"),createAPITokenElems:document.getElementsByClassName("plausible-create-api-token"),buttonElems:document.getElementsByClassName("plausible-analytics-button"),stepElems:document.getElementsByClassName("plausible-analytics-wizard-next-step"),init:function(){if(document.location.hash===""&&document.getElementById("plausible-analytics-wizard")!==null){document.location.hash="#welcome_slide"}if(this.nonceElem!==null){this.nonce=this.nonceElem.value}this.toggleWizardStep();window.addEventListener("hashchange",this.toggleWizardStep);if(this.showWizardElem!==null){this.showWizardElem.addEventListener("click",this.showWizard)}if(this.domainNameElem!==null){this.domainNameElem.addEventListener("keyup",this.disableConnectButton)}if(this.apiTokenElem!==null){this.apiTokenElem.addEventListener("keyup",this.disableConnectButton)}if(this.createAPITokenElems.length>0){for(let i=0;i0){for(let i=0;i0){for(let i=0;i0){button.children[0].classList.remove("hidden")}button.setAttribute("disabled","disabled");plausible.ajax(form,button)},saveOptionOnNext:function(e){let hash=document.location.hash.replace("#","");if(hash==="api_token_slide"||hash==="domain_name_slide"){let form=e.target.closest(".plausible-analytics-wizard-step-section");let inputs=form.getElementsByTagName("INPUT");let options=[];for(let input of inputs){options.push({name:input.name,value:input.value})}let data=new FormData;data.append("action","plausible_analytics_save_options");data.append("options",JSON.stringify(options));data.append("_nonce",plausible.nonce);plausible.ajax(data)}},disableConnectButton:function(e){let target=e.target;let button=document.getElementById("connect_plausible_analytics");let buttonIsHref=false;if(button===null){let slide_id=document.location.hash;button=document.querySelector(slide_id+" .plausible-analytics-wizard-next-step");buttonIsHref=true}if(button===null){return}if(target.value!==""){if(!buttonIsHref){button.disabled=false}else{button.classList.remove("pointer-events-none");button.classList.replace("bg-gray-200","bg-indigo-600")}return}if(!buttonIsHref){button.disabled=true;button.innerHTML=button.innerHTML.replace("Connected","Connect")}else{button.classList+=" pointer-events-none";button.classList.replace("bg-indigo-600","bg-gray-200")}},createAPIToken:function(e){e.preventDefault();let domain=document.getElementById("domain_name").value;domain=domain.replace("/","%2F");window.open(`${plausible_analytics_hosted_domain}/${domain}/settings/integrations?new_token=WordPress`,"_blank","location=yes,height=768,width=1024,scrollbars=yes,status=no")},showWizard:function(e){let data=new FormData;data.append("action","plausible_analytics_show_wizard");data.append("_nonce",e.target.dataset.nonce);plausible.ajax(data)},toggleWizardStep:function(){if(document.getElementById("plausible-analytics-wizard")===null){return}const hash=document.location.hash.substring(1).replace("_slide","");let allSteps=document.querySelectorAll(".plausible-analytics-wizard-step");let activeSteps=document.querySelectorAll(".plausible-analytics-wizard-active-step");let completedSteps=document.querySelectorAll(".plausible-analytics-wizard-completed-step");for(let i=0;in);if(currentlyCompletedSteps.length<1){return}currentlyCompletedSteps.forEach(function(step){let completedStep=document.getElementById("completed-step-"+step);let inactiveStep=document.getElementById("step-"+step);completedStep.classList.remove("hidden");inactiveStep.classList+=" hidden"})},ajax:function(data,button=null,showMessages=true){return fetch(ajaxurl,{method:"POST",body:data}).then(response=>{if(button){if(button.children.length>0){button.children[0].classList+=" hidden"}if(button.id==="connect_plausible_analytics"&&response.status===200){button.innerText=plausible_analytics_i18n.connected}else{button.removeAttribute("disabled")}}if(response.status===200){return response.json()}return false}).then(response=>{if(showMessages===true){plausible.showMessages()}let event=new CustomEvent("plausibleAjaxDone",{detail:response});document.dispatchEvent(event);return response.data})},showMessages:function(){let messages=plausible.fetchMessages();messages.then(function(messages){if(messages.error!==false){plausible.showMessage(messages.error,"error")}else if(messages.notice!==false){plausible.showMessage(messages.notice,"notice")}else if(messages.success!==false){plausible.showMessage(messages.success,"success")}if(messages.additional.length===0||document.getElementById("plausible-analytics-wizard")!==null){return}if(messages.additional.id!==undefined&&messages.additional.message){plausible.showAdditionalMessage(messages.additional.message,messages.additional.id)}else if(messages.additional.id!==undefined&&messages.additional.message===""){plausible.removeAdditionalMessage(messages.additional.id)}})},fetchMessages:function(){let data=new FormData;data.append("action","plausible_analytics_messages");let result=plausible.ajax(data,null,false);return result.then(function(response){return response})},showMessage:function(message,type="success"){if(type==="error"){document.getElementById("icon-error").classList.remove("hidden");document.getElementById("icon-success").classList.add("hidden");document.getElementById("icon-notice").classList.add("hidden")}else if(type==="notice"){document.getElementById("icon-notice").classList.remove("hidden");document.getElementById("icon-error").classList.add("hidden");document.getElementById("icon-success").classList.add("hidden")}else{document.getElementById("icon-success").classList.remove("hidden");document.getElementById("icon-error").classList.add("hidden");document.getElementById("icon-notice").classList.add("hidden")}let notice=document.getElementById("plausible-analytics-notice");document.getElementById("plausible-analytics-notice-text").innerHTML=message;notice.classList.remove("hidden");setTimeout(function(){notice.classList.replace("opacity-0","opacity-100")},200);if(type!=="error"){setTimeout(function(){notice.classList.replace("opacity-100","opacity-0");setTimeout(function(){notice.classList+=" hidden"},200)},2e3)}},showAdditionalMessage:function(html,target){let targetElem=document.querySelector(`[name='${target}']`);let container=targetElem.closest(".plausible-analytics-group");container.innerHTML+=html},removeAdditionalMessage:function(target){let targetElem=document.querySelector(`[name="${target}"]`);let container=targetElem.closest(".plausible-analytics-group");let additionalMessage;if(container.children.length>0){for(let i=0;i