adulau/brouilleursdeblanc
1
0
Fork 0
mirror of https://github.com/adulau/brouilleursdeblanc.git synced 2024-09-18 04:56:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add simple post search overlay to nav

Browse source
This commit is contained in:
Michael Rose 2013-09-11 12:12:08 -04:00
parent 7a65dbcfea
commit 20cc1bdf8c
10 changed files with 263 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Gruntfile.js
View file

@ -9,7 +9,7 @@ module.exports = function(grunt) {
all: [
'Gruntfile.js',
'assets/js/*.js',
'!assets/js/plugins/*.js',
'assets/js/plugins/*.js',
'!assets/js/scripts.min.js'
]
},

1
_config.yml
View file

@ -3,6 +3,7 @@ description: Describe your website here.
logo: site-logo.png
disqus_shortname:
#Comment out url when working locally to resolve base urls correctly
search: true
url: http://your-website.com
# Owner/author information

11
_includes/navigation.html
View file

@ -10,11 +10,20 @@
{% endif %}
</li>
{% endfor %}
<li><a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a>
<li><a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a></li>
{% if site.search %}<li class="dosearch"><i class="icon-search"></i> Search</li>{% endif %}
</ul>
</nav>
</div><!-- /.navigation-wrapper -->
{% if site.search %}<div class="search-wrapper">
<form role="search">
<input type="search" name="s" id="s" class="search-field" placeholder="Search...">
<i class="icon-remove-sign icon-2x"></i>
<ul class="search-results post-list"></ul><!-- /.search-results -->
</form>
</div><!-- ./search-wrapper -->{% endif %}
{% if page.image.feature %}<header class="masthead" itemscope itemtype="http://schema.org/Organization">
<div class="wrap">
<a href="{{ site.url }}" class="site-logo" rel="home" title="{{ site.title }}" itemprop="url"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown" itemprop="logo"></a>

2
assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

35
assets/js/_main.js
View file

@ -17,4 +17,37 @@ var navigation = responsiveNav("#site-nav", { // Selector: The ID of the wrapper
// FitVids options
$(function() {
$("article").fitVids();
});
});
// Simple Jekyll Search options
$(document).ready(function() {
$('.search-field').simpleJekyllSearch({
searchResults : '.search-results',
template : '<li><article><a href="{url}">{title} <span class="entry-date"><time datetime="{date}">{shortdate}</time></span></a></article></li>',
noResults: '<p>Nothing found.</p>'
});
});
(function( $, window, undefined ) {
var bs = {
close: $(".icon-remove-sign"),
searchform: $("form"),
canvas: $("body"),
dothis: $('.dosearch')
};
bs.dothis.on('click', function() {
$('.search-wrapper').css({ display: "block" });
bs.searchform.toggleClass('active');
bs.searchform.find('input').focus();
bs.canvas.toggleClass('search-overlay');
});
bs.close.on('click', function() {
$('.search-wrapper').css({ display: "hidden" });
bs.searchform.toggleClass('active');
bs.canvas.removeClass('search-overlay');
});
})( jQuery, window );

96
assets/js/plugins/simpleJekyllSearch.js Normal file
View file

