mirror of
https://github.com/wezm/wezm.net.git
synced 2024-12-23 20:49:56 +00:00
Filter articles with Quicksand
This commit is contained in:
parent
8a2f626b1b
commit
a6a3ce7c7e
4 changed files with 51 additions and 32 deletions
|
@ -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>
|
||||
|
|
|
@ -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 %>
|
||||
$('#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>
|
||||
|
||||
|
|
|
@ -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
7
output/js/jquery.quicksand.min.js
vendored
Normal 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);
|
Loading…
Reference in a new issue