mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-07 12:06:26 +00:00
Add simple post search overlay to nav
This commit is contained in:
parent
7a65dbcfea
commit
20cc1bdf8c
10 changed files with 263 additions and 7 deletions
|
@ -9,7 +9,7 @@ module.exports = function(grunt) {
|
||||||
all: [
|
all: [
|
||||||
'Gruntfile.js',
|
'Gruntfile.js',
|
||||||
'assets/js/*.js',
|
'assets/js/*.js',
|
||||||
'!assets/js/plugins/*.js',
|
'assets/js/plugins/*.js',
|
||||||
'!assets/js/scripts.min.js'
|
'!assets/js/scripts.min.js'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
@ -3,6 +3,7 @@ description: Describe your website here.
|
||||||
logo: site-logo.png
|
logo: site-logo.png
|
||||||
disqus_shortname:
|
disqus_shortname:
|
||||||
#Comment out url when working locally to resolve base urls correctly
|
#Comment out url when working locally to resolve base urls correctly
|
||||||
|
search: true
|
||||||
url: http://your-website.com
|
url: http://your-website.com
|
||||||
|
|
||||||
# Owner/author information
|
# Owner/author information
|
||||||
|
|
|
@ -10,11 +10,20 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% 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>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div><!-- /.navigation-wrapper -->
|
</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">
|
{% if page.image.feature %}<header class="masthead" itemscope itemtype="http://schema.org/Organization">
|
||||||
<div class="wrap">
|
<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>
|
<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
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -18,3 +18,36 @@ var navigation = responsiveNav("#site-nav", { // Selector: The ID of the wrapper
|
||||||
$(function() {
|
$(function() {
|
||||||
$("article").fitVids();
|
$("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
96
assets/js/plugins/simpleJekyllSearch.js
Normal 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
2
assets/js/scripts.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -230,3 +230,98 @@ select:focus {
|
||||||
float : left;
|
float : left;
|
||||||
margin-left : 0;
|
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;
|
||||||
|
}
|
|
@ -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
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
.footer-wrapper {
|
.footer-wrapper {
|
||||||
|
|
13
search.json
Normal file
13
search.json
Normal 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 %}
|
||||||
|
]
|
Loading…
Reference in a new issue