✨ newsletter form logic (#45)

page/start/index.php

@@ -60,6 +60,7 @@
 	Page::css(__DIR__ . "/style.css");
 	Page::js(__DIR__ . "/copylink_dict.js.php", eval: true);
 	Page::js(__DIR__ . "/copylink.js");
+	Page::js(__DIR__ . "/newsletter.js");
 	
 	Page::font("ubuntu");
 	Page::font("tabler");

page/start/newsletter.js

@@ -0,0 +1,199 @@
+let newsletter_form;
+let newsletter_input_mail_address;
+let newsletter_input_language;
+let newsletter_input_language_option_list;
+let newsletter_input_submit;
+let newsletter_feedback;
+let newsletter_feedback_wait;
+let newsletter_feedback_success;
+let newsletter_feedback_failure;
+
+let newsletter_valid_mail_address = false;
+let newsletter_valid_language = false;
+
+window.addEventListener("load", function(){
+	// STORE ELEMENTS //
+	newsletter_form = document.getElementById("newsletter-signup-form");
+	newsletter_input_mail_address = document.getElementById("newsletter-signup-form-mail-address");
+	newsletter_input_language = document.getElementById("newsletter-signup-form-language");
+	newsletter_input_language_option_list = newsletter_input_language.getElementsByClassName("option");
+	newsletter_input_submit = document.getElementById("newsletter-signup-form-submit");
+	newsletter_feedback = document.getElementById("newsletter-signup-form-feedback");
+	newsletter_feedback_wait = document.getElementById("newsletter-signup-form-feedback-wait");
+	newsletter_feedback_success = document.getElementById("newsletter-signup-form-feedback-success");
+	newsletter_feedback_failure = document.getElementById("newsletter-signup-form-feedback-failure");
+	
+	
+	// INITIALIZE INPUTS //
+	newsletter_init_mail_address();
+	newsletter_init_language();
+	newsletter_init_submit();
+});
+
+
+
+/**
+* HELPER: Initialize mail address input.
+*/
+async function newsletter_init_mail_address(){
+	// REGISTER INPUT HANDLER //
+	newsletter_input_mail_address.addEventListener("input", newsletter_update_mail_address);
+}
+
+
+
+/**
+* HELPER: Initialize language input.
+*/
+async function newsletter_init_language(){
+	// REGISTER CLICK HANDLERS //
+	for(let one_option of newsletter_input_language_option_list){
+		one_option.addEventListener("click", newsletter_change_language);
+	}
+	
+	
+	// UPDATE STATE //
+	newsletter_update_language();
+}
+
+
+
+/**
+* HELPER: Initialize submit button input.
+*/
+async function newsletter_init_submit(){
+	// REGISTER CLICK HANDLER //
+	newsletter_input_submit.addEventListener("click", newsletter_submit);
+	
+	
+	// UPDATE STATE //
+	newsletter_update_submit();
+}
+
+
+
+/**
+* CALLBACK: Update mail address state.
+*/
+async function newsletter_update_mail_address(){
+	// VALIDATE INPUT //
+	// load value
+	let value = newsletter_input_mail_address.value;
+	
+	// check against regex
+	newsletter_valid_mail_address = (value.match(/^[a-zA-Z0-9\.\-\_\+]+@([a-z0-9\-]+\.)+[a-z0-9\-]{2,}$/) !== null);
+	
+	
+	// UPDATE VALIDITY INDICATOR //
+	// get element
+	let validity_indicator = newsletter_input_mail_address.parentElement;
+	
+	// reset state
+	validity_indicator.classList.remove("valid", "invalid");
+	
+	// set state
+	if(newsletter_valid_mail_address){
+		validity_indicator.classList.add("valid");
+	} else {
+		validity_indicator.classList.add("invalid");
+	}
+	
+	
+	// UPDATE SUBMIT BUTTON //
+	newsletter_update_submit();
+}
+
+
+
+/**
+* CALLBACK: Change language.
+*/
+async function newsletter_change_language(){
+	// DETERMINE NEW VALUE //
+	// get from attribute
+	let value = this.dataset.value;
+	
+	// store to main element
+	newsletter_input_language.dataset.selected = value;
+	
+	
+	// UPDATE STATE //
+	newsletter_update_language();
+}
+
+
+
+/**
+* HELPER: Update language state.
+*/
+async function newsletter_update_language(){
+	// HIGHLIGHT SELECTED ELEMENT //
+	let value = newsletter_input_language.dataset.selected;
+	newsletter_valid_language = false;
+	for(let one_option of newsletter_input_language_option_list){
+		// reset classes
+		one_option.classList.remove("selected");
+		
+		// selected
+		if(one_option.dataset.value === value){
+			newsletter_valid_language = true;
+			one_option.classList.add("selected");
+		}
+	}
+	
+	
+	// UPDATE SUBMIT BUTTON //
+	newsletter_update_submit();
+}
+
+
+
+/**
+* HELPER: Update submit button state.
+*/
+async function newsletter_update_submit(){
+	// DISABLE //
+	newsletter_input_submit.classList.add("disabled");
+	
+	
+	// MAYBE ENABLE //
+	if(newsletter_valid_mail_address && newsletter_valid_language){
+		newsletter_input_submit.classList.remove("disabled");
+	}
+}
+
+
+
+/**
+* CALLBACK: Maybe submit the form.
+*/
+async function newsletter_submit(){
+	// MAKE SURE ALL INPUTS ARE VALID //
+	if(!newsletter_valid_mail_address || !newsletter_valid_language) return;
+	
+	
+	// SHOW WAIT FEEDBACK //
+	newsletter_feedback.classList.remove("hidden", "gone");
+	newsletter_form.classList.add("hidden");
+	newsletter_feedback_wait.classList.remove("hidden", "gone");
+	
+	
+	// COLLECT VALUES //
+	// mail address
+	let mail_address = newsletter_input_mail_address.value;
+	
+	// language
+	let language = newsletter_input_language.dataset.selected;
+	
+	
+	// SEND API REQUEST //
+	/**/setTimeout(function(){
+		// positive feedback
+		newsletter_feedback_wait.classList.add("gone");
+		newsletter_feedback_success.classList.remove("hidden", "gone");
+		
+		// negative feedback
+		newsletter_feedback_wait.classList.add("gone");
+		newsletter_feedback_failure.classList.remove("hidden", "gone");
+	/**/}, 700);
+}