From d4a99e53c8607eabb65f3f05ff570fb695018e11 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Fri, 10 Jan 2025 14:05:34 +0000 Subject: [PATCH] fix --- web_src/js/features/common-button.ts | 12 ++++--- web_src/js/features/common-page.ts | 7 +++- web_src/js/features/repo-commit.ts | 6 +++- web_src/js/features/repo-legacy.ts | 14 ++++---- .../features/repo-view-file-tree-sidebar.ts | 32 +++++++++---------- web_src/js/render/pdf.ts | 6 +++- 6 files changed, 46 insertions(+), 31 deletions(-) diff --git a/web_src/js/features/common-button.ts b/web_src/js/features/common-button.ts index 3162557b9b..8e5b918f4c 100644 --- a/web_src/js/features/common-button.ts +++ b/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(document, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick)); - queryElems(document, '.show-modal', (el) => el.addEventListener('click', onShowModalClick)); + queryElems(target, '.show-panel', (el) => el.addEventListener('click', onShowPanelClick)); + queryElems(target, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick)); + queryElems(target, '.show-modal', (el) => el.addEventListener('click', onShowModalClick)); } diff --git a/web_src/js/features/common-page.ts b/web_src/js/features/common-page.ts index 56c5915b6d..058702785d 100644 --- a/web_src/js/features/common-page.ts +++ b/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'}); diff --git a/web_src/js/features/repo-commit.ts b/web_src/js/features/repo-commit.ts index 56493443d9..3d19905934 100644 --- a/web_src/js/features/repo-commit.ts +++ b/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'; diff --git a/web_src/js/features/repo-legacy.ts b/web_src/js/features/repo-legacy.ts index 33f02be865..cf51585c57 100644 --- a/web_src/js/features/repo-legacy.ts +++ b/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 diff --git a/web_src/js/features/repo-view-file-tree-sidebar.ts b/web_src/js/features/repo-view-file-tree-sidebar.ts index 9f475d4e0c..6f2bdde125 100644 --- a/web_src/js/features/repo-view-file-tree-sidebar.ts +++ b/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 {initGlobalDropdown} from './common-page.ts'; -import {initRepoEllipsisButton} from './repo-commit.ts'; -import {initPdfViewer} from '../render/pdf.ts'; -import {initGlobalButtons} from './common-button.ts'; +import {initTargetRepoBranchTagSelector} from './repo-legacy.ts'; +import {initTargetDropdown} from './common-page.ts'; +import {initTargetRepoEllipsisButton} from './repo-commit.ts'; +import {initTargetPdfViewer} from '../render/pdf.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(); - reloadContentScript(); + const contentEl = document.querySelector('.repo-home-filelist'); + contentEl.innerHTML = await response.text(); + reloadContentScript(contentEl); } -function reloadContentScript() { - document.querySelector('.repo-home-filelist .show-tree-sidebar-button').addEventListener('click', () => { +function reloadContentScript(contentEl: Element) { + 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'); - if (refSelectorEl) { - createApp(RepoBranchTagSelector, {elRoot: refSelectorEl}).mount(refSelectorEl); - } - initGlobalDropdown(); - initRepoEllipsisButton(); - initPdfViewer(); - initGlobalButtons(); + initTargetButtons(contentEl); + initTargetDropdown(contentEl); + initTargetPdfViewer(contentEl); + initTargetRepoBranchTagSelector(contentEl); + initTargetRepoEllipsisButton(contentEl); } export async function initViewFileTreeSidebar() { diff --git a/web_src/js/render/pdf.ts b/web_src/js/render/pdf.ts index f31f161e6e..5bed6f7bab 100644 --- a/web_src/js/render/pdf.ts +++ b/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');