diff --git a/botanjs/src/Astro/Blog/Layout/MainFrame.js b/botanjs/src/Astro/Blog/Layout/MainFrame.js index 87b54134..831356b3 100644 --- a/botanjs/src/Astro/Blog/Layout/MainFrame.js +++ b/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 diff --git a/botanjs/src/Astro/Starfall/Element/Header.css b/botanjs/src/Astro/Starfall/Element/Header.css index c788438c..041a98d3 100644 --- a/botanjs/src/Astro/Starfall/Element/Header.css +++ b/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;