PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-23 20:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity

convert burger menu logic to typescript

Browse source
This commit is contained in:
Luna D. 2024-06-23 14:38:56 +02:00 committed by Liam
parent cc21b402a0
commit e23a4c541c
1 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
assets/js/burger.js → assets/js/burger.ts
View file

@ -2,12 +2,15 @@
* Hamburger menu. * Hamburger menu.
*/ */
function switchClasses(element, oldClass, newClass) { import { $, $$ } from './utils/dom';
import { assertNotNull } from './utils/assert';
function switchClasses(element: HTMLElement, oldClass: string, newClass: string) {
element.classList.remove(oldClass); element.classList.remove(oldClass);
element.classList.add(newClass); element.classList.add(newClass);
} }
function open(burger, content, body, root) { function open(burger: HTMLElement, content: HTMLElement, body: HTMLElement, root: HTMLElement) {
switchClasses(content, 'close', 'open'); switchClasses(content, 'close', 'open');
switchClasses(burger, 'close', 'open'); switchClasses(burger, 'close', 'open');
@ -15,7 +18,7 @@ function open(burger, content, body, root) {
body.classList.add('no-overflow'); body.classList.add('no-overflow');
} }
function close(burger, content, body, root) { function close(burger: HTMLElement, content: HTMLElement, body: HTMLElement, root: HTMLElement) {
switchClasses(content, 'open', 'close'); switchClasses(content, 'open', 'close');
switchClasses(burger, 'open', 'close'); switchClasses(burger, 'open', 'close');
@ -26,27 +29,25 @@ function close(burger, content, body, root) {
}, 300); }, 300);
} }
function copyArtistLinksTo(burger) { function copyArtistLinksTo(burger: HTMLElement) {
const copy = links => { const copy = (links: HTMLCollection) => {
burger.appendChild(document.createElement('hr')); burger.appendChild(document.createElement('hr'));
[].slice.call(links).forEach(link => { for (const link of links) {
const burgerLink = link.cloneNode(true); const burgerLink = link.cloneNode(true) as HTMLElement;
burgerLink.className = ''; burgerLink.className = '';
burger.appendChild(burgerLink); burger.appendChild(burgerLink);
}); }
}; };
const linksContainers = document.querySelectorAll('.js-burger-links'); $$<HTMLElement>('.js-burger-links').forEach(container => copy(container.children));
[].slice.call(linksContainers).forEach(container => copy(container.children));
} }
function setupBurgerMenu() { export function setupBurgerMenu() {
const burger = document.getElementById('burger'); // Burger menu should exist on all pages.
const toggle = document.getElementById('js-burger-toggle'); const burger = assertNotNull($<HTMLElement>('#burger'));
const content = document.getElementById('container'); const toggle = assertNotNull($<HTMLElement>('#js-burger-toggle'));
const content = assertNotNull($<HTMLElement>('#container'));
const body = document.body; const body = document.body;
const root = document.documentElement; const root = document.documentElement;
@ -63,11 +64,10 @@ function setupBurgerMenu() {
open(burger, content, body, root); open(burger, content, body, root);
} }
}); });
content.addEventListener('click', () => { content.addEventListener('click', () => {
if (content.classList.contains('open')) { if (content.classList.contains('open')) {
close(burger, content, body, root); close(burger, content, body, root);
} }
}); });
} }
export { setupBurgerMenu };