Created
October 14, 2014 16:09
-
-
Save 0b10011/939bc1afaa9f676fd086 to your computer and use it in GitHub Desktop.
PJAX with file uploads, etc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* jquery.pjax.js | |
* copyright chris wanstrath | |
* https://github.com/defunkt/jquery-pjax | |
* | |
* Support for uploading files added by Brandon Frohs <bfrohs@gmail.com> | |
*/ | |
(function($){ | |
// When called on a container with a selector, fetches the href with | |
// ajax into the container or with the data-pjax attribute on the link | |
// itself. | |
// | |
// Tries to make sure the back button and ctrl+click work the way | |
// you'd expect. | |
// | |
// Exported as $.fn.pjax | |
// | |
// Accepts a jQuery ajax options object that may include these | |
// pjax specific options: | |
// | |
// | |
// container - Where to stick the response body. Usually a String selector. | |
// $(container).html(xhr.responseBody) | |
// (default: current jquery context) | |
// push - Whether to pushState the URL. Defaults to true (of course). | |
// replace - Want to use replaceState instead? That's cool. | |
// | |
// For convenience the second parameter can be either the container or | |
// the options object. | |
// | |
// Returns the jQuery object | |
function fnPjax(selector, container, options) { | |
var context = this | |
return this.on('click.pjax', selector, function(event) { | |
var opts = $.extend({}, optionsFor(container, options)) | |
if (!opts.container) | |
opts.container = $(this).attr('data-pjax') || context | |
handleClick(event, opts) | |
}) | |
} | |
// Public: pjax on click handler | |
// | |
// Exported as $.pjax.click. | |
// | |
// event - "click" jQuery.Event | |
// options - pjax options | |
// | |
// Examples | |
// | |
// $(document).on('click', 'a', $.pjax.click) | |
// // is the same as | |
// $(document).pjax('a') | |
// | |
// $(document).on('click', 'a', function(event) { | |
// var container = $(this).closest('[data-pjax-container]') | |
// $.pjax.click(event, container) | |
// }) | |
// | |
// Returns nothing. | |
function handleClick(event, container, options) { | |
options = optionsFor(container, options) | |
var link = event.currentTarget | |
if (link.tagName.toUpperCase() !== 'A') | |
throw "$.fn.pjax or $.pjax.click requires an anchor element" | |
// Middle click, cmd click, and ctrl click should open | |
// links in a new tab as normal. | |
if ( event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ) | |
return | |
// Ignore cross origin links | |
if ( location.protocol !== link.protocol || location.hostname !== link.hostname ) | |
return | |
// Ignore anchors on the same page | |
if (link.hash && link.href.replace(link.hash, '') === | |
location.href.replace(location.hash, '')) | |
return | |
// Ignore empty anchor "foo.html#" | |
if (link.href === location.href + '#') | |
return | |
var defaults = { | |
url: link.href, | |
container: $(link).attr('data-pjax'), | |
target: link | |
} | |
var opts = $.extend({}, defaults, options) | |
var clickEvent = $.Event('pjax:click') | |
$(link).trigger(clickEvent, [opts]) | |
if (!clickEvent.isDefaultPrevented()) { | |
pjax(opts) | |
event.preventDefault() | |
$(link).trigger('pjax:clicked', [opts]) | |
} | |
} | |
// Public: pjax on form submit handler | |
// | |
// Exported as $.pjax.submit | |
// | |
// event - "click" jQuery.Event | |
// options - pjax options | |
// | |
// Examples | |
// | |
// $(document).on('submit', 'form', function(event) { | |
// var container = $(this).closest('[data-pjax-container]') | |
// $.pjax.submit(event, container) | |
// }) | |
// | |
// Returns nothing. | |
function handleSubmit(event, container, options) { | |
options = optionsFor(container, options) | |
var form = event.currentTarget | |
if (form.tagName.toUpperCase() !== 'FORM') | |
throw "$.pjax.submit requires a form element" | |
// Can't handle buttons with name/value pair | |
if ($(form).find('button[name]').length) { | |
return; | |
} | |
var defaults = { | |
type: form.method.toUpperCase(), | |
url: form.action || window.location.href, | |
container: $(form).attr('data-pjax'), | |
target: form | |
} | |
if (defaults.type === 'POST' && window.FormData !== undefined) { | |
defaults.data = new FormData(form); | |
defaults.processData = false; | |
defaults.contentType = false; | |
} else { | |
// Can't handle file uploads, exit | |
if ($(form).find(':file').length) { | |
return; | |
} | |
// Fallback to manually serializing the fields | |
defaults.data = $(form).serializeArray(); | |
} | |
pjax($.extend({}, defaults, options)) | |
event.preventDefault() | |
} | |
// Loads a URL with ajax, puts the response body inside a container, | |
// then pushState()'s the loaded URL. | |
// | |
// Works just like $.ajax in that it accepts a jQuery ajax | |
// settings object (with keys like url, type, data, etc). | |
// | |
// Accepts these extra keys: | |
// | |
// container - Where to stick the response body. | |
// $(container).html(xhr.responseBody) | |
// push - Whether to pushState the URL. Defaults to true (of course). | |
// replace - Want to use replaceState instead? That's cool. | |
// | |
// Use it just like $.ajax: | |
// | |
// var xhr = $.pjax({ url: this.href, container: '#main' }) | |
// console.log( xhr.readyState ) | |
// | |
// Returns whatever $.ajax returns. | |
function pjax(options) { | |
options = $.extend(true, {}, $.ajaxSettings, pjax.defaults, options) | |
if ($.isFunction(options.url)) { | |
options.url = options.url() | |
} | |
var target = options.target | |
var hash = parseURL(options.url).hash | |
var context = options.context = findContainerFor(options.container) | |
// We want the browser to maintain two separate internal caches: one | |
// for pjax'd partial page loads and one for normal page loads. | |
// Without adding this secret parameter, some browsers will often | |
// confuse the two. | |
if (!options.data) options.data = {} | |
options.data._pjax = context.selector | |
function fire(type, args) { | |
var event = $.Event(type, { relatedTarget: target }) | |
context.trigger(event, args) | |
return !event.isDefaultPrevented() | |
} | |
var timeoutTimer | |
options.beforeSend = function(xhr, settings) { | |
// No timeout for non-GET requests | |
// Its not safe to request the resource again with a fallback method. | |
if (settings.type !== 'GET') { | |
settings.timeout = 0 | |
} | |
// If $.pjax.defaults.version is a function, invoke it first. | |
// Otherwise it can be a static string. | |
var currentVersion = (typeof $.pjax.defaults.version === 'function') ? | |
$.pjax.defaults.version() : | |
$.pjax.defaults.version | |
xhr.setRequestHeader('X-PJAX', 'true') | |
xhr.setRequestHeader('X-PJAX-Version', currentVersion) | |
xhr.setRequestHeader('X-PJAX-Container', context.selector) | |
if (!fire('pjax:beforeSend', [xhr, settings])) | |
return false | |
if (settings.timeout > 0) { | |
timeoutTimer = setTimeout(function() { | |
if (fire('pjax:timeout', [xhr, options])) | |
xhr.abort('timeout') | |
}, settings.timeout) | |
// Clear timeout setting so jquerys internal timeout isn't invoked | |
settings.timeout = 0 | |
} | |
options.requestUrl = parseURL(settings.url).href | |
} | |
options.complete = function(xhr, textStatus) { | |
if (timeoutTimer) | |
clearTimeout(timeoutTimer) | |
fire('pjax:complete', [xhr, textStatus, options]) | |
fire('pjax:end', [xhr, options]) | |
} | |
options.error = function(xhr, textStatus, errorThrown) { | |
var container = extractContainer("", xhr, options) | |
var allowed = fire('pjax:error', [xhr, textStatus, errorThrown, options]) | |
if (options.type == 'GET' && textStatus !== 'abort' && allowed) { | |
locationReplace(container.url) | |
} | |
} | |
options.success = function(data, status, xhr) { | |
// If $.pjax.defaults.version is a function, invoke it first. | |
// Otherwise it can be a static string. | |
var currentVersion = (typeof $.pjax.defaults.version === 'function') ? | |
$.pjax.defaults.version() : | |
$.pjax.defaults.version | |
var latestVersion = xhr.getResponseHeader('X-PJAX-Version'), | |
contentDisposition = xhr.getResponseHeader('Content-Disposition'); | |
// If this isn't html, assume a download | |
if (xhr.getResponseHeader('Content-type').indexOf("text/html") !== 0) { | |
locationReplace(getURL(xhr, options)); | |
return; | |
} | |
// If Content Disposition contains "attachment", assume a download | |
if (contentDisposition && contentDisposition.indexOf("attachment") !== -1) { | |
locationReplace(getURL(xhr, options)); | |
return; | |
} | |
var container = extractContainer(data, xhr, options) | |
// If there is a layout version mismatch, hard load the new url | |
if (currentVersion && latestVersion && currentVersion !== latestVersion) { | |
locationReplace(container.url) | |
return | |
} | |
// If cross-domain redirect header was sent | |
var redirect = xhr.getResponseHeader('X-PJAX-Cross-Domain-Redirect'); | |
if (redirect) { | |
locationReplace(stripPjaxParam(redirect)); | |
return; | |
} | |
// If the new response is missing a body, hard load the page | |
if (!container.contents) { | |
locationReplace(container.url) | |
return | |
} | |
pjax.state = { | |
id: options.id || uniqueId(), | |
url: container.url, | |
title: container.title, | |
container: context.selector, | |
fragment: options.fragment, | |
timeout: options.timeout | |
} | |
if (options.push || options.replace) { | |
window.history.replaceState(pjax.state, container.title, container.url) | |
} | |
// Clear out any focused controls before inserting new page contents. | |
document.activeElement.blur() | |
fire('pjax:beforeSuccess', [container, status, xhr, options]) | |
if (container.title) document.title = container.title | |
fire('pjax:beforeHtml', [container, status, xhr, options]) | |
var prevAutofocusEl = null; | |
if(options.append){ | |
var contents = container.contents.filter(function () { | |
return $(this).data("pjax-dont-append") !== true; | |
}); | |
container.contents = context.html() + container.contents; | |
context.append(contents); | |
prevAutofocusEl = context.find('input[autofocus], select[autofocus], textarea[autofocus], button[autofocus]').first()[0]; | |
} else { | |
context.html(container.contents); | |
} | |
// FF bug: Won't autofocus fields that are inserted via JS. | |
// This behavior is incorrect. So if theres no current focus, autofocus | |
// the last field. | |
// | |
// Only focus if no element is currently focused. | |
// | |
// http://www.w3.org/html/wg/drafts/html/master/forms.html | |
var autofocusEl = context.find('input[autofocus], select[autofocus], textarea[autofocus], button[autofocus]').first()[0] | |
if (autofocusEl && autofocusEl !== prevAutofocusEl && document.activeElement !== autofocusEl && !$(":focus").length) { | |
autofocusEl.focus(); | |
// If `false` or `0`, scroll to autofocus field | |
if (!options.scrollTo && !isScrolledIntoView(autofocusEl)) { | |
// Scroll down so bottom of autofocus field is visible, but not so far | |
// that the top of the field is hidden. (Match Firefox behavior.) | |
// (File fields can't get focused in Firefox with JavaScript.) | |
// See https://bugzilla.mozilla.org/show_bug.cgi?id=505355 | |
options.scrollTo = Math.min( | |
$(autofocusEl).offset().top - $(window).height() + $(autofocusEl).outerHeight(), | |
$(autofocusEl).offset().top | |
); | |
} | |
} | |
addStyleTags(container.styles) | |
executeScriptTags(container.scripts) | |
// Scroll to top by default | |
if (typeof options.scrollTo === 'number' && (options.scrollTo !== 0 || !options.append)) | |
$(window).scrollTop(options.scrollTo) | |
// If the URL has a hash in it, make sure the browser | |
// knows to navigate to the hash. | |
if ( hash !== '' ) { | |
// Avoid using simple hash set here. Will add another history | |
// entry. Replace the url with replaceState and scroll to target | |
// by hand. | |
// | |
// window.location.hash = hash | |
var url = parseURL(container.url) | |
url.hash = hash | |
pjax.state.url = url.href | |
window.history.replaceState(pjax.state, container.title, url.href) | |
var target = $(url.hash) | |
if (target.length) $(window).scrollTop(target.offset().top) | |
} | |
fire('pjax:success', [data, status, xhr, options]) | |
} | |
// Initialize pjax.state for the initial page load. Assume we're | |
// using the container and options of the link we're loading for the | |
// back button to the initial page. This ensures good back button | |
// behavior. | |
if (!pjax.state) { | |
pjax.state = { | |
id: uniqueId(), | |
url: window.location.href, | |
title: document.title, | |
container: context.selector, | |
fragment: options.fragment, | |
timeout: options.timeout | |
} | |
window.history.replaceState(pjax.state, document.title) | |
} | |
// Cancel the current request if we're already pjaxing | |
var xhr = pjax.xhr | |
if ( xhr && xhr.readyState < 4) { | |
xhr.onreadystatechange = $.noop | |
xhr.abort() | |
} | |
pjax.options = options | |
var xhr = pjax.xhr = $.ajax(options) | |
if (xhr.readyState > 0) { | |
if (options.push && !options.replace) { | |
// Cache current container element before replacing it | |
cachePush(pjax.state.id, context.clone().contents()) | |
window.history.pushState(null, "", stripPjaxParam(options.requestUrl)) | |
} | |
fire('pjax:start', [xhr, options]) | |
fire('pjax:send', [xhr, options]) | |
} | |
return pjax.xhr | |
} | |
// Public: Reload current page with pjax. | |
// | |
// Returns whatever $.pjax returns. | |
function pjaxReload(container, options) { | |
var defaults = { | |
url: window.location.href, | |
push: false, | |
replace: true, | |
scrollTo: false | |
} | |
return pjax($.extend(defaults, optionsFor(container, options))) | |
} | |
// Internal: Hard replace current state with url. | |
// | |
// Work for around WebKit | |
// https://bugs.webkit.org/show_bug.cgi?id=93506 | |
// | |
// Returns nothing. | |
function locationReplace(url) { | |
window.history.replaceState(null, "", "#") | |
window.location.replace(url) | |
} | |
var initialPop = true | |
var initialURL = window.location.href | |
var initialState = window.history.state | |
// Initialize $.pjax.state if possible | |
// Happens when reloading a page and coming forward from a different | |
// session history. | |
if (initialState && initialState.container) { | |
pjax.state = initialState | |
} | |
// Non-webkit browsers don't fire an initial popstate event | |
if ('state' in window.history) { | |
initialPop = false | |
} | |
// popstate handler takes care of the back and forward buttons | |
// | |
// You probably shouldn't use pjax on pages with other pushState | |
// stuff yet. | |
function onPjaxPopstate(event) { | |
var state = event.state | |
if (state && state.container) { | |
// When coming forward from a separate history session, will get an | |
// initial pop with a state we are already at. Skip reloading the current | |
// page. | |
if (initialPop && initialURL == state.url) return | |
// If popping back to the same state, just skip. | |
// Could be clicking back from hashchange rather than a pushState. | |
if (pjax.state.id === state.id) return | |
var container = $(state.container) | |
if (container.length) { | |
var direction, contents = cacheMapping[state.id] | |
if (pjax.state) { | |
// Since state ids always increase, we can deduce the history | |
// direction from the previous state. | |
direction = pjax.state.id < state.id ? 'forward' : 'back' | |
// Cache current container before replacement and inform the | |
// cache which direction the history shifted. | |
cachePop(direction, pjax.state.id, container.clone().contents()) | |
} | |
var popstateEvent = $.Event('pjax:popstate', { | |
state: state, | |
direction: direction | |
}) | |
container.trigger(popstateEvent) | |
var options = { | |
id: state.id, | |
url: state.url, | |
container: container, | |
push: false, | |
fragment: state.fragment, | |
timeout: state.timeout, | |
scrollTo: false | |
} | |
if (contents) { | |
container.trigger('pjax:start', [null, options]) | |
if (state.title) document.title = state.title | |
container.html(contents) | |
pjax.state = state | |
container.trigger('pjax:end', [null, options]) | |
} else { | |
pjax(options) | |
} | |
// Force reflow/relayout before the browser tries to restore the | |
// scroll position. | |
container[0].offsetHeight | |
} else { | |
locationReplace(location.href) | |
} | |
} | |
initialPop = false | |
} | |
// Fallback version of main pjax function for browsers that don't | |
// support pushState. | |
// | |
// Returns nothing since it retriggers a hard form submission. | |
function fallbackPjax(options) { | |
var url = $.isFunction(options.url) ? options.url() : options.url, | |
method = options.type ? options.type.toUpperCase() : 'GET' | |
var form = $('<form>', { | |
method: method === 'GET' ? 'GET' : 'POST', | |
action: url, | |
style: 'display:none' | |
}) | |
if (method !== 'GET' && method !== 'POST') { | |
form.append($('<input>', { | |
type: 'hidden', | |
name: '_method', | |
value: method.toLowerCase() | |
})) | |
} | |
var data = options.data | |
if (typeof data === 'string') { | |
$.each(data.split('&'), function(index, value) { | |
var pair = value.split('=') | |
form.append($('<input>', {type: 'hidden', name: pair[0], value: pair[1]})) | |
}) | |
} else if (typeof data === 'object') { | |
for (key in data) | |
form.append($('<input>', {type: 'hidden', name: key, value: data[key]})) | |
} | |
$(document.body).append(form) | |
form.submit() | |
} | |
// Internal: Generate unique id for state object. | |
// | |
// Use a timestamp instead of a counter since ids should still be | |
// unique across page loads. | |
// | |
// Returns Number. | |
function uniqueId() { | |
return (new Date).getTime() | |
} | |
// Internal: Strips _pjax param from url | |
// | |
// url - String | |
// | |
// Returns String. | |
function stripPjaxParam(url) { | |
return url | |
.replace(/\?_pjax=[^&]+&?/, '?') | |
.replace(/_pjax=[^&]+&?/, '') | |
.replace(/[\?&]$/, '') | |
} | |
// Internal: Parse URL components and returns a Locationish object. | |
// | |
// url - String URL | |
// | |
// Returns HTMLAnchorElement that acts like Location. | |
function parseURL(url) { | |
var a = document.createElement('a') | |
a.href = url | |
return a | |
} | |
// Internal: Build options Object for arguments. | |
// | |
// For convenience the first parameter can be either the container or | |
// the options object. | |
// | |
// Examples | |
// | |
// optionsFor('#container') | |
// // => {container: '#container'} | |
// | |
// optionsFor('#container', {push: true}) | |
// // => {container: '#container', push: true} | |
// | |
// optionsFor({container: '#container', push: true}) | |
// // => {container: '#container', push: true} | |
// | |
// Returns options Object. | |
function optionsFor(container, options) { | |
// Both container and options | |
if ( container && options ) | |
options.container = container | |
// First argument is options Object | |
else if ( $.isPlainObject(container) ) | |
options = container | |
// Only container | |
else | |
options = {container: container} | |
// Find and validate container | |
if (options.container) | |
options.container = findContainerFor(options.container) | |
return options | |
} | |
// Internal: Find container element for a variety of inputs. | |
// | |
// Because we can't persist elements using the history API, we must be | |
// able to find a String selector that will consistently find the Element. | |
// | |
// container - A selector String, jQuery object, or DOM Element. | |
// | |
// Returns a jQuery object whose context is `document` and has a selector. | |
function findContainerFor(container) { | |
container = $(container) | |
if ( !container.length ) { | |
throw "no pjax container for " + container.selector | |
} else if ( container.selector !== '' && container.context === document ) { | |
return container | |
} else if ( container.attr('id') ) { | |
return $('#' + container.attr('id')) | |
} else { | |
throw "cant get selector for pjax container!" | |
} | |
} | |
// Internal: Filter and find all elements matching the selector. | |
// | |
// Where $.fn.find only matches descendants, findAll will test all the | |
// top level elements in the jQuery object as well. | |
// | |
// elems - jQuery object of Elements | |
// selector - String selector to match | |
// | |
// Returns a jQuery object. | |
function findAll(elems, selector) { | |
return elems.filter(selector).add(elems.find(selector)); | |
} | |
function parseHTML(html) { | |
return $.parseHTML(html, document, true) | |
} | |
function isScrolledIntoView(elem){ | |
var docViewTop = $("body").scrollTop(), | |
docViewBottom = docViewTop + $(window).height(), | |
$elem = $(elem), | |
elemTop = $elem.offset().top, | |
elemBottom = elemTop + $elem.outerHeight(); | |
return (elemBottom <= docViewBottom && elemTop >= docViewTop); | |
} | |
function getURL(xhr, options) { | |
return stripPjaxParam(xhr.getResponseHeader('X-PJAX-URL') || options.requestUrl); | |
} | |
// Internal: Extracts container and metadata from response. | |
// | |
// 1. Extracts X-PJAX-URL header if set | |
// 2. Extracts inline <title> tags | |
// 3. Builds response Element and extracts fragment if set | |
// | |
// data - String response data | |
// xhr - XHR response | |
// options - pjax options Object | |
// | |
// Returns an Object with url, title, and contents keys. | |
function extractContainer(data, xhr, options) { | |
var obj = {} | |
// Prefer X-PJAX-URL header if it was set, otherwise fallback to | |
// using the original requested url. | |
obj.url = getURL(xhr, options); | |
// Attempt to parse response html into elements | |
var hasHead = false; | |
if (/<html/i.test(data)) { | |
var $head = $(parseHTML(data.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0])) | |
var $body = $(parseHTML(data.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0])) | |
hasHead = true; | |
} else { | |
var $head = $body = $(parseHTML(data)) | |
} | |
// If response data is empty, return fast | |
if ($body.length === 0) | |
return obj | |
// If there's a <title> tag in the header, use it as | |
// the page's title. | |
obj.title = findAll($head, 'title').last().text() | |
if (hasHead) { | |
// Get scripts | |
obj.scripts = findAll($head, 'script[src]') | |
// Get styles | |
obj.styles = findAll($head, 'link[type="text/css"]') | |
} | |
if (options.fragment) { | |
// If they specified a fragment, look for it in the response | |
// and pull it out. | |
if (options.fragment === 'body') { | |
var $fragment = $body | |
} else { | |
var $fragment = findAll($body, options.fragment).first() | |
} | |
if ($fragment.length) { | |
obj.contents = $fragment.contents() | |
// If there's no title, look for data-title and title attributes | |
// on the fragment | |
if (!obj.title) | |
obj.title = $fragment.attr('title') || $fragment.data('title') | |
} | |
} else if (!/<html/i.test($body)) { | |
obj.contents = $body | |
} | |
// Clean up any <title> tags | |
if (obj.contents) { | |
// Remove any parent title elements | |
obj.contents = obj.contents.not(function() { return $(this).is('title') }) | |
// Then scrub any titles from their descendants | |
obj.contents.find('title').remove() | |
} | |
// Trim any whitespace off the title | |
if (obj.title) obj.title = $.trim(obj.title) | |
return obj | |
} | |
// Load an execute scripts using standard script request. | |
// | |
// Avoids jQuery's traditional $.getScript which does a XHR request and | |
// globalEval. | |
// | |
// scripts - jQuery object of script Elements | |
// | |
// Returns nothing. | |
function executeScriptTags(scripts) { | |
if (!scripts) return | |
var existingScripts = $('script[src]') | |
scripts.each(function() { | |
var src = this.src | |
var matchedScripts = existingScripts.filter(function() { | |
return this.src === src | |
}) | |
if (matchedScripts.length) return | |
var script = document.createElement('script') | |
script.type = $(this).attr('type') || 'text/javascript' | |
script.src = $(this).attr('src') | |
script.defer = $(this).prop('defer') | |
// prop() returns TRUE thanks to async being set to TRUE by default on | |
// script-inserted scripts. To work around this, we check if the attribute | |
// exists, and if it does, set to TRUE, else set to FALSE | |
script.async = $(this).attr('async') !== undefined ? true : false | |
document.head.appendChild(script) | |
}) | |
} | |
function addStyleTags(styles) { | |
if (!styles) return | |
var existingStyles = $('link[type="text/css"]') | |
styles.each(function() { | |
var href = this.href | |
var matchedStyles = existingStyles.filter(function() { | |
return this.href === href | |
}) | |
if (matchedStyles.length) return | |
var style = document.createElement('link') | |
style.rel = 'stylesheet' | |
style.type = $(this).attr('type') || 'text/javascript' | |
style.href = $(this).attr('href') | |
style.media = $(this).attr('media') || '' | |
document.head.appendChild(style) | |
}) | |
} | |
// Internal: History DOM caching class. | |
var cacheMapping = {} | |
var cacheForwardStack = [] | |
var cacheBackStack = [] | |
// Push previous state id and container contents into the history | |
// cache. Should be called in conjunction with `pushState` to save the | |
// previous container contents. | |
// | |
// id - State ID Number | |
// value - DOM Element to cache | |
// | |
// Returns nothing. | |
function cachePush(id, value) { | |
// The cache doesn't play well with scripts that make dom changes. So, | |
// we're just disabling the cache. Doesn't really hurt much, and the user | |
// will receive a warning when leaving the page. | |
// | |
// cachePop() is also disabled. | |
return; | |
cacheMapping[id] = value | |
cacheBackStack.push(id) | |
// Remove all entires in forward history stack after pushing | |
// a new page. | |
while (cacheForwardStack.length) | |
delete cacheMapping[cacheForwardStack.shift()] | |
// Trim back history stack to max cache length. | |
while (cacheBackStack.length > pjax.defaults.maxCacheLength) | |
delete cacheMapping[cacheBackStack.shift()] | |
} | |
// Shifts cache from directional history cache. Should be | |
// called on `popstate` with the previous state id and container | |
// contents. | |
// | |
// direction - "forward" or "back" String | |
// id - State ID Number | |
// value - DOM Element to cache | |
// | |
// Returns nothing. | |
function cachePop(direction, id, value) { | |
// The cache doesn't play well with scripts that make dom changes. So, | |
// we're just disabling the cache. Doesn't really hurt much, and the user | |
// will receive a warning when leaving the page. | |
// | |
// cachePush() is also disabled. | |
return; | |
var pushStack, popStack | |
cacheMapping[id] = value | |
if (direction === 'forward') { | |
pushStack = cacheBackStack | |
popStack = cacheForwardStack | |
} else { | |
pushStack = cacheForwardStack | |
popStack = cacheBackStack | |
} | |
pushStack.push(id) | |
if (id = popStack.pop()) | |
delete cacheMapping[id] | |
} | |
// Public: Find version identifier for the initial page load. | |
// | |
// Returns String version or undefined. | |
function findVersion() { | |
return $('meta').filter(function() { | |
var name = $(this).attr('http-equiv') | |
return name && name.toUpperCase() === 'X-PJAX-VERSION' | |
}).attr('content') | |
} | |
// Install pjax functions on $.pjax to enable pushState behavior. | |
// | |
// Does nothing if already enabled. | |
// | |
// Examples | |
// | |
// $.pjax.enable() | |
// | |
// Returns nothing. | |
function enable() { | |
$.fn.pjax = fnPjax | |
$.pjax = pjax | |
$.pjax.enable = $.noop | |
$.pjax.disable = disable | |
$.pjax.click = handleClick | |
$.pjax.submit = handleSubmit | |
$.pjax.reload = pjaxReload | |
$.pjax.defaults = { | |
timeout: 650, | |
push: true, | |
replace: false, | |
type: 'GET', | |
dataType: 'html', | |
scrollTo: 0, | |
maxCacheLength: 20, | |
version: findVersion | |
} | |
$(window).on('popstate.pjax', onPjaxPopstate) | |
} | |
// Disable pushState behavior. | |
// | |
// This is the case when a browser doesn't support pushState. It is | |
// sometimes useful to disable pushState for debugging on a modern | |
// browser. | |
// | |
// Examples | |
// | |
// $.pjax.disable() | |
// | |
// Returns nothing. | |
function disable() { | |
$.fn.pjax = function() { return this } | |
$.pjax = fallbackPjax | |
$.pjax.enable = enable | |
$.pjax.disable = $.noop | |
$.pjax.click = $.noop | |
$.pjax.submit = $.noop | |
$.pjax.reload = function() { window.location.reload() } | |
$(window).off('popstate.pjax', onPjaxPopstate) | |
} | |
// Add the state property to jQuery's event object so we can use it in | |
// $(window).bind('popstate') | |
if ( $.inArray('state', $.event.props) < 0 ) | |
$.event.props.push('state') | |
// Is pjax supported by this browser? | |
$.support.pjax = | |
window.history && window.history.pushState && window.history.replaceState && | |
// pushState isn't reliable on iOS until 5. | |
!navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]|WebApps\/.+CFNetwork)/) | |
$.support.pjax ? enable() : disable() | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment