From ed7c6183be0662e767e8a632b8cab07d8616559d Mon Sep 17 00:00:00 2001 From: Wesley Moore Date: Mon, 23 Nov 2009 20:33:21 +1100 Subject: [PATCH] Start implementing JS pagination of articles --- layouts/articles.html | 17 +++-------------- layouts/listing.html | 8 ++++---- output/css/style.css | 7 ++++++- output/js/articles.js | 33 +++++++++++++++++++++++++++++++++ 4 files changed, 46 insertions(+), 19 deletions(-) create mode 100644 output/js/articles.js diff --git a/layouts/articles.html b/layouts/articles.html index 7b99c55..8ab87fc 100644 --- a/layouts/articles.html +++ b/layouts/articles.html @@ -7,18 +7,7 @@ - - + <%= render 'header' %> @@ -39,9 +28,9 @@ <%= render 'footer' %> diff --git a/layouts/listing.html b/layouts/listing.html index b4b637e..7584575 100644 --- a/layouts/listing.html +++ b/layouts/listing.html @@ -6,7 +6,7 @@ <%= @item[:title] %> - + <%= render 'header' %> @@ -19,16 +19,16 @@ <%= post_date.day %> <%= post_date.strftime('%b') %> <%= post_date.year %> - + <%= article[:title] %> <% end %> <%= render 'footer' %> diff --git a/output/css/style.css b/output/css/style.css index e01e273..0b7c540 100644 --- a/output/css/style.css +++ b/output/css/style.css @@ -142,4 +142,9 @@ ul#menu li { padding-top: 1em; display: block; font-weight: 200; -} \ No newline at end of file +} + +.pagination { + display: none; + text-align: center; +} diff --git a/output/js/articles.js b/output/js/articles.js new file mode 100644 index 0000000..a0a43cc --- /dev/null +++ b/output/js/articles.js @@ -0,0 +1,33 @@ +var articles; + +function articles_loaded(data) { + articles = data; + console.log(data); + $('.pagination').slideDown('fast'); +}; + +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('/articles/index.json', {}, articles_loaded, 'json'); +});