docbrown/app/assets/javascripts/initializers/initializeTouchDevice.js

62 lines
1.8 KiB
JavaScript

'use strict';
function getById(className) {
return document.getElementById(className);
}
function getClassList(className) {
return getById(className).classList;
}
function blur(event, className) {
setTimeout(() => {
if (document.activeElement !== getById(className)) {
getClassList('navbar-menu-wrapper').remove('showing');
}
}, 10);
}
function removeShowingMenu() {
getClassList('navbar-menu-wrapper').remove('showing');
setTimeout(() => {
getClassList('navbar-menu-wrapper').remove('showing');
}, 5);
setTimeout(() => {
getClassList('navbar-menu-wrapper').remove('showing');
}, 150);
}
function toggleMenu() {
getClassList('navbar-menu-wrapper').toggle('showing');
}
function initializeTouchDevice() {
var isTouchDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|DEV-Native-ios/i.test(
navigator.userAgent,
);
if (navigator.userAgent === 'DEV-Native-ios') {
document
.getElementsByTagName('body')[0]
.classList.add('dev-ios-native-body');
}
setTimeout(() => {
removeShowingMenu();
if (isTouchDevice) {
// Use a named function instead of anonymous so duplicate event handlers are discarded
getById('navigation-butt').addEventListener('click', toggleMenu);
} else {
getClassList('navbar-menu-wrapper').add('desktop');
getById('navigation-butt').addEventListener('focus', e =>
getClassList('navbar-menu-wrapper').add('showing'),
);
getById('last-nav-link').addEventListener('blur', e =>
blur(e, 'second-last-nav-link'),
);
getById('navigation-butt').addEventListener('blur', e =>
blur(e, 'first-nav-link'),
);
}
getById('menubg').addEventListener('click', e =>
getClassList('navbar-menu-wrapper').remove('showing'),
);
}, 10);
}