Refactor htmx and fetch-action related code (#37186)

This is the first step (the hardest part):

* repo file list last commit message lazy load
* admin server status monitor
* watch/unwatch (normal page, watchers page)
* star/unstar (normal page, watchers page)
* project view, delete column
* workflow dispatch, switch the branch
* commit page: load branches and tags referencing this commit

The legacy "data-redirect" attribute is removed, it only makes the page
reload (sometimes using an incorrect link).

Also did cleanup for some devtest pages.
This commit is contained in:
wxiaoguang
2026-04-14 02:53:55 +08:00
committed by GitHub
parent 6eae04241d
commit 6bcb666a9d
41 changed files with 457 additions and 242 deletions
+2 -3
View File
@@ -3,7 +3,7 @@
<div>
<h1>link-action</h1>
<div>
Use "window.fetch" to send a request to backend, the request is defined in an "A" or "BUTTON" element.
The request is defined in an "A" or "BUTTON" element.
It might be renamed to "link-fetch-action" to match the "form-fetch-action".
</div>
<div>
@@ -15,7 +15,6 @@
</div>
<div>
<h1>form-fetch-action</h1>
<div>Use "window.fetch" to send a form request to backend</div>
<div class="flex-relaxed-list fetch-action-demo-forms">
<form method="get" action="./fetch-action-test?k=1" class="form-fetch-action">
<button name="btn">submit get</button>
@@ -25,7 +24,7 @@
<div><label><input name="check" type="checkbox"> check</label></div>
<div><button name="btn">submit post</button></div>
</form>
<form method="post" action="./no-such-uri" class="form-fetch-action">
<form method="post" action="/-/no-such-uri" class="form-fetch-action">
<div class="tw-py-8">bad action url</div>
<div><button name="btn">submit test</button></div>
</form>
+5 -17
View File
@@ -1,21 +1,9 @@
{{template "devtest/devtest-header"}}
<div class="page-content devtest ui container">
{{template "base/alert" .}}
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
<script>
document.addEventListener('gitea:index-ready', () => {
for (const el of $('.ui.modal:not([data-skip-button])')) {
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
});
$('.modal-buttons').append($btn);
}
});
</script>
<div id="test-modal-form-1" class="ui mini modal">
<div class="header">Form dialog (layout 1)</div>
<form class="content" method="post">
<form class="content" method="post" action="?mock_response_delay=1">
<div class="ui input tw-w-full"><input name="user_input"></div>
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
</form>
@@ -23,7 +11,7 @@
<div id="test-modal-form-2" class="ui mini modal">
<div class="header">Form dialog (layout 2)</div>
<form method="post">
<form method="post" action="?mock_response_delay=1">
<div class="content">
<div class="ui input tw-w-full"><input name="user_input"></div>
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
@@ -33,7 +21,7 @@
<div id="test-modal-form-3" class="ui mini modal">
<div class="header">Form dialog (layout 3)</div>
<form method="post">
<form method="post" action="?mock_response_delay=1">
<div class="content">
<div class="ui input tw-w-full"><input name="user_input"></div>
</div>
@@ -46,7 +34,7 @@
<div class="content">
<div class="ui input tw-w-full"><input name="user_input"></div>
</div>
<form method="post">
<form method="post" action="?mock_response_delay=1">
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
</form>
</div>
@@ -54,7 +42,7 @@
<div id="test-modal-form-5" class="ui mini modal">
<div class="header">Form dialog (layout 5)</div>
<div class="content">
<form method="post">
<form method="post" action="?mock_response_delay=1">
<div class="ui input tw-w-full"><input name="user_input"></div>
{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
</form>
-11
View File
@@ -45,17 +45,6 @@
</div>
</li>
</ul>
<script>
document.addEventListener('gitea:index-ready', () => {
const $buttons = $('#devtest-button-samples').find('button.ui');
const $buttonStyles = $('input[name*="button-style"]');
$buttonStyles.on('click', () => $buttonStyles.map((_, el) => $buttons.toggleClass(el.value, el.checked)));
const $buttonStates = $('input[name*="button-state"]');
$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
});
</script>
</div>
</div>