gitea/web_src/js/modules/fomantic/modal.ts
Lunny Xiao 7de114a332
Rework delete org and rename org UI (#34762)
# What's the problem of the original implementation

Renaming organization will mix with organization's information change
make the operation difficult to keep consistent.

This PR created a danger zone like what's repository setting. It also
moved organization's `rename` and `delete` operations to this zone. The
original updating repository will not change the name any more.

This is also a step to extract the `updaterepository` function
completely.

Before:


![image](https://github.com/user-attachments/assets/d097dfdf-07be-4d79-8fcf-e78822515575)

![image](https://github.com/user-attachments/assets/42ee832c-cb44-41ec-9fe3-92a1c94747d2)

After:


![image](https://github.com/user-attachments/assets/f7700ed7-f104-4302-a924-09e118f24be3)

![image](https://github.com/user-attachments/assets/4c49952a-578e-4d14-bd01-4a68c9e02412)

![image](https://github.com/user-attachments/assets/814829d3-00fe-4e87-ae05-625c129170d2)

![image](https://github.com/user-attachments/assets/b067b263-c909-4b48-b23c-73481c32d350)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-06-21 18:21:48 +00:00

40 lines
1.7 KiB
TypeScript

import $ from 'jquery';
import type {FomanticInitFunction} from '../../types.ts';
import {queryElems} from '../../utils/dom.ts';
import {hideToastsFrom} from '../toast.ts';
const fomanticModalFn = $.fn.modal;
// use our own `$.fn.modal` to patch Fomantic's modal module
export function initAriaModalPatch() {
if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once');
$.fn.modal = ariaModalFn;
$.fn.fomanticExt.onModalBeforeHidden = onModalBeforeHidden;
(ariaModalFn as FomanticInitFunction).settings = fomanticModalFn.settings;
}
// the patched `$.fn.modal` modal function
// * it does the one-time attaching on the first call
function ariaModalFn(this: any, ...args: Parameters<FomanticInitFunction>) {
const ret = fomanticModalFn.apply(this, args);
if (args[0] === 'show' || args[0]?.autoShow) {
for (const el of this) {
// If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default).
// In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed.
// It breaks the user experience - the "Enter" key should confirm the dialog and submit the form.
// So, all "cancel" buttons without "[type]" must be marked as "type=button".
for (const button of el.querySelectorAll('form button.cancel:not([type])')) {
button.setAttribute('type', 'button');
}
}
}
return ret;
}
function onModalBeforeHidden(this: any) {
const $modal = $(this);
const elModal = $modal[0];
queryElems(elModal, 'form', (form: HTMLFormElement) => form.reset());
hideToastsFrom(elModal.closest('.ui.dimmer') ?? document.body);
}