mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-23 10:27:20 +01:00
more js modularization
This commit is contained in:
parent
6fed71618a
commit
60dd4498aa
@ -1,38 +1,43 @@
|
||||
var s, Menu = {
|
||||
var Menu = (function(w, d) {
|
||||
|
||||
settings: {
|
||||
thesite: $('.site'),
|
||||
thelink: $('.menu-btn'),
|
||||
thepop: $('.nav-popover')
|
||||
},
|
||||
var thesite = $('.site'),
|
||||
thelink = $('.menu-btn'),
|
||||
thepop = $('.nav-popover');
|
||||
|
||||
init: function() {
|
||||
this.menuShow();
|
||||
},
|
||||
var app, _private;
|
||||
|
||||
menuShow: function() {
|
||||
var s = this.settings;
|
||||
|
||||
s.thelink.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
_private = {
|
||||
menuShow: function() {
|
||||
thelink.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// toggle menu
|
||||
s.thesite.toggleClass('menu-open');
|
||||
// toggle menu
|
||||
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');
|
||||
});
|
||||
// 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
|
||||
s.thepop.on('click', function(e) {
|
||||
// dont close thepop when you click on thepop
|
||||
thepop.on('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// and dont close thepop now
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// and dont close thepop now
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
};
|
||||
app = {
|
||||
init: function() {
|
||||
_private.menuShow();
|
||||
}
|
||||
};
|
||||
|
||||
return app;
|
||||
|
||||
})(window, document);
|
||||
|
||||
@ -1,96 +1,103 @@
|
||||
var s, Search = {
|
||||
var Search = (function(w, d) {
|
||||
|
||||
settings: {
|
||||
content: $('.site__content'),
|
||||
searchlink: $('.search-btn'),
|
||||
searcharea: $('.search-area'),
|
||||
searchfield: $('#search-input'),
|
||||
searchresults: $('#search-results'),
|
||||
searchpop: $('#search-popover')
|
||||
},
|
||||
var 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();
|
||||
},
|
||||
var app, _private;
|
||||
|
||||
searchShow: function() {
|
||||
s.searchlink.on('click', function(e) {
|
||||
e.preventDefault()
|
||||
_private = {
|
||||
searchShow: function() {
|
||||
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
|
||||
})
|
||||
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();
|
||||
// show search field
|
||||
searcharea
|
||||
.removeClass('ready bounceOutUp')
|
||||
.addClass('ready slideDown')
|
||||
.on('animationend webkitAnimationEnd oAnimationEnd', function(){
|
||||
content.addClass('search-open-blur');
|
||||
});
|
||||
searchfield.focus();
|
||||
|
||||
// blur the content
|
||||
s.searcharea.on('animationend webkitAnimationEnd oAnimationEnd', function(){
|
||||
s.content.addClass('search-open-blur');
|
||||
});
|
||||
// hide menu too just in case
|
||||
if ($('body').hasClass('menu-open')) {
|
||||
$('body').removeClass('menu-open');
|
||||
}
|
||||
|
||||
// hide menu too just in case
|
||||
if ($('body').hasClass('menu-open')) {
|
||||
$('body').removeClass('menu-open');
|
||||
}
|
||||
// show search results upon typing
|
||||
if (searchfield.val().length) {
|
||||
searchpop.removeClass('hide');
|
||||
}
|
||||
|
||||
// show search results upon typing
|
||||
if (s.searchfield.val().length) {
|
||||
s.searchpop.removeClass('hide');
|
||||
}
|
||||
// bind the hide controls
|
||||
$(document).bind('click.hidethepop', function() {
|
||||
_private.searchReset();
|
||||
|
||||
// bind the hide controls
|
||||
$(document).bind('click.hidethepop', function() {
|
||||
Search.searchReset();
|
||||
// unbind the hide controls
|
||||
$(document).unbind('click.hidethepop');
|
||||
});
|
||||
|
||||
// unbind the hide controls
|
||||
$(document).unbind('click.hidethepop');
|
||||
});
|
||||
// dont close thepop when click on thepop
|
||||
searchpop.on('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
// dont close thepop when click on search field
|
||||
searchfield.on('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 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) {
|
||||
// and dont close thepop now
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// and dont close thepop now
|
||||
e.stopPropagation();
|
||||
});
|
||||
// finally show popup upon first keypress
|
||||
searchfield.on('keyup', function() {
|
||||
searchpop.removeClass('hide');
|
||||
});
|
||||
},
|
||||
|
||||
// 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();
|
||||
|
||||
searchHide: function() {
|
||||
$('.search-close').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
_private.searchReset();
|
||||
|
||||
Search.searchReset();
|
||||
// empty search field
|
||||
searchfield.val('').blur();
|
||||
});
|
||||
},
|
||||
|
||||
// empty search field
|
||||
s.searchfield.val('').blur();
|
||||
});
|
||||
},
|
||||
searchReset: function() {
|
||||
// revert all search elements
|
||||
searcharea
|
||||
.removeClass('slideDown')
|
||||
.addClass('bounceOutUp')
|
||||
.on('animationend webkitAnimationEnd oAnimationEnd', function(){
|
||||
content.removeClass('search-open-blur');
|
||||
});
|
||||
searchpop.addClass('hide');
|
||||
}
|
||||
};
|
||||
|
||||
searchReset: function() {
|
||||
// revert all search elements
|
||||
s.searcharea.removeClass('slideDown').addClass('bounceOutUp');
|
||||
s.searchpop.addClass('hide');
|
||||
app = {
|
||||
init: function() {
|
||||
_private.searchShow();
|
||||
_private.searchHide();
|
||||
}
|
||||
};
|
||||
|
||||
s.searcharea.on('animationend webkitAnimationEnd oAnimationEnd', function(){
|
||||
s.content.removeClass('search-open-blur');
|
||||
});
|
||||
}
|
||||
};
|
||||
return app;
|
||||
|
||||
})(document, window);
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
//=include _menu.js
|
||||
//=include _search.js
|
||||
|
||||
(function() {
|
||||
(function($) {
|
||||
|
||||
//
|
||||
// init modules
|
||||
@ -23,4 +23,4 @@
|
||||
nosvg: false
|
||||
});
|
||||
|
||||
}());
|
||||
}(jQuery));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user