mirror of
https://github.com/wezm/wezm.net.git
synced 2024-12-18 18:29:54 +00:00
Get basic hashtag navigation working with mojo template
This commit is contained in:
Wesley Moore
parent
53d461f4cf
commit
a28195cb0e
4 changed files with 131 additions and 105 deletions
|
|
@ -15,6 +15,7 @@ module WezM
|
|||
:title => article[:title],
|
||||
:path => article.identifier,
|
||||
:date => Time.parse(article[:created_at]).rfc2822,
|
||||
:summary => 'Insert summary here'
|
||||
}
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -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 '<li>\n\
|
||||
<abbr class="calender date" title="' + (Mojo.escape(Mojo.normalize(o.date))) + '">\n\
|
||||
<span class="day">' + (Mojo.escape(Mojo.normalize(o.day))) + '</span>\n\
|
||||
<span class="month">' + (Mojo.escape(Mojo.normalize(o.month))) + '</span>\n\
|
||||
<span class="year">' + (Mojo.escape(Mojo.normalize(o.year))) + '</span>\n\
|
||||
</abbr>\n\
|
||||
<p>\n\
|
||||
<strong><a href="' + (Mojo.escape(Mojo.normalize(o.path))) + '">' + (Mojo.escape(Mojo.normalize(o.title))) + '</a></strong>\n\
|
||||
' + (Mojo.escape(Mojo.normalize(o.summary))) + '\n\
|
||||
</p>\n\
|
||||
</li>';
|
||||
};
|
||||
|
||||
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 ] = $( '<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');
|
||||
}
|
||||
})
|
||||
|
||||
$('.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);
|
||||
})();
|
||||
|
|
|
|||
58
output/js/mojo.js
Normal file
58
output/js/mojo.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
|
||||
// Mojo - Copyright TJ Holowaychuk <tj@vision-media.ca> (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(/</gmi, '<')
|
||||
},
|
||||
|
||||
/**
|
||||
* Normalize _object_ for output.
|
||||
*
|
||||
* @param {object}object
|
||||
* @return {mixed}
|
||||
* @api public
|
||||
*/
|
||||
|
||||
normalize: function(object) {
|
||||
return typeof object == 'function' ? object() : object
|
||||
},
|
||||
|
||||
/**
|
||||
* Enumerate _object_'s _prop_, buffering _fn_'s
|
||||
* return value.
|
||||
*
|
||||
* @param {object} object
|
||||
* @param {object} prop
|
||||
* @return {string}
|
||||
* @api private
|
||||
*/
|
||||
|
||||
enumerate: function(object, prop, fn) {
|
||||
if (!prop) return ''
|
||||
if (!(prop instanceof Array)) return fn(object)
|
||||
for (var buf = [], i = 0, len = prop.length; i < len; ++i)
|
||||
buf.push(fn(prop[i]))
|
||||
return buf.join(' ')
|
||||
}
|
||||
}
|
||||
})()
|
||||
11
templates/article.html
Normal file
11
templates/article.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<li>
|
||||
<abbr class="calender date" title="{{date}}">
|
||||
<span class="day">{{day}}</span>
|
||||
<span class="month">{{month}}</span>
|
||||
<span class="year">{{year}}</span>
|
||||
</abbr>
|
||||
<p>
|
||||
<strong><a href="{{path}}">{{title}}</a></strong>
|
||||
{{summary}}
|
||||
</p>
|
||||
</li>
|
||||
Loading…
Reference in a new issue