x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div contents data-controller="popover" data-popover-placement-value="bottom-start"> <button type="button" class="btn" data-popover-target="trigger" popovertarget="popover" aria-haspopup="true"> Open </button> <div popover id="popover" class="popover" style="--popover-size: 14rem;" data-popover-target="content" role="menu" aria-label="Menu"> <div class="menu" data-controller="menu" data-action="keydown->menu#navigate"> <div class="menu__header">Settings</div> <hr class="menu__separator" role="separator"/> <div class="btn menu__item"> <input type="checkbox" name="check_recents" id="check_recents" value="1" class="checkbox" data-menu-target="item" role="menuitemcheckbox" /> <label class="grow text-sm" for="check_recents">Recents</label> </div> <div class="btn menu__item"> <input type="checkbox" name="check_home" id="check_home" value="1" class="checkbox" data-menu-target="item" role="menuitemcheckbox" /> <label class="grow text-sm" for="check_home">Home</label> </div> <div class="btn menu__item"> <input type="checkbox" name="check_applications" id="check_applications" value="1" class="checkbox" data-menu-target="item" role="menuitemcheckbox" /> <label class="grow text-sm" for="check_applications">Applications</label> </div> <div class="btn menu__item"> <input type="checkbox" name="check_desktop" id="check_desktop" value="1" class="checkbox" data-menu-target="item" role="menuitemcheckbox" /> <label class="grow text-sm" for="check_desktop">Desktop</label> </div> </div> </div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div contents data-controller="popover" data-popover-placement-value="bottom-start"> <button type="button" class="btn" data-popover-target="trigger" popovertarget="popover" aria-haspopup="true"> Open </button> <div popover id="popover" class="popover" style="--popover-size: 14rem;" data-popover-target="content" role="menu" aria-label="Menu"> <div class="menu" data-controller="menu" data-action="keydown->menu#navigate"> <div class="menu__header">Settings</div> <hr class="menu__separator" role="separator"/> <div class="btn menu__item"> <%= check_box_tag :check_recents, class: "checkbox", data: { menu_target: "item" }, role: "menuitemcheckbox" %> <%= label_tag :check_recents, "Recents", class: "grow text-sm" %> </div> <div class="btn menu__item"> <%= check_box_tag :check_home, class: "checkbox", data: { menu_target: "item" }, role: "menuitemcheckbox" %> <%= label_tag :check_home, "Home", class: "grow text-sm" %> </div> <div class="btn menu__item"> <%= check_box_tag :check_applications, class: "checkbox", data: { menu_target: "item" }, role: "menuitemcheckbox" %> <%= label_tag :check_applications, "Applications", class: "grow text-sm" %> </div> <div class="btn menu__item"> <%= check_box_tag :check_desktop, class: "checkbox", data: { menu_target: "item" }, role: "menuitemcheckbox" %> <%= label_tag :check_desktop, "Desktop", class: "grow text-sm" %> </div> </div> </div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.menu { background-color: var(--color-surface); display: flex; flex-direction: column; padding: var(--size-1); row-gap: var(--size-1);}.menu__header { font-size: var(--text-sm); font-weight: var(--font-medium); padding: var(--size-1_5) var(--size-2);}.menu__group { display: flex; flex-direction: column; row-gap: 1px;}.menu__separator { margin-inline: -0.25rem;}.menu__item { --btn-border-color: transparent; --btn-box-shadow: none; --btn-font-weight: var(--font-normal); --btn-justify-content: start; --btn-outline-size: 0; --btn-padding: var(--size-1_5) var(--size-2); &:focus-visible { --btn-background: var(--color-border-light); }}.menu__item-key { color: var(--color-text-subtle); font-size: var(--text-xs); margin-inline-start: auto;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "item" ] static values = { index: Number } #observer initialize() { this.#observer = new IntersectionObserver(this.#reset.bind(this)) } connect() { this.#observer.observe(this.element) } disconnect() { this.#observer.disconnect() } navigate(event) { switch (event.key) { case " ": case "Enter": this.#cancel(event) this.#activate(event.target) break case "ArrowUp": this.#cancel(event) this.#prev() break case "ArrowDown": this.#cancel(event) this.#next() break case "Home": this.#cancel(event) this.#first() break case "End": this.#cancel(event) this.#last() break } } #cancel(event) { event.stopPropagation() event.preventDefault() } #activate(menuItem) { menuItem.click() } #reset([ entry ]) { entry.isIntersecting && this.#first() } #prev() { if (this.indexValue > 0) { this.indexValue-- this.#update() } } #next() { if (this.indexValue < this.#lastIndex) { this.indexValue++ this.#update() } } #first() { this.indexValue = 0 this.#update() } #last() { this.indexValue = this.#lastIndex this.#update() } #update() { this.#updateTabstops() this.#focusItemAtIndex() } #updateTabstops() { this.itemTargets.forEach((it, index) => { it.tabIndex = index === this.indexValue ? 0 : -1 }) } #focusItemAtIndex() { this.itemTargets[this.indexValue].focus() } get #lastIndex() { return this.itemTargets.length -1 }}
No notes provided.