Initial commit

ten1seven · May 17, 2012 · b1913f1 · b1913f1
1 parent 972b19a
commit b1913f1
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+.DS_Store
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+
+	<!-- META -->
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+	<!-- Force latest IE rendering engine (even in intranet) & Chrome Frame -->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+	<!-- tell mobile browsers to scale -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+	<meta name="description" content="">
+
+	<title>jRespond</title>
+
+	<style>
+
+	</style>
+</head>
+<body>
+
+	<p id="test"></p>
+
+	<!-- Javascript -->
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+	<script>window.jQuery || document.write("<script src='js/libs/jquery.min.js'>\x3C/script>")</script>
+	<script src="js/jRespond.js"></script>
+	<script>
+		jRespond.addFunc('hello');
+		jRespond.addFunc('world');
+
+		// add anther one later
+		setTimeout(function() {
+			jRespond.addFunc('!');
+		}, 1000);
+
+		// make console.log safe to use
+		window.console||(console={log:function(){}});
+	</script>
+
+</body>
+</html>
diff --git a/js/jRespond.js b/js/jRespond.js
@@ -0,0 +1,104 @@
+/*
+	jRespond holds a list of user-defined functions that are either fired or destroyed
+	based on media breakpoint. Because jRespond was built to be browser agnostic, it does NOT
+	sniff for media queries in the CSS. All media breakpoints need to be defined below.
+*/
+jRespond = (function(window,document,undefined) {
+
+	// let's be serious here...
+	'use strict';
+
+	// array for registered functions
+	var mediaListeners = [],
+
+		// array of media query breakpoints; adjust as needed
+		mediaBreakpoints = [
+			{
+				'label': 'handheld',
+				'enter': 0,
+				'exit': 767
+			},{
+				'label': 'tablet',
+				'enter': 768,
+				'exit': 979
+			},{
+				'label': 'laptop',
+				'enter': 980,
+				'exit': 1199
+			},{
+				'label': 'desktop',
+				'enter': 1200,
+				'exit': 10000
+			}
+		],
+
+		// store the current breakpoint
+		curr = '',
+
+		// window resize event timer stuff
+		resizeTimer,
+		resizeW = 0,
+		resizeTmrFast = 100,
+		resizeTmrSlow = 500,
+		resizeTmrSpd = resizeTmrSlow;
+
+
+	// send media to the mediaListeners array
+	var addFunction = function(elm) {
+
+		// add function to stack
+		mediaListeners.push(elm);
+
+		// check to see if it needs to be fired
+		for (var i = 0; i < mediaListeners.length; i++) {
+			//console.log(mediaListeners[i]);
+		}
+	};
+
+	// checks for the correct breakpoint against the mediaBreakpoints list
+	var returnBreakpoint = function(width) {
+
+		for (var i = 0; i < mediaBreakpoints.length; i++) {
+			if (width >= mediaBreakpoints[i]['enter'] && width <= mediaBreakpoints[i]['exit'] && curr !== mediaBreakpoints[i]['label']) {
+
+				console.log(mediaBreakpoints[i]['label']);
+				$('#test').text(mediaBreakpoints[i]['label']);
+
+				curr = mediaBreakpoints[i]['label'];
+			}
+		}
+	};
+
+	// self-calling function that checks the browser width and delegates if it detects a change
+	var checkResize = function() {
+
+		// get current width
+		var w = $(window).width();
+
+		// check if the current width has changed
+		console.log('w: ' + w + ' // resizeW: ' + resizeW + ' // resizeTmrSpd: ' + resizeTmrSpd);
+
+		// if there is a change speed up the timer and fire the returnBreakpoint function
+		if (w !== resizeW) {
+			resizeTmrSpd = resizeTmrFast;
+			resizeW = w;
+
+			returnBreakpoint(w);
+
+		// otherwise keep on keepin' on
+		} else {
+			resizeTmrSpd = resizeTmrSlow;
+			resizeW = w;
+		}
+
+		// calls itself on a setTimeout
+		setTimeout(checkResize, resizeTmrSpd);
+	};
+	checkResize();
+
+	// make mediaCheck public
+	return {
+		'addFunc': function(elm) { addFunction(elm); }
+	};
+
+}(this,this.document));
diff --git a/js/libs/jquery.min.js b/js/libs/jquery.min.js