Sendmessage function

botanjs/src/Astro/Blog/Layout/MainFrame.js

@@ -5,8 +5,12 @@
 	var Cycle                                         = __import( "System.Cycle" );
 	/** @type {System.Cycle.Trigger} */
 	var Trigger                                       = __import( "System.Cycle.Trigger" );
+	/** @type {System.utils.IKey} */
+	var IKey                                          = __import( "System.utils.IKey" );
 	/** @type {System.utils.DataKey} */
 	var DataKey                                       = __import( "System.utils.DataKey" );
+	/** @type {System.utils.Perf} */
+	var Perf                                          = __import( "System.utils.Perf" );
 	/** @type {Dandelion} */
 	var Dand                                          = __import( "Dandelion" );
 	/** @type {Dandelion.IDOMElement} */
@@ -21,6 +25,10 @@
 	var CharacterCloud                                = __import( "Astro.Mechanism.CharacterCloud" );
 	/** @type {Astro.Mechanism.Parallax} */
 	var Parallax                                      = __import( "Astro.Mechanism.Parallax" );
+	/** @type {Astro.Blog.Components.Bubble} */
+	var Bubble                                        = __import( "Astro.Blog.Components.Bubble" );
+
+	var postData                                      = __import( "System.Net.postData" );
 
 	// __import( "Dandelion.CSSReset" ); CSS_RESERVATION
 	// __import( "Dandelion.CSSAnimations" ); CSS_RESERVATION
@@ -88,6 +96,7 @@
 				wrapper.innerHTML = data["mesg"];
 				Cycle.next( function()
 				{
+					PrepareForm();
 					expandContact( e );
 					wrapper.style.marginTop = .5 * ( 400 - wrapper.clientHeight ) + "px";
 				} );
@@ -95,6 +104,124 @@
 		} );
 	};
 
+	var cBubble;
+	var PrepareForm = function()
+	{
+		var captcha = Dand.id( "contact-recaptcha", true );
+		var mesgform = Dand.id( "cc-send-mesg", true );
+		var reUUID = Perf.uuid;
+		var limit = 5;
+
+		var sitekey = captcha.getDAttribute( "sitekey" );
+		var src = captcha.getDAttribute( "src" );
+		var action = captcha.getDAttribute( "action" );
+		var script = Dand.wrapna( "script", new IKey( "src", src ) );
+		document.head.appendChild( script );
+
+		/** @type {_3rdParty_.Recaptcha} */
+		var Recaptcha;
+
+		if( !cBubble )
+		{
+		   	cBubble = new Bubble();
+			document.body.appendChild( cBubble.init() );
+		}
+
+		var i = 0;
+		var errMesg = Dand.id( "contact-errmesg" );
+
+		var submitMessage = function( action, name, email, mesg )
+		{
+			postData( action, {
+				"name": name, "email": email, "mesg": mesg
+				, "recaptcha_response_field": Recaptcha.getResponse().trim()
+			}
+			, function ( e ) {
+			   	doCollapse();
+
+				if( e.status )
+				{
+					// pop message
+					cBubble.setColor( "cornflowerblue" );
+					Cycle.next( function () { cBubble.pop( "Message sent" ); } );
+
+					// blurp after 1 sec
+					Cycle.delay( function () { cBubble.blurp(); }, 3500 );
+				}
+			}
+			, function( err )
+			{
+				errMesg.innerHTML = "Error occurred";
+
+				if( !err.status )
+				{
+					errMesg.innerHTML = err[ "mesg" ];
+				}
+
+				errMesg.removeAttribute( "data-disabled" );
+			} );
+		};
+
+		mesgform.addEventListener( "Submit", function( e ) {
+			var name = Dand.id( "contact-name" ).value.trim();
+			var email = Dand.id( "contact-email" ).value.trim();
+			var mesg = Dand.id( "contact-message" ).value.trim();
+
+			errMesg.setAttribute( "data-disabled", 1 );
+
+			try
+			{
+				if( !name )
+					throw new Error( "How should I address You?" );
+				if( !email )
+					throw new Error( "Please enter your email." );
+				if( !mesg )
+					throw new Error( "And your message?" );
+			}
+			catch( ex )
+			{
+				errMesg.removeAttribute( "data-disabled" );
+				errMesg.innerHTML = ex.message;
+				return;
+			}
+
+			submitMessage( action, name, email, mesg );
+
+		} );
+
+		var CaptchaReady = function()
+		{
+			captcha.clear();
+			try
+			{
+				Recaptcha.render( "contact-recaptcha", {
+					"theme": "light", "sitekey": sitekey
+				} );
+			}
+			catch( ex )
+			{
+			   debug.Error( ex );	
+			}
+		};
+
+		Cycle.perma(
+			reUUID, function()
+			{
+				if( limit < i ++ )
+				{
+					var mesg = Dand.glass( "c_so_sorry" );
+					if( mesg.length ) mesg[0].style.display = "block";
+				}
+
+				if( Recaptcha = window["grecaptcha"] )
+				{
+					Cycle.permaRemove( reUUID );
+					CaptchaReady();
+				}
+			} , 500
+		);
+	};
+
 	var navControl = function ()
 	{
 		// Page control

botanjs/src/Astro/Starfall/Element/Header.css

@@ -113,6 +113,18 @@ header {
     width: auto;
 }
 
+#contact-errmesg {
+	margin: 0 0.5em;
+	padding: 0.25em 0.5em;
+	color: orangered;
+	background-color: rgba( 0, 0, 0, 0.8 );
+	opacity: 1;
+}
+
+#contact-errmesg[data-disabled] {
+	opacity: 0;
+}
+
 .c-sep {
     display: inline-block;
     width: 1px;