From 194890e733d1a62e48234850beda92a2f49a49da Mon Sep 17 00:00:00 2001 From: Wesley Moore Date: Wed, 3 Mar 2010 08:03:23 +1100 Subject: [PATCH] Implement article search Need to refactor the javascript into an Articles object or something that can be used to load the article data. The JS pagination functionality would then be seperate to this. --- layouts/articles.html | 15 +++------- lib/articles.rb | 4 ++- output/css/jsonSuggest.css | 49 +++++++++++++++++++++++++++++++++ output/js/articles.js | 28 ++++++++++++++++++- output/js/jquery.jsonSuggest.js | 25 +++++++++++++++++ 5 files changed, 108 insertions(+), 13 deletions(-) create mode 100755 output/css/jsonSuggest.css create mode 100755 output/js/jquery.jsonSuggest.js diff --git a/layouts/articles.html b/layouts/articles.html index d691974..a2b6270 100644 --- a/layouts/articles.html +++ b/layouts/articles.html @@ -2,20 +2,13 @@ <%= render '_head' %> - - - <% if @item.identifier =~ %r{/page/$} %> + + + + - <% else %> - - <% end %> <%= render '_header' %> diff --git a/lib/articles.rb b/lib/articles.rb index 49fa6ba..ecdd83f 100644 --- a/lib/articles.rb +++ b/lib/articles.rb @@ -17,7 +17,9 @@ module WezM :title => article[:title], :path => article.identifier, :date => Time.parse(article[:created_at]).rfc2822, - :summary => article[:summary] + :summary => article[:summary], + :text => article[:title], + :extra => article[:summary] } end diff --git a/output/css/jsonSuggest.css b/output/css/jsonSuggest.css new file mode 100755 index 0000000..c59e596 --- /dev/null +++ b/output/css/jsonSuggest.css @@ -0,0 +1,49 @@ + +div.jsonSuggestResults { + position:absolute; + border:1px solid #CCC; + padding:0px; + margin:0px 2px; + z-index:1; +} + +div.jsonSuggestResults div.resultItem { + margin:0px; + padding:5px; + position:relative; + height:auto; + cursor:pointer; +} + +div.jsonSuggestResults div.resultItem.odd { + background-color:#9ADFFE; +} +div.jsonSuggestResults div.resultItem.even { + background-color:#FFFFFF; +} + +div.jsonSuggestResults div.resultItem.hover { + background-color:#3399FF; +} + +div.jsonSuggestResults div.resultItem img { + float:left; + margin-right:10px; +} + +div.jsonSuggestResults div.resultItem p { + margin:0px; + padding:0px; +} + +div.jsonSuggestResults div.resultItem p strong { + font-weight:bold; + text-decoration:underline; +} + +div.jsonSuggestResults div.resultItem p.extra { + font-size: x-small !important; + position:absolute; + bottom:3px; + right: 3px; +} \ No newline at end of file diff --git a/output/js/articles.js b/output/js/articles.js index 420cc83..6da3eb8 100644 --- a/output/js/articles.js +++ b/output/js/articles.js @@ -3,6 +3,25 @@ var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; var per_page = 10; + function search_item_selected(item) { + }; + + function show_javascript_widgets() { + $('.pagination').show(); + $('#search').show(); + $('#search input').jsonSuggest(articles, { + onSelect: search_item_selected, + width: 400 + }); + }; + + function webkit_search_tweak() { + if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) { + $('#search input').css('paddingTop', 0); + } + }; + + function render_article(o) { return '
  • \n\ \n\ @@ -35,6 +54,9 @@ 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]); } @@ -76,5 +98,9 @@ }; // Load articles JSON ASAP - jQuery.getJSON('../json/articles.json', {}, articles_loaded); + var path = 'json/articles.json'; + if(document.location.pathname.match(/page\/$/)) { + path = '../json/articles.json'; + } + jQuery.getJSON(path, {}, articles_loaded); })(); diff --git a/output/js/jquery.jsonSuggest.js b/output/js/jquery.jsonSuggest.js new file mode 100755 index 0000000..113a4aa --- /dev/null +++ b/output/js/jquery.jsonSuggest.js @@ -0,0 +1,25 @@ + +(function($){$.fn.jsonSuggest=function(searchData,settings){var defaults={minCharacters:1,maxResults:undefined,wildCard:"",caseSensitive:false,notCharacter:"!",maxHeight:350,highlightMatches:true,onSelect:undefined,ajaxResults:false};settings=$.extend(defaults,settings);return this.each(function(){function regexEscape(txt,omit){var specials=['/','.','*','+','?','|','(',')','[',']','{','}','\\'];if(omit){for(var i=0;i'),currentSelection,pageX,pageY;function selectResultItem(item){obj.val(item.text);$(results).html('').hide();if(typeof settings.onSelect==='function'){settings.onSelect(item);}} +function setHoverClass(el){$('div.resultItem',results).removeClass('hover');$(el).addClass('hover');currentSelection=el;} +function buildResults(resultObjects,sFilterTxt){sFilterTxt="("+sFilterTxt+")";var bOddRow=true,i,iFound=0,filterPatt=settings.caseSensitive?new RegExp(sFilterTxt,"g"):new RegExp(sFilterTxt,"ig");$(results).html('').hide();for(i=0;i'),text=resultObjects[i].text;if(settings.highlightMatches===true){text=text.replace(filterPatt,"$1");} +$(item).append('

    '+text+'

    ');if(typeof resultObjects[i].extra==='string'){$(item).append('

    '+resultObjects[i].extra+'

    ');} +if(typeof resultObjects[i].image==='string'){$(item).prepend('').append('
    ');} +$(item).addClass('resultItem').addClass((bOddRow)?'odd':'even').click(function(n){return function(){selectResultItem(resultObjects[n]);};}(i)).mouseover(function(el){return function(){setHoverClass(el);};}(item));$(results).append(item);bOddRow=!bOddRow;iFound+=1;if(typeof settings.maxResults==='number'&&iFound>=settings.maxResults){break;}} +if($('div',results).length>0){currentSelection=undefined;$(results).show().css('height','auto');if($(results).height()>settings.maxHeight){$(results).css({'overflow':'auto','height':settings.maxHeight+'px'});}}} +function runSuggest(e){if(this.value.length0){bMatch=false;}} +sFilterTxt=sFilterTxt||'.*';sFilterTxt=settings.wildCard?'^'+sFilterTxt:sFilterTxt;filterPatt=settings.caseSensitive?new RegExp(sFilterTxt):new RegExp(sFilterTxt,"i");if(settings.ajaxResults===true){resultObjects=searchData(this.value,settings.wildCard,settings.caseSensitive,settings.notCharacter);if(typeof resultObjects==='string'){resultObjects=JSON.parse(resultObjects);}} +else{for(i=0;iresPos.bottom||pageXresPos.right){$(results).hide();}}).focus(function(e){$(results).css({'top':(obj.position().top+obj.height()+5)+'px','left':obj.position().left+'px'});if($('div',results).length>0){$(results).show();}}).attr('autocomplete','off');$().mousemove(function(e){pageX=e.pageX;pageY=e.pageY;});if($.browser.opera){obj.keydown(function(e){if(e.keyCode===40){return keyListener(e);}});} +settings.notCharacter=regexEscape(settings.notCharacter||'');if(!settings.ajaxResults){if(typeof searchData==='function'){searchData=searchData();} +if(typeof searchData==='string'){searchData=JSON.parse(searchData);}}});};})(jQuery); \ No newline at end of file