commit 32804d23fbf9bad4d5ede94f1adbecf7843a6337
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2016-09-09T18:00:17Z |
|---|
| subject | Sendmessage function |
|---|
commit 32804d23fbf9bad4d5ede94f1adbecf7843a6337
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2016-09-09T18:00:17Z
Sendmessage function
---
botanjs/src/Astro/Blog/Layout/MainFrame.js | 127 ++++++++++++++++++++++++++
botanjs/src/Astro/Starfall/Element/Header.css | 12 +++
2 files changed, 139 insertions(+)
diff --git a/botanjs/src/Astro/Blog/Layout/MainFrame.js b/botanjs/src/Astro/Blog/Layout/MainFrame.js
index 87b5413..831356b 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 c788438..041a98d 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;