fix

wxiaoguang · wxiaoguang · commit 72f37fc3336f · 2025-02-28T20:40:56.000+08:00
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
@@ -1,6 +1,6 @@
 {{$showFileTree := (and (not .DiffNotAvailable) (gt .Diff.NumFiles 1))}}
 <div>
-	<div class="diff-detail-box diff-box">
+	<div class="diff-detail-box">
 		<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-ml-0.5">
 			{{if $showFileTree}}
 				<button class="diff-toggle-file-tree-button not-mobile btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
@@ -80,7 +80,7 @@
 					{{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}}
 					{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
 					{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.Repository.IsArchived) $.IsShowingAllCommits}}
-					<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} tw-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
+					<div class="diff-file-box file-content {{TabSizeClass $.Editorconfig $file.Name}} tw-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
 						<h4 class="diff-file-header sticky-2nd-row ui top attached header">
 							<div class="diff-file-name tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-flex-wrap">
 								<button class="fold-file btn interact-bg tw-p-1{{if not $isExpandable}} tw-invisible{{end}}">
@@ -209,7 +209,7 @@
 				{{end}}
 
 				{{if .Diff.IsIncomplete}}
-					<div class="diff-file-box diff-box file-content tw-mt-2" id="diff-incomplete">
+					<div class="diff-file-box file-content tw-mt-2" id="diff-incomplete">
 						<h4 class="ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between">
 							{{ctx.Locale.Tr "repo.diff.too_many_files"}}
 							<a class="ui basic tiny button" id="diff-show-more-files" data-href="?skip-to={{.Diff.End}}&file-only=true">{{ctx.Locale.Tr "repo.diff.show_more"}}</a>
diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
@@ -6,7 +6,7 @@
 			<h2 class="ui header dividing">
 				{{ctx.Locale.Tr "repo.commit_graph"}}
 				<div class="ui icon buttons tiny color-buttons">
-					<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
+					<div class="ui multiple selection search dropdown custom" id="flow-select-refs-dropdown">
 						<input type="hidden" name="flow">
 						<div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div>
 						<div class="menu">
diff --git a/templates/repo/home_sidebar_top.tmpl b/templates/repo/home_sidebar_top.tmpl
@@ -29,7 +29,7 @@
 						{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
 							<button id="manage_topic" class="btn interact-fg tw-mb-2 tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
 							<div class="ui form tw-hidden tw-my-2" id="topic_edit">
-								<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
+								<div class="ui fluid multiple search selection dropdown custom tw-flex-wrap tw-flex-1">
 									<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
 									{{range .Topics}}
 										{{/* keep the same layout as Fomantic UI generated labels */}}
diff --git a/templates/repo/issue/sidebar/issue_dependencies.tmpl b/templates/repo/issue/sidebar/issue_dependencies.tmpl
@@ -106,7 +106,7 @@
 				<form method="post" action="{{.Issue.Link}}/dependency/add" id="addDependencyForm">
 					{{$.CsrfTokenHtml}}
 					<div class="ui fluid action input">
-						<div class="ui search selection dropdown" id="new-dependency-drop-list" data-issue-id="{{.Issue.ID}}">
+						<div class="ui search selection dropdown custom" id="new-dependency-drop-list" data-issue-id="{{.Issue.ID}}">
 							<input name="newDependency" type="hidden">
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<input type="text" class="search">
diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl
@@ -3,7 +3,7 @@
 	<a class="muted">{{svg "octicon-smiley"}}</a>
 	<div class="menu">
 		{{range $value := AllowedReactions}}
-		<a class="item emoji comment-reaction-button" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
+		<a class="item emoji" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}" data-global-click="onCommentReactionButtonClick">{{ReactionToEmoji $value}}</a>
 		{{end}}
 	</div>
 </div>
diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl
@@ -40,7 +40,7 @@
 		{{if $diff}}
 			{{$file := (index $diff.Files 0)}}
 			<div id="code-preview-{{$comment.ID}}" class="ui table segment{{if $resolved}} tw-hidden{{end}}">
-				<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}">
+				<div class="diff-file-box file-content {{TabSizeClass $.Editorconfig $file.Name}}">
 					<div class="file-body file-code code-view code-diff code-diff-unified unicode-escaped">
 						<table>
 							<tbody>
diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl
@@ -1,9 +1,9 @@
 <div class="bottom-reactions" data-action-url="{{$.ActionURL}}">
 {{range $key, $value := .Reactions}}
 	{{$hasReacted := $value.HasUser ctx.RootData.SignedUserID}}
-	<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not ctx.RootData.IsSigned}} disabled{{end}} comment-reaction-button"
-		data-tooltip-content
-		title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
+	<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not ctx.RootData.IsSigned}} disabled{{end}}"
+		data-global-click="onCommentReactionButtonClick"
+		data-tooltip-content title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
 		aria-label="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
 		data-tooltip-placement="bottom-start"
 		data-reaction-content="{{$key}}" data-has-reacted="{{$hasReacted}}">
diff --git a/templates/repo/issue/view_content/reference_issue_dialog.tmpl b/templates/repo/issue/view_content/reference_issue_dialog.tmpl
@@ -7,7 +7,7 @@
 			{{.CsrfTokenHtml}}
 			<div class="field">
 				<label><strong>{{ctx.Locale.Tr "repository"}}</strong></label>
-				<div class="ui search selection dropdown issue_reference_repository_search ellipsis-items-nowrap">
+				<div class="ui search selection dropdown issue_reference_repository_search custom ellipsis-items-nowrap">
 					<div class="default text gt-ellipsis">{{.Repository.FullName}}</div>
 					<div class="menu"></div>
 				</div>
diff --git a/templates/repo/issue/view_content/update_branch_by_merge.tmpl b/templates/repo/issue/view_content/update_branch_by_merge.tmpl
@@ -14,7 +14,7 @@
 								{{ctx.Locale.Tr "repo.pulls.update_branch"}}
 							</span>
 						</button>
-						<div class="ui dropdown icon button">
+						<div class="ui dropdown icon button custom">
 							{{svg "octicon-triangle-down"}}
 							<div class="menu">
 								<a class="item active selected" data-do="{{$.Link}}/update">{{ctx.Locale.Tr "repo.pulls.update_branch"}}</a>
diff --git a/templates/shared/search/code/results.tmpl b/templates/shared/search/code/results.tmpl
@@ -11,7 +11,7 @@
 <div class="repository search">
 	{{range $result := .SearchResults}}
 		{{$repo := or $.Repo (index $.RepoMaps .RepoID)}}
-		<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
+		<div class="diff-file-box file-content non-diff-file-content repo-search-result">
 			<h4 class="ui top attached header tw-font-normal tw-flex tw-flex-wrap">
 				{{if not $.Repo}}
 					<span class="file tw-flex-1">
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -1085,10 +1085,6 @@ td .commit-summary {
   height: 30px;
 }
 
-.repository .diff-box .resolved-placeholder .button {
-  padding: 8px 12px;
-}
-
 .repository .diff-file-box .header {
   background-color: var(--color-box-header);
 }
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
@@ -365,7 +365,7 @@ export default defineComponent({
         <div class="ui small fluid action left icon input">
           <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
           <i class="icon loading-icon-3px" :class="{'is-loading': isLoading}"><svg-icon name="octicon-search" :size="16"/></i>
-          <div class="ui dropdown icon button" :title="textFilter">
+          <div class="ui dropdown icon button custom" :title="textFilter">
             <svg-icon name="octicon-filter" :size="16"/>
             <div class="menu">
               <a class="item" @click="toggleArchivedFilter()">
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
@@ -353,7 +353,7 @@ export default defineComponent({
       </div>
       <div>
         <!-- Contribution type -->
-        <div class="ui dropdown jump" id="repo-contributors">
+        <div class="ui dropdown custom" id="repo-contributors">
           <div class="ui basic compact button">
             <span class="not-mobile">{{ locale.filterLabel }}</span> <strong>{{ locale.contributionType[type] }}</strong>
             <svg-icon name="octicon-triangle-down" :size="14"/>
diff --git a/web_src/js/features/common-page.ts b/web_src/js/features/common-page.ts
@@ -2,6 +2,7 @@ import {GET} from '../modules/fetch.ts';
 import {showGlobalErrorMessage} from '../bootstrap.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {queryElems} from '../utils/dom.ts';
+import {observeAddedElement} from '../modules/observer.ts';
 
 const {appUrl} = window.config;
 
@@ -28,47 +29,48 @@ export function initFootLanguageMenu() {
 }
 
 export function initGlobalDropdown() {
-  // Semantic UI modules.
-  const $uiDropdowns = fomanticQuery('.ui.dropdown');
-
   // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code.
-  $uiDropdowns.filter(':not(.custom)').dropdown({hideDividers: 'empty'});
+  observeAddedElement('.ui.dropdown:not(.custom)', (el) => {
+    const $dropdown = fomanticQuery(el);
+    $dropdown.dropdown({hideDividers: 'empty'});
+    if (el.classList.contains('jump')) {
+      // The "jump" means this dropdown is mainly used for "menu" purpose,
+      // clicking an item will jump to somewhere else or trigger an action/function.
+      // When a dropdown is used for non-refresh actions with tippy,
+      // it must have this "jump" class to hide the tippy when dropdown is closed.
+      $dropdown.dropdown('setting', {
+        action: 'hide',
+        onShow() {
+          // hide associated tooltip while dropdown is open
+          this._tippy?.hide();
+          this._tippy?.disable();
+        },
+        onHide() {
+          this._tippy?.enable();
+          // eslint-disable-next-line unicorn/no-this-assignment
+          const elDropdown = this;
 
-  // The "jump" means this dropdown is mainly used for "menu" purpose,
-  // clicking an item will jump to somewhere else or trigger an action/function.
-  // When a dropdown is used for non-refresh actions with tippy,
-  // it must have this "jump" class to hide the tippy when dropdown is closed.
-  $uiDropdowns.filter('.jump').dropdown('setting', {
-    action: 'hide',
-    onShow() {
-      // hide associated tooltip while dropdown is open
-      this._tippy?.hide();
-      this._tippy?.disable();
-    },
-    onHide() {
-      this._tippy?.enable();
-      // eslint-disable-next-line unicorn/no-this-assignment
-      const elDropdown = this;
+          // hide all tippy elements of items after a while. eg: use Enter to click "Copy Link" in the Issue Context Menu
+          setTimeout(() => {
+            const $dropdown = fomanticQuery(elDropdown);
+            if ($dropdown.dropdown('is hidden')) {
+              queryElems(elDropdown, '.menu > .item', (el) => el._tippy?.hide());
+            }
+          }, 2000);
+        },
+      });
+    }
 
-      // hide all tippy elements of items after a while. eg: use Enter to click "Copy Link" in the Issue Context Menu
-      setTimeout(() => {
-        const $dropdown = fomanticQuery(elDropdown);
-        if ($dropdown.dropdown('is hidden')) {
-          queryElems(elDropdown, '.menu > .item', (el) => el._tippy?.hide());
-        }
-      }, 2000);
-    },
+    // Special popup-directions, prevent Fomantic from guessing the popup direction.
+    // With default "direction: auto", if the viewport height is small, Fomantic would show the popup upward,
+    //   if the dropdown is at the beginning of the page, then the top part would be clipped by the window view.
+    //   eg: Issue List "Sort" dropdown
+    // But we can not set "direction: downward" for all dropdowns, because there is a bug in dropdown menu positioning when calculating the "left" position,
+    //   which would make some dropdown popups slightly shift out of the right viewport edge in some cases.
+    //   eg: the "Create New Repo" menu on the navbar.
+    if (el.classList.contains('upward')) $dropdown.dropdown('setting', 'direction', 'upward');
+    if (el.classList.contains('downward')) $dropdown.dropdown('setting', 'direction', 'downward');
   });
-
-  // Special popup-directions, prevent Fomantic from guessing the popup direction.
-  // With default "direction: auto", if the viewport height is small, Fomantic would show the popup upward,
-  //   if the dropdown is at the beginning of the page, then the top part would be clipped by the window view.
-  //   eg: Issue List "Sort" dropdown
-  // But we can not set "direction: downward" for all dropdowns, because there is a bug in dropdown menu positioning when calculating the "left" position,
-  //   which would make some dropdown popups slightly shift out of the right viewport edge in some cases.
-  //   eg: the "Create New Repo" menu on the navbar.
-  $uiDropdowns.filter('.upward').dropdown('setting', 'direction', 'upward');
-  $uiDropdowns.filter('.downward').dropdown('setting', 'direction', 'downward');
 }
 
 export function initGlobalTabularMenu() {
diff --git a/web_src/js/features/comp/ReactionSelector.ts b/web_src/js/features/comp/ReactionSelector.ts
@@ -1,37 +1,31 @@
 import {POST} from '../../modules/fetch.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
 import type {DOMEvent} from '../../utils/dom.ts';
+import {registerGlobalEventFunc} from '../../modules/observer.ts';
 
-export function initCompReactionSelector(parent: ParentNode = document) {
-  for (const container of parent.querySelectorAll<HTMLElement>('.issue-content, .diff-file-body')) {
-    container.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
-      // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
-      const target = e.target.closest('.comment-reaction-button');
-      if (!target) return;
-      e.preventDefault();
+export function initCompReactionSelector() {
+  registerGlobalEventFunc('click', 'onCommentReactionButtonClick', async (target: HTMLElement, e: DOMEvent<MouseEvent>) => {
+    // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
+    e.preventDefault();
 
-      if (target.classList.contains('disabled')) return;
+    if (target.classList.contains('disabled')) return;
 
-      const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
-      const reactionContent = target.getAttribute('data-reaction-content');
+    const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
+    const reactionContent = target.getAttribute('data-reaction-content');
 
-      const commentContainer = target.closest('.comment-container');
+    const commentContainer = target.closest('.comment-container');
 
-      const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
-      const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
-      const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
+    const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
+    const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
+    const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
 
-      const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
-        data: new URLSearchParams({content: reactionContent}),
-      });
-
-      const data = await res.json();
-      bottomReactions?.remove();
-      if (data.html) {
-        commentContainer.insertAdjacentHTML('beforeend', data.html);
-        const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
-        fomanticQuery(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
-      }
+    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+      data: new URLSearchParams({content: reactionContent}),
     });
-  }
+
+    const data = await res.json();
+    bottomReactions?.remove();
+    if (data.html) {
+      commentContainer.insertAdjacentHTML('beforeend', data.html);
+    }
+  });
 }
diff --git a/web_src/js/features/repo-diff.ts b/web_src/js/features/repo-diff.ts
@@ -1,4 +1,3 @@
-import {initCompReactionSelector} from './comp/ReactionSelector.ts';
 import {initRepoIssueContentHistory} from './repo-issue-content.ts';
 import {initDiffFileTree} from './repo-diff-filetree.ts';
 import {initDiffCommitSelect} from './repo-diff-commitselect.ts';
@@ -8,17 +7,16 @@ import {initImageDiff} from './imagediff.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {submitEventSubmitter, queryElemSiblings, hideElem, showElem, animateOnce, addDelegatedEventListener, createElementFromHTML, queryElems} from '../utils/dom.ts';
 import {POST, GET} from '../modules/fetch.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {createTippy} from '../modules/tippy.ts';
 import {invertFileFolding} from './file-fold.ts';
 import {parseDom} from '../utils.ts';
+import {observeAddedElement} from '../modules/observer.ts';
 
 const {i18n} = window.config;
 
-function initRepoDiffFileViewToggle() {
+function initRepoDiffFileBox(el: HTMLElement) {
   // switch between "rendered" and "source", for image and CSV files
-  // FIXME: this event listener is not correctly added to "load more files"
-  queryElems(document, '.file-view-toggle', (btn) => btn.addEventListener('click', () => {
+  queryElems(el, '.file-view-toggle', (btn) => btn.addEventListener('click', () => {
     queryElemSiblings(btn, '.file-view-toggle', (el) => el.classList.remove('active'));
     btn.classList.add('active');
 
@@ -75,7 +73,6 @@ function initRepoDiffConversationForm() {
           el.classList.add('tw-invisible');
         }
       }
-      fomanticQuery(newConversationHolder.querySelectorAll('.ui.dropdown')).dropdown();
 
       // the default behavior is to add a pending review, so if no submitter, it also means "pending_review"
       if (!submitter || submitter?.matches('button[name="pending_review"]')) {
@@ -110,8 +107,6 @@ function initRepoDiffConversationForm() {
       if (elConversationHolder) {
         const elNewConversation = createElementFromHTML(data);
         elConversationHolder.replaceWith(elNewConversation);
-        queryElems(elConversationHolder, '.ui.dropdown:not(.custom)', (el) => fomanticQuery(el).dropdown());
-        initCompReactionSelector(elNewConversation);
       } else {
         window.location.reload();
       }
@@ -149,7 +144,7 @@ function initDiffHeaderPopup() {
 
 // Will be called when the show more (files) button has been pressed
 function onShowMoreFiles() {
-  // FIXME: here the init calls are incomplete: at least it misses dropdown & initCompReactionSelector & initRepoDiffFileViewToggle
+  // TODO: replace these calls with the "observer.ts" methods
   initRepoIssueContentHistory();
   initViewedCheckboxListenerFor();
   countAndUpdateViewedFiles();
@@ -255,7 +250,9 @@ export function initRepoDiffView() {
   initDiffCommitSelect();
   initRepoDiffShowMore();
   initDiffHeaderPopup();
-  initRepoDiffFileViewToggle();
+
+  observeAddedElement('#diff-file-boxes .diff-file-box', initRepoDiffFileBox);
+
   initViewedCheckboxListenerFor();
   initExpandAndCollapseFilesButton();
   initRepoDiffHashChangeListener();
diff --git a/web_src/js/features/repo-graph.ts b/web_src/js/features/repo-graph.ts
diff --git a/web_src/js/features/repo-issue-content.ts b/web_src/js/features/repo-issue-content.ts
diff --git a/web_src/js/index.ts b/web_src/js/index.ts
diff --git a/web_src/js/modules/dirauto.ts b/web_src/js/modules/dirauto.ts
diff --git a/web_src/js/modules/observer.ts b/web_src/js/modules/observer.ts
