From ea0282a1e183553914c3d53a24285943a94dbc58 Mon Sep 17 00:00:00 2001 From: Wesley Moore Date: Thu, 4 Mar 2010 07:47:41 +1100 Subject: [PATCH] Add namespaced application JS --- layouts/articles.html | 2 +- output/js/application.js | 98 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 output/js/application.js diff --git a/layouts/articles.html b/layouts/articles.html index c1c2b11..c10d381 100644 --- a/layouts/articles.html +++ b/layouts/articles.html @@ -14,7 +14,7 @@ WezM.showJavascriptWidgets(); <% if @item.identifier =~ %r{/page/$} %> $(window).bind('hashchange', function(e) { - WezM._hashChanged(e) + WezM.hashChanged(e) }); // 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. diff --git a/output/js/application.js b/output/js/application.js new file mode 100644 index 0000000..9b27cf4 --- /dev/null +++ b/output/js/application.js @@ -0,0 +1,98 @@ +var WezM = { + articles: undefined, + _months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], + per_page: 10, + showJavascriptWidgets: function() { + $('.pagination').show(); + $('#search').show(); + $('#search input').jsonSuggest(this.articles, { + onSelect: this._searchItemSelected, + width: 400 + }); + if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) { + $('#search input').css('paddingTop', 0); + } + }, + _searchItemSelected: function() {}, + _renderArticle: function(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\ +
  • '; + }, + _updatePaginationControls: function(page) { + var older = $('.pagination .older').attr('href', '#' + (page + 1)); + var newer = $('.pagination .newer').attr('href', '#' + (page - 1)); + + // Hide if out of range + older.css('visibility', page * this.per_page >= this.articles.length ? 'hidden' : 'visible'); + newer.css('visibility', page <= 1 ? 'hidden' : 'visible'); + }, + loadArticles: function(callback) { + if(!this.articles) { + var path = 'json/articles.json'; + if(document.location.pathname.match(/page\/$/)) { + path = '../json/articles.json'; + } + jQuery.getJSON(path, {}, function(data) { + WezM.articles = data; + if(callback) callback(); + }); + } + else if(callback) { + callback(); + } + }, + hashChanged: 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(!page_fragment) { + page_fragment = $.param.fragment(); + } + if(matches = page_fragment.match(/(\d+)$/)) { + page = new Number(matches[1]); + } + else { + page = 1; + } + + var container = $('ul.articles'); + container.empty(); + + // Generate the items + var i = (page - 1) * this.per_page; + for(; i < page * this.per_page && i < this.articles.length; i++) { + var article = this.articles[i]; + var date = new Date(Date.parse(article.date)); + var article_view = { + date: article.date, + day: date.getDate(), + month: this._months[date.getMonth()], + year: date.getYear() + 1900, + path: article.path, + title: article.title, + summary: article.summary + }; + var li = this._renderArticle(article_view); + container.append(li); + } + + this._updatePaginationControls(page); + window.document.title = "All Articles - Page " + page; // TODO: Make this title better + // Scroll to top of page + if(window.scrollTo) { + window.scrollTo(0,0); + } + } +} +