this repo has no description
<Gleam FE> fix user-menu (#58)
* Fix user-menu
* Move the event listener up, to avoid creating multiple event listeners for the same event
* Add in aria labels
+83
-9
+83
-9
frontend/src/frontend/page/site.gleam
+83
-9
frontend/src/frontend/page/site.gleam
···
2
2
// Licensed under the BSD 3-Clause License. See the LICENSE file for more info.
3
3
4
4
import frontend/other/element_actions
5
+
import frontend/other/fejson
5
6
import frontend/other/rendering
7
+
import frontend/other/rust_kind_of_unwrap.{unwrap}
6
8
import frontend/page/site/editor
7
9
import frontend/page/site/subpages
8
10
import gleam/bool
9
11
import gleam/dict.{type Dict}
10
-
import gleam/dynamic
11
-
import gleam/fetch
12
-
import gleam/http
13
-
import gleam/http/request
14
-
import gleam/http/response
15
12
import gleam/javascript/array
16
13
import gleam/javascript/promise
17
-
import gleam/json
18
14
import gleam/list
19
15
import gleam/string
20
16
import gleamy_lights/console
21
17
import gleamy_lights/premixed
22
18
import gleamy_lights/premixed/gleam_colours
23
-
import lumina/shared/shared_fepage_com.{
24
-
type FEPageServeResponse, FEPageServeResponse,
25
-
}
26
19
import plinth/browser/document
27
20
import plinth/browser/element
28
21
import plinth/browser/event
···
118
111
)
119
112
global.set_interval(60, fn() {
120
113
check_if_page_needs_to_be_switched(sub_page_list)
114
+
})
115
+
user_menu_toggle()
116
+
117
+
document.query_selector("main")
118
+
|> rust_kind_of_unwrap.unwrap
119
+
|> element.add_event_listener("click", fn(_) {
120
+
case document.get_element_by_id("user-menu") {
121
+
Ok(user_menu) -> {
122
+
let classes =
123
+
user_menu
124
+
|> element.get_attribute("class")
125
+
|> unwrap
126
+
user_menu |> element.set_attribute("class", classes <> " hidden")
127
+
}
128
+
Error(_) -> {
129
+
console.error("Failed to find user menu.")
130
+
}
131
+
}
132
+
})
133
+
134
+
case document.get_element_by_id("user-menu-button") {
135
+
Ok(user_menu_button) -> {
136
+
element.add_event_listener(user_menu_button, "click", fn(_) {
137
+
console.log("User menu button clicked.")
138
+
user_menu_toggle()
139
+
})
140
+
Nil
141
+
}
142
+
_ -> {
143
+
console.error("Failed to find user menu button.")
144
+
Nil
145
+
}
146
+
}
147
+
fejson.register_fejson_function(fn() {
148
+
let d = fejson.get()
149
+
case document.get_element_by_id("userimg") {
150
+
Ok(f) -> {
151
+
f |> element.set_attribute("alt", d.user.username)
152
+
}
153
+
_ -> Nil
154
+
}
155
+
156
+
document.query_selector_all(".settodisplayname")
157
+
|> array.to_list
158
+
|> list.each(fn(a) { a |> element.set_inner_text(d.user.username) })
121
159
})
122
160
editor.fold()
123
161
{
···
344
382
Error(_) -> promise.resolve(error_out())
345
383
}
346
384
}
385
+
386
+
fn user_menu_toggle() {
387
+
let assert Ok(user_menu_button) =
388
+
document.get_element_by_id("user-menu-button")
389
+
user_menu_button |> element.set_attribute("aria-haspopup", "true")
390
+
391
+
case document.get_element_by_id("user-menu") {
392
+
Ok(user_menu) -> {
393
+
let classes =
394
+
user_menu
395
+
|> element.get_attribute("class")
396
+
|> rust_kind_of_unwrap.unwrap
397
+
case classes |> string.contains("hidden") {
398
+
True -> {
399
+
user_menu
400
+
|> element.set_attribute(
401
+
"class",
402
+
string.replace(classes, "hidden", ""),
403
+
)
404
+
}
405
+
False -> {
406
+
user_menu |> element.set_attribute("class", classes <> " hidden")
407
+
}
408
+
}
409
+
classes
410
+
|> string.contains("hidden")
411
+
// |> bool.negate
412
+
|> bool.to_string
413
+
|> string.lowercase()
414
+
|> element.set_attribute(user_menu_button, "aria-expanded", _)
415
+
}
416
+
Error(_) -> {
417
+
console.error("Failed to find user menu.")
418
+
}
419
+
}
420
+
}