cleaning up responsive scripts and examples

library/js/scripts.js

@@ -1,161 +1,136 @@
 /*
-Bones Scripts File
-Author: Eddie Machado
-
-This file should contain any js scripts you want to add to the site.
-Instead of calling it in the header or throwing it inside wp_head()
-this file will be called automatically in the footer so as not to
-slow the page load.
-
+ * Bones Scripts File
+ * Author: Eddie Machado
+ *
+ * This file should contain any js scripts you want to add to the site.
+ * Instead of calling it in the header or throwing it inside wp_head()
+ * this file will be called automatically in the footer so as not to
+ * slow the page load.
+ *
+ * There are a lot of example functions and tools in here. If you don't
+ * need any of it, just remove it. They are meant to be helpers and are
+ * not required. It's your world baby, you can do whatever you want.
 */
 
-// IE8 ployfill for GetComputed Style (for Responsive Script below)
+/*
+ * IE8 ployfill for GetComputed Style (for Responsive Script below)
+ * If you don't want to support IE8, you can just remove this.
+*/
 if (!window.getComputedStyle) {
-    window.getComputedStyle = function(el, pseudo) {
-        this.el = el;
-        this.getPropertyValue = function(prop) {
-            var re = /(\-([a-z]){1})/g;
-            if (prop == 'float') prop = 'styleFloat';
-            if (re.test(prop)) {
-                prop = prop.replace(re, function () {
-                    return arguments[2].toUpperCase();
-                });
-            }
-            return el.currentStyle[prop] ? el.currentStyle[prop] : null;
-        }
-        return this;
+  window.getComputedStyle = function(el, pseudo) {
+    this.el = el;
+    this.getPropertyValue = function(prop) {
+      var re = /(\-([a-z]){1})/g;
+      if (prop == 'float') prop = 'styleFloat';
+      if (re.test(prop)) {
+        prop = prop.replace(re, function () {
+          return arguments[2].toUpperCase();
+        });
+      }
+      return el.currentStyle[prop] ? el.currentStyle[prop] : null;
     }
+    return this;
+  }
 }
 
-// as the page loads, call these scripts
-jQuery(document).ready(function($) {
-
-    /*
-    Responsive jQuery is a tricky thing.
-    There's a bunch of different ways to handle
-    it, so be sure to research and find the one
-    that works for you best.
-    */
-    
-	/*
-	 * Get Viewport Dimensions
-	 * returns object with viewport dimensions to match css in width and height properties
-	 * ( source: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript )
-	 */
-	function updateViewportDimensions() {
-		var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
-		return {width:x,height:y}
-	}
-	var viewport = updateViewportDimensions();
-
-	/*
-	* Throttle Resize-triggered Events
-	* Wrap your actions in this function to throttle the frequency of firing them off, for better performance, esp. on mobile.
-	* ( source: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed )
-	*/
-	var waitForFinalEvent = (function () {
-		var timers = {};
-		return function (callback, ms, uniqueId) {
-			if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; }
-			if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); }
-			timers[uniqueId] = setTimeout(callback, ms);
-		};
-	})();
-	// how long to wait before deciding the resize has stopped, in ms. Around 50-100 should work ok.
-	var timeToWaitForLast = 100;
-
-	/*
-	 * Setup Resize-triggered Actions
-	 * These will be more resource intensive than one-off checks made at load-time
-	 */
-	/* Example, uncomment and edit as needed.
-
-	// Are we on a page where we need to do something? Create one-time flags for efficient checks.
-	// Another good thing to check for might be body.no-touch, to avoid running UI interactivity on touch devices.
-	if( typeof is_home === "undefined" ) var is_home = $('body').hasClass('home');
-
-	$(window).resize(function () {
-
-		// Test on flags and do something if needed
-		if( is_home ) { waitForFinalEvent( function() {
-	  		callMyResizeDependentFunction();
-		}, timeToWaitForLast, "your-function-identifier-string"); }
-	});
+/*
+ * Get Viewport Dimensions
+ * returns object with viewport dimensions to match css in width and height properties
+ * ( source: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript )
+*/
+function updateViewportDimensions() {
+	var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
+	return {width:x,height:y}
+}
+// setting the viewport width
+var viewport = updateViewportDimensions();
 
-	// Example function
-	function callMyResizeDependentFunction() {
-		viewport = updateViewportDimensions();
-	  	if( viewport.width >= 768 ) {
-			console.log('On home page and window sized to 768 width or more.');
-	  	} else {
-			console.log('Not on home page, or window sized to less than 768.');
-	  	}
-	}
-  	callMyResizeDependentFunction(); // initial page load call
-	*/
+/*
+ * Throttle Resize-triggered Events
+ * Wrap your actions in this function to throttle the frequency of firing them off, for better performance, esp. on mobile.
+ * ( source: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed )
+*/
+var waitForFinalEvent = (function () {
+	var timers = {};
+	return function (callback, ms, uniqueId) {
+		if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; }
+		if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); }
+		timers[uniqueId] = setTimeout(callback, ms);
+	};
+})();
 
-	/*
-	* Resize-unaware responsive scripts
-	*/
+// how long to wait before deciding the resize has stopped, in ms. Around 50-100 should work ok.
+var timeToWaitForLast = 100;
 
-	/* if is below 481px */
-	if (viewport.width < 481) {
-	} /* end smallest screen */
 
-	/* if is larger than 481px */
-	if (viewport.width > 481) {
-	} /* end larger than 481px */
+/*
+ * Here's an example so you can see how we're using the above function
+ *
+ * This is commented out so it won't work, but you can copy it and
+ * remove the comments.
+ *
+ *
+ *
+ * If we want to only do it on a certain page, we can setup checks so we do it
+ * as efficient as possible.
+ *
+ * if( typeof is_home === "undefined" ) var is_home = $('body').hasClass('home');
+ *
+ * This once checks to see if you're on the home page based on the body class
+ * We can then use that check to perform actions on the home page only
+ *
+ * When the window is resized, we perform this function
+ * $(window).resize(function () {
+ *
+ *    // if we're on the home page, we wait the set amount (in function above) then fire the function
+ *    if( is_home ) { waitForFinalEvent( function() {
+ *
+ *      // if we're above or equal to 768 fire this off
+ *      if( viewport.width >= 768 ) {
+ *        console.log('On home page and window sized to 768 width or more.');
+ *      } else {
+ *        // otherwise, let's do this instead
+ *        console.log('Not on home page, or window sized to less than 768.');
+ *      }
+ *
+ *    }, timeToWaitForLast, "your-function-identifier-string"); }
+ * });
+ *
+ * Pretty cool huh? You can create functions like this to conditionally load
+ * content and other stuff dependent on the viewport.
+ * Remember that mobile devices and javascript aren't the best of friends.
+ * Keep it light and always make sure the larger viewports are doing the heavy lifting.
+ *
+*/
 
-	/* if is above or equal to 768px */
+/*
+ * We're going to swap out the gravatars.
+ * In the functions.php file, you can see we're not loading the gravatar
+ * images on mobile to save bandwidth. Once we hit an acceptable viewport
+ * then we can swap out those images since they are located in a data attribute.
+*/
+function loadGravatars() {
+  // set the viewport using the function above
+	viewport = updateViewportDimensions();
+  // if the viewport is tablet or larger, we load in the gravatars
 	if (viewport.width >= 768) {
-
-        /* load gravatars */
-        $('.comment img[data-gravatar]').each(function(){
-            $(this).attr('src',$(this).attr('data-gravatar'));
-        });
+		$('.comment img[data-gravatar]').each(function(){
+      $(this).attr('src',$(this).attr('data-gravatar'));
+    });
 	}
+} // end function
 
-	/* off the bat large screen actions */
-	if (viewport.width > 1030) {
-	}
-
-	// add your scripts below this line
 
+/*
+ * Put all your regular jQuery in here.
+*/
+jQuery(document).ready(function($) {
 
-}); /* end of as page load scripts */
+  /*
+   * Let's fire off the gravatar function
+   * You can remove this if you don't need it
+  */
+  loadGravatars();
 
 
-/*! A fix for the iOS orientationchange zoom bug.
- Script by @scottjehl, rebound by @wilto.
- MIT License.
-*/
-(function(w){
-	// This fix addresses an iOS bug, so return early if the UA claims it's something else.
-	if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1 ) ){ return; }
-    var doc = w.document;
-    if( !doc.querySelector ){ return; }
-    var meta = doc.querySelector( "meta[name=viewport]" ),
-        initialContent = meta && meta.getAttribute( "content" ),
-        disabledZoom = initialContent + ",maximum-scale=1",
-        enabledZoom = initialContent + ",maximum-scale=10",
-        enabled = true,
-		x, y, z, aig;
-    if( !meta ){ return; }
-    function restoreZoom(){
-        meta.setAttribute( "content", enabledZoom );
-        enabled = true; }
-    function disableZoom(){
-        meta.setAttribute( "content", disabledZoom );
-        enabled = false; }
-    function checkTilt( e ){
-		aig = e.accelerationIncludingGravity;
-		x = Math.abs( aig.x );
-		y = Math.abs( aig.y );
-		z = Math.abs( aig.z );
-		// If portrait orientation and in one of the danger zones
-        if( !w.orientation && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){
-			if( enabled ){ disableZoom(); } }
-		else if( !enabled ){ restoreZoom(); } }
-	w.addEventListener( "orientationchange", restoreZoom, false );
-	w.addEventListener( "devicemotion", checkTilt, false );
-})( this );
+}); /* end of as page load scripts */