Ditch jQuery

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

flowtype.js

@@ -1,6 +1,9 @@
 /*
-* FlowType.JS v1.1
-* Copyright 2013-2014, Simple Focus http://simplefocus.com/
+* FlowType.JS without jQuery.
+* Ported by Christian Dannie Storgaard. Based on:
+*
+* FlowType.JS 1.0
+* Copyright (c) 2013, Simple Focus http://simplefocus.com/
 *
 * FlowType.JS by Simple Focus (http://simplefocus.com/)
 * is licensed under the MIT License. Read a copy of the
@@ -10,39 +13,60 @@
 * Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
 */
 
-(function($) {
-   $.fn.flowtype = function(options) {
-
-// Establish default settings/variables
-// ====================================
-      var settings = $.extend({
-         maximum   : 9999,
-         minimum   : 1,
-         maxFont   : 9999,
-         minFont   : 1,
-         fontRatio : 35
-      }, options),
-
-// Do the magic math
-// =================
-      changes = function(el) {
-         var $el = $(el),
-            elw = $el.width(),
-            width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
-            fontBase = width / settings.fontRatio,
-            fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
-         $el.css('font-size', fontSize + 'px');
-      };
-
-// Make the magic visible
-// ======================
-      return this.each(function() {
-      // Context for resize callback
-         var that = this;
-      // Make changes upon resize
-         $(window).resize(function(){changes(that);});
-      // Set changes on load
-         changes(this);
-      });
-   };
-}(jQuery));
+(function (global) {
+
+	var addEvent = null;
+	if(document.addEventListener) {
+		addEvent = function (element, eventName, callback) {
+			return element.addEventListener(eventName, callback, false);
+		};
+	} else if(document.attachEvent) {
+		addEvent = function (element, eventName, callback) {
+			element.attachEvent('on' + eventName, callback);
+		};
+	} else {
+		addEvent = function (element, eventName, callback) {
+			element['on' + eventName] = callback;
+		};
+	}
+
+	global.flowtype = function (element, options) {
+
+		// Establish default settings/variables
+		// ====================================
+		options.maximum = options.maximum || 9999;
+		options.minimum = options.minimum || 1;
+		options.maxFont = options.maxFont || 9999;
+		options.minFont = options.minFont || 1;
+		options.fontRatio = options.fontRatio || 35;
+		options.lineRatio = options.lineRatio || 1.45;
+
+		// Do the magic math
+		// =================
+		changes = function (el) {
+			var elw = el.clientWidth
+				, width = elw > options.maximum ? options.maximum : elw < options.minimum ? options.minimum : elw
+				, fontBase = width / options.fontRatio
+				, fontSize = fontBase > options.maxFont ? options.maxFont : fontBase < options.minFont ? options.minFont : fontBase
+				;
+
+			el.style.fontSize = fontSize + 'px';
+			el.style.lineHeight = fontSize * options.lineRatio + 'px';
+		};
+
+		// Make the magic visible
+		// ======================
+		element.updateFlowType = function () {
+			changes(element);
+		};
+
+		// Make changes upon resize
+		addEvent(global, 'resize', element.updateFlowType);
+
+		// Set changes on load
+		element.updateFlowType();
+
+		// addEvent visiblity for demo purposes - REMOVE IN PRODUCTION
+		global.flowtype.addEvent = addEvent;
+	};
+}(window));

index.html

@@ -8,7 +8,6 @@
 		<!-- https://commons.wikimedia.org/wiki/Category:Wikipedia_favicons -->
 		<link rel='icon' type='image/png' href='img/favicon.png' />
 		<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script>
-		<script src='primerpedia.js'></script>
 		<script src='flowtype.js'></script>
 		<link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' />
 		<link href='primerpedia.css' rel='stylesheet' />
@@ -58,11 +57,12 @@ <h2 id='article-title' style='display:none'>
 			</a>
 		</div>
 		<script>
-			$('body').flowtype({
-				minFont   : 12,   // minimum font size (in px)
-				maxFont   : 30,   // maximum font size (in px)
-				fontRatio : 75    // line-height ratio (not sure how exactly it works)
-			});
+				window.flowtype(document.getElementsByTagName("body")[0], {
+					minFont: 12,   // minimum font size (in px)
+					maxFont: 30,   // maximum font size (in px)
+					fontRatio: 75    // line-height ratio (not sure how exactly it works)
+				})
 		</script>
+		<script src='primerpedia.js'></script>
 	</body>
 </html>

primerpedia.js

@@ -21,47 +21,123 @@
 var apiUrl = "http://en.wikipedia.org/w/api.php?";
 // https://www.mediawiki.org/wiki/Extension:MobileFrontend#prop.3Dextracts
 var apiExtractsQuery = "action=query&prop=extracts&exintro&indexpageids=true&format=json";
+var requestTimeoutInMs = 3000;
+var requestCallbackName = "requestCallback";
 
-function random(){
-	apiRequest( apiExtractsQuery + "&generator=random&grnnamespace=0" );
+function random() {
+	apiRequest(apiExtractsQuery + "&generator=random&grnnamespace=0");
 }
 
-function search(){
+function search() {
 	searchTerm = $('#search-term')[0].value;
 	if(searchTerm)
-		apiRequest( apiExtractsQuery + "&generator=search&gsrlimit=1&gsrsearch=" + searchTerm );
+		apiRequest(apiExtractsQuery + "&generator=search&gsrlimit=1&gsrsearch=" + searchTerm);
 	else random();
 }
 
-function apiRequest(queryString){
+function apiRequest(queryString) {
 	// Loading animation from http://www.ajaxload.info/
 	$("#content").html("<img src='img/loading.gif' alt='Loading...' style='margin:1em 50%' />");
-	$.ajax({
-		url: apiUrl + queryString,
-		data: {
-			format: "json"
-		},
-		dataType: "jsonp",
-		success: function(jsonObject){
-			var searchData = jsonObject.query.searchinfo;
-			if( typeof searchData === "undefined" || searchData.totalhits > 0 ){
-				var pageid = jsonObject.query.pageids[0];
-				var article = jsonObject.query.pages[pageid];
-				article.url = "http://en.wikipedia.org/wiki/" + encodeURIComponent(article.title);
-				var editlink = article.url + "?action=edit&amp;section=0";
-				$("#viewlink").text(article.title).attr('href', article.url);
-				$("#editlink").attr('href', editlink);
-				$("#article-title").show();
-				$("#content").html( article.extract );
-				$("#license-icon").show();
-				$("#info-icon").show();
-			} else if( typeof searchData.suggestion !== "undefined" ){
-				apiRequest( apiExtractsQuery + "&generator=search&gsrlimit=1&gsrsearch=" + searchData.suggestion );
-			} else {
-				$("#content").html("<div class='error'>The search term wasn't found.</div>");
-			}
+
+	var script = document.createElement("script");
+	script.type = "text/javascript";
+	script.async = true;
+	script.src = apiUrl + queryString + "&callback=" + requestCallbackName;
+
+	document.getElementsByTagName("head")[0].appendChild(script);
+
+	var onCompleted = function () {
+		// reduce global namespace pollution
+		delete (window[requestCallbackName]);
+		// remove jsonp result tag
+		script.remove();
+	}
+
+	var requestTimeout = window.setTimeout(function () {
+		onCompleted();
+	}, requestTimeoutInMs);
+
+	window[requestCallbackName] = function (jsonObject) {
+		window.clearTimeout(requestTimeout);
+
+		handleRequestResult(jsonObject);
+
+		onCompleted();
+	}
+}
+
+function toggleVisibility(element, visibility) {
+	if(element instanceof HTMLElement) {
+		if(!visibility) {
+			element.style.setProperty("display", "none");
+		} else {
+			element.style.removeProperty("display");
+		}
+	}
+}
+
+function clearNode(node) {
+	var clone = node.cloneNode(false);
+	node.parentNode.replaceChild(clone, node);
+
+	return clone;
+}
+
+function renderSearchResult(jsonObject) {
+	var pageid = jsonObject.query.pageids[0];
+	var article = jsonObject.query.pages[pageid];
+	article.url = "http://en.wikipedia.org/wiki/" + encodeURIComponent(article.title);
+	var editlink = article.url + "?action=edit&amp;section=0";
+
+	var viewLinkElem = document.getElementById("viewlink");
+
+	viewLinkElem.textContent = article.title;
+	viewLinkElem.setAttribute("href", article.url);
+
+	document.getElementById("editlink").setAttribute("href", editlink);
+	toggleVisibility(document.getElementById("article-title"), true);
+
+	var contentNode = document.getElementById("content");
+
+	contentNode = clearNode(contentNode);
+	contentNode.innerHTML = article.extract;
+
+	toggleVisibility(document.getElementById("license-icon"), true);
+	toggleVisibility(document.getElementById("info-icon"), true);
+}
+
+function renderNotFoundNode() {
+	toggleVisibility(document.getElementById("article-title"), false);
+	toggleVisibility(document.getElementById("license-icon"), false);
+	toggleVisibility(document.getElementById("info-icon"), false);
+
+	var notFoundNode = document.createElement("div");
+	notFoundNode.classList.add("error");
+	notFoundNode.textContent = "The search term wasn't found.";
+
+	var contentNode = document.getElementById("content");
+
+	contentNode = clearNode(contentNode);
+
+	contentNode.appendChild(notFoundNode);
+}
+
+function handleRequestResult(jsonObject) {
+	if(jsonObject.hasOwnProperty("query")) {
+		var searchData = jsonObject.query.searchinfo;
+
+		if(typeof searchData === "undefined" || searchData.totalhits > 0) {
+			renderSearchResult(jsonObject);
+
+			return;
+		} else if(typeof searchData.suggestion !== "undefined") {
+			apiRequest(apiExtractsQuery + "&generator=search&gsrlimit=1&gsrsearch=" + searchData.suggestion);
+
+			return;
 		}
-	});
+	}
+
+	renderNotFoundNode();
 }
 
 // Get query string from URL parameter
@@ -72,20 +148,22 @@ function getQueryVariable(parameter) {
 	// Split each parameter=value pair using '&' as separator
 	var vars = query.split('&');
 	// Loop over all the parameter=value pairs, and split them into their parameter/value components
-	for (var i = 0; i < vars.length; i++) {
+	for(var i = 0; i < vars.length; i++) {
 		var pair = vars[i].split('=');
 		// If one of the parameter names is the one we're looking for, return its value
-		if (decodeURIComponent(pair[0]) == parameter) {
+		if(decodeURIComponent(pair[0]) == parameter) {
 			return decodeURIComponent(pair[1]);
 		}
 	}
 	return null;
 }
 
 // Upon loading the page, check if an URL parameter was passed, and use it to perform a search
-$(document).ready(function() {
-	if (getQueryVariable("search")) {
-		document.getElementById('search-term').value = getQueryVariable("search");
+window.onload = function () {
+	var queryParam = getQueryVariable("search");
+
+	if(queryParam !== null) {
+		document.getElementById('search-term').value = queryParam;
 		search();
 	}
-});
+}