datat.fi/assets/javascripts/main.js

77 lines
2.3 KiB
JavaScript
Raw Normal View History

2017-03-07 23:12:17 +02:00
---
---
/*!
2018-08-08 05:44:44 +03:00
* Basically Basic Jekyll Theme 1.4.1
2018-01-05 22:16:55 +02:00
* Copyright 2017-2018 Michael Rose - mademistakes | @mmistakes
2017-03-07 23:12:17 +02:00
* Free for personal and commercial use under the MIT license
* https://github.com/mmistakes/jekyll-theme-basically-basic/blob/master/LICENSE
2017-03-07 23:12:17 +02:00
*/
var menuItems = document.querySelectorAll('#sidebar li');
// Get vendor transition property
var docElemStyle = document.documentElement.style;
var transitionProp = typeof docElemStyle.transition == 'string' ?
2018-02-27 20:34:58 +02:00
'transition' : 'WebkitTransition';
2017-03-07 23:12:17 +02:00
// Animate sidebar menu items
2017-03-07 23:12:17 +02:00
function animateMenuItems() {
2018-02-27 20:34:58 +02:00
for (var i = 0; i < menuItems.length; i++) {
2017-03-07 23:12:17 +02:00
var item = menuItems[i];
// Stagger transition with transitionDelay
2018-02-27 20:34:58 +02:00
item.style[transitionProp + 'Delay'] = (i * 75) + 'ms';
2017-03-07 23:12:17 +02:00
item.classList.toggle('is--moved');
}
};
var myWrapper = document.querySelector('.wrapper');
var myMenu = document.querySelector('.sidebar');
var myToggle = document.querySelector('.toggle');
var myInitialContent = document.querySelector('.initial-content');
var mySearchContent = document.querySelector('.search-content');
var mySearchToggle = document.querySelector('.search-toggle');
2017-03-07 23:12:17 +02:00
// Toggle sidebar visibility
function toggleClassMenu() {
myMenu.classList.add('is--animatable');
2018-02-27 20:34:58 +02:00
if (!myMenu.classList.contains('is--visible')) {
2017-03-07 23:12:17 +02:00
myMenu.classList.add('is--visible');
myToggle.classList.add('open');
myWrapper.classList.add('is--pushed');
} else {
myMenu.classList.remove('is--visible');
myToggle.classList.remove('open');
myWrapper.classList.remove('is--pushed');
}
}
// Animation smoother
2017-03-07 23:12:17 +02:00
function OnTransitionEnd() {
myMenu.classList.remove('is--animatable');
}
myMenu.addEventListener('transitionend', OnTransitionEnd, false);
2018-02-27 20:34:58 +02:00
myToggle.addEventListener('click', function () {
2017-03-07 23:12:17 +02:00
toggleClassMenu();
animateMenuItems();
}, false);
2018-02-27 20:34:58 +02:00
myMenu.addEventListener('click', function () {
2017-03-07 23:12:17 +02:00
toggleClassMenu();
animateMenuItems();
2017-03-16 20:34:29 +02:00
}, false);
if (mySearchToggle) {
mySearchToggle.addEventListener('click', function () {
toggleClassSearch();
}, false);
}
// Toggle search input and content visibility
function toggleClassSearch() {
2018-02-27 20:34:58 +02:00
mySearchContent.classList.toggle('is--visible');
myInitialContent.classList.toggle('is--hidden');
setTimeout(function () {
document.querySelector('.search-content input').focus();
}, 400);
}