slack signup form

community.html

@@ -48,16 +48,24 @@ <h1 class="title">Community
 </div>
 
 <p>
-Comments or questions? Get in touch!
+Comments or questions? Find us on <a href="http://nameko.slack.com">#Slack</a> or <a href="http://groups.google.com/forum/#!forum/nameko-dev">Google Groups</a>.
 </p>
 
-<ul>
-    <li>
-        <a href="groups.google.com/forum/#!forum/nameko-dev">
-            nameko-dev google group
-        </a></li>
-    <li>IRC: #nameko on freenode</li>
-</ul>
+<p>
+Join the #Slack community group by adding your email address below.
+</p>
+
+<form id="signup-form" method="post" action="#">
+    <input type="email" name="email" id="email" placeholder="Email Address" />
+    <input type="submit" value="Get an invite" />
+</form>
+
+<script>
+    var stamplay_appid = "nameko";
+    var stamplay_webhookid = "invites";
+</script>
+<script src="https://drrjhlchpvi7e.cloudfront.net/libs/stamplay-js-sdk/1.2.5/stamplay.min.js"></script> <script src="js/main.js"></script>
+
 
 
 </div>

js/main.js

@@ -0,0 +1,184 @@
+
+function getParameterByName(name) {
+    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+        results = regex.exec(location.search);
+    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+}
+
+
+(function() {
+
+	"use strict";
+
+	// Methods/polyfills.
+
+		// classList | (c) @remy | github.com/remy/polyfills | rem.mit-license.org
+			!function(){function t(t){this.el=t;for(var n=t.className.replace(/^\s+|\s+$/g,"").split(/\s+/),i=0;i<n.length;i++)e.call(this,n[i])}function n(t,n,i){Object.defineProperty?Object.defineProperty(t,n,{get:i}):t.__defineGetter__(n,i)}if(!("undefined"==typeof window.Element||"classList"in document.documentElement)){var i=Array.prototype,e=i.push,s=i.splice,o=i.join;t.prototype={add:function(t){this.contains(t)||(e.call(this,t),this.el.className=this.toString())},contains:function(t){return-1!=this.el.className.indexOf(t)},item:function(t){return this[t]||null},remove:function(t){if(this.contains(t)){for(var n=0;n<this.length&&this[n]!=t;n++);s.call(this,n,1),this.el.className=this.toString()}},toString:function(){return o.call(this," ")},toggle:function(t){return this.contains(t)?this.remove(t):this.add(t),this.contains(t)}},window.DOMTokenList=t,n(Element.prototype,"classList",function(){return new t(this)})}}();
+
+		// canUse
+			window.canUse=function(p){if(!window._canUse)window._canUse=document.createElement("div");var e=window._canUse.style,up=p.charAt(0).toUpperCase()+p.slice(1);return p in e||"Moz"+up in e||"Webkit"+up in e||"O"+up in e||"ms"+up in e};
+
+		// window.addEventListener
+			(function(){if("addEventListener"in window)return;window.addEventListener=function(type,f){window.attachEvent("on"+type,f)}})();
+
+	// Vars.
+		var	$body = document.querySelector('body');
+
+	// Disable animations/transitions until everything's loaded.
+		$body.classList.add('is-loading');
+
+		window.addEventListener('load', function() {
+			window.setTimeout(function() {
+				$body.classList.remove('is-loading');
+			}, 100);
+		});
+
+	// Slideshow Background.
+		(function() {
+
+			// Settings.
+				var settings = {
+
+					// Images (in the format of 'url': 'alignment').
+						images: {
+							'images/bg01.jpg': 'center',
+							'images/bg02.jpg': 'center',
+							'images/bg03.jpg': 'center'
+						},
+
+					// Delay.
+						delay: 6000
+
+				};
+
+			// Vars.
+				var	pos = 0, lastPos = 0,
+					$wrapper, $bgs = [], $bg,
+					k, v;
+
+			// Create BG wrapper, BGs.
+				$wrapper = document.createElement('div');
+					$wrapper.id = 'bg';
+					$body.appendChild($wrapper);
+
+				for (k in settings.images) {
+
+					// Create BG.
+						$bg = document.createElement('div');
+							$bg.style.backgroundImage = 'url("' + k + '")';
+							$bg.style.backgroundPosition = settings.images[k];
+							$wrapper.appendChild($bg);
+
+					// Add it to array.
+						$bgs.push($bg);
+
+				}
+
+			// Main loop.
+				$bgs[pos].classList.add('visible');
+				$bgs[pos].classList.add('top');
+
+				// Bail if we only have a single BG or the client doesn't support transitions.
+					if ($bgs.length == 1
+					||	!canUse('transition'))
+						return;
+
+				window.setInterval(function() {
+
+					lastPos = pos;
+					pos++;
+
+					// Wrap to beginning if necessary.
+						if (pos >= $bgs.length)
+							pos = 0;
+
+					// Swap top images.
+						$bgs[lastPos].classList.remove('top');
+						$bgs[pos].classList.add('visible');
+						$bgs[pos].classList.add('top');
+
+					// Hide last image after a short delay.
+						window.setTimeout(function() {
+							$bgs[lastPos].classList.remove('visible');
+						}, settings.delay / 2);
+
+				}, settings.delay);
+
+		})();
+
+	// Signup Form.
+		(function() {
+
+			// Vars.
+				var $form = document.querySelectorAll('#signup-form')[0],
+					$submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],
+					$email = document.querySelectorAll('#signup-form #email')[0],
+					$message;
+
+					//prefill email value if any
+					$email.value = getParameterByName('email');
+
+
+			// Bail if addEventListener isn't supported.
+				if (!('addEventListener' in $form))
+					return;
+
+			// Message.
+				$message = document.createElement('span');
+					$message.classList.add('message');
+					$form.appendChild($message);
+
+				$message._show = function(type, text) {
+
+					$message.innerHTML = text;
+					$message.classList.add(type);
+					$message.classList.add('visible');
+
+					window.setTimeout(function() {
+						$message._hide();
+					}, 3000);
+
+				};
+
+				$message._hide = function() {
+					$message.classList.remove('visible');
+				};
+
+				Stamplay.init(stamplay_appid);
+			// Events.
+			// Note: If you're *not* using AJAX, get rid of this event listener.
+				$form.addEventListener('submit', function(event) {
+
+					event.stopPropagation();
+					event.preventDefault();
+
+					// Hide message.
+						$message._hide();
+
+					// Disable submit.
+						$submit.disabled = true;
+
+            var webhook = new Stamplay.Webhook(stamplay_webhookid);
+
+            var regExp = new RegExp("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$");						
+						var valid = regExp.test($email.value);
+
+						if (valid) {
+							var data = { email: $email.value }
+							webhook.post(data).then(function (response) {
+								$form.reset();
+							  $submit.disabled = false;
+							  $message._show('success', 'The invite is on its way!');
+							});
+						} else {
+								$form.reset();
+							  $submit.disabled = false;
+							  $message._show('error', 'Please type a valid email address');
+						}						
+
+				});
+
+		})();
+
+})();

source/community.html

@@ -16,14 +16,22 @@ <h1 class="title">Community
 </div>
 
 <p>
-Comments or questions? Get in touch!
+Comments or questions? Find us on <a href="http://nameko.slack.com">#Slack</a> or <a href="http://groups.google.com/forum/#!forum/nameko-dev">Google Groups</a>.
 </p>
 
-<ul>
-    <li>
-        <a href="groups.google.com/forum/#!forum/nameko-dev">
-            nameko-dev google group
-        </a></li>
-    <li>IRC: #nameko on freenode</li>
-</ul>
+<p>
+Join the #Slack community group by adding your email address below.
+</p>
+
+<form id="signup-form" method="post" action="#">
+    <input type="email" name="email" id="email" placeholder="Email Address" />
+    <input type="submit" value="Get an invite" />
+</form>
+
+<script>
+    var stamplay_appid = "nameko";
+    var stamplay_webhookid = "invites";
+</script>
+<script src="https://drrjhlchpvi7e.cloudfront.net/libs/stamplay-js-sdk/1.2.5/stamplay.min.js"></script> <script src="js/main.js"></script>
+
 {% endblock content %}