From a28195cb0ecb507666fe3456fde3a96940590dba Mon Sep 17 00:00:00 2001 From: Wesley Moore Date: Mon, 1 Feb 2010 21:38:33 +1100 Subject: [PATCH] Get basic hashtag navigation working with mojo template --- lib/articles.rb | 1 + output/js/articles.js | 166 +++++++++++++++-------------------------- output/js/mojo.js | 58 ++++++++++++++ templates/article.html | 11 +++ 4 files changed, 131 insertions(+), 105 deletions(-) create mode 100644 output/js/mojo.js create mode 100644 templates/article.html diff --git a/lib/articles.rb b/lib/articles.rb index 3862d51..62dfbb8 100644 --- a/lib/articles.rb +++ b/lib/articles.rb @@ -15,6 +15,7 @@ module WezM :title => article[:title], :path => article.identifier, :date => Time.parse(article[:created_at]).rfc2822, + :summary => 'Insert summary here' } end diff --git a/output/js/articles.js b/output/js/articles.js index 6075f5e..05a463d 100644 --- a/output/js/articles.js +++ b/output/js/articles.js @@ -1,110 +1,66 @@ -jQuery(function(){ - - // Keep a mapping of url-to-container for caching purposes. +(function() { + // Load articles JSON ASAP var articles = null; + function render_article(o) { + return '
  • \n\ + \n\ + ' + (Mojo.escape(Mojo.normalize(o.day))) + '\n\ + ' + (Mojo.escape(Mojo.normalize(o.month))) + '\n\ + ' + (Mojo.escape(Mojo.normalize(o.year))) + '\n\ + \n\ +

    \n\ + ' + (Mojo.escape(Mojo.normalize(o.title))) + '\n\ + ' + (Mojo.escape(Mojo.normalize(o.summary))) + '\n\ +

    \n\ +
    • '; + }; + function articles_loaded(data) { articles = data; - $('.pagination').slideDown('fast'); + jQuery(function() { + $(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 page; + var matches; + var page_fragment = e.fragment; + if(matches = page_fragment.match(/page-(\d+)$/)) { + page = new Number(matches[1]); + } + else { + return false; + } + + // Generate the items + var per_page = 10; + var container = $('ul.articles'); + container.empty(); + var i = (page - 1) * per_page; + for(; i < page * per_page; i++) { + var article = articles[i]; + var date = new Date(Date.parse(article.date)); + var article_view = { + date: article.date, + day: date.getDay(), + month: date.getMonth(), + year: date.getYear(), + path: article.path, + title: article.title, + summary: article.summary + }; + var li = render_article(article_view); + container.append(li); + } + + }); + + $('.pagination').slideDown('fast'); + + // 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' ); + }); }; - - 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 ] = $( '
    ' ) - // - // // 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'); - } - }) - - $('.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; - }); - - - // 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'); -// }); + jQuery.getJSON('json/articles.json', {}, articles_loaded); +})(); diff --git a/output/js/mojo.js b/output/js/mojo.js new file mode 100644 index 0000000..df13329 --- /dev/null +++ b/output/js/mojo.js @@ -0,0 +1,58 @@ + +// Mojo - Copyright TJ Holowaychuk (MIT Licensed) + +;(function(){ + Mojo = { + + // --- Version + + version: '0.2.0', + + /** + * Escape HTML. + * + * @param {string} html + * @return {string} + * @api public + */ + + escape : function(html) { + if (!html) return + return html.toString() + .replace(/&/gmi, '&') + .replace(/"/gmi, '"') + .replace(/>/gmi, '>') + .replace(/ + + {{day}} + {{month}} + {{year}} + +

    + {{title}} + {{summary}} +

    +