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

templates/devtest/devtest-footer.tmpl

@@ -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}}

templates/devtest/devtest-header.tmpl

@@ -0,0 +1,2 @@
+{{template "base/head" dict}}
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">

templates/devtest/devtest-list.tmpl

@@ -1,5 +1,4 @@
-{{template "base/head" .}}
-
+{{template "devtest/devtest-header"}}
 <ul>
 	{{range .SubNames}}
 	<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>
@@ -11,5 +10,4 @@ ul {
 	line-height: 2em;
 }
 </style>
-
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}

templates/devtest/fetch-action.tmpl

@@ -1,4 +1,4 @@
-{{template "base/head" .}}
+{{template "devtest/devtest-header"}}
 <div class="page-content devtest ui container">
 	{{template "base/alert" .}}
 	<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" 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 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>
@@ -41,4 +42,4 @@
 		border: 1px red dashed; /* show the border for demo purpose */
 	}
 </style>
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}

templates/devtest/flex-list.tmpl

@@ -1,5 +1,4 @@
-{{template "base/head" .}}
-<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
+{{template "devtest/devtest-header"}}
 <div class="page-content devtest">
 	<div class="ui container">
 		<h1>Flex List (standalone)</h1>
@@ -112,4 +111,4 @@
 		</div>
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}

templates/devtest/fomantic-dropdown.tmpl

@@ -1,5 +1,4 @@
-{{template "base/head" .}}
-<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
+{{template "devtest/devtest-header"}}
 <div class="page-content devtest ui container">
 	<div>
 		<h2>Dropdown</h2>
@@ -128,4 +127,4 @@
 		</div>
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}

templates/devtest/fomantic-modal.tmpl

@@ -1,9 +1,9 @@
-{{template "base/head" .}}
+{{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 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', () => {
 				$(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>
 		{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do  this is dangerous operation")}}
 	</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>
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}

templates/devtest/gitea-ui.tmpl

@@ -1,5 +1,4 @@
-{{template "base/head" .}}
-<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
+{{template "devtest/devtest-header"}}
 <div class="page-content devtest ui container">
 	<div>
 		<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>
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}

templates/devtest/global-button.tmpl

@@ -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"}}

templates/devtest/label.tmpl

@@ -1,5 +1,4 @@
-{{template "base/head" .}}
-<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
+{{template "devtest/devtest-header"}}
 <div class="page-content devtest ui container">
 	<div>
 		<h1>Label</h1>
@@ -24,4 +23,4 @@
 		</div>
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}

templates/devtest/tmplerr.tmpl

@@ -1,4 +1,4 @@
-{{template "base/head" .}}
+{{template "devtest/devtest-header"}}
 <div class="page-content devtest">
 	<div class="tw-flex">
 		<div class="tw-w-4/5">
@@ -9,4 +9,4 @@
 		</div>
 	</div>
 </div>
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}

templates/devtest/toast.tmpl

@@ -1,5 +1,4 @@
-{{template "base/head" .}}
-
+{{template "devtest/devtest-header"}}
 <div>
 	<h1>Toast</h1>
 	<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>
 	</div>
 </div>
-
-<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
-
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}