mirror of
https://github.com/kremalicious/blog.git
synced 2024-09-24 01:58:50 +02:00
small js refactor
This commit is contained in:
parent
a08868f4cf
commit
35166388b9
37
_src/_assets/js/_menu.js
Normal file
37
_src/_assets/js/_menu.js
Normal 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
91
_src/_assets/js/_search.js
Normal 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,128 +7,18 @@
|
|||||||
//=require ../../../bower_components/time-elements/time-elements.js
|
//=require ../../../bower_components/time-elements/time-elements.js
|
||||||
//=require ../../../bower_components/simple-jekyll-search/dest/jekyll-search.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();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
@ -179,7 +179,7 @@ gulp.task('js:libraries', function() {
|
|||||||
|
|
||||||
// Project js
|
// Project js
|
||||||
gulp.task('js:project', function() {
|
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($.include()).on('error', onError)
|
||||||
.pipe($.concat('kremalicious3.min.js'))
|
.pipe($.concat('kremalicious3.min.js'))
|
||||||
.pipe($.if(isProduction, $.uglify())).on('error', onError)
|
.pipe($.if(isProduction, $.uglify())).on('error', onError)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user