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

Filter articles with Quicksand

Browse source
This commit is contained in:
Wesley Moore 2010-06-16 20:23:22 +10:00
parent 8a2f626b1b
commit a6a3ce7c7e
4 changed files with 51 additions and 32 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>
<li data-id="<%= @article.identifier %>">
<abbr class="calender date" title="<%= post_date.iso8601 %>">
<span class="day"><%= post_date.day %></span>
<span class="month"><%= post_date.strftime('%b') %></span>

42
layouts/articles.html
View file

@ -2,24 +2,36 @@
<html>
<head>
<%= render '_head' %>
<link rel="stylesheet" href="/css/jsonSuggest.css" type="text/css" media="screen" charset="utf-8" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.jsonSuggest-dev.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.quicksand.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/liquidmetal.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
WezM.loadArticles(function() {
jQuery(function() {
WezM.showJavascriptWidgets();
<% if @item.identifier =~ %r{/page/$} %>
$(window).bind('hashchange', function(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.
$(window).trigger('hashchange');
<% end %>
jQuery(function() {
WezM.showJavascriptWidgets();
$('#search input').keypress(function(e) {
var input = $(this);
var q = (input.val() + String.fromCharCode(e.which)).toLowerCase();
var filtered_articles = $('#articles li').filter(function(i) {
var article = $(this);
var text = article.text().toLowerCase();
// var score = LiquidMetal.score(text, q);
// article.attr("data-score", score);
// return score > 0;
return text.indexOf(q) >= 0;
})
// Sort results
// var sorted_articles = filtered_articles.get().sort(function(a, b) {
// var valA = parseFloat($(a).attr("data-score"));
// var valB = parseFloat($(b).attr("data-score"));
// return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
// });
$("#articles").quicksand($(filtered_articles));
});
});
</script>
@ -45,7 +57,7 @@
active = (@item.identifier.sub(%r{page/$}, '') == path)
%>
<li>
<a href="<%= feed %>"><img src="/images/black-feed-icon.png" width="12" height="12" alt="Black Feed Icon" /></a>
<a href="<%= feed %>"><img class="feed-icon" src="/images/black-feed-icon.png" width="12" height="12" alt="Black Feed Icon" /></a>
<a href="<%= path %>"<%= %Q{class="active"} if active %>><%= label %></a> (<%= count %>)
</li>
<% end %>
@ -58,7 +70,7 @@
</li>
</ul>
<ul class="articles">
<ul id="articles" class="articles">
<%= yield %>
</ul>

32
output/js/application.js
View file

@ -3,28 +3,28 @@ var WezM = {
_months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
per_page: 10,
showJavascriptWidgets: function() {
$('.pagination').show();
//$('.pagination').show();
$('#search').show();
$('#search input').jsonSuggest(this.articles, {
onSelect: this._searchItemSelected,
width: '400px'
});
// $('#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);
}
// The following should be triggered onchange for the input as well
// (to handle things like Cut with the mouse)
$('#search input').keyup(function(e) {
var input = $(this);
var clear_search = $('#search .clear');
var value = input.attr('value');
if(value && (value != '')) {
clear_search.addClass('active');
}
else {
clear_search.removeClass('active');
}
});
// $('#search input').keyup(function(e) {
// var input = $(this);
// var clear_search = $('#search .clear');
// var value = input.attr('value');
// if(value && (value != '')) {
// clear_search.addClass('active');
// }
// else {
// clear_search.removeClass('active');
// }
// });
$('#search .clear.active').live('click', function() {
$('#search input').attr('value', '').keyup(); // Simulate keypress to clear results

7
output/js/jquery.quicksand.min.js vendored Normal file
View file

@ -0,0 +1,7 @@
(function(a){a.fn.quicksand=function(y,r,t){var b={duration:750,easing:"swing",attribute:"data-id",adjustHeight:"auto",useScaling:true,enhancement:function(){},selector:"> *"};a.extend(b,r);if(a.browser.msie||typeof a.fn.scale=="undefined")b.useScaling=false;var o;if(typeof r=="function")o=r;else if(typeof(t=="function"))o=t;return this.each(function(k){var m,i=[],l=a(y).clone(),g=a(this);k=a(this).css("height");var p,u=false,v=a(g).offset(),s=[],n=a(this).find(b.selector);if(a.browser.msie&&a.browser.version.substr(0,
1)<7)g.html("").append(l);else{var w=0,z=function(){if(!w){g.html(j.html());typeof o=="function"&&o.call(this);u&&g.css("height",p);b.enhancement(g);w=1}},c=g.offsetParent(),e=c.offset();if(c.css("position")=="relative"){if(c.get(0).nodeName.toLowerCase()!="body"){e.top+=parseFloat(c.css("border-top-width"));e.left+=parseFloat(c.css("border-left-width"))}}else{e.top-=parseFloat(c.css("border-top-width"));e.left-=parseFloat(c.css("border-left-width"));e.top-=parseFloat(c.css("margin-top"));e.left-=
parseFloat(c.css("margin-left"))}g.css("height",a(this).height());n.each(function(f){s[f]=a(this).offset()});a(this).stop();n.each(function(f){a(this).stop();var h=a(this).get(0);h.style.position="absolute";h.style.margin="0";h.style.top=s[f].top-parseFloat(h.style.marginTop)-e.top+"px";h.style.left=s[f].left-parseFloat(h.style.marginLeft)-e.left+"px"});var j=a(g).clone();c=j.get(0);c.innerHTML="";c.setAttribute("id","");c.style.height="auto";c.style.width=g.width()+"px";j.append(l);j.insertBefore(g);
j.css("opacity",0);c.style.zIndex=-1;c.style.margin="0";c.style.position="absolute";c.style.top=v.top-e.top+"px";c.style.left=v.left-e.left+"px";if(b.adjustHeight==="dynamic")g.animate({height:j.height()},b.duration,b.easing);else if(b.adjustHeight==="auto"){p=j.height();if(parseFloat(k)<parseFloat(p))g.css("height",p);else u=true}n.each(function(){var f=[];if(typeof b.attribute=="function"){m=b.attribute(a(this));l.each(function(){if(b.attribute(this)==m){f=a(this);return false}})}else f=l.filter("["+
b.attribute+"="+a(this).attr(b.attribute)+"]");if(f.length)b.useScaling?i.push({element:a(this),animation:{top:f.offset().top-e.top,left:f.offset().left-e.left,opacity:1,scale:"1.0"}}):i.push({element:a(this),animation:{top:f.offset().top-e.top,left:f.offset().left-e.left,opacity:1}});else b.useScaling?i.push({element:a(this),animation:{opacity:"0.0",scale:"0.0"}}):i.push({element:a(this),animation:{opacity:"0.0"}})});l.each(function(){var f=[],h=[];if(typeof b.attribute=="function"){m=b.attribute(a(this));
n.each(function(){if(b.attribute(this)==m){f=a(this);return false}});l.each(function(){if(b.attribute(this)==m){h=a(this);return false}})}else{f=n.filter("["+b.attribute+"="+a(this).attr(b.attribute)+"]");h=l.filter("["+b.attribute+"="+a(this).attr(b.attribute)+"]")}var x;if(f.length===0){x=b.useScaling?{opacity:"1.0",scale:"1.0"}:{opacity:"1.0"};d=h.clone();var q=d.get(0);q.style.position="absolute";q.style.margin="0";q.style.top=h.offset().top-e.top+"px";q.style.left=h.offset().left-e.left+"px";
d.css("opacity",0);b.useScaling&&d.css("transform","scale(0.0)");d.appendTo(g);i.push({element:a(d),animation:x})}});j.remove();b.enhancement(g);for(k=0;k<i.length;k++)i[k].element.animate(i[k].animation,b.duration,b.easing,z)}})}})(jQuery);