|
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