Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
/*! 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 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment