Start work on URL fragment based pagination

This commit is contained in:
Wesley Moore 2010-02-01 12:59:21 +11:00
parent 371b43a904
commit 43d2baa267
2 changed files with 104 additions and 9 deletions

View file

@ -1,15 +1,57 @@
var articles;
jQuery(function(){
// Keep a mapping of url-to-container for caching purposes.
var articles = null;
function articles_loaded(data) {
articles = data;
console.log(data);
$('.pagination').slideDown('fast');
};
function articles_loaded(data) {
articles = data;
$('.pagination').slideDown('fast');
};
function show_page() {
};
// Bind an event to window.onhashchange that, when the history state changes,
// gets the url from the hash and displays either our cached content or fetches
// new content to be displayed.
$(window).bind('hashchange', function(e) {
// Get the hash (fragment) as a string, with any leading # removed. Note that
// in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
var url = e.fragment;
if ( articles ) {
// Since the element is already in the cache, it doesn't need to be
// created, so instead of creating it again, let's just show it!
} else {
// // Show "loading" content while AJAX content loads.
// $( '.bbq-loading' ).show();
//
// // Create container for this url's content and store a reference to it in
// // the cache.
// cache[ url ] = $( '<div class="bbq-item"/>' )
//
// // Append the content container to the parent container.
// .appendTo( '.bbq-content' )
//
// // Load external content via AJAX. Note that in order to keep this
// // example streamlined, only the content in .infobox is shown. You'll
// // want to change this based on your needs.
// .load( url, function(){
// // Content loaded, hide "loading" content.
// $( '.bbq-loading' ).hide();
// });
var d = new Date(Date.parse());
jQuery.get('json/articles.json', {}, articles_loaded, 'json');
}
})
jQuery(function() {
$('.newer, .older').click(function() {
var elem = $(this);
var page;
var matches;
if(matches = elem.attr('href').match(/(\d+)$/)) {
@ -29,5 +71,40 @@ jQuery(function() {
return false;
});
jQuery.get('json/articles.json', {}, articles_loaded, 'json');
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).trigger( 'hashchange' );
});
// var articles;
//
// jQuery(function() {
// $('.newer, .older').click(function() {
// var elem = $(this);
//
// var page;
// var matches;
// if(matches = elem.attr('href').match(/(\d+)$/)) {
// page = new Number(matches[1]);
// }
// else {
// return false;
// }
//
// var per_page = 10;
//
// var i = (page - 1) * per_page;
// for(; i < page * per_page; i++) {
// console.log(articles[i].title);
// }
//
// return false;
// });
//
// jQuery.get('json/articles.json', {}, articles_loaded, 'json');
// });

18
output/js/jquery.ba-bbq.min.js vendored Normal file
View file

@ -0,0 +1,18 @@
/*
* jQuery BBQ: Back Button & Query Library - v1.1.1 - 1/22/2010
* http://benalman.com/projects/jquery-bbq-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,n){var g,o=n.location,k=Array.prototype.slice,q=decodeURIComponent,a=$.param,c,j,u,b=$.bbq=$.bbq||{},p,t,h,e=$.event.special,d="hashchange",z="querystring",C="fragment",x="elemUrlAttr",i="href",s="src",w=/^.*\?|#.*$/g,v=/^.*\#/,B={};function D(E){return typeof E==="string"}function A(F){var E=k.call(arguments,1);return function(){return F.apply(this,E.concat(k.call(arguments)))}}function l(E){return E.replace(/^[^#]*#?(.*)$/,"$1")}function m(E){return E.replace(/(?:^[^?#]*\?([^#]*).*$)?.*/,"$1")}function f(G,L,E,H,F){var N,K,J,M,I;if(H!==g){J=E.match(G?/^([^#]*)\#?(.*)$/:/^([^#?]*)\??([^#]*)(#?.*)/);I=J[3]||"";if(F===2&&D(H)){K=H.replace(G?v:w,"")}else{M=j(J[2]);H=D(H)?j[G?C:z](H):H;K=F===2?H:F===1?$.extend({},H,M):$.extend({},M,H);K=a(K)}N=J[1]+(G?"#":K||!J[1]?"?":"")+K+I}else{N=L(E!==g?E:o[i])}return N}a[z]=A(f,0,m);a[C]=c=A(f,1,l);$.deparam=j=function(H,E){var G={},F={"true":!0,"false":!1,"null":null};$.each(H.replace(/\+/g," ").split("&"),function(K,P){var J=P.split("="),O=q(J[0]),I,N=G,L=0,Q=O.split("]["),M=Q.length-1;if(/\[/.test(Q[0])&&/\]$/.test(Q[M])){Q[M]=Q[M].replace(/\]$/,"");Q=Q.shift().split("[").concat(Q);M=Q.length-1}else{M=0}if(J.length===2){I=q(J[1]);if(E){I=I&&!isNaN(I)?+I:I==="undefined"?g:F[I]!==g?F[I]:I}if(M){for(;L<=M;L++){O=Q[L]===""?N.length:Q[L];N=N[O]=L<M?N[O]||(Q[L+1]&&isNaN(Q[L+1])?{}:[]):I}}else{if($.isArray(G[O])){G[O].push(I)}else{if(G[O]!==g){G[O]=[G[O],I]}else{G[O]=I}}}}else{if(O){G[O]=E?g:""}}});return G};function y(G,E,F){if(E===g||typeof E==="boolean"){F=E;E=a[G?C:z]()}else{E=D(E)?E.replace(G?v:w,""):E}return j(E,F)}j[z]=A(y,0);j[C]=u=A(y,1);$[x]||($[x]=function(E){return $.extend(B,E)})({a:i,base:i,iframe:s,img:s,input:s,form:"action",link:i,script:s});h=$[x];function r(H,F,G,E){if(!D(G)&&typeof G!=="object"){E=G;G=F;F=g}return this.each(function(){var K=$(this),I=F||h()[(this.nodeName||"").toLowerCase()]||"",J=I&&K.attr(I)||"";K.attr(I,a[H](J,G,E))})}$.fn[z]=A(r,z);$.fn[C]=A(r,C);b.pushState=p=function(H,E){if(D(H)&&/^#/.test(H)&&E===g){E=2}var G=H!==g,F=c(o[i],G?H:{},G?E:2);o[i]=F+(/#/.test(F)?"":"#")};b.getState=t=function(E,F){return E===g||typeof E==="boolean"?u(E):u(F)[E]};b.removeState=function(E){var F={};if(E!==g){F=t();$.each($.isArray(E)?E:arguments,function(H,G){delete F[G]})}p(F,2)};e[d]=$.extend(e[d],{add:function(E,G,F){return function(I){var H=I[C]=c();I.getState=function(J,K){return J===g||typeof J==="boolean"?j(H,J):j(H,K)[J]};E.apply(this,arguments)}}})})(jQuery,this);
/*
* jQuery hashchange event - v1.1 - 1/21/2010
* http://benalman.com/projects/jquery-hashchange-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,i,b){var h=i.location,j,k=$.event.special,c="hashchange",e=$.browser,f=document.documentMode,g=e.msie&&(f===b||f<8),d="on"+c in i&&!g;function a(l){l=l||h.href;return l.replace(/^[^#]*#?(.*)$/,"$1")}$[c+"Delay"]=100;k[c]=$.extend(k[c],{setup:function(){if(d){return false}j.start()},teardown:function(){if(d){return false}j.stop()}});j=(function(){var l={},q,m,n,p;function o(){n=p=function(r){return r};if(g){m=$('<iframe src="javascript:0"/>').hide().appendTo("body")[0].contentWindow;p=function(){return a(m.document.location.href)};n=function(t,r){if(t!==r){var s=m.document;s.open().close();s.location.hash="#"+t}};n(a())}}l.start=function(){if(q){return}var s=a();n||o();(function r(){var u=a(),t=p(s);if(u!==s){n(s=u,t);$(i).trigger(c)}else{if(t!==s){h.href=h.href.replace(/#.*/,"")+"#"+t}}q=setTimeout(r,$[c+"Delay"])})()};l.stop=function(){if(!m){q&&clearTimeout(q);q=0}};return l})()})(jQuery,this);