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

Merge pull request #304 from philomena-dev/burger-ts

Browse source 
convert burger menu logic to typescript
This commit is contained in:
liamwhite 2024-06-23 11:43:44 -04:00 committed by GitHub
commit 29c88cf74e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
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,31 +29,29 @@ function close(burger, content, body, root) {
}, 300); }, 300);
} }
function copyArtistLinksTo(burger) { function copyUserLinksTo(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;
copyArtistLinksTo(burger); copyUserLinksTo(burger);
toggle.addEventListener('click', event => { toggle.addEventListener('click', event => {
event.stopPropagation(); event.stopPropagation();
@ -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 };