m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-25 02:36:16 +01:00
Code

small js refactor

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-11-19 14:55:49 +01:00
parent a08868f4cf
commit 35166388b9
4 changed files with 140 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
_src/_assets/js/_menu.js Normal file
View File

@ -0,0 +1,37 @@
var Menu = {
settings: {
thesite: $('.site'),
thelink: $('.menu-btn'),
thepop: $('.nav-popover')
},
init: function() {
s = this.settings;
this.menuShow();
},
menuShow: function() {
s.thelink.on('click', function(e) {
e.preventDefault();
// toggle menu
s.thesite.toggleClass('menu-open');
// bind the hide controls
$(document).bind('click.hidethepop', function() {
s.thesite.removeClass('menu-open');
// unbind the hide controls
$(document).unbind('click.hidethepop');
});
// dont close thepop when you click on thepop
s.thepop.on('click', function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
}
}

91
_src/_assets/js/_search.js Normal file
View File

@ -0,0 +1,91 @@
var Search = {
settings: {
content: $('.site__content'),
searchlink: $('.search-btn'),
searcharea: $('.search-area'),
searchfield: $('#search-input'),
searchresults: $('#search-results'),
searchpop: $('#search-popover')
},
init: function() {
s = this.settings;
this.searchShow();
this.searchHide();
},
searchShow: function() {
s.searchlink.on('click', function(e) {
e.preventDefault()
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '/search.json',
searchResultTemplate: '<li class="grid__col"><a class="search-link" href="{url}">{title}</a></li>',
fuzzy: false
})
// show search field
s.searcharea.removeClass('ready bounceOutUp').addClass('ready slideDown');
s.searchfield.focus();
// blur the content
s.content.addClass('search-open-blur');
// hide menu too just in case
if ($('body').hasClass('menu-open')) {
$('body').removeClass('menu-open');
}
// show search results upon typing
if (s.searchfield.val().length) {
s.searchpop.removeClass('hide');
}
// bind the hide controls
$(document).bind('click.hidethepop', function() {
Search.searchReset();
// unbind the hide controls
$(document).unbind('click.hidethepop');
});
// dont close thepop when click on thepop
s.searchpop.on('click', function(e) {
e.stopPropagation();
});
// dont close thepop when click on search field
s.searchfield.on('click', function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
// finally show popup upon first keypress
s.searchfield.on('keyup', function() {
s.searchpop.removeClass('hide');
});
},
searchHide: function() {
$('.search-close').on('click', function(e) {
e.preventDefault();
Search.searchReset();
// empty search field
s.searchfield.val('').blur();
});
},
searchReset: function() {
// revert all search elements
s.searcharea.removeClass('slideDown').addClass('bounceOutUp');
s.searchpop.addClass('hide');
s.content.removeClass('search-open-blur');
}
}

132
_src/_assets/js/app.js
View File

@ -7,128 +7,18 @@
//=require ../../../bower_components/time-elements/time-elements.js
//=require ../../../bower_components/simple-jekyll-search/dest/jekyll-search.js
//
// include modules
//
//=include _menu.js
//=include _search.js
$(ASAP = function() {
jQuery(function($) {
siteNavigation.init();
//siteEffects.init();
//
// init modules
//
Menu.init();
Search.init();
});
var siteNavigation = {
siteSearch: function() {
var $content = $('.site__content'),
$searchlink = $('.search-btn'),
$searcharea = $('.search-area'),
$searchfield = $('#search-input'),
$searchresults = $('#search-results'),
$searchpop = $('#search-popover');
// revert all search elements
function hideSearch() {
$searcharea.removeClass('slideDown').addClass('bounceOutUp');
$searchpop.addClass('hide');
$content.removeClass('search-open-blur');
}
$searchlink.click(function(e) {
e.preventDefault()
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '/search.json',
searchResultTemplate: '<li class="grid__col"><a class="search-link" href="{url}">{title}</a></li>',
fuzzy: false
})
// show search field
$searcharea.removeClass('ready bounceOutUp').addClass('ready slideDown');
$searchfield.focus();
// blur the content
$content.addClass('search-open-blur');
// show search results upon typing
if ($searchfield.val().length) {
$searchpop.removeClass('hide');
}
// hide menu too just in case
if ($('body').hasClass('menu-open')) {
$('body').removeClass('menu-open');
}
// bind the hide controls
$(document).bind('click.hidethepop', function() {
hideSearch();
// unbind the hide controls
$(document).unbind('click.hidethepop');
});
// dont close thepop when click on thepop
$searchpop.click(function(e) {
e.stopPropagation();
});
// dont close thepop when click on search field
$searchfield.click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
// finally show popup upon first keypress
$searchfield.on('keyup', function() {
$searchpop.removeClass('hide');
});
// close button
$('.search-close').click(function(e) {
e.preventDefault();
hideSearch();
// empty search field
$searchfield.val('').blur();
});
},
siteMenu: function() {
var $thesite = $('.site'),
$thelink = $('.menu-btn'),
$thepop = $('.nav-popover');
$thelink.click(function(e) {
e.preventDefault();
// toggle menu
$thesite.toggleClass('menu-open');
// bind the hide controls
$(document).bind('click.hidethepop', function() {
$thesite.removeClass('menu-open');
// unbind the hide controls
$(document).unbind('click.hidethepop');
});
// dont close thepop when you click on thepop
$thepop.click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
},
init: function() {
this.siteSearch();
this.siteMenu();
}
}

2
gulpfile.js
View File

@ -179,7 +179,7 @@ gulp.task('js:libraries', function() {
// Project js
gulp.task('js:project', function() {
return gulp.src(src + '/_assets/js/*.js')
return gulp.src(src + '/_assets/js/app.js')
.pipe($.include()).on('error', onError)
.pipe($.concat('kremalicious3.min.js'))
.pipe($.if(isProduction, $.uglify())).on('error', onError)