Refactor language menu and dom utils (#32450)
1. Make `queryElem*` functions could correctly handle TS types 2. Remove some legacy jQuery $ calls (introduce fomanticQuery for Fomantic UI only) 3. Fix some TS typing problems
This commit is contained in:
parent
35bcd667b2
commit
0f397ae09b
10 changed files with 70 additions and 62 deletions
|
@ -1,6 +1,7 @@
|
|||
import $ from 'jquery';
|
||||
import {GET} from '../modules/fetch.ts';
|
||||
import {showGlobalErrorMessage} from '../bootstrap.ts';
|
||||
import {fomanticQuery} from '../modules/fomantic/base.ts';
|
||||
import {queryElems} from '../utils/dom.ts';
|
||||
|
||||
const {appUrl} = window.config;
|
||||
|
||||
|
@ -17,18 +18,18 @@ export function initHeadNavbarContentToggle() {
|
|||
}
|
||||
|
||||
export function initFootLanguageMenu() {
|
||||
async function linkLanguageAction() {
|
||||
const $this = $(this);
|
||||
await GET($this.data('url'));
|
||||
document.querySelector('.ui.dropdown .menu.language-menu')?.addEventListener('click', async (e) => {
|
||||
const item = (e.target as HTMLElement).closest('.item');
|
||||
if (!item) return;
|
||||
e.preventDefault();
|
||||
await GET(item.getAttribute('data-url'));
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
$('.language-menu a[lang]').on('click', linkLanguageAction);
|
||||
});
|
||||
}
|
||||
|
||||
export function initGlobalDropdown() {
|
||||
// Semantic UI modules.
|
||||
const $uiDropdowns = $('.ui.dropdown');
|
||||
const $uiDropdowns = fomanticQuery('.ui.dropdown');
|
||||
|
||||
// do not init "custom" dropdowns, "custom" dropdowns are managed by their own code.
|
||||
$uiDropdowns.filter(':not(.custom)').dropdown();
|
||||
|
@ -46,14 +47,14 @@ export function initGlobalDropdown() {
|
|||
},
|
||||
onHide() {
|
||||
this._tippy?.enable();
|
||||
// eslint-disable-next-line unicorn/no-this-assignment
|
||||
const elDropdown = this;
|
||||
|
||||
// hide all tippy elements of items after a while. eg: use Enter to click "Copy Link" in the Issue Context Menu
|
||||
setTimeout(() => {
|
||||
const $dropdown = $(this);
|
||||
const $dropdown = fomanticQuery(elDropdown);
|
||||
if ($dropdown.dropdown('is hidden')) {
|
||||
$(this).find('.menu > .item').each((_, item) => {
|
||||
item._tippy?.hide();
|
||||
});
|
||||
queryElems(elDropdown, '.menu > .item', (el) => el._tippy?.hide());
|
||||
}
|
||||
}, 2000);
|
||||
},
|
||||
|
@ -71,7 +72,7 @@ export function initGlobalDropdown() {
|
|||
}
|
||||
|
||||
export function initGlobalTabularMenu() {
|
||||
$('.ui.menu.tabular:not(.custom) .item').tab({autoTabActivation: false});
|
||||
fomanticQuery('.ui.menu.tabular:not(.custom) .item').tab({autoTabActivation: false});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue