|
66 | 66 | class="clip"
|
67 | 67 | style:--height-difference="{menu_height - universal_menu_inner_height}px"
|
68 | 68 | ontransitionstart={(e) => {
|
69 |
| - const target = e.target as HTMLElement; |
| 69 | + const target = e.target as HTMLElement; |
70 | 70 |
|
71 |
| - if (!target?.classList.contains('viewport')) return; |
72 |
| - if (e.propertyName !== 'transform') return; |
| 71 | + if (!target?.classList.contains('viewport')) return; |
| 72 | + if (e.propertyName !== 'transform') return; |
73 | 73 |
|
74 |
| - // we need to apply a clip-path during the transition so that the contents |
75 |
| - // are constrained to the menu background, but only while the transition |
76 |
| - // is running, otherwise it prevents the contents from being scrolled |
77 |
| - const a = 'calc(var(--height-difference) + 1px)'; |
78 |
| - const b = '1px'; |
| 74 | + // we need to apply a clip-path during the transition so that the contents |
| 75 | + // are constrained to the menu background, but only while the transition |
| 76 | + // is running, otherwise it prevents the contents from being scrolled |
| 77 | + const a = 'calc(var(--height-difference) + 1px)'; |
| 78 | + const b = '1px'; |
79 | 79 |
|
80 |
| - const start = show_context_menu ? a : b; |
81 |
| - const end = show_context_menu ? b : a; |
| 80 | + const start = show_context_menu ? a : b; |
| 81 | + const end = show_context_menu ? b : a; |
82 | 82 |
|
83 |
| - const container = e.currentTarget; |
| 83 | + const container = e.currentTarget; |
84 | 84 |
|
85 |
| - container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`; |
| 85 | + container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`; |
86 | 86 |
|
87 |
| - setTimeout(() => { |
88 |
| - container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`; |
89 |
| - }, 0); |
90 |
| - }} |
| 87 | + setTimeout(() => { |
| 88 | + container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`; |
| 89 | + }, 0); |
| 90 | + }} |
91 | 91 | ontransitionend={(e) => {
|
92 |
| - const target = e.target as HTMLElement; |
| 92 | + const target = e.target as HTMLElement; |
93 | 93 |
|
94 |
| - if (!target?.classList.contains('viewport')) return; |
95 |
| - if (e.propertyName !== 'transform') return; |
| 94 | + if (!target?.classList.contains('viewport')) return; |
| 95 | + if (e.propertyName !== 'transform') return; |
96 | 96 |
|
97 |
| - e.currentTarget.style.clipPath = ''; |
| 97 | + e.currentTarget.style.clipPath = ''; |
98 | 98 |
|
99 |
| - // whenever we transition from one menu to the other, we need to move focus to the first item in the new menu |
100 |
| - if (!show_context_menu) { |
101 |
| - universal_menu?.querySelector('a')?.focus(); |
102 |
| - } |
103 |
| - }} |
| 99 | + // whenever we transition from one menu to the other, we need to move focus to the first item in the new menu |
| 100 | + if (!show_context_menu) { |
| 101 | + universal_menu?.querySelector('a')?.focus(); |
| 102 | + } |
| 103 | + }} |
104 | 104 | >
|
105 | 105 | <div
|
106 | 106 | class="viewport"
|
|
0 commit comments