Merge branch 'main' into refactor-initrepobranchtagselector-with-registerglobalinitfunc

GiteaBot · web-flow · commit dd01779c6106 · 2025-03-04T04:31:08.000+08:00
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
@@ -6,7 +6,7 @@
 		<div class="ui mobile reversed stackable grid">
 			<div class="ui {{if .ShowMemberAndTeamTab}}eleven wide{{end}} column">
 				{{if .ProfileReadmeContent}}
-					<div id="readme_profile" class="markup" data-profile-view-as-member="{{.IsViewingOrgAsMember}}">{{.ProfileReadmeContent}}</div>
+					<div id="readme_profile" class="render-content markup" data-profile-view-as-member="{{.IsViewingOrgAsMember}}">{{.ProfileReadmeContent}}</div>
 				{{end}}
 				{{template "shared/repo_search" .}}
 				{{template "explore/repo_list" .}}
diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
@@ -74,9 +74,7 @@
 				{{end}}
 			</div>
 			{{if .Description}}
-			<div class="content">
-				{{.RenderedContent}}
-			</div>
+				<div class="render-content markup">{{.RenderedContent}}</div>
 			{{end}}
 		</li>
 	{{end}}
diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
@@ -48,7 +48,7 @@
 						{{end}}
 						</span>
 						{{if IsMultilineCommitMessage .Message}}
-						<button class="ui button js-toggle-commit-body ellipsis-button" aria-expanded="false">...</button>
+						<button class="ui button ellipsis-button" aria-expanded="false" data-global-click="onRepoEllipsisButtonClick">...</button>
 						{{end}}
 						{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
 						{{if IsMultilineCommitMessage .Message}}
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
@@ -45,10 +45,10 @@
 							data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
 						<div class="editor-loading is-loading"></div>
 					</div>
-					<div class="ui tab markup tw-px-4 tw-py-3" data-tab="preview">
+					<div class="ui tab tw-px-4 tw-py-3" data-tab="preview">
 						{{ctx.Locale.Tr "loading"}}
 					</div>
-					<div class="ui tab diff edit-diff" data-tab="diff">
+					<div class="ui tab" data-tab="diff">
 						<div class="tw-p-16"></div>
 					</div>
 				</div>
diff --git a/templates/repo/issue/fields/markdown.tmpl b/templates/repo/issue/fields/markdown.tmpl
@@ -1,3 +1,3 @@
 <div class="field {{if not .item.VisibleOnForm}}tw-hidden{{end}}">
-	<div class="markup">{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}</div>
+	<div class="render-content markup">{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}</div>
 </div>
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
@@ -22,7 +22,7 @@
 			{{end}}
 		</div>
 		{{if .Milestone.RenderedContent}}
-		<div class="markup content tw-mb-4">
+		<div class="render-content markup tw-mb-4">
 				{{.Milestone.RenderedContent}}
 		</div>
 		{{end}}
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
@@ -81,9 +81,7 @@
 						{{end}}
 					</div>
 					{{if .Content}}
-						<div class="markup content">
-							{{.RenderedContent}}
-						</div>
+						<div class="render-content markup">{{.RenderedContent}}</div>
 					{{end}}
 				</li>
 			{{end}}
diff --git a/templates/repo/latest_commit.tmpl b/templates/repo/latest_commit.tmpl
@@ -23,7 +23,7 @@
 	{{$commitLink:= printf "%s/commit/%s" .RepoLink (PathEscape .LatestCommit.ID.String)}}
 	<span class="grey commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .LatestCommit.Message $commitLink ($.Repository.ComposeMetas ctx)}}</span>
 		{{if IsMultilineCommitMessage .LatestCommit.Message}}
-			<button class="ui button js-toggle-commit-body ellipsis-button" aria-expanded="false">...</button>
+			<button class="ui button ellipsis-button" aria-expanded="false" data-global-click="onRepoEllipsisButtonClick">...</button>
 			<pre class="commit-body tw-hidden">{{ctx.RenderUtils.RenderCommitBody .LatestCommit.Message ($.Repository.ComposeMetas ctx)}}</pre>
 		{{end}}
 	</span>
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
@@ -65,7 +65,7 @@
 								| <span class="ahead"><a href="{{$.RepoLink}}/compare/{{$release.TagName | PathEscapeSegments}}...{{$release.TargetBehind | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.release.ahead.commits" $release.NumCommitsBehind}}</a> {{ctx.Locale.Tr "repo.release.ahead.target" $release.TargetBehind}}</span>
 							{{end}}
 						</p>
-						<div class="markup desc">
+						<div class="render-content markup">
 							{{$release.RenderedNote}}
 						</div>
 						<div class="divider"></div>
diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl
@@ -13,7 +13,7 @@
 			</h4>
 			<div class="ui bottom attached table unstackable segment">
 				{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
-				<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsPlainText}} plain-text{{else if .IsTextFile}} code-view{{end}}">
+				<div class="file-view {{if .IsPlainText}}plain-text{{else if .IsTextFile}}code-view{{end}}">
 					{{if .IsFileTooLarge}}
 						{{template "shared/filetoolarge" dict "RawFileLink" .RawFileLink}}
 					{{else if not .FileSize}}
@@ -31,7 +31,7 @@
 									<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
 								</audio>
 							{{else if .IsPDFFile}}
-								<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "diff.view_file"}}"></div>
+								<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "diff.view_file"}}"></div>
 							{{else}}
 								<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 							{{end}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
@@ -55,7 +55,7 @@
 					{{end}}
 				</div>
 				<a download class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.download_file"}}" href="{{$.RawFileLink}}">{{svg "octicon-download"}}</a>
-				<a id="copy-content" class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}"{{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy"}}</a>
+				<a class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}" data-global-click="onCopyContentButtonClick" {{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy"}}</a>
 				{{if .EnableFeed}}
 				<a class="btn-octicon" href="{{$.RepoLink}}/rss/{{$.RefTypeNameSubURL}}/{{PathEscapeSegments .TreePath}}" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
 					{{svg "octicon-rss"}}
@@ -108,7 +108,7 @@
 							<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
 						</audio>
 					{{else if .IsPDFFile}}
-						<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
+						<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
 					{{else}}
 						<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
 					{{end}}
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
@@ -63,18 +63,18 @@
 
 		<div class="wiki-content-parts">
 			{{if .sidebarTocContent}}
-			<div class="markup wiki-content-sidebar wiki-content-toc">
+			<div class="render-content markup wiki-content-sidebar wiki-content-toc">
 				{{.sidebarTocContent | SafeHTML}}
 			</div>
 			{{end}}
 
-			<div class="markup wiki-content-main {{if or .sidebarTocContent .sidebarPresent}}with-sidebar{{end}}">
+			<div class="render-content markup wiki-content-main {{if or .sidebarTocContent .sidebarPresent}}with-sidebar{{end}}">
 				{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
 				{{.content | SafeHTML}}
 			</div>
 
 			{{if .sidebarPresent}}
-			<div class="markup wiki-content-sidebar">
+			<div class="render-content markup wiki-content-sidebar">
 				{{if and .CanWriteWiki (not .Repository.IsMirror)}}
 					<a class="tw-float-right muted" href="{{.RepoLink}}/wiki/_Sidebar?action=_edit" aria-label="{{ctx.Locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
 				{{end}}
@@ -86,7 +86,7 @@
 			<div class="tw-clear-both"></div>
 
 			{{if .footerPresent}}
-			<div class="markup wiki-content-footer">
+			<div class="render-content markup wiki-content-footer">
 				{{if and .CanWriteWiki (not .Repository.IsMirror)}}
 					<a class="tw-float-right muted" href="{{.RepoLink}}/wiki/_Footer?action=_edit" aria-label="{{ctx.Locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
 				{{end}}
diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl
@@ -81,7 +81,7 @@
 			}
 		</script>
 	</div>
-	<div class="ui tab markup" data-tab-panel="markdown-previewer">
+	<div class="ui tab" data-tab-panel="markdown-previewer">
 		{{ctx.Locale.Tr "loading"}}
 	</div>
 	<div class="markdown-add-table-panel tippy-target">
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
@@ -110,7 +110,7 @@
 					<a href="{{.GetCommentLink ctx}}" class="text truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 					{{$comment := index .GetIssueInfos 1}}
 					{{if $comment}}
-						<div class="markup tw-text-14">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
+						<div class="render-content markup tw-text-14">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
 					{{end}}
 				{{else if .GetOpType.InActions "merge_pull_request"}}
 					<div class="flex-item-body text black">{{index .GetIssueInfos 1}}</div>
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
@@ -33,7 +33,7 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="flex-container-main content">
+			<div class="flex-container-main">
 				<div class="list-header">
 					<div class="small-menu-items ui compact tiny menu list-header-toggle">
 						<a class="item{{if not .IsShowClosed}} active{{end}}" href="?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
@@ -140,9 +140,7 @@
 								{{end}}
 							</div>
 							{{if .Content}}
-								<div class="markup content">
-									{{.RenderedContent}}
-								</div>
+								<div class="render-content markup">{{.RenderedContent}}</div>
 							{{end}}
 						</li>
 					{{end}}
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
@@ -26,7 +26,7 @@
 				{{else if eq .TabName "followers"}}
 					{{template "repo/user_cards" .}}
 				{{else if eq .TabName "overview"}}
-					<div id="readme_profile" class="markup">{{.ProfileReadmeContent}}</div>
+					<div id="readme_profile" class="render-content markup">{{.ProfileReadmeContent}}</div>
 				{{else if eq .TabName "organizations"}}
 					{{template "repo/user_cards" .}}
 				{{else}}
diff --git a/web_src/css/editor/fileeditor.css b/web_src/css/editor/fileeditor.css
@@ -74,12 +74,3 @@
   padding: 1rem;
   text-align: center;
 }
-
-.edit-diff {
-  padding: 0 !important;
-}
-
-.edit-diff > div > .ui.table {
-  border-top: none !important;
-  border-bottom: none !important;
-}
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
@@ -535,7 +535,7 @@
   user-select: none;
 }
 
-.markup-render {
+.markup-content-iframe {
   display: block;
   border: none;
   width: 100%;
diff --git a/web_src/css/shared/milestone.css b/web_src/css/shared/milestone.css
@@ -12,7 +12,7 @@
   border-top: 1px solid var(--color-secondary);
 }
 
-.milestone-card .content {
+.milestone-card .render-content {
   padding-top: 10px;
 }
 
diff --git a/web_src/js/features/common-button.ts b/web_src/js/features/common-button.ts
@@ -1,5 +1,5 @@
 import {POST} from '../modules/fetch.ts';
-import {addDelegatedEventListener, hideElem, queryElems, showElem, toggleElem} from '../utils/dom.ts';
+import {addDelegatedEventListener, hideElem, showElem, toggleElem} from '../utils/dom.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {camelize} from 'vue';
 
@@ -74,10 +74,9 @@ export function initGlobalDeleteButton(): void {
   }
 }
 
-function onShowPanelClick(e: MouseEvent) {
+function onShowPanelClick(el: HTMLElement, e: MouseEvent) {
   // a '.show-panel' element can show a panel, by `data-panel="selector"`
   // if it has "toggle" class, it toggles the panel
-  const el = e.currentTarget as HTMLElement;
   e.preventDefault();
   const sel = el.getAttribute('data-panel');
   if (el.classList.contains('toggle')) {
@@ -87,9 +86,8 @@ function onShowPanelClick(e: MouseEvent) {
   }
 }
 
-function onHidePanelClick(e: MouseEvent) {
+function onHidePanelClick(el: HTMLElement, e: MouseEvent) {
   // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
-  const el = e.currentTarget as HTMLElement;
   e.preventDefault();
   let sel = el.getAttribute('data-panel');
   if (sel) {
@@ -104,15 +102,14 @@ function onHidePanelClick(e: MouseEvent) {
   throw new Error('no panel to hide'); // should never happen, otherwise there is a bug in code
 }
 
-function onShowModalClick(e: MouseEvent) {
+function onShowModalClick(el: HTMLElement, e: MouseEvent) {
   // 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.
   // * First, try to query '#target'
   // * Then, try to query '[name=target]'
   // * Then, try to query '.target'
   // * 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.
-  const el = e.currentTarget as HTMLElement;
   e.preventDefault();
   const modalSelector = el.getAttribute('data-modal');
   const elModal = document.querySelector(modalSelector);
@@ -160,7 +157,15 @@ export function initGlobalButtons(): void {
   // 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));
+  // Ideally these "button" events should be handled by registerGlobalEventFunc
+  // Refactoring would involve too many changes, so at the moment, just use the global event listener.
+  addDelegatedEventListener(document, 'click', '.show-panel, .hide-panel, .show-modal', (el, e: MouseEvent) => {
+    if (el.classList.contains('show-panel')) {
+      onShowPanelClick(el, e);
+    } else if (el.classList.contains('hide-panel')) {
+      onHidePanelClick(el, e);
+    } else if (el.classList.contains('show-modal')) {
+      onShowModalClick(el, e);
+    }
+  });
 }
diff --git a/web_src/js/features/copycontent.ts b/web_src/js/features/copycontent.ts
@@ -2,21 +2,19 @@ import {clippie} from 'clippie';
 import {showTemporaryTooltip} from '../modules/tippy.ts';
 import {convertImage} from '../utils.ts';
 import {GET} from '../modules/fetch.ts';
+import {registerGlobalEventFunc} from '../modules/observer.ts';
 
 const {i18n} = window.config;
 
 export function initCopyContent() {
-  const btn = document.querySelector('#copy-content');
-  if (!btn || btn.classList.contains('disabled')) return;
-
-  btn.addEventListener('click', async () => {
-    if (btn.classList.contains('is-loading')) return;
+  registerGlobalEventFunc('click', 'onCopyContentButtonClick', async (btn: HTMLInputElement) => {
+    if (btn.classList.contains('disabled') || btn.classList.contains('is-loading')) return;
     let content;
     let isRasterImage = false;
     const link = btn.getAttribute('data-link');
 
     // when data-link is present, we perform a fetch. this is either because
-    // the text to copy is not in the DOM or it is an image which should be
+    // the text to copy is not in the DOM, or it is an image which should be
     // fetched to copy in full resolution
     if (link) {
       btn.classList.add('is-loading', 'loading-icon-2px');
@@ -40,7 +38,7 @@ export function initCopyContent() {
       content = Array.from(lineEls, (el) => el.textContent).join('');
     }
 
-    // try copy original first, if that fails and it's an image, convert it to png
+    // try copy original first, if that fails, and it's an image, convert it to png
     const success = await clippie(content);
     if (success) {
       showTemporaryTooltip(btn, i18n.copy_success);
diff --git a/web_src/js/features/repo-commit.ts b/web_src/js/features/repo-commit.ts
@@ -1,15 +1,14 @@
 import {createTippy} from '../modules/tippy.ts';
 import {toggleElem} from '../utils/dom.ts';
+import {registerGlobalEventFunc} from '../modules/observer.ts';
 
 export function initRepoEllipsisButton() {
-  for (const button of document.querySelectorAll<HTMLButtonElement>('.js-toggle-commit-body')) {
-    button.addEventListener('click', function (e) {
-      e.preventDefault();
-      const expanded = this.getAttribute('aria-expanded') === 'true';
-      toggleElem(this.parentElement.querySelector('.commit-body'));
-      this.setAttribute('aria-expanded', String(!expanded));
-    });
-  }
+  registerGlobalEventFunc('click', 'onRepoEllipsisButtonClick', async (el: HTMLInputElement, e: Event) => {
+    e.preventDefault();
+    const expanded = el.getAttribute('aria-expanded') === 'true';
+    toggleElem(el.parentElement.querySelector('.commit-body'));
+    el.setAttribute('aria-expanded', String(!expanded));
+  });
 }
 
 export function initCommitStatuses() {
diff --git a/web_src/js/features/repo-editor.ts b/web_src/js/features/repo-editor.ts
@@ -1,7 +1,6 @@
 import {htmlEscape} from 'escape-goat';
 import {createCodeEditor} from './codeeditor.ts';
 import {hideElem, queryElems, showElem, createElementFromHTML} from '../utils/dom.ts';
-import {initMarkupContent} from '../markup/content.ts';
 import {attachRefIssueContextPopup} from './contextpopup.ts';
 import {POST} from '../modules/fetch.ts';
 import {initDropzone} from './dropzone.ts';
@@ -199,7 +198,6 @@ export function initRepoEditor() {
 }
 
 export function renderPreviewPanelContent(previewPanel: Element, content: string) {
-  previewPanel.innerHTML = content;
-  initMarkupContent();
+  previewPanel.innerHTML = `<div class="render-content markup">${content}</div>`;
   attachRefIssueContextPopup(previewPanel.querySelectorAll('p .ref-issue'));
 }
diff --git a/web_src/js/features/repo-issue-edit.ts b/web_src/js/features/repo-issue-edit.ts
@@ -4,7 +4,6 @@ import {POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {hideElem, querySingleVisibleElem, showElem, type DOMEvent} from '../utils/dom.ts';
 import {attachRefIssueContextPopup} from './contextpopup.ts';
-import {initCommentContent, initMarkupContent} from '../markup/content.ts';
 import {triggerUploadStateChanged} from './comp/EditorUpload.ts';
 import {convertHtmlToMarkdown} from '../markup/html2markdown.ts';
 import {applyAreYouSure, reinitializeAreYouSure} from '../vendor/jquery.are-you-sure.ts';
@@ -74,8 +73,6 @@ async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
         content.querySelector('.dropzone-attachments').outerHTML = data.attachments;
       }
       comboMarkdownEditor.dropzoneSubmitReload();
-      initMarkupContent();
-      initCommentContent();
     } catch (error) {
       showErrorToast(`Failed to save the content: ${error}`);
       console.error(error);
diff --git a/web_src/js/features/repo-wiki.ts b/web_src/js/features/repo-wiki.ts
diff --git a/web_src/js/index.ts b/web_src/js/index.ts
diff --git a/web_src/js/markup/asciicast.ts b/web_src/js/markup/asciicast.ts
diff --git a/web_src/js/markup/codecopy.ts b/web_src/js/markup/codecopy.ts
diff --git a/web_src/js/markup/content.ts b/web_src/js/markup/content.ts
diff --git a/web_src/js/markup/math.ts b/web_src/js/markup/math.ts
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
diff --git a/web_src/js/markup/tasklist.ts b/web_src/js/markup/tasklist.ts
diff --git a/web_src/js/modules/observer.ts b/web_src/js/modules/observer.ts
diff --git a/web_src/js/render/pdf.ts b/web_src/js/render/pdf.ts
