mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-23 02:27:13 +00:00
Add simple post search overlay to nav
This commit is contained in:
Michael Rose
parent
7a65dbcfea
commit
20cc1bdf8c
10 changed files with 263 additions and 7 deletions
|
|
@ -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'
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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
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
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
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