fix

web_src/js/features/common-button.ts

@@ -155,12 +155,16 @@ function onShowModalClick(e) {
 }
 
 export function initGlobalButtons(): void {
+  initTargetButtons(document as ParentNode);
+}
+
+export function initTargetButtons(target: ParentNode): 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());
+  addDelegatedEventListener(target, 'click', 'form button.ui.cancel.button', (_ /* el */, e) => e.preventDefault());
 
-  queryElems(document, '.show-panel', (el) => el.addEventListener('click', onShowPanelClick));
+  queryElems(target, '.show-panel', (el) => el.addEventListener('click', onShowPanelClick));
-  queryElems(document, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick));
+  queryElems(target, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick));
-  queryElems(document, '.show-modal', (el) => el.addEventListener('click', onShowModalClick));
+  queryElems(target, '.show-modal', (el) => el.addEventListener('click', onShowModalClick));
 }

web_src/js/features/common-page.ts

@@ -28,8 +28,13 @@ export function initFootLanguageMenu() {
 }
 
 export function initGlobalDropdown() {
+  initTargetDropdown(document.body);
+}
+
+export function initTargetDropdown(target: Element) {
   // Semantic UI modules.
-  const $uiDropdowns = fomanticQuery('.ui.dropdown');
+  const $target = fomanticQuery(target);
+  const $uiDropdowns = $target.find('.ui.dropdown');
 
   // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code.
   $uiDropdowns.filter(':not(.custom)').dropdown({hideDividers: 'empty'});

web_src/js/features/repo-commit.ts

@@ -2,7 +2,11 @@ import {createTippy} from '../modules/tippy.ts';
 import {toggleElem} from '../utils/dom.ts';
 
 export function initRepoEllipsisButton() {
-  for (const button of document.querySelectorAll('.js-toggle-commit-body')) {
+  initTargetRepoEllipsisButton(document);
+}
+
+export function initTargetRepoEllipsisButton(target: ParentNode) {
+  for (const button of target.querySelectorAll('.js-toggle-commit-body')) {
     button.addEventListener('click', function (e) {
       e.preventDefault();
       const expanded = this.getAttribute('aria-expanded') === 'true';

web_src/js/features/repo-legacy.ts

@@ -21,12 +21,6 @@ import {initRepoNew} from './repo-new.ts';
 import {createApp} from 'vue';
 import RepoBranchTagSelector from '../components/RepoBranchTagSelector.vue';
 
-function initRepoBranchTagSelector(selector: string) {
-  for (const elRoot of document.querySelectorAll(selector)) {
-    createApp(RepoBranchTagSelector, {elRoot}).mount(elRoot);
-  }
-}
-
 export function initBranchSelectorTabs() {
   const elSelectBranches = document.querySelectorAll('.ui.dropdown.select-branch');
   for (const elSelectBranch of elSelectBranches) {
@@ -39,11 +33,17 @@ export function initBranchSelectorTabs() {
   }
 }
 
+export function initTargetRepoBranchTagSelector(target: ParentNode, selector: string = '.js-branch-tag-selector') {
+  for (const elRoot of target.querySelectorAll(selector)) {
+    createApp(RepoBranchTagSelector, {elRoot}).mount(elRoot);
+  }
+}
+
 export function initRepository() {
   const pageContent = document.querySelector('.page-content.repository');
   if (!pageContent) return;
 
-  initRepoBranchTagSelector('.js-branch-tag-selector');
+  initTargetRepoBranchTagSelector(document);
   initRepoCommentFormAndSidebar();
 
   // Labels

web_src/js/features/repo-view-file-tree-sidebar.ts

@@ -2,11 +2,11 @@ import {createApp, ref} from 'vue';
 import {toggleElem} from '../utils/dom.ts';
 import {GET, PUT} from '../modules/fetch.ts';
 import ViewFileTree from '../components/ViewFileTree.vue';
-import RepoBranchTagSelector from '../components/RepoBranchTagSelector.vue';
+import {initTargetRepoBranchTagSelector} from './repo-legacy.ts';
-import {initGlobalDropdown} from './common-page.ts';
+import {initTargetDropdown} from './common-page.ts';
-import {initRepoEllipsisButton} from './repo-commit.ts';
+import {initTargetRepoEllipsisButton} from './repo-commit.ts';
-import {initPdfViewer} from '../render/pdf.ts';
+import {initTargetPdfViewer} from '../render/pdf.ts';
-import {initGlobalButtons} from './common-button.ts';
+import {initTargetButtons} from './common-button.ts';
 
 async function toggleSidebar(visibility, isSigned) {
   const sidebarEl = document.querySelector('.repo-view-file-tree-sidebar');
@@ -48,22 +48,20 @@ async function loadChildren(item, recursive?: boolean) {
 async function loadContent() {
   // load content by path (content based on home_content.tmpl)
   const response = await GET(`${window.location.href}?only_content=true`);
-  document.querySelector('.repo-home-filelist').innerHTML = await response.text();
+  const contentEl = document.querySelector('.repo-home-filelist');
-  reloadContentScript();
+  contentEl.innerHTML = await response.text();
+  reloadContentScript(contentEl);
 }
 
-function reloadContentScript() {
+function reloadContentScript(contentEl: Element) {
-  document.querySelector('.repo-home-filelist .show-tree-sidebar-button').addEventListener('click', () => {
+  contentEl.querySelector('.show-tree-sidebar-button').addEventListener('click', () => {
     toggleSidebar(true, document.querySelector('.repo-view-file-tree-sidebar').hasAttribute('data-is-signed'));
   });
-  const refSelectorEl = document.querySelector('.repo-home-filelist .js-branch-tag-selector');
+  initTargetButtons(contentEl);
-  if (refSelectorEl) {
+  initTargetDropdown(contentEl);
-    createApp(RepoBranchTagSelector, {elRoot: refSelectorEl}).mount(refSelectorEl);
+  initTargetPdfViewer(contentEl);
-  }
+  initTargetRepoBranchTagSelector(contentEl);
-  initGlobalDropdown();
+  initTargetRepoEllipsisButton(contentEl);
-  initRepoEllipsisButton();
-  initPdfViewer();
-  initGlobalButtons();
 }
 
 export async function initViewFileTreeSidebar() {

web_src/js/render/pdf.ts

@@ -1,7 +1,11 @@
 import {htmlEscape} from 'escape-goat';
 
 export async function initPdfViewer() {
-  const els = document.querySelectorAll('.pdf-content');
+  initTargetPdfViewer(document);
+}
+
+export async function initTargetPdfViewer(target: ParentNode) {
+  const els = target.querySelectorAll('.pdf-content');
   if (!els.length) return;
 
   const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');