benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Remove cruft from app js work on simple search

Browse source
This commit is contained in:
Wesley Moore 2010-07-01 13:20:59 +10:00
parent 75ba506b2f
commit 4a37d4dc8a
3 changed files with 46 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/_article.html
View file

@ -1,5 +1,5 @@
<% post_date = WezM::Helpers.parse_post_date(@article) %>
<li data-id="<%= @article.identifier %>">
<li>
<abbr class="calender date" title="<%= post_date.iso8601 %>">
<span class="day"><%= post_date.day %></span>
<span class="month"><%= post_date.strftime('%b') %></span>

20
layouts/articles.html
View file

@ -2,24 +2,6 @@
<html>
<head>
<%= render '_head' %>
<script src="/js/jquery.quicksand.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function() {
function search_handler(e) {
var input = $(this);
var value = input.val();
// var q = (value + String.fromCharCode(e.which)).toLowerCase();
var q = value.toLowerCase();
$('#articles li').filter(function(i) {
var article = $(this);
return article.text().toLowerCase().indexOf(q) < 0;
}).animate({height: 0, opacity: 0}, {queue: false, duration: 500});
}
$('#search').show();
$('#search input').keypress(search_handler).change(search_handler).focus();
});
</script>
</head>
<body class="articles">
<%= render '_header' %>
@ -49,7 +31,7 @@
<li id="search">
<fieldset>
<label for="query">Search</label>
<input type="search" name="q" id="query" value="" />
<input id="query" type="search" incremental="" results="0" placeholder="Search Articles">
</fieldset>
</li>
</nav>

144
output/js/application.js
View file

@ -1,105 +1,49 @@
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: '400px'
// });
if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) { // TODO: This is too generic (iPhone)
$('#search input').css('paddingTop', 0);
}
},
_searchItemSelected: function(article) {
document.location.href = article.path;
},
_renderArticle: function(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.normalize(o.summary)) + '\n\
</p>\n\
</li>';
},
_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 = 'articles.json';
if(document.location.pathname.match(/page\/$/)) {
path = '../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.extra
};
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);
}
}
}
jQuery(function() {
$('body > header span').click(function() {
$('#menu').slideToggle('normal');
})
/*** Article Search ***/
function reset_search() {
console.log("restoring items");
$('#articles li').css({height: 'auto', opacity: 1.0});
}
function refresh_search(e) {
var input = $(this);
var value = input.val() || "";
var q = value.toLowerCase();
//if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25) || (97 <= e.which && e.which <= 97 + 25))
// if(e.which >= 32) {
// q += String.fromCharCode(e.which).toLowerCase();
// }
console.log('q: ' + q);
if(q == "") {
reset_search();
return;
}
$('#articles li').filter(function(i) {
var article = $(this);
return article.text().toLowerCase().indexOf(q) < 0;
}).animate({height: 0, opacity: 0}, {queue: false, duration: 500});
}
$('#search').show();
//.keypress(refresh_search)
$('#search input')
.bind("search", refresh_search);
// .bind("click", refresh_search)
// .bind("cut", refresh_search)
// .bind("paste", refresh_search);
});
/* Setup search
If onsearch is supported use that
else if oninput is used then use that
else setup a poller to poll the value of the search box while it has focus. Stop polling when the field loses focus
*/