Lavande/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-12-21 19:41:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show edit page confirmation dialog on tree view file change (#36130)

Browse Source 
Currently, when editing or deleting a file and the edit/commit form has
changes, navigating the file tree will discard all changes without any
warning. This PR prevents partial reloading when the edit form has
unsaved changes, which will trigger a browser native warning dialog.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
bytedream
2025-12-20 02:29:39 +01:00
committed by GitHub
parent b4c9057f92
commit 05c3b84f84
2 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web_src/js/components/ViewFileTreeItem.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import {SvgIcon} from '../svg.ts';
import {isPlainClick} from '../utils/dom.ts';
import {shouldTriggerAreYouSure} from '../vendor/jquery.are-you-sure.ts';
import {shallowRef} from 'vue';
import type {createViewFileTreeStore, FileTreeItem} from './ViewFileTreeStore.ts';
@@ -27,9 +28,10 @@ const doLoadChildren = async () => {
};
const onItemClick = (e: MouseEvent) => {
// only handle the click event with page partial reloading if the user didn't press any special key
// let browsers handle special keys like "Ctrl+Click"
if (!isPlainClick(e)) return;
// only handle the click event with partial page reloading if both
// - the user didn't press any special key like "Ctrl+Click" (which may have custom browser behavior)
// - the editor/commit form isn't dirty (a full page reload shows a confirmation dialog if the form contains unsaved changes)
if (!isPlainClick(e) || shouldTriggerAreYouSure()) return;
e.preventDefault();
if (props.item.entryMode === 'tree') doLoadChildren();
store.navigateTreeView(props.item.fullPath);

21
web_src/js/vendor/jquery.are-you-sure.ts vendored
View File

@@ -3,6 +3,7 @@
// * use export to make it work with ES6 modules.
// * the addition of `const` to make it strict mode compatible.
// * ignore forms with "ignore-dirty" class, ignore hidden forms (closest('.tw-hidden'))
// * extract the dirty check logic into a separate function
/*!
* jQuery Plugin: Are-You-Sure (Dirty Form Detection)
@@ -16,6 +17,9 @@
* Version: 1.9.0
* Date: 13th August 2014
*/
const dataKeyAysSettings = 'ays-settings';
export function initAreYouSure($) {
$.fn.areYouSure = function(options) {
@@ -124,6 +128,7 @@ export function initAreYouSure($) {
$(fields).unbind(settings.fieldEvents, checkForm);
$(fields).bind(settings.fieldEvents, checkForm);
$form.data("ays-orig-field-count", $(fields).length);
$form.data(dataKeyAysSettings, settings);
setDirtyStatus($form, false);
};
@@ -162,9 +167,7 @@ export function initAreYouSure($) {
if (!settings.silent && !window.aysUnloadSet) {
window.aysUnloadSet = true;
$(window).bind('beforeunload', function() {
const $forms = $("form:not(.ignore-dirty)").filter('.' + settings.dirtyClass);
const dirtyFormCount = Array.from($forms).reduce((res, form) => form.closest('.tw-hidden') ? res : res + 1, 0);
if (dirtyFormCount === 0) return;
if (!shouldTriggerAreYouSure(settings)) return;
// Prevent multiple prompts - seen on Chrome and IE
if (navigator.userAgent.toLowerCase().match(/msie|chrome/)) {
@@ -210,3 +213,15 @@ export function ignoreAreYouSure(selectorOrEl: string|Element|$) {
// because when using "enter" to submit a form, the "dirty" class will appear again before reloading.
$(selectorOrEl).addClass('ignore-dirty');
}
export function shouldTriggerAreYouSure(): boolean {
const forms = document.querySelectorAll('form:not(.ignore-dirty)');
for (const form of forms) {
const settings = $(form).data(dataKeyAysSettings);
if (!settings) continue;
if (!form.matches('.' + settings.dirtyClass)) continue;
if (form.closest('.tw-hidden')) continue;
return true;
}
return false;
}