Country Content: Initial implementation

- Get countryCode by freegeoip.net - Replaces content depending on 2 character ISO country code URL template - Use defered to ensure the callback was completed. - Use localStorage for caching lookups - Added overrides and invalidation to the demo so it can be simulated
wet-boew · Nov 25, 2013 · 85cd2e3 · 85cd2e3
1 parent f1876c3
commit 85cd2e3
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 0 deletions.
diff --git a/src/plugins/country-content/ajax/country-content-ca.html b/src/plugins/country-content/ajax/country-content-ca.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
+wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
+<!-- DataAjaxFragmentStart -->
+<section class="ajaxed-in">
+	<h4>Hello Canada</h4>
+	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, officia, placeat ducimus earum velit animi debitis consequatur est similique dolores!</p>
+</section>
+<!-- DataAjaxFragmentEnd -->
+</html>
diff --git a/src/plugins/country-content/ajax/country-content-us.html b/src/plugins/country-content/ajax/country-content-us.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
+wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
+<!-- DataAjaxFragmentStart -->
+<section class="ajaxed-in">
+	<h4>Hello United States</h4>
+	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, officia, placeat ducimus earum velit animi debitis consequatur est similique dolores!</p>
+</section>
+<!-- DataAjaxFragmentEnd -->
+</html>
diff --git a/src/plugins/country-content/country-content-en.hbs b/src/plugins/country-content/country-content-en.hbs
@@ -0,0 +1,43 @@
+---
+{
+	"title": "Country Content",
+	"language": "en",
+	"category": "Plugin",
+	"description": "A basic AjaxLoader wrapper that inserts AJAXed in content based on a visitors country as resolved by http://freegeoip.net",
+	"tag": "country-content",
+	"fr": "country-content"
+}
+---
+<p>{{description}}</p>
+
+<section class="wb-prettify all-pre">
+	<h2>Replaces an element's content based on the user's country</h2>
+	<section>
+		<h3>Example</h3>
+		<div data-country-content="ajax/country-content-{country}.html">
+			<section>
+				<h4>Hello World</h4>
+				<p>I'm the content shown when the no country can be resolved or the country returned does not have additional content.</p>
+			</section>
+		</div>
+		<details>
+			<summary>View code</summary>
+			<pre><code>&lt;div data-country-content="ajax/country-content-{country}.html"&gt;
+	&lt;h4&gt;Hello World&lt;/h4&gt;
+	&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, dolorem explicabo perferendis vitae magnam.&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+		</details>
+	</section>
+</section>
+
+<section>
+	<h2>Simulate different countries (Demo Only)</h2>
+	<p><strong>Note:</strong> the page must be refreshed to see the changes from resetting or changing the country code. This will impact all examples on this page.</p>
+	<p>Override the country used for the replacement content. Try setting the value to "us" to simulate a user comming in from the United States or "ca" for Canada.</p>
+
+	<label for="country">Please enter a 2 character country code to override the lookup</label>
+	<input type="text" id="country" maxlength="2" />
+	<br />
+	<input type="button" onClick="localStorage.setItem( 'countryCode', $('#country').val() );" value="Set localStorage countryCode" />
+	<input type="button" onClick="localStorage.removeItem( 'countryCode' );" value="Clear localStorage value for countryCode" />
+</section>
diff --git a/src/plugins/country-content/country-content.js b/src/plugins/country-content/country-content.js
@@ -0,0 +1,102 @@
+/*
+ * @title WET-BOEW Country Content
+ * @overview A basic AjaxLoader wrapper that inserts AJAXed in content based on a visitors country as resolved by http://freegeoip.net
+ * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
+ * @author @nschonni
+ */
+(function( $, window, vapour ) {
+"use strict";
+
+/*
+ * Variable and function definitions.
+ * These are global to the plugin - meaning that they will be initialized once
+ * per page, not once per instance of plugin on the page. So, this is a good
+ * place to define variables that are common to all instances of the plugin on a
+ * page.
+ */
+var $document = vapour.doc,
+	selector = "[data-country-content]",
+
+	/**
+	 * Init runs once per plugin element on the page. There may be multiple
+	 * elements. It will run more than once per plugin if you don"t remove the
+	 * selector from the timer.
+	 * @method init
+	 * @param {jQuery DOM element} $elm The plugin element being initialized
+	 */
+	init = function( $elm ) {
+
+		var url = $elm.data( "countryContent" );
+
+		// All plugins need to remove their reference from the timer in the init
+		// sequence unless they have a requirement to be poked every 0.5 seconds
+		window._timer.remove( selector );
+
+		$.when( getCountry() ).then( function( countryCode ) {
+
+			if ( countryCode === "") {
+				// Leave default content since we couldn"t find the country
+				return;
+			} else {
+				// @TODO: Handle bad country values or any whitelist of countries.
+			}
+
+			url = url.replace( "{country}", countryCode );
+
+			$elm.removeAttr( "data-country-content" );
+
+			$elm.load(url);
+		});
+	},
+	getCountry = function() {
+		var dfd = $.Deferred(),
+			countryCode = localStorage.getItem( "countryCode" );
+
+		// Couldn"t find a value in the session
+		if ( countryCode === null ) {
+
+			// From https://github.com/aFarkas/webshim/blob/master/src/shims/geolocation.js#L89-L127
+			$.ajax({
+				url: "http://freegeoip.net/json/",
+				dataType: "jsonp",
+				cache: true,
+				jsonp: "callback",
+				success: function( data ) {
+					if( data ) {
+						countryCode = data.country_code;
+						localStorage.setItem( "countryCode", countryCode );
+					}
+
+					dfd.resolve( countryCode );
+				},
+				error: function(){
+					dfd.reject( "" );
+				}
+			});
+		} else {
+			dfd.resolve( countryCode );
+		}
+
+		return dfd.promise();
+	};
+
+$document.on( "timerpoke.wb", selector, function( event ) {
+	var eventTarget = event.target;
+
+	// Filter out any events triggered by descendants
+	if ( event.currentTarget === eventTarget ) {
+		init( $( eventTarget ) );
+	}
+
+	/*
+	 * Since we are working with events we want to ensure that we are being
+	 * passive about our control, so returning true allows for events to always
+	 * continue
+	 */
+	return true;
+} );
+
+// Add the timer poke to initialize the plugin
+window._timer.add( selector );
+
+})( jQuery, window, vapour );