90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
function AppViewModel () {
|
|
|
|
// content identifiers
|
|
var contents = [
|
|
"home",
|
|
"contact",
|
|
"links"
|
|
]
|
|
|
|
|
|
// methods
|
|
function toggleMenuButton(){
|
|
if (!$('.menuButton').hasClass('menuButtonOpen')) {
|
|
$('.shade').toggle(0).animate({'opacity': '0.1'}, 300);
|
|
$('#menuButtonIcon').children('i').removeClass('fa-bars')
|
|
.addClass('fa-times');
|
|
} else {
|
|
$('.shade').css('opacity', '0').toggle(0);
|
|
$('#menuButtonIcon').children('i').removeClass('fa-times')
|
|
.addClass('fa-bars');
|
|
}
|
|
$('.menuButton').toggleClass('menuButtonOpen');
|
|
$('div.menuBox').toggle(300);
|
|
}
|
|
|
|
// handling of menu button
|
|
$('.menuButton').click(function(){
|
|
toggleMenuButton();
|
|
});
|
|
$('.shade').click(function(){
|
|
if($('.menuButton').hasClass('menuButtonOpen')){
|
|
toggleMenuButton();
|
|
}
|
|
});
|
|
$('html').keypress(function(event){
|
|
if (event.key === "Escape" && $('.menuButton').hasClass('menuButtonOpen')) {
|
|
toggleMenuButton();
|
|
}
|
|
});
|
|
$('.menuItem').click(function(){
|
|
toggleMenuButton();
|
|
})
|
|
|
|
// handling of special links
|
|
$('.specialLink').on('mouseenter',function(){
|
|
console.log('!');
|
|
$(this).removeClass('specialLinkAnimationReverse').addClass('specialLinkAnimation');
|
|
});
|
|
$('.specialLink').on('animationend', function(){
|
|
if ($(this).hasClass('specialLinkAnimation')){
|
|
$(this).addClass('specialLinkFill')
|
|
.removeClass('specialLinkAnimation');
|
|
} else {
|
|
$(this).removeClass('specialLinkAnimationReverse');
|
|
}
|
|
});
|
|
$('.specialLink').on('mouseleave',function(){
|
|
$(this).removeClass('specialLinkFill')
|
|
.removeClass('specialLinkAnimation')
|
|
.addClass('specialLinkAnimationReverse');
|
|
});
|
|
|
|
|
|
// client side routes
|
|
Sammy(function(){
|
|
this.get('#:route', function(){
|
|
var route = this.params.route;
|
|
if (contents.includes(route)) {
|
|
for (var i = 0; i < contents.length; i++){
|
|
$('#' + contents[i]).hide(0);
|
|
}
|
|
$('#' + route).fadeIn(200);
|
|
} else {
|
|
this.app.runRoute('get', '#home');
|
|
}
|
|
});
|
|
this.get('', function() {
|
|
this.app.runRoute('get', '#home')
|
|
});
|
|
}).run();
|
|
|
|
// reoccuring animations
|
|
setInterval(function(){
|
|
$('.cursor').toggle(0, 'default');
|
|
}, 600);
|
|
|
|
|
|
}
|
|
|
|
ko.applyBindings(new AppViewModel()); |