@ -0,0 +1,96 @@
/*global jQuery */
/*!
* Simple Jekyll Search
* Christian Fei - https://github.com/christian-fei/Simple-Jekyll-Search *
*
*/
(function($) {
$.fn.simpleJekyllSearch = function(options) {
var settings = $.extend({
jsonFile : '/search.json',
jsonFormat : 'title,category,desc,url,date,shortdate',
template : '<a href="{url}" title="{title}">{title}</a>',
searchResults : '.results',
searchResultsTitle : '<h4>Search results</h4>',
limit : '10',
noResults : '<p>Oh shucks<br/><small>Nothing found :(</small></p>'
}, options);
var properties = settings.jsonFormat.split(',');
var jsonData = [],
origThis = this,
searchResults = $(settings.searchResults);
if(settings.jsonFile.length && searchResults.length){
$.ajax({
type: "GET",
url: settings.jsonFile,
dataType: 'json',
success: function(data, textStatus, jqXHR) {
jsonData = data;
registerEvent();
},
error: function(x,y,z) {
console.log("***ERROR in simpleJekyllSearch.js***");
console.log(x);
console.log(y);
console.log(z);
// x.responseText should have what's wrong
}
});
}
function registerEvent(){
origThis.keyup(function(e){
if($(this).val().length){
writeMatches( performSearch($(this).val()) );
}else{
clearSearchResults();
}
});
}
function performSearch(str){
var matches = [];
$.each(jsonData,function(i,entry){
for(var i=0;i<properties.length;i++)
if(entry[properties[i]] !== undefined && entry[properties[i]].toLowerCase().indexOf(str.toLowerCase()) > 1){
matches.push(entry);
i=properties.length;
}
});
return matches;
}
function writeMatches(m){
clearSearchResults();
searchResults.append( $(settings.searchResultsTitle) );
if(m.length){
$.each(m,function(i,entry){
if(i<settings.limit){
var output=settings.template;
for(var i=0;i<properties.length;i++){
var regex = new RegExp("\{" + properties[i] + "\}", 'g');
output = output.replace(regex, entry[properties[i]]);
}
searchResults.append($(output));
}
});
}else{
searchResults.append( settings.noResults );
}
}
function clearSearchResults(){
searchResults.children().remove();
}
}
}(jQuery));

2
assets/js/scripts.min.js vendored
View file

File diff suppressed because one or more lines are too long

97
assets/less/forms.less
View file

@ -229,4 +229,99 @@ select:focus {
.form-inline .checkbox input[type="checkbox"] {
float : left;
margin-left : 0;
margin-right : 3px; }
margin-right : 3px; }
// Jekyll Simple Search
// -------------------------------------------------
.dosearch {
padding: 6px 10px;
cursor: pointer;
display: block;
color: @white;
.rounded(4px);
&:hover {
.box-shadow(@shadow: inset 0 0 1px @white);
background-color: lighten(@black, 10);
}
}
form[role="search"] {
width: 100%;
position: relative;
opacity: 0;
transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
top: 0;
left: -200px;
z-index: 9002;
input[type="search"] {
-webkit-appearance: none;
border: none;
width: 100%;
color: @white;
border: none;
border-bottom: 1px solid lighten(@white, 20);
background-color: transparent;
box-shadow: none;
border-radius: 0;
background-clip: padding-box;
.font-rem(32);
&:focus {
box-shadow: none;
outline: none;
}
}
&.active {
opacity: 1;
top: 0;
left: 0;
}
&.hidden {
display: none;
}
::-webkit-input-placeholder {
.font-rem(32);
}
.icon-remove-sign {
position: absolute;
top: .6rem;
right: 1rem;
display: block;
cursor: pointer;
text-align: center;
color: @white;
z-index: 1;
cursor: pointer;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
.post-list {
position: absolute;
width: 100%;
h4, li, p, a {
color: @white;
}
li {
border-bottom: 1px solid lighten(@white,20);
}
}
}
body.search-overlay {
overflow: hidden;
}
body.search-overlay:after {
content: '';
background: fade(@black,95);
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9001;
}
.no-js .dosearch {
display: none;
}

11
assets/less/page.less
View file

@ -375,7 +375,16 @@ span + .entry-title {
}
}
}
// Search
// --------------------------------------------------
.search-wrapper {
display: none;
position: absolute;
width: 90%;
padding-right: 5%;
padding-left: 5%;
.clearfix();
}
// Footer
// --------------------------------------------------
.footer-wrapper {

13
search.json Normal file
View file

@ -0,0 +1,13 @@
---
---
[
{% for post in site.posts %}
{
"title" : "{{ post.title | escape }}",
"category" : "{{ post.category }}",
"url" : "{{ post.url }}",
"date" : "{{ post.date }}",
"shortdate" : "{{ post.date | date: '%B %d, %Y' }}"
} {% if forloop.last %}{% else %},{% endif %}
{% endfor %}
]