Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Scott Jehl’s Anchor Include Pattern (https://gist.github.com/scottjehl/d0e4918cf5e97edf99f3) combined with Emil Bjorkund’s Width Detection (https://gist.github.com/emilbjorklund/2481019)
/*! 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:
*
* body:after {
* content: 'large';
* display: none;
* }
*
* Then add a corresponding attribute to the lazy-loading element:
*
* <a href="…" data-include-size="large" 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>
*
*/
(function( $, window, document, UNDEFINED ){
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)
var MQ = window.getComputedStyle(document.body,':after').getPropertyValue('content').replace(/"/g,'');
if ( size != UNDEFINED &&
size != MQ )
{
return;
}
lazyLoad();
});
});
};
})( jQuery, window, document );
/* 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);

labomat commented Oct 5, 2013

Wouldn't it be better if the script loads complete HTML files and just extracts the body content? This would make it possible to use the HTML fragments as stand alone pages?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment