wezm/wezm.net
1
0
Fork 1
mirror of https://github.com/wezm/wezm.net.git synced 2024-12-18 18:29:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add a page item for JS pagination

Browse source 
Doing the archives this way removes the problem of loading page 1 then replacing it with page 2
This commit is contained in:
Wesley Moore 2010-02-03 13:34:04 +11:00
parent 466312f552
commit 762b56e401
12 changed files with 56 additions and 504 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
Rules
View file

@ -18,14 +18,26 @@ compile '/articles/' do
filter :erb filter :erb
layout 'articles' layout 'articles'
end end
compile '/articles/page/' do
filter :erb
layout 'articles'
end
compile '/technical/articles/' do compile '/technical/articles/' do
filter :erb filter :erb
layout 'articles' layout 'articles'
end end
compile '/technical/articles/page/' do
filter :erb
layout 'articles'
end
compile '/personal/articles/' do compile '/personal/articles/' do
filter :erb filter :erb
layout 'articles' layout 'articles'
end end
compile '/personal/articles/page/' do
filter :erb
layout 'articles'
end
compile '*' do compile '*' do
filter :rdiscount filter :rdiscount

2
content/articles.html
View file

@ -1,3 +1,5 @@
<ul class="articles">
<% sorted_articles[0..9].each do |article| %> <% sorted_articles[0..9].each do |article| %>
<%= render 'article', :article => article %> <%= render 'article', :article => article %>
<% end %> <% end %>
</ul>

1
content/articles/page.html Normal file
View file

@ -0,0 +1 @@
<ul class="aricles"></ul>

2
content/articles/page.yaml Normal file
View file

@ -0,0 +1,2 @@
---
title: All Articles

1
content/personal/articles/page.html Normal file
View file

@ -0,0 +1 @@
<ul class="aricles"></ul>

2
content/personal/articles/page.yaml Normal file
View file

@ -0,0 +1,2 @@
---
title: Personal Articles

1
content/technical/articles/page.html Normal file
View file

@ -0,0 +1 @@
<ul class="aricles"></ul>

2
content/technical/articles/page.yaml Normal file
View file

@ -0,0 +1,2 @@
---
title: Technical Articles

17
layouts/articles.html
View file

@ -3,10 +3,19 @@
<head> <head>
<%= render 'head_common' %> <%= render 'head_common' %>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<% if @item.identifier =~ %r{/page/$} %>
<script src="/js/jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script> <script src="/js/jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.blockUI.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script> <script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/articles.js" type="text/javascript" charset="utf-8"></script> <script src="/js/articles.js" type="text/javascript" charset="utf-8"></script>
<% else %>
<script type="text/javascript" charset="utf-8">
jQuery(function() {
// pagination and search require javascript, so reveal them with javascript
$('.pagination').show();
$('#search').show();
});
</script>
<% end %>
</head> </head>
<body class="articles"> <body class="articles">
<%= render 'header' %> <%= render 'header' %>
@ -31,7 +40,6 @@
<fieldset> <fieldset>
<label for="query">Search</label> <label for="query">Search</label>
<input type="text" name="q" id="query" value="" /> <input type="text" name="q" id="query" value="" />
<!-- <input type="submit" name="submitquery" id="submitquery" value="Go" /> -->
<span class="sbox_r"></span> <span class="sbox_r"></span>
</fieldset> </fieldset>
</li> </li>
@ -42,9 +50,10 @@
</ul> </ul>
<div class="pagination"> <div class="pagination">
<a href="#page-0" class="older">&laquo; Older</a> <% pagepath = @item.identifier; pagepath += 'page/' if pagepath !~ %r{/page/$} %>
<a href="<%= pagepath %>" class="older">&laquo; Older</a>
| |
<a href="#page-2" class="newer">Newer &raquo;</a> <a href="<%= pagepath %>#2" class="newer">Newer &raquo;</a>
</div> </div>
</div> </div>
<%= render 'footer' %> <%= render 'footer' %>

5
output/css/style.css
View file

@ -145,6 +145,9 @@ body.article #content {
display: none; display: none;
text-align: center; text-align: center;
} }
.pagination .older {
visibility: hidden;
}
/* Home page post listing columns */ /* Home page post listing columns */
.column { .column {
@ -233,7 +236,7 @@ ul.menu li:first-child {
#search { #search {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: block; display: none;
float: left; float: left;
margin-right: 20px; margin-right: 20px;
background: #fff url(/images/srch_l.gif) 0 0 no-repeat; background: #fff url(/images/srch_l.gif) 0 0 no-repeat;

38
output/js/articles.js
View file

@ -18,9 +18,9 @@
}; };
function update_pagination_controls(page) { function update_pagination_controls(page) {
var newer = $('.pagination .newer').attr('href', '#page-' + (page + 1)); var newer = $('.pagination .newer').attr('href', '#' + (page + 1));
var older = $('.pagination .older').attr('href', '#page-' + (page - 1)); var older = $('.pagination .older').attr('href', '#' + (page - 1));
// Hide if out of range // Hide if out of range
older.css('visibility', page <= 1 ? 'hidden' : 'visible'); older.css('visibility', page <= 1 ? 'hidden' : 'visible');
newer.css('visibility', page * per_page >= articles.length ? 'hidden' : 'visible'); newer.css('visibility', page * per_page >= articles.length ? 'hidden' : 'visible');
@ -29,30 +29,23 @@
function articles_loaded(data) { function articles_loaded(data) {
articles = data; articles = data;
jQuery(function() { jQuery(function() {
$(window).bind('hashchange', function(e, first_time) { $(window).bind('hashchange', function(e) {
// Get the hash (fragment) as a string, with any leading # removed. Note that // 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(). // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
var page; var page;
var matches; var matches;
var page_fragment = e.fragment; var page_fragment = e.fragment;
if(matches = page_fragment.match(/page-(\d+)$/)) { if(matches = page_fragment.match(/(\d+)$/)) {
page = new Number(matches[1]); page = new Number(matches[1]);
} }
else { else {
update_pagination_controls(1); page = 1;
return false;
}
var container = $('ul.articles');
if(first_time && page != 1) {
container.block({
message: '<span>Loading</span>',
css: { border: '3px solid #1c1c1c' }
});
} }
// Generate the items var container = $('ul.articles');
container.empty(); container.empty();
// Generate the items
var i = (page - 1) * per_page; var i = (page - 1) * per_page;
for(; i < page * per_page && i < articles.length; i++) { for(; i < page * per_page && i < articles.length; i++) {
var article = articles[i]; var article = articles[i];
@ -69,16 +62,17 @@
var li = render_article(article_view); var li = render_article(article_view);
container.append(li); container.append(li);
} }
if(first_time && page != 1) container.unblock();
update_pagination_controls(page); update_pagination_controls(page);
window.document.title = "All Articles - Page " + page
}); });
// Since the event is only triggered when the hash changes, we need to trigger // 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. // the event now, to handle the hash the page may have loaded with.
$(window).trigger('hashchange', true); $(window).trigger('hashchange');
$('.pagination').slideDown('fast'); $('.pagination').show();
$('#search').show();
if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) { if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) {
// WebKit browser // WebKit browser
$('#search input').css('paddingTop', 0); $('#search input').css('paddingTop', 0);
@ -87,5 +81,5 @@
}; };
// Load articles JSON ASAP // Load articles JSON ASAP
jQuery.getJSON('json/articles.json', {}, articles_loaded); jQuery.getJSON('../json/articles.json', {}, articles_loaded);
})(); })();

477
output/js/jquery.blockUI.js
View file

@ -1,477 +0,0 @@
/*!
* jQuery blockUI plugin
* Version 2.31 (06-JAN-2010)
* @requires jQuery v1.2.3 or later
*
* Examples at: http://malsup.com/jquery/block/
* Copyright (c) 2007-2008 M. Alsup
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Thanks to Amir-Hossein Sobhi for some excellent contributions!
*/
;(function($) {
if (/1\.(0|1|2)\.(0|1|2)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
alert('blockUI requires jQuery v1.2.3 or later! You are using v' + $.fn.jquery);
return;
}
$.fn._fadeIn = $.fn.fadeIn;
var noOp = function() {};
// this bit is to ensure we don't call setExpression when we shouldn't (with extra muscle to handle
// retarded userAgent strings on Vista)
var mode = document.documentMode || 0;
var setExpr = $.browser.msie && (($.browser.version < 8 && !mode) || mode < 8);
var ie6 = $.browser.msie && /MSIE 6.0/.test(navigator.userAgent) && !mode;
// global $ methods for blocking/unblocking the entire page
$.blockUI = function(opts) { install(window, opts); };
$.unblockUI = function(opts) { remove(window, opts); };
// convenience method for quick growl-like notifications (http://www.google.com/search?q=growl)
$.growlUI = function(title, message, timeout, onClose) {
var $m = $('<div class="growlUI"></div>');
if (title) $m.append('<h1>'+title+'</h1>');
if (message) $m.append('<h2>'+message+'</h2>');
if (timeout == undefined) timeout = 3000;
$.blockUI({
message: $m, fadeIn: 700, fadeOut: 1000, centerY: false,
timeout: timeout, showOverlay: false,
onUnblock: onClose,
css: $.blockUI.defaults.growlCSS
});
};
// plugin method for blocking element content
$.fn.block = function(opts) {
return this.unblock({ fadeOut: 0 }).each(function() {
if ($.css(this,'position') == 'static')
this.style.position = 'relative';
if ($.browser.msie)
this.style.zoom = 1; // force 'hasLayout'
install(this, opts);
});
};
// plugin method for unblocking element content
$.fn.unblock = function(opts) {
return this.each(function() {
remove(this, opts);
});
};
$.blockUI.version = 2.31; // 2nd generation blocking at no extra cost!
// override these in your code to change the default behavior and style
$.blockUI.defaults = {
// message displayed when blocking (use null for no message)
message: '<h1>Please wait...</h1>',
title: null, // title string; only used when theme == true
draggable: true, // only used when theme == true (requires jquery-ui.js to be loaded)
theme: false, // set to true to use with jQuery UI themes
// styles for the message when blocking; if you wish to disable
// these and use an external stylesheet then do this in your code:
// $.blockUI.defaults.css = {};
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},
// minimal style set used when themes are used
themedCSS: {
width: '30%',
top: '40%',
left: '35%'
},
// styles for the overlay
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6,
cursor: 'wait'
},
// styles applied when using $.growlUI
growlCSS: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: 'default',
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px'
},
// IE issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w
// (hat tip to Jorge H. N. de Vasconcelos)
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',
// force usage of iframe in non-IE browsers (handy for blocking applets)
forceIframe: false,
// z-index for the blocking overlay
baseZ: 1000,
// set these to true to have the message automatically centered
centerX: true, // <-- only effects element blocking (page block controlled via css above)
centerY: true,
// allow body element to be stetched in ie6; this makes blocking look better
// on "short" pages. disable if you wish to prevent changes to the body height
allowBodyStretch: true,
// enable if you want key and mouse events to be disabled for content that is blocked
bindEvents: true,
// be default blockUI will supress tab navigation from leaving blocking content
// (if bindEvents is true)
constrainTabKey: true,
// fadeIn time in millis; set to 0 to disable fadeIn on block
fadeIn: 200,
// fadeOut time in millis; set to 0 to disable fadeOut on unblock
fadeOut: 400,
// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
timeout: 0,
// disable if you don't want to show the overlay
showOverlay: true,
// if true, focus will be placed in the first available input field when
// page blocking
focusInput: true,
// suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
applyPlatformOpacityRules: true,
// callback method invoked when fadeIn has completed and blocking message is visible
onBlock: null,
// callback method invoked when unblocking has completed; the callback is
// passed the element that has been unblocked (which is the window object for page
// blocks) and the options that were passed to the unblock call:
// onUnblock(element, options)
onUnblock: null,
// don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeOffsetHack: 4
};
// private data and functions follow...
var pageBlock = null;
var pageBlockEls = [];
function install(el, opts) {
var full = (el == window);
var msg = opts && opts.message !== undefined ? opts.message : undefined;
opts = $.extend({}, $.blockUI.defaults, opts || {});
opts.overlayCSS = $.extend({}, $.blockUI.defaults.overlayCSS, opts.overlayCSS || {});
var css = $.extend({}, $.blockUI.defaults.css, opts.css || {});
var themedCSS = $.extend({}, $.blockUI.defaults.themedCSS, opts.themedCSS || {});
msg = msg === undefined ? opts.message : msg;
// remove the current block (if there is one)
if (full && pageBlock)
remove(window, {fadeOut:0});
// if an existing element is being used as the blocking content then we capture
// its current place in the DOM (and current display style) so we can restore
// it when we unblock
if (msg && typeof msg != 'string' && (msg.parentNode || msg.jquery)) {
var node = msg.jquery ? msg[0] : msg;
var data = {};
$(el).data('blockUI.history', data);
data.el = node;
data.parent = node.parentNode;
data.display = node.style.display;
data.position = node.style.position;
if (data.parent)
data.parent.removeChild(node);
}
var z = opts.baseZ;
// blockUI uses 3 layers for blocking, for simplicity they are all used on every platform;
// layer1 is the iframe layer which is used to supress bleed through of underlying content
// layer2 is the overlay layer which has opacity and a wait cursor (by default)
// layer3 is the message content that is displayed while blocking
var lyr1 = ($.browser.msie || opts.forceIframe)
? $('<iframe class="blockUI" style="z-index:'+ (z++) +';display:none;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" src="'+opts.iframeSrc+'"></iframe>')
: $('<div class="blockUI" style="display:none"></div>');
var lyr2 = $('<div class="blockUI blockOverlay" style="z-index:'+ (z++) +';display:none;border:none;margin:0;padding:0;width:100%;height:100%;top:0;left:0"></div>');
var lyr3;
if (opts.theme && full) {
var s = '<div class="blockUI blockMsg blockPage ui-dialog ui-widget ui-corner-all" style="z-index:'+z+';display:none;position:fixed">' +
'<div class="ui-widget-header ui-dialog-titlebar blockTitle">'+(opts.title || '&nbsp;')+'</div>' +
'<div class="ui-widget-content ui-dialog-content"></div>' +
'</div>';
lyr3 = $(s);
}
else {
lyr3 = full ? $('<div class="blockUI blockMsg blockPage" style="z-index:'+z+';display:none;position:fixed"></div>')
: $('<div class="blockUI blockMsg blockElement" style="z-index:'+z+';display:none;position:absolute"></div>');
}
// if we have a message, style it
if (msg) {
if (opts.theme) {
lyr3.css(themedCSS);
lyr3.addClass('ui-widget-content');
}
else
lyr3.css(css);
}
// style the overlay
if (!opts.applyPlatformOpacityRules || !($.browser.mozilla && /Linux/.test(navigator.platform)))
lyr2.css(opts.overlayCSS);
lyr2.css('position', full ? 'fixed' : 'absolute');
// make iframe layer transparent in IE
if ($.browser.msie || opts.forceIframe)
lyr1.css('opacity',0.0);
//$([lyr1[0],lyr2[0],lyr3[0]]).appendTo(full ? 'body' : el);
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
$.each(layers, function() {
this.appendTo($par);
});
if (opts.theme && opts.draggable && $.fn.draggable) {
lyr3.draggable({
handle: '.ui-dialog-titlebar',
cancel: 'li'
});
}
// ie7 must use absolute positioning in quirks mode and to account for activex issues (when scrolling)
var expr = setExpr && (!$.boxModel || $('object,embed', full ? null : el).length > 0);
if (ie6 || expr) {
// give body 100% height
if (full && opts.allowBodyStretch && $.boxModel)
$('html,body').css('height','100%');
// fix ie6 issue when blocked element has a border width
if ((ie6 || !$.boxModel) && !full) {
var t = sz(el,'borderTopWidth'), l = sz(el,'borderLeftWidth');
var fixT = t ? '(0 - '+t+')' : 0;
var fixL = l ? '(0 - '+l+')' : 0;
}
// simulate fixed position
$.each([lyr1,lyr2,lyr3], function(i,o) {
var s = o[0].style;
s.position = 'absolute';
if (i < 2) {
full ? s.setExpression('height','Math.max(document.body.scrollHeight, document.body.offsetHeight) - (jQuery.boxModel?0:'+opts.quirksmodeOffsetHack+') + "px"')
: s.setExpression('height','this.parentNode.offsetHeight + "px"');
full ? s.setExpression('width','jQuery.boxModel && document.documentElement.clientWidth || document.body.clientWidth + "px"')
: s.setExpression('width','this.parentNode.offsetWidth + "px"');
if (fixL) s.setExpression('left', fixL);
if (fixT) s.setExpression('top', fixT);
}
else if (opts.centerY) {
if (full) s.setExpression('top','(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"');
s.marginTop = 0;
}
else if (!opts.centerY && full) {
var top = (opts.css && opts.css.top) ? parseInt(opts.css.top) : 0;
var expression = '((document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + '+top+') + "px"';
s.setExpression('top',expression);
}
});
}
// show the message
if (msg) {
if (opts.theme)
lyr3.find('.ui-widget-content').append(msg);
else
lyr3.append(msg);
if (msg.jquery || msg.nodeType)
$(msg).show();
}
if (($.browser.msie || opts.forceIframe) && opts.showOverlay)
lyr1.show(); // opacity is zero
if (opts.fadeIn) {
var cb = opts.onBlock ? opts.onBlock : noOp;
var cb1 = (opts.showOverlay && !msg) ? cb : noOp;
var cb2 = msg ? cb : noOp;
if (opts.showOverlay)
lyr2._fadeIn(opts.fadeIn, cb1);
if (msg)
lyr3._fadeIn(opts.fadeIn, cb2);
}
else {
if (opts.showOverlay)
lyr2.show();
if (msg)
lyr3.show();
if (opts.onBlock)
opts.onBlock();
}
// bind key and mouse events
bind(1, el, opts);
if (full) {
pageBlock = lyr3[0];
pageBlockEls = $(':input:enabled:visible',pageBlock);
if (opts.focusInput)
setTimeout(focus, 20);
}
else
center(lyr3[0], opts.centerX, opts.centerY);
if (opts.timeout) {
// auto-unblock
var to = setTimeout(function() {
full ? $.unblockUI(opts) : $(el).unblock(opts);
}, opts.timeout);
$(el).data('blockUI.timeout', to);
}
};
// remove the block
function remove(el, opts) {
var full = (el == window);
var $el = $(el);
var data = $el.data('blockUI.history');
var to = $el.data('blockUI.timeout');
if (to) {
clearTimeout(to);
$el.removeData('blockUI.timeout');
}
opts = $.extend({}, $.blockUI.defaults, opts || {});
bind(0, el, opts); // unbind events
var els;
if (full) // crazy selector to handle odd field errors in ie6/7
els = $('body').children().filter('.blockUI').add('body > .blockUI');
else
els = $('.blockUI', el);
if (full)
pageBlock = pageBlockEls = null;
if (opts.fadeOut) {
els.fadeOut(opts.fadeOut);
setTimeout(function() { reset(els,data,opts,el); }, opts.fadeOut);
}
else
reset(els, data, opts, el);
};
// move blocking element back into the DOM where it started
function reset(els,data,opts,el) {
els.each(function(i,o) {
// remove via DOM calls so we don't lose event handlers
if (this.parentNode)
this.parentNode.removeChild(this);
});
if (data && data.el) {
data.el.style.display = data.display;
data.el.style.position = data.position;
if (data.parent)
data.parent.appendChild(data.el);
$(el).removeData('blockUI.history');
}
if (typeof opts.onUnblock == 'function')
opts.onUnblock(el,opts);
};
// bind/unbind the handler
function bind(b, el, opts) {
var full = el == window, $el = $(el);
// don't bother unbinding if there is nothing to unbind
if (!b && (full && !pageBlock || !full && !$el.data('blockUI.isBlocked')))
return;
if (!full)
$el.data('blockUI.isBlocked', b);
// don't bind events when overlay is not in use or if bindEvents is false
if (!opts.bindEvents || (b && !opts.showOverlay))
return;
// bind anchors and inputs for mouse and key events
var events = 'mousedown mouseup keydown keypress';
b ? $(document).bind(events, opts, handler) : $(document).unbind(events, handler);
// former impl...
// var $e = $('a,:input');
// b ? $e.bind(events, opts, handler) : $e.unbind(events, handler);
};
// event handler to suppress keyboard/mouse events when blocking
function handler(e) {
// allow tab navigation (conditionally)
if (e.keyCode && e.keyCode == 9) {
if (pageBlock && e.data.constrainTabKey) {
var els = pageBlockEls;
var fwd = !e.shiftKey && e.target == els[els.length-1];
var back = e.shiftKey && e.target == els[0];
if (fwd || back) {
setTimeout(function(){focus(back)},10);
return false;
}
}
}
// allow events within the message content
if ($(e.target).parents('div.blockMsg').length > 0)
return true;
// allow events for content that is not being blocked
return $(e.target).parents().children().filter('div.blockUI').length == 0;
};
function focus(back) {
if (!pageBlockEls)
return;
var e = pageBlockEls[back===true ? pageBlockEls.length-1 : 0];
if (e)
e.focus();
};
function center(el, x, y) {
var p = el.parentNode, s = el.style;
var l = ((p.offsetWidth - el.offsetWidth)/2) - sz(p,'borderLeftWidth');
var t = ((p.offsetHeight - el.offsetHeight)/2) - sz(p,'borderTopWidth');
if (x) s.left = l > 0 ? (l+'px') : '0';
if (y) s.top = t > 0 ? (t+'px') : '0';
};
function sz(el, p) {
return parseInt($.css(el,p))||0;
};
})(jQuery);