dependent-anchor-include.js

/*! Dependent Anchor Include Pattern */
/*
 * Copyright 2011, Scott Jehl (scottjehl.com), Emil Bjorklund (thatemil.com),
 * and Aaron Gustafson (aaron-gustafson.com)
 * 
 * Dual licensed under the MIT
 * Idea from Scott Gonzalez
 * 
 * to use, place attributes on an already-functional anchor pointing to content
 * that should either replace, or insert before or after that anchor
 * after the page has loaded
 * 
 * Replace:	<a href="…" data-replace="articles/latest/fragment">Latest Articles</a>
 * Before:	<a href="…" data-before="articles/latest/fragment">Latest Articles</a>
 * After:	<a href="…" data-after="articles/latest/fragment">Latest Articles</a>
 * 
 * On domready, you can use it like this: 
 * 
 *	$("[data-append],[data-replace],[data-after],[data-before]").ajaxInclude();
 * 
 * To set certain elements to lazy load based on specific CSS-based breakpoint
 * indicators, set the indicator in your CSS like this:
 * 
 * 	#getActiveMQ-watcher {
 *	    font-family: "break-0";
 *	    @media (min-width:20em) {
 * 		font-family: "break-1";
 *	    }
 *	    @media (min-width:30em) {
 *		font-family: "break-2";
 *	    }
 *	    @media (min-width:34.375em) {
 *		font-family: "break-3";
 *	    }
 *	    @media (min-width:48em) {
 *		font-family: "break-4";
 *	    }
 *	    @media (min-width:61.25em) {
 *		font-family: "break-5";
 *	    }
 *    	}
 * 
 * Then add a corresponding attribute to the lazy-loading element:
 * 
 *   <a href="…" data-include-size="4" data-replace="articles/latest/fragment">Latest Articles</a>
 * 
 * If you would like the element to insert the fragment when the user taps it,
 * add the data-include-on-tap attribute:
 * 
 *   <a href="…" data-include-on-tap data-replace="articles/latest/fragment">Comments</a>
 * 
 * Change from https://gist.github.com/aarongustafson/5877063 - 
 *   Line 149 looks for variable using this watchresize script, https://gist.github.com/aarongustafson/4157402. 
 *   In this example, the variable is "WSS.screen_size". This variable comes from the CSS breakpoints above.
 *   The original script used a pseudo element on the body tag which stopped working in Firefox so Aaron and I
 *   refactored the script.
 */
(function( $, window, document, UNDEFINED ){

	var anchorInclude;
	
	if ( $.fn.jquery.replace(/\./g,'') < 143 )
	{ 
		throw new Error('jQuery 1.4.3 or higher is required');
		return;
	}
	
	var tap_evt = 'click';
	if ( 'ontouchstart' in window ||
		 'createTouch' in document )
	{
		tap_evt = 'touchend';
	}
	
	function watchResize( callback )
	{
		var resizing;
		callback.size = 0;
		function done()
		{
			var curr_size = window.innerWidth;
			clearTimeout( resizing );
			resizing = null;
			// only run on a true resize
			if ( callback.size != curr_size )
			{
				callback();
				callback.size = curr_size;
			}
		}
		window.addEventListener('resize', function(){
			if ( resizing )
			{
				clearTimeout( resizing );
				resizing = null;
			}
			resizing = setTimeout( done, 50 );
		});
		// init
		callback();
	}
	
	$.fn.ajaxInclude = function()
	{
		return this.each(function(){
			
			var $el			= $( this ),
				target		= $el.data( 'target' ),
				size		= $el.data('include-size'),
				$targetEl	= target && $( target ) || $el,
				methods		= [ 'append', 'replace', 'before', 'after' ],
				ml			= methods.length,
				loaded		= false,
				method,
				url;
			
			// Lazy loader function
			function lazyLoad()
			{
				if ( loaded )
				{
					return;
				}
				
				while ( ml-- )
				{
					method	= methods[ ml ];
					if ( $el.is( '[data-' + method + ']' ) )
					{
						url		= $el.data( method );
						break;
					}
				}

				if ( method == 'replace' )
				{
					method += 'With';
				}

				if ( url && method )
				{
					$.get( url, function( data ){
						$el.trigger( 'ajaxInclude', [$targetEl, data] );
						$targetEl[ method ]( data );
					});
				}
				
				loaded = true;
				
			}
			
			// manage link or button clicks
			if ( $el.is('[data-include-on-tap]') )
			{
				$el.on( tap_evt, function(e){
					
					e.preventDefault();
					lazyLoad();
					
				});
			}

			// watch resizing of the browser
			watchResize(function(){
				// get the current size and match it against the test value (sans quotes)
				console.log(anchorInclude);
				if ( size != UNDEFINED && size > window.WSS.screen_size.replace("break-","") )
				{
					return;
				}
				if ( anchorInclude != true )
				{
					lazyLoad();
					anchorInclude = true;
				}
				
			});

		});
		
	};
	
})( jQuery, window, document );

$("[data-append],[data-replace],[data-after],[data-before]").ajaxInclude();

dependent-anchor-include.min.js

/* Dependent Anchor Include Pattern */
(function(f,e,a,d){if(f.fn.jquery.replace(/\./g,"")<143){throw new Error("jQuery 1.4.3 or higher is required");return}var c="click";if("ontouchstart" in e||"createTouch" in a){c="touchend"}function b(i){var h;i.size=0;function g(){var j=e.innerWidth;clearTimeout(h);h=null;if(i.size!=j){i();i.size=j}}e.addEventListener("resize",function(){if(h){clearTimeout(h);h=null}h=setTimeout(g,50)});i()}f.fn.ajaxInclude=function(){return this.each(function(){var o=f(this),n=o.data("target"),p=o.data("include-size"),m=n&&f(n)||o,i=["append","replace","before","after"],k=i.length,l=false,g,h;function j(){if(l){return}while(k--){g=i[k];if(o.is("[data-"+g+"]")){h=o.data(g);break}}if(g=="replace"){g+="With"}if(h&&g){f.get(h,function(q){o.trigger("ajaxInclude",[m,q]);m[g](q)})}l=true}if(o.is("[data-include-on-tap]")){o.on(c,function(q){q.preventDefault();j()})}b(function(){var q=e.getComputedStyle(a.body,":after").getPropertyValue("content").replace(/"/g,"");if(p!=d&&p!=q){return}j()})})}})(jQuery,window,document);