Thread viewer for Bluesky
mackuba.eu
1class Menu {
2 constructor() {
3 this.menuElement = $id('account_menu');
4 this.icon = $id('account');
5
6 this.setupEvents();
7 }
8
9 setupEvents() {
10 let html = $(document.body.parentNode);
11
12 html.addEventListener('click', (e) => {
13 this.menuElement.style.visibility = 'hidden';
14 this.icon.classList.remove('active');
15 });
16
17 let homeLink = $(this.menuElement.querySelector('a[href="?"]'), HTMLLinkElement);
18 homeLink.href = location.origin + location.pathname;
19
20 this.icon.addEventListener('click', (e) => {
21 e.stopPropagation();
22 this.toggleAccountMenu();
23 });
24
25 this.menuElement.addEventListener('click', (e) => {
26 e.stopPropagation();
27 });
28
29 $(this.menuElement.querySelector('a[data-action=biohazard]')).addEventListener('click', (e) => {
30 e.preventDefault();
31
32 let hazards = document.querySelectorAll('p.hidden-replies, .content > .post.blocked, .blocked > .load-post');
33
34 if (window.biohazardEnabled === false) {
35 window.biohazardEnabled = true;
36 localStorage.setItem('biohazard', 'true');
37 this.toggleMenuButtonCheck('biohazard', true);
38 Array.from(hazards).forEach(p => { $(p).style.display = 'block' });
39 } else {
40 window.biohazardEnabled = false;
41 localStorage.setItem('biohazard', 'false');
42 this.toggleMenuButtonCheck('biohazard', false);
43 Array.from(hazards).forEach(p => { $(p).style.display = 'none' });
44 }
45 });
46
47 $(this.menuElement.querySelector('a[data-action=incognito]')).addEventListener('click', (e) => {
48 e.preventDefault();
49
50 if (window.isIncognito) {
51 localStorage.removeItem('incognito');
52 } else {
53 localStorage.setItem('incognito', '1');
54 }
55
56 location.reload();
57 });
58
59 $(this.menuElement.querySelector('a[data-action=login]')).addEventListener('click', (e) => {
60 e.preventDefault();
61
62 showDialog(loginDialog);
63 this.menuElement.style.visibility = 'hidden';
64 });
65
66 $(this.menuElement.querySelector('a[data-action=logout]')).addEventListener('click', (e) => {
67 e.preventDefault();
68 logOut();
69 });
70 }
71
72 toggleAccountMenu() {
73 let isVisible = (this.menuElement.style.visibility == 'visible');
74
75 this.menuElement.style.visibility = isVisible ? 'hidden' : 'visible';
76 this.icon.classList.toggle('active', !isVisible);
77 }
78
79 /** @param {string} buttonName */
80
81 showMenuButton(buttonName) {
82 let button = $(this.menuElement.querySelector(`a[data-action=${buttonName}]`));
83 let item = $(button.parentNode);
84 item.style.display = 'list-item';
85 }
86
87 /** @param {string} buttonName */
88
89 hideMenuButton(buttonName) {
90 let button = $(this.menuElement.querySelector(`a[data-action=${buttonName}]`));
91 let item = $(button.parentNode);
92 item.style.display = 'none';
93 }
94
95 /** @param {string} buttonName, @param {boolean} state */
96
97 toggleMenuButtonCheck(buttonName, state) {
98 let button = $(this.menuElement.querySelector(`a[data-action=${buttonName}]`));
99 let check = $(button.querySelector('.check'));
100 check.style.display = (state) ? 'inline' : 'none';
101 }
102
103 /** @param {boolean | 'incognito'} loggedIn, @param {string | undefined | null} [avatar] */
104
105 showLoggedInStatus(loggedIn, avatar) {
106 if (loggedIn === true && avatar) {
107 let button = $(this.icon.querySelector('i'));
108
109 let img = $tag('img.avatar', { src: avatar });
110 img.style.display = 'none';
111 img.addEventListener('load', () => {
112 button.remove();
113 img.style.display = 'inline';
114 });
115 img.addEventListener('error', () => {
116 this.showLoggedInStatus(true, null);
117 })
118
119 this.icon.append(img);
120 } else if (loggedIn === false) {
121 this.icon.innerHTML = `<i class="fa-regular fa-user-circle fa-xl"></i>`;
122 } else if (loggedIn === 'incognito') {
123 this.icon.innerHTML = `<i class="fa-solid fa-user-secret fa-lg"></i>`;
124 } else {
125 this.icon.innerHTML = `<i class="fa-solid fa-user-circle fa-xl"></i>`;
126 }
127 }
128
129 /** @returns {Promise<void>} */
130
131 async loadCurrentUserAvatar() {
132 try {
133 let url = await api.loadCurrentUserAvatar();
134 this.showLoggedInStatus(true, url);
135 } catch (error) {
136 console.log(error);
137 this.showLoggedInStatus(true, null);
138 }
139 }
140}