Support Pjax
This commit is contained in:
Buu Nguyen
parent
493241831a
commit
e294d6f989
|
|
@ -1,5 +1,10 @@
|
|||
## Octotree
|
||||
Chrome extension to display GitHub code in tree format. Useful for developers who frequently read source in GitHub and do not want download or checkout every single repository.
|
||||
Chrome extension to display GitHub code in tree format, making it much easier to navigate code. Useful for developers who frequently read source in GitHub and do not want download or checkout every single repository.
|
||||
|
||||
### Features
|
||||
* Easy-to-navigate tree just like IDEs
|
||||
* Super fast browsing with Pjax
|
||||
* Work with public and private repositories
|
||||
|
||||
## Install
|
||||
* Download and install [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) from the Chrome store
|
||||
|
|
@ -32,7 +37,6 @@ localStorage.setItem('octotree.github_access_token', 'REPLACE WITH TOKEN')
|
|||
## Contribution
|
||||
There are several improvements that can be made to Octotree. Contribution is very welcome.
|
||||
|
||||
- [ ] Pjax when navigating among code files, like GitHub does natively
|
||||
- [ ] Hide sidebar when navigating to non-code pages like Issues, PRs...
|
||||
- [ ] Make the width of the sidebar resizable
|
||||
- [ ] Allow users to enter access token any time (i.e. a new button?)
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ html {
|
|||
-webkit-transition: margin-left 0.2s ease-in;
|
||||
}
|
||||
html.octotree { margin-left: 240px }
|
||||
|
||||
/* Scrollbar */
|
||||
.octotree_sidebar .inner {
|
||||
height: 100%;
|
||||
|
|
@ -31,6 +32,7 @@ html.octotree { margin-left: 240px }
|
|||
}
|
||||
.octotree_sidebar .inner::-webkit-scrollbar-thumb:window-inactive { background: rgba(100,100,100,0.4) }
|
||||
.octotree_sidebar .inner::-webkit-scrollbar-corner { background: transparent }
|
||||
|
||||
/* Sidebar */
|
||||
.octotree_sidebar {
|
||||
position: fixed;
|
||||
|
|
@ -78,6 +80,7 @@ html.octotree { margin-left: 240px }
|
|||
height: 16px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Token form */
|
||||
.octotree_sidebar form div { margin: 5px }
|
||||
.octotree_sidebar form input { width: 230px }
|
||||
|
|
@ -93,6 +96,7 @@ html.octotree { margin-left: 240px }
|
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1p;
|
||||
}
|
||||
.octotree_sidebar form > .error { color: #d35400 }
|
||||
|
||||
/* Toggle button */
|
||||
.octotree_toggle {
|
||||
position: fixed;
|
||||
|
|
@ -113,4 +117,4 @@ html.octotree { margin-left: 240px }
|
|||
transition: left 0.2s ease-in;
|
||||
-webkit-transition: left 0.2s ease-in;
|
||||
}
|
||||
.octotree .octotree_toggle { left: 215px }
|
||||
.octotree .octotree_toggle { left: 215px }
|
||||
37
inject.js
37
inject.js
|
|
@ -24,7 +24,6 @@
|
|||
'</form>')
|
||||
, $toggler = $('<div class="octotree_toggle">☰</div>')
|
||||
, store = new Storage()
|
||||
, selectedItem
|
||||
|
||||
$(document).ready(function() {
|
||||
loadRepo(true)
|
||||
|
|
@ -52,8 +51,11 @@
|
|||
// must not be a reserved `username`
|
||||
if (~['settings', 'organizations', 'site'].indexOf(match[1])) return false
|
||||
|
||||
// TODO: the intention is to hide the sidebar when users navigate to non-code areas (e.g. Issues, Pulls)
|
||||
// and show it again when users navigate back to the code area
|
||||
// the first part is achieved with the next two lines; but need to implement the second part
|
||||
// before activating the entire feature, PR is welcome
|
||||
// if match[3] exists, it must be either 'tree' or 'blob'
|
||||
// TODO: problem is, when navigate back, say from Issues to code, need to detect & refetch
|
||||
// if (match[3] && !~['tree', 'blob'].indexOf(match[3])) return false
|
||||
|
||||
return {
|
||||
|
|
@ -81,9 +83,13 @@
|
|||
folder.push(item)
|
||||
item.text = name
|
||||
item.icon = item.type
|
||||
item.a_attr = { href: url }
|
||||
if (item.type === 'tree') folders[item.path] = item.children = []
|
||||
else if (item.type === 'blob') item._url = url
|
||||
if (item.type === 'tree') {
|
||||
folders[item.path] = item.children = []
|
||||
item.a_attr = { href: '#' }
|
||||
}
|
||||
else if (item.type === 'blob') {
|
||||
item.a_attr = { href: url }
|
||||
}
|
||||
})
|
||||
|
||||
done(null, sort(root))
|
||||
|
|
@ -124,19 +130,16 @@
|
|||
.delegate('.jstree-closed>a', 'click.jstree', function() {
|
||||
$.jstree.reference(this).open_node(this)
|
||||
})
|
||||
|
||||
// The next 2 listeners are ugly
|
||||
// basically I need a way to distingush between selection caused by user clicking a node
|
||||
// and selection caused during restoration phase of jsTree's state plugin
|
||||
// The former happens to trigger a `click` after `select_node`
|
||||
.bind('select_node.jstree', function(e, data) {
|
||||
selectedItem = data.node.original
|
||||
.on('click', function(e) {
|
||||
var $target = $(e.target)
|
||||
if ($target.is('a.jstree-anchor') && $target.children(':first').hasClass('blob')) {
|
||||
$.pjax({
|
||||
url: $target.attr('href'),
|
||||
container: $('#js-repo-pjax-container')
|
||||
})
|
||||
}
|
||||
})
|
||||
.bind('click.jstree', function() {
|
||||
// TODO: Pjax instead of reloading entire page
|
||||
if (selectedItem && selectedItem._url) window.location.href = selectedItem._url
|
||||
})
|
||||
.bind('ready.jstree', function() {
|
||||
.on('ready.jstree', function() {
|
||||
updateSidebar(repo.username + ' / ' + repo.reponame + ' [' + repo.branch + ']')
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,842 @@
|
|||
// jquery.pjax.js
|
||||
// copyright chris wanstrath
|
||||
// https://github.com/defunkt/jquery-pjax
|
||||
|
||||
(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"
|
||||
|
||||
var defaults = {
|
||||
type: form.method.toUpperCase(),
|
||||
url: form.action,
|
||||
data: $(form).serializeArray(),
|
||||
container: $(form).attr('data-pjax'),
|
||||
target: form
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
xhr.setRequestHeader('X-PJAX', 'true')
|
||||
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')
|
||||
|
||||
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 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.
|
||||
try {
|
||||
document.activeElement.blur()
|
||||
} catch (e) { }
|
||||
|
||||
if (container.title) document.title = container.title
|
||||
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.
|
||||
//
|
||||
// http://www.w3.org/html/wg/drafts/html/master/forms.html
|
||||
var autofocusEl = context.find('input[autofocus], textarea[autofocus]').last()[0]
|
||||
if (autofocusEl && document.activeElement !== autofocusEl) {
|
||||
autofocusEl.focus();
|
||||
}
|
||||
|
||||
executeScriptTags(container.scripts)
|
||||
|
||||
// Scroll to top by default
|
||||
if (typeof options.scrollTo === 'number')
|
||||
$(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 && 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)
|
||||
}
|
||||
|
||||
// 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 = stripPjaxParam(xhr.getResponseHeader('X-PJAX-URL') || options.requestUrl)
|
||||
|
||||
// Attempt to parse response html into elements
|
||||
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]))
|
||||
} 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 (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(data)) {
|
||||
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()
|
||||
|
||||
// Gather all script[src] elements
|
||||
obj.scripts = findAll(obj.contents, 'script[src]').remove()
|
||||
obj.contents = obj.contents.not(obj.scripts)
|
||||
}
|
||||
|
||||
// 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')
|
||||
script.src = $(this).attr('src')
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
}
|
||||
|
||||
// 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) {
|
||||
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) {
|
||||
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);
|
||||
1
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
"lib/js/underscore.js",
|
||||
"lib/js/jquery.js",
|
||||
"lib/js/jstree.js",
|
||||
"lib/js/jquery.pjax.js",
|
||||
"lib/js/base64.js",
|
||||
"lib/js/github.js",
|
||||
"inject.js"
|
||||
|
|
|
|||
Loading…
Reference in New Issue