From 35166388b97113a1b4bb3e7f1d67f5112321ebef Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 19 Nov 2015 14:55:49 +0100 Subject: [PATCH] small js refactor --- _src/_assets/js/_menu.js | 37 +++++++++++ _src/_assets/js/_search.js | 91 +++++++++++++++++++++++++ _src/_assets/js/app.js | 132 ++++--------------------------------- gulpfile.js | 2 +- 4 files changed, 140 insertions(+), 122 deletions(-) create mode 100644 _src/_assets/js/_menu.js create mode 100644 _src/_assets/js/_search.js diff --git a/_src/_assets/js/_menu.js b/_src/_assets/js/_menu.js new file mode 100644 index 00000000..3318b7b2 --- /dev/null +++ b/_src/_assets/js/_menu.js @@ -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(); + }); + } +} diff --git a/_src/_assets/js/_search.js b/_src/_assets/js/_search.js new file mode 100644 index 00000000..d28d22ce --- /dev/null +++ b/_src/_assets/js/_search.js @@ -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: '
  • {title}
    • ', + 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'); + } +} diff --git a/_src/_assets/js/app.js b/_src/_assets/js/app.js index 29de7ffb..dc4c4867 100644 --- a/_src/_assets/js/app.js +++ b/_src/_assets/js/app.js @@ -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: '
  • {title}
    • ', - 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(); - } - -} diff --git a/gulpfile.js b/gulpfile.js index 7346fdc9..839b19da 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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)