mirror of
https://github.com/go-gitea/gitea
synced 2024-12-22 16:44:26 +00:00
Refactor some frontend problems (#32646)
1. correct the modal usage on "admin email list" page (then `web_src/js/features/admin/emails.ts` is removed) 2. use `addDelegatedEventListener` instead of `jQuery().on` 3. more jQuery related changes and remove jQuery from `web_src/js/features/common-button.ts` 4. improve `confirmModal` to make it support header, and remove incorrect double-escaping 5. fix more typescript related types 6. fine tune devtest pages and add more tests
This commit is contained in:
parent
722e703c6b
commit
0f4b0cf892
@ -154,7 +154,7 @@ func ActivateEmail(ctx *context.Context) {
|
|||||||
|
|
||||||
// DeleteEmail serves a POST request for delete a user's email
|
// DeleteEmail serves a POST request for delete a user's email
|
||||||
func DeleteEmail(ctx *context.Context) {
|
func DeleteEmail(ctx *context.Context) {
|
||||||
u, err := user_model.GetUserByID(ctx, ctx.FormInt64("Uid"))
|
u, err := user_model.GetUserByID(ctx, ctx.FormInt64("uid"))
|
||||||
if err != nil || u == nil {
|
if err != nil || u == nil {
|
||||||
ctx.ServerError("GetUserByID", err)
|
ctx.ServerError("GetUserByID", err)
|
||||||
return
|
return
|
||||||
|
@ -24,12 +24,12 @@ func List(ctx *context.Context) {
|
|||||||
var subNames []string
|
var subNames []string
|
||||||
for _, tmplName := range templateNames {
|
for _, tmplName := range templateNames {
|
||||||
subName := strings.TrimSuffix(tmplName, ".tmpl")
|
subName := strings.TrimSuffix(tmplName, ".tmpl")
|
||||||
if subName != "list" {
|
if !strings.HasPrefix(subName, "devtest-") {
|
||||||
subNames = append(subNames, subName)
|
subNames = append(subNames, subName)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ctx.Data["SubNames"] = subNames
|
ctx.Data["SubNames"] = subNames
|
||||||
ctx.HTML(http.StatusOK, "devtest/list")
|
ctx.HTML(http.StatusOK, "devtest/devtest-list")
|
||||||
}
|
}
|
||||||
|
|
||||||
func FetchActionTest(ctx *context.Context) {
|
func FetchActionTest(ctx *context.Context) {
|
||||||
|
@ -50,10 +50,10 @@
|
|||||||
<td>{{svg (Iif .IsPrimary "octicon-check" "octicon-x")}}</td>
|
<td>{{svg (Iif .IsPrimary "octicon-check" "octicon-x")}}</td>
|
||||||
<td>
|
<td>
|
||||||
{{if .CanChange}}
|
{{if .CanChange}}
|
||||||
<a class="link-email-action" href data-uid="{{.UID}}"
|
<a class="show-modal" href data-modal="#change-email-modal" data-modal-uid="{{.UID}}"
|
||||||
data-email="{{.Email}}"
|
data-modal-email="{{.Email}}"
|
||||||
data-primary="{{if .IsPrimary}}1{{else}}0{{end}}"
|
data-modal-primary="{{if .IsPrimary}}1{{else}}0{{end}}"
|
||||||
data-activate="{{if .IsActivated}}0{{else}}1{{end}}">
|
data-modal-activate="{{if .IsActivated}}0{{else}}1{{end}}">
|
||||||
{{svg (Iif .IsActivated "octicon-check" "octicon-x")}}
|
{{svg (Iif .IsActivated "octicon-check" "octicon-x")}}
|
||||||
</a>
|
</a>
|
||||||
{{else}}
|
{{else}}
|
||||||
@ -61,9 +61,10 @@
|
|||||||
{{end}}
|
{{end}}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="tw-flex tw-gap-2">
|
<a class="link-action negative" href data-url="{{$.Link}}/delete?id={{.ID}}&uid={{.UID}}"
|
||||||
<a class="delete-button" href="" data-url="{{$.Link}}/delete" data-id="{{.ID}}" data-data-uid="{{.UID}}">{{svg "octicon-trash"}}</a>
|
data-modal-confirm-header="{{ctx.Locale.Tr "admin.emails.delete"}}"
|
||||||
</div>
|
data-modal-confirm-content="{{ctx.Locale.Tr "admin.emails.delete_desc"}}"
|
||||||
|
>{{svg "octicon-trash"}}</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{{end}}
|
{{end}}
|
||||||
@ -77,40 +78,24 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
{{ctx.Locale.Tr "admin.emails.change_email_header"}}
|
{{ctx.Locale.Tr "admin.emails.change_email_header"}}
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<form class="content ui form" action="{{AppSubUrl}}/-/admin/emails/activate" method="post">
|
||||||
<p class="center">{{ctx.Locale.Tr "admin.emails.change_email_text"}}</p>
|
<p class="center">{{ctx.Locale.Tr "admin.emails.change_email_text"}}</p>
|
||||||
|
|
||||||
<form class="ui form" id="email-action-form" action="{{AppSubUrl}}/-/admin/emails/activate" method="post">
|
|
||||||
{{$.CsrfTokenHtml}}
|
{{$.CsrfTokenHtml}}
|
||||||
|
|
||||||
<input type="hidden" id="query-sort" name="sort" value="{{.SortType}}">
|
<input type="hidden" name="sort" value="{{.SortType}}">
|
||||||
<input type="hidden" id="query-keyword" name="q" value="{{.Keyword}}">
|
<input type="hidden" name="q" value="{{.Keyword}}">
|
||||||
<input type="hidden" id="query-primary" name="is_primary" value="{{.IsPrimary}}" required>
|
<input type="hidden" name="is_primary" value="{{.IsPrimary}}">
|
||||||
<input type="hidden" id="query-activated" name="is_activated" value="{{.IsActivated}}" required>
|
<input type="hidden" name="is_activated" value="{{.IsActivated}}">
|
||||||
|
|
||||||
<input type="hidden" id="form-uid" name="uid" value="" required>
|
<input type="hidden" name="uid">
|
||||||
<input type="hidden" id="form-email" name="email" value="" required>
|
<input type="hidden" name="email">
|
||||||
<input type="hidden" id="form-primary" name="primary" value="" required>
|
<input type="hidden" name="primary">
|
||||||
<input type="hidden" id="form-activate" name="activate" value="" required>
|
<input type="hidden" name="activate">
|
||||||
|
|
||||||
<div class="center">
|
|
||||||
{{template "base/modal_actions_confirm" .}}
|
{{template "base/modal_actions_confirm" .}}
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ui g-modal-confirm delete modal">
|
|
||||||
<div class="header">
|
|
||||||
{{svg "octicon-trash"}}
|
|
||||||
{{ctx.Locale.Tr "admin.emails.delete"}}
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
{{ctx.Locale.Tr "admin.emails.delete_desc"}}
|
|
||||||
</div>
|
|
||||||
{{template "base/modal_actions_confirm" .}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{template "admin/layout_footer" .}}
|
{{template "admin/layout_footer" .}}
|
||||||
|
3
templates/devtest/devtest-footer.tmpl
Normal file
3
templates/devtest/devtest-footer.tmpl
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{{/* TODO: the devtest.js is isolated from index.js, so no module is shared and many index.js functions do not work in devtest.ts */}}
|
||||||
|
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
|
||||||
|
{{template "base/footer" dict}}
|
2
templates/devtest/devtest-header.tmpl
Normal file
2
templates/devtest/devtest-header.tmpl
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
{{template "base/head" dict}}
|
||||||
|
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
@ -1,5 +1,4 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{{range .SubNames}}
|
{{range .SubNames}}
|
||||||
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>
|
<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>
|
||||||
@ -11,5 +10,4 @@ ul {
|
|||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
{{template "devtest/devtest-footer"}}
|
||||||
{{template "base/footer" .}}
|
|
@ -1,4 +1,4 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
<div class="page-content devtest ui container">
|
<div class="page-content devtest ui container">
|
||||||
{{template "base/alert" .}}
|
{{template "base/alert" .}}
|
||||||
<div>
|
<div>
|
||||||
@ -11,6 +11,7 @@
|
|||||||
<button class="link-action" data-url="fetch-action-test?k=1">test action</button>
|
<button class="link-action" data-url="fetch-action-test?k=1">test action</button>
|
||||||
<button class="link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with confirm</button>
|
<button class="link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with confirm</button>
|
||||||
<button class="ui red button link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with risky confirm</button>
|
<button class="ui red button link-action" data-url="fetch-action-test?k=1" data-modal-confirm="confirm?">test with risky confirm</button>
|
||||||
|
<button class="ui button link-action" data-url="fetch-action-test?k=1" data-modal-confirm-header="confirm header" data-modal-confirm-content="confirm content">test with confirm header</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -41,4 +42,4 @@
|
|||||||
border: 1px red dashed; /* show the border for demo purpose */
|
border: 1px red dashed; /* show the border for demo purpose */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{{template "base/footer" .}}
|
{{template "devtest/devtest-footer"}}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
|
||||||
<div class="page-content devtest">
|
<div class="page-content devtest">
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<h1>Flex List (standalone)</h1>
|
<h1>Flex List (standalone)</h1>
|
||||||
@ -112,4 +111,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{template "base/footer" .}}
|
{{template "devtest/devtest-footer"}}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
|
||||||
<div class="page-content devtest ui container">
|
<div class="page-content devtest ui container">
|
||||||
<div>
|
<div>
|
||||||
<h2>Dropdown</h2>
|
<h2>Dropdown</h2>
|
||||||
@ -128,4 +127,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{template "base/footer" .}}
|
{{template "devtest/devtest-footer"}}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
<div class="page-content devtest ui container">
|
<div class="page-content devtest ui container">
|
||||||
{{template "base/alert" .}}
|
{{template "base/alert" .}}
|
||||||
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
|
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
for (const el of $('.ui.modal')) {
|
for (const el of $('.ui.modal:not([data-skip-button])')) {
|
||||||
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
|
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
|
||||||
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
|
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
|
||||||
});
|
});
|
||||||
@ -69,5 +69,27 @@
|
|||||||
<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
|
<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
|
||||||
{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do this is dangerous operation")}}
|
{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do this is dangerous operation")}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<button class="show-modal" data-modal="#test-modal-fill-values"
|
||||||
|
data-modal-fill-by-id="value for id"
|
||||||
|
data-modal-fill-by-name="value for name"
|
||||||
|
data-modal-fill-by-class="value for class"
|
||||||
|
data-modal-p="value for tag"
|
||||||
|
data-modal-a.text-content="fill with attr"
|
||||||
|
>test-modal-fill-values</button>
|
||||||
|
|
||||||
|
<div id="test-modal-fill-values" class="ui mini modal" data-skip-button>
|
||||||
|
<div class="header">Modal dialog (fill values)</div>
|
||||||
|
<form class="content">
|
||||||
|
<div id="fill-by-id"></div>
|
||||||
|
<input name="fill-by-name">
|
||||||
|
<div class="fill-by-class"></div>
|
||||||
|
<p></p>
|
||||||
|
<a href="#">link</a>
|
||||||
|
{{template "base/modal_actions_confirm" dict}}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{template "base/footer" .}}
|
{{template "devtest/devtest-footer"}}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
|
||||||
<div class="page-content devtest ui container">
|
<div class="page-content devtest ui container">
|
||||||
<div>
|
<div>
|
||||||
<h1>Link</h1>
|
<h1>Link</h1>
|
||||||
@ -193,4 +192,4 @@
|
|||||||
<button class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button>
|
<button class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{template "base/footer" .}}
|
{{template "devtest/devtest-footer"}}
|
||||||
|
16
templates/devtest/global-button.tmpl
Normal file
16
templates/devtest/global-button.tmpl
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{{template "devtest/devtest-header"}}
|
||||||
|
<div class="page-content devtest ui container">
|
||||||
|
<div>
|
||||||
|
<h1>Show/Hide panel</h1>
|
||||||
|
<div>
|
||||||
|
<!-- to test Space/Enter also works on non-button buttons with children -->
|
||||||
|
<div tabindex="0" class="ui button show-panel toggle" data-panel="#devtest-panel-show-hide"><span>Toggle panel 1</span></div>
|
||||||
|
<span tabindex="0" class="ui button show-panel" data-panel="#devtest-panel-show-hide"><span>Show panel 1</span></span>
|
||||||
|
</div>
|
||||||
|
<div id="devtest-panel-show-hide">
|
||||||
|
<div>Panel 1 content</div>
|
||||||
|
<div class="ui button hide-panel" data-panel-closest="div">Hide panel 1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{template "devtest/devtest-footer"}}
|
@ -1,5 +1,4 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
|
||||||
<div class="page-content devtest ui container">
|
<div class="page-content devtest ui container">
|
||||||
<div>
|
<div>
|
||||||
<h1>Label</h1>
|
<h1>Label</h1>
|
||||||
@ -24,4 +23,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{template "base/footer" .}}
|
{{template "devtest/devtest-footer"}}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
<div class="page-content devtest">
|
<div class="page-content devtest">
|
||||||
<div class="tw-flex">
|
<div class="tw-flex">
|
||||||
<div class="tw-w-4/5">
|
<div class="tw-w-4/5">
|
||||||
@ -9,4 +9,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{template "base/footer" .}}
|
{{template "devtest/devtest-footer"}}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
{{template "base/head" .}}
|
{{template "devtest/devtest-header"}}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h1>Toast</h1>
|
<h1>Toast</h1>
|
||||||
<div>
|
<div>
|
||||||
@ -9,7 +8,4 @@
|
|||||||
<button class="ui button toast-test-button" data-toast-level="error" data-toast-message="very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong message">Show Error Toast (long)</button>
|
<button class="ui button toast-test-button" data-toast-level="error" data-toast-message="very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong message">Show Error Toast (long)</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{template "devtest/devtest-footer"}}
|
||||||
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
|
|
||||||
|
|
||||||
{{template "base/footer" .}}
|
|
||||||
|
@ -1,13 +0,0 @@
|
|||||||
import $ from 'jquery';
|
|
||||||
|
|
||||||
export function initAdminEmails(): void {
|
|
||||||
$('.link-email-action').on('click', (e) => {
|
|
||||||
const $this = $(this);
|
|
||||||
$('#form-uid').val($this.data('uid'));
|
|
||||||
$('#form-email').val($this.data('email'));
|
|
||||||
$('#form-primary').val($this.data('primary'));
|
|
||||||
$('#form-activate').val($this.data('activate'));
|
|
||||||
$('#change-email-modal').modal('show');
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
}
|
|
@ -1,13 +1,13 @@
|
|||||||
import $ from 'jquery';
|
|
||||||
import {POST} from '../modules/fetch.ts';
|
import {POST} from '../modules/fetch.ts';
|
||||||
import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
|
import {addDelegatedEventListener, hideElem, queryElems, showElem, toggleElem} from '../utils/dom.ts';
|
||||||
import {showErrorToast} from '../modules/toast.ts';
|
import {fomanticQuery} from '../modules/fomantic/base.ts';
|
||||||
|
import {camelize} from 'vue';
|
||||||
|
|
||||||
export function initGlobalButtonClickOnEnter(): void {
|
export function initGlobalButtonClickOnEnter(): void {
|
||||||
$(document).on('keypress', 'div.ui.button,span.ui.button', (e) => {
|
addDelegatedEventListener(document, 'keypress', 'div.ui.button, span.ui.button', (el, e: KeyboardEvent) => {
|
||||||
if (e.code === ' ' || e.code === 'Enter') {
|
if (e.code === 'Space' || e.code === 'Enter') {
|
||||||
$(e.target).trigger('click');
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
el.click();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -40,7 +40,7 @@ export function initGlobalDeleteButton(): void {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(modal).modal({
|
fomanticQuery(modal).modal({
|
||||||
closable: false,
|
closable: false,
|
||||||
onApprove: async () => {
|
onApprove: async () => {
|
||||||
// if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
|
// if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
|
||||||
@ -73,87 +73,93 @@ export function initGlobalDeleteButton(): void {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initGlobalButtons(): void {
|
function onShowPanelClick(e) {
|
||||||
// There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
|
|
||||||
// However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
|
|
||||||
// There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
|
|
||||||
$(document).on('click', 'form button.ui.cancel.button', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.show-panel').on('click', function (e) {
|
|
||||||
// a '.show-panel' element can show a panel, by `data-panel="selector"`
|
// a '.show-panel' element can show a panel, by `data-panel="selector"`
|
||||||
// if it has "toggle" class, it toggles the panel
|
// if it has "toggle" class, it toggles the panel
|
||||||
|
const el = e.currentTarget;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const sel = this.getAttribute('data-panel');
|
const sel = el.getAttribute('data-panel');
|
||||||
if (this.classList.contains('toggle')) {
|
if (el.classList.contains('toggle')) {
|
||||||
toggleElem(sel);
|
toggleElem(sel);
|
||||||
} else {
|
} else {
|
||||||
showElem(sel);
|
showElem(sel);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
$('.hide-panel').on('click', function (e) {
|
|
||||||
// a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
|
|
||||||
e.preventDefault();
|
|
||||||
let sel = this.getAttribute('data-panel');
|
|
||||||
if (sel) {
|
|
||||||
hideElem($(sel));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
sel = this.getAttribute('data-panel-closest');
|
|
||||||
if (sel) {
|
|
||||||
hideElem($(this).closest(sel));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// should never happen, otherwise there is a bug in code
|
|
||||||
showErrorToast('Nothing to hide');
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initGlobalShowModal() {
|
function onHidePanelClick(e) {
|
||||||
|
// a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
|
||||||
|
const el = e.currentTarget;
|
||||||
|
e.preventDefault();
|
||||||
|
let sel = el.getAttribute('data-panel');
|
||||||
|
if (sel) {
|
||||||
|
hideElem(sel);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
sel = el.getAttribute('data-panel-closest');
|
||||||
|
if (sel) {
|
||||||
|
hideElem(el.parentNode.closest(sel));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
throw new Error('no panel to hide'); // should never happen, otherwise there is a bug in code
|
||||||
|
}
|
||||||
|
|
||||||
|
function onShowModalClick(e) {
|
||||||
// A ".show-modal" button will show a modal dialog defined by its "data-modal" attribute.
|
// A ".show-modal" button will show a modal dialog defined by its "data-modal" attribute.
|
||||||
// Each "data-modal-{target}" attribute will be filled to target element's value or text-content.
|
// Each "data-modal-{target}" attribute will be filled to target element's value or text-content.
|
||||||
// * First, try to query '#target'
|
// * First, try to query '#target'
|
||||||
|
// * Then, try to query '[name=target]'
|
||||||
// * Then, try to query '.target'
|
// * Then, try to query '.target'
|
||||||
// * Then, try to query 'target' as HTML tag
|
// * Then, try to query 'target' as HTML tag
|
||||||
// If there is a ".{attr}" part like "data-modal-form.action", then the form's "action" attribute will be set.
|
// If there is a ".{attr}" part like "data-modal-form.action", then the form's "action" attribute will be set.
|
||||||
$('.show-modal').on('click', function (e) {
|
const el = e.currentTarget;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const modalSelector = this.getAttribute('data-modal');
|
const modalSelector = el.getAttribute('data-modal');
|
||||||
const $modal = $(modalSelector);
|
const elModal = document.querySelector(modalSelector);
|
||||||
if (!$modal.length) {
|
if (!elModal) throw new Error('no modal for this action');
|
||||||
throw new Error('no modal for this action');
|
|
||||||
}
|
|
||||||
const modalAttrPrefix = 'data-modal-';
|
const modalAttrPrefix = 'data-modal-';
|
||||||
for (const attrib of this.attributes) {
|
for (const attrib of el.attributes) {
|
||||||
if (!attrib.name.startsWith(modalAttrPrefix)) {
|
if (!attrib.name.startsWith(modalAttrPrefix)) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const attrTargetCombo = attrib.name.substring(modalAttrPrefix.length);
|
const attrTargetCombo = attrib.name.substring(modalAttrPrefix.length);
|
||||||
const [attrTargetName, attrTargetAttr] = attrTargetCombo.split('.');
|
const [attrTargetName, attrTargetAttr] = attrTargetCombo.split('.');
|
||||||
// try to find target by: "#target" -> ".target" -> "target tag"
|
// try to find target by: "#target" -> "[name=target]" -> ".target" -> "<target> tag"
|
||||||
let $attrTarget = $modal.find(`#${attrTargetName}`);
|
const attrTarget = elModal.querySelector(`#${attrTargetName}`) ||
|
||||||
if (!$attrTarget.length) $attrTarget = $modal.find(`.${attrTargetName}`);
|
elModal.querySelector(`[name=${attrTargetName}]`) ||
|
||||||
if (!$attrTarget.length) $attrTarget = $modal.find(`${attrTargetName}`);
|
elModal.querySelector(`.${attrTargetName}`) ||
|
||||||
if (!$attrTarget.length) continue; // TODO: show errors in dev mode to remind developers that there is a bug
|
elModal.querySelector(`${attrTargetName}`);
|
||||||
|
if (!attrTarget) {
|
||||||
|
if (!window.config.runModeIsProd) throw new Error(`attr target "${attrTargetCombo}" not found for modal`);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
if (attrTargetAttr) {
|
if (attrTargetAttr) {
|
||||||
$attrTarget[0][attrTargetAttr] = attrib.value;
|
attrTarget[camelize(attrTargetAttr)] = attrib.value;
|
||||||
} else if ($attrTarget[0].matches('input, textarea')) {
|
} else if (attrTarget.matches('input, textarea')) {
|
||||||
$attrTarget.val(attrib.value); // FIXME: add more supports like checkbox
|
attrTarget.value = attrib.value; // FIXME: add more supports like checkbox
|
||||||
} else {
|
} else {
|
||||||
$attrTarget[0].textContent = attrib.value; // FIXME: it should be more strict here, only handle div/span/p
|
attrTarget.textContent = attrib.value; // FIXME: it should be more strict here, only handle div/span/p
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$modal.modal('setting', {
|
fomanticQuery(elModal).modal('setting', {
|
||||||
onApprove: () => {
|
onApprove: () => {
|
||||||
// "form-fetch-action" can handle network errors gracefully,
|
// "form-fetch-action" can handle network errors gracefully,
|
||||||
// so keep the modal dialog to make users can re-submit the form if anything wrong happens.
|
// so keep the modal dialog to make users can re-submit the form if anything wrong happens.
|
||||||
if ($modal.find('.form-fetch-action').length) return false;
|
if (elModal.querySelector('.form-fetch-action')) return false;
|
||||||
},
|
},
|
||||||
}).modal('show');
|
}).modal('show');
|
||||||
});
|
}
|
||||||
|
|
||||||
|
export function initGlobalButtons(): void {
|
||||||
|
// There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
|
||||||
|
// However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
|
||||||
|
// There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
|
||||||
|
addDelegatedEventListener(document, 'click', 'form button.ui.cancel.button', (_ /* el */, e) => e.preventDefault());
|
||||||
|
|
||||||
|
queryElems(document, '.show-panel', (el) => el.addEventListener('click', onShowPanelClick));
|
||||||
|
queryElems(document, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick));
|
||||||
|
queryElems(document, '.show-modal', (el) => el.addEventListener('click', onShowModalClick));
|
||||||
}
|
}
|
||||||
|
@ -1,14 +1,14 @@
|
|||||||
import {request} from '../modules/fetch.ts';
|
import {request} from '../modules/fetch.ts';
|
||||||
import {showErrorToast} from '../modules/toast.ts';
|
import {showErrorToast} from '../modules/toast.ts';
|
||||||
import {submitEventSubmitter} from '../utils/dom.ts';
|
import {addDelegatedEventListener, submitEventSubmitter} from '../utils/dom.ts';
|
||||||
import {htmlEscape} from 'escape-goat';
|
|
||||||
import {confirmModal} from './comp/ConfirmModal.ts';
|
import {confirmModal} from './comp/ConfirmModal.ts';
|
||||||
|
import type {RequestOpts} from '../types.ts';
|
||||||
|
|
||||||
const {appSubUrl, i18n} = window.config;
|
const {appSubUrl, i18n} = window.config;
|
||||||
|
|
||||||
// fetchActionDoRedirect does real redirection to bypass the browser's limitations of "location"
|
// fetchActionDoRedirect does real redirection to bypass the browser's limitations of "location"
|
||||||
// more details are in the backend's fetch-redirect handler
|
// more details are in the backend's fetch-redirect handler
|
||||||
function fetchActionDoRedirect(redirect) {
|
function fetchActionDoRedirect(redirect: string) {
|
||||||
const form = document.createElement('form');
|
const form = document.createElement('form');
|
||||||
const input = document.createElement('input');
|
const input = document.createElement('input');
|
||||||
form.method = 'post';
|
form.method = 'post';
|
||||||
@ -21,7 +21,7 @@ function fetchActionDoRedirect(redirect) {
|
|||||||
form.submit();
|
form.submit();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchActionDoRequest(actionElem, url, opt) {
|
async function fetchActionDoRequest(actionElem: HTMLElement, url: string, opt: RequestOpts) {
|
||||||
try {
|
try {
|
||||||
const resp = await request(url, opt);
|
const resp = await request(url, opt);
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
@ -55,11 +55,8 @@ async function fetchActionDoRequest(actionElem, url, opt) {
|
|||||||
actionElem.classList.remove('is-loading', 'loading-icon-2px');
|
actionElem.classList.remove('is-loading', 'loading-icon-2px');
|
||||||
}
|
}
|
||||||
|
|
||||||
async function formFetchAction(e) {
|
async function formFetchAction(formEl: HTMLFormElement, e: SubmitEvent) {
|
||||||
if (!e.target.classList.contains('form-fetch-action')) return;
|
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const formEl = e.target;
|
|
||||||
if (formEl.classList.contains('is-loading')) return;
|
if (formEl.classList.contains('is-loading')) return;
|
||||||
|
|
||||||
formEl.classList.add('is-loading');
|
formEl.classList.add('is-loading');
|
||||||
@ -77,7 +74,7 @@ async function formFetchAction(e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let reqUrl = formActionUrl;
|
let reqUrl = formActionUrl;
|
||||||
const reqOpt = {method: formMethod.toUpperCase()};
|
const reqOpt = {method: formMethod.toUpperCase(), body: null};
|
||||||
if (formMethod.toLowerCase() === 'get') {
|
if (formMethod.toLowerCase() === 'get') {
|
||||||
const params = new URLSearchParams();
|
const params = new URLSearchParams();
|
||||||
for (const [key, value] of formData) {
|
for (const [key, value] of formData) {
|
||||||
@ -95,34 +92,36 @@ async function formFetchAction(e) {
|
|||||||
await fetchActionDoRequest(formEl, reqUrl, reqOpt);
|
await fetchActionDoRequest(formEl, reqUrl, reqOpt);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function linkAction(e) {
|
async function linkAction(el: HTMLElement, e: Event) {
|
||||||
// A "link-action" can post AJAX request to its "data-url"
|
// A "link-action" can post AJAX request to its "data-url"
|
||||||
// Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading.
|
// Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading.
|
||||||
// If the "link-action" has "data-modal-confirm" attribute, a confirm modal dialog will be shown before taking action.
|
// If the "link-action" has "data-modal-confirm" attribute, a confirm modal dialog will be shown before taking action.
|
||||||
const el = e.target.closest('.link-action');
|
|
||||||
if (!el) return;
|
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const url = el.getAttribute('data-url');
|
const url = el.getAttribute('data-url');
|
||||||
const doRequest = async () => {
|
const doRequest = async () => {
|
||||||
el.disabled = true;
|
if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but A doesn't have disabled attribute
|
||||||
await fetchActionDoRequest(el, url, {method: 'POST'});
|
await fetchActionDoRequest(el, url, {method: 'POST'});
|
||||||
el.disabled = false;
|
if ('disabled' in el) el.disabled = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
const modalConfirmContent = htmlEscape(el.getAttribute('data-modal-confirm') || '');
|
const modalConfirmContent = el.getAttribute('data-modal-confirm') ||
|
||||||
|
el.getAttribute('data-modal-confirm-content') || '';
|
||||||
if (!modalConfirmContent) {
|
if (!modalConfirmContent) {
|
||||||
await doRequest();
|
await doRequest();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const isRisky = el.classList.contains('red') || el.classList.contains('negative');
|
const isRisky = el.classList.contains('red') || el.classList.contains('negative');
|
||||||
if (await confirmModal(modalConfirmContent, {confirmButtonColor: isRisky ? 'red' : 'primary'})) {
|
if (await confirmModal({
|
||||||
|
header: el.getAttribute('data-modal-confirm-header') || '',
|
||||||
|
content: modalConfirmContent,
|
||||||
|
confirmButtonColor: isRisky ? 'red' : 'primary',
|
||||||
|
})) {
|
||||||
await doRequest();
|
await doRequest();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initGlobalFetchAction() {
|
export function initGlobalFetchAction() {
|
||||||
document.addEventListener('submit', formFetchAction);
|
addDelegatedEventListener(document, 'click', '.form-fetch-action', formFetchAction);
|
||||||
document.addEventListener('click', linkAction);
|
addDelegatedEventListener(document, 'click', '.link-action', linkAction);
|
||||||
}
|
}
|
||||||
|
@ -5,10 +5,12 @@ import {fomanticQuery} from '../../modules/fomantic/base.ts';
|
|||||||
|
|
||||||
const {i18n} = window.config;
|
const {i18n} = window.config;
|
||||||
|
|
||||||
export function confirmModal(content, {confirmButtonColor = 'primary'} = {}) {
|
export function confirmModal({header = '', content = '', confirmButtonColor = 'primary'} = {}) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
|
const headerHtml = header ? `<div class="header">${htmlEscape(header)}</div>` : '';
|
||||||
const modal = createElementFromHTML(`
|
const modal = createElementFromHTML(`
|
||||||
<div class="ui g-modal-confirm modal">
|
<div class="ui g-modal-confirm modal">
|
||||||
|
${headerHtml}
|
||||||
<div class="content">${htmlEscape(content)}</div>
|
<div class="content">${htmlEscape(content)}</div>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button class="ui cancel button">${svg('octicon-x')} ${htmlEscape(i18n.modal_cancel)}</button>
|
<button class="ui cancel button">${svg('octicon-x')} ${htmlEscape(i18n.modal_cancel)}</button>
|
||||||
|
@ -76,7 +76,7 @@ function initRepoIssueListCheckboxes() {
|
|||||||
// for delete
|
// for delete
|
||||||
if (action === 'delete') {
|
if (action === 'delete') {
|
||||||
const confirmText = e.target.getAttribute('data-action-delete-confirm');
|
const confirmText = e.target.getAttribute('data-action-delete-confirm');
|
||||||
if (!await confirmModal(confirmText, {confirmButtonColor: 'red'})) {
|
if (!await confirmModal({content: confirmText, confirmButtonColor: 'red'})) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -34,7 +34,6 @@ import {
|
|||||||
} from './features/repo-issue.ts';
|
} from './features/repo-issue.ts';
|
||||||
import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
|
import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
|
||||||
import {initRepoTopicBar} from './features/repo-home.ts';
|
import {initRepoTopicBar} from './features/repo-home.ts';
|
||||||
import {initAdminEmails} from './features/admin/emails.ts';
|
|
||||||
import {initAdminCommon} from './features/admin/common.ts';
|
import {initAdminCommon} from './features/admin/common.ts';
|
||||||
import {initRepoTemplateSearch} from './features/repo-template.ts';
|
import {initRepoTemplateSearch} from './features/repo-template.ts';
|
||||||
import {initRepoCodeView} from './features/repo-code.ts';
|
import {initRepoCodeView} from './features/repo-code.ts';
|
||||||
@ -83,7 +82,6 @@ import {
|
|||||||
initGlobalButtonClickOnEnter,
|
initGlobalButtonClickOnEnter,
|
||||||
initGlobalButtons,
|
initGlobalButtons,
|
||||||
initGlobalDeleteButton,
|
initGlobalDeleteButton,
|
||||||
initGlobalShowModal,
|
|
||||||
} from './features/common-button.ts';
|
} from './features/common-button.ts';
|
||||||
import {initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts';
|
import {initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts';
|
||||||
|
|
||||||
@ -122,7 +120,6 @@ onDomReady(() => {
|
|||||||
callInitFunctions([
|
callInitFunctions([
|
||||||
initGlobalDropdown,
|
initGlobalDropdown,
|
||||||
initGlobalTabularMenu,
|
initGlobalTabularMenu,
|
||||||
initGlobalShowModal,
|
|
||||||
initGlobalFetchAction,
|
initGlobalFetchAction,
|
||||||
initGlobalTooltips,
|
initGlobalTooltips,
|
||||||
initGlobalButtonClickOnEnter,
|
initGlobalButtonClickOnEnter,
|
||||||
@ -157,7 +154,6 @@ onDomReady(() => {
|
|||||||
initCopyContent,
|
initCopyContent,
|
||||||
|
|
||||||
initAdminCommon,
|
initAdminCommon,
|
||||||
initAdminEmails,
|
|
||||||
initAdminUserListSearchForm,
|
initAdminUserListSearchForm,
|
||||||
initAdminConfigs,
|
initAdminConfigs,
|
||||||
initAdminSelfCheck,
|
initAdminSelfCheck,
|
||||||
|
@ -353,7 +353,7 @@ export function querySingleVisibleElem<T extends HTMLElement>(parent: Element, s
|
|||||||
return candidates.length ? candidates[0] as T : null;
|
return candidates.length ? candidates[0] as T : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addDelegatedEventListener<T extends HTMLElement>(parent: Node, type: string, selector: string, listener: (elem: T, e: Event) => void | Promise<any>, options?: boolean | AddEventListenerOptions) {
|
export function addDelegatedEventListener<T extends HTMLElement, E extends Event>(parent: Node, type: string, selector: string, listener: (elem: T, e: E) => void | Promise<any>, options?: boolean | AddEventListenerOptions) {
|
||||||
parent.addEventListener(type, (e: Event) => {
|
parent.addEventListener(type, (e: Event) => {
|
||||||
const elem = (e.target as HTMLElement).closest(selector);
|
const elem = (e.target as HTMLElement).closest(selector);
|
||||||
if (!elem) return;
|
if (!elem) return;
|
||||||
|
Loading…
Reference in New Issue
Block a user