diff options
Diffstat (limited to 'web_src/js')
157 files changed, 15723 insertions, 0 deletions
diff --git a/web_src/js/bootstrap.js b/web_src/js/bootstrap.js new file mode 100644 index 0000000..c707979 --- /dev/null +++ b/web_src/js/bootstrap.js @@ -0,0 +1,109 @@ +// DO NOT IMPORT window.config HERE! +// to make sure the error handler always works, we should never import `window.config`, because +// some user's custom template breaks it. + +// This sets up the URL prefix used in webpack's chunk loading. +// This file must be imported before any lazy-loading is being attempted. +__webpack_public_path__ = `${window.config?.assetUrlPrefix ?? '/assets'}/`; + +// Ignore external and some known internal errors that we are unable to currently fix. +function shouldIgnoreError(err) { + const assetBaseUrl = String(new URL(__webpack_public_path__, window.location.origin)); + + if (!(err instanceof Error)) return false; + // If the error stack trace does not include the base URL of our script assets, it likely came + // from a browser extension or inline script. Ignore these errors. + if (!err.stack?.includes(assetBaseUrl)) return true; + // Ignore some known internal errors that we are unable to currently fix (eg via Monaco). + const ignorePatterns = [ + '/assets/js/monaco.', // https://codeberg.org/forgejo/forgejo/issues/3638 , https://github.com/go-gitea/gitea/issues/30861 , https://github.com/microsoft/monaco-editor/issues/4496 + ]; + for (const pattern of ignorePatterns) { + if (err.stack?.includes(pattern)) return true; + } + return false; +} + +const filteredErrors = new Set([ + 'getModifierState is not a function', // https://github.com/microsoft/monaco-editor/issues/4325 +]); + +export function showGlobalErrorMessage(msg) { + const pageContent = document.querySelector('.page-content'); + if (!pageContent) return; + + for (const filteredError of filteredErrors) { + if (msg.includes(filteredError)) return; + } + + // compact the message to a data attribute to avoid too many duplicated messages + const msgCompact = msg.replace(/\W/g, '').trim(); + let msgDiv = pageContent.querySelector(`.js-global-error[data-global-error-msg-compact="${msgCompact}"]`); + if (!msgDiv) { + const el = document.createElement('div'); + el.innerHTML = `<div class="ui container negative message center aligned js-global-error tw-mt-[15px] tw-whitespace-pre-line"></div>`; + msgDiv = el.childNodes[0]; + } + // merge duplicated messages into "the message (count)" format + const msgCount = Number(msgDiv.getAttribute(`data-global-error-msg-count`)) + 1; + msgDiv.setAttribute(`data-global-error-msg-compact`, msgCompact); + msgDiv.setAttribute(`data-global-error-msg-count`, msgCount.toString()); + msgDiv.textContent = msg + (msgCount > 1 ? ` (${msgCount})` : ''); + pageContent.prepend(msgDiv); +} + +/** + * @param {ErrorEvent|PromiseRejectionEvent} event - Event + * @param {string} event.message - Only present on ErrorEvent + * @param {string} event.error - Only present on ErrorEvent + * @param {string} event.type - Only present on ErrorEvent + * @param {string} event.filename - Only present on ErrorEvent + * @param {number} event.lineno - Only present on ErrorEvent + * @param {number} event.colno - Only present on ErrorEvent + * @param {string} event.reason - Only present on PromiseRejectionEvent + * @param {number} event.promise - Only present on PromiseRejectionEvent + */ +function processWindowErrorEvent({error, reason, message, type, filename, lineno, colno}) { + const err = error ?? reason; + const {runModeIsProd} = window.config ?? {}; + + // `error` and `reason` are not guaranteed to be errors. If the value is falsy, it is likely a + // non-critical event from the browser. We log them but don't show them to users. Examples: + // - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors + // - https://github.com/mozilla-mobile/firefox-ios/issues/10817 + // - https://github.com/go-gitea/gitea/issues/20240 + if (!err) { + if (message) console.error(new Error(message)); + if (runModeIsProd) return; + } + + // In production do not display errors that should be ignored. + if (runModeIsProd && shouldIgnoreError(err)) return; + + let msg = err?.message ?? message; + if (lineno) msg += ` (${filename} @ ${lineno}:${colno})`; + const dot = msg.endsWith('.') ? '' : '.'; + const renderedType = type === 'unhandledrejection' ? 'promise rejection' : type; + showGlobalErrorMessage(`JavaScript ${renderedType}: ${msg}${dot} Open browser console to see more details.`); +} + +function initGlobalErrorHandler() { + if (window._globalHandlerErrors?._inited) { + showGlobalErrorMessage(`The global error handler has been initialized, do not initialize it again`); + return; + } + if (!window.config) { + showGlobalErrorMessage(`Gitea JavaScript code couldn't run correctly, please check your custom templates`); + } + // we added an event handler for window error at the very beginning of <script> of page head the + // handler calls `_globalHandlerErrors.push` (array method) to record all errors occur before + // this init then in this init, we can collect all error events and show them. + for (const e of window._globalHandlerErrors || []) { + processWindowErrorEvent(e); + } + // then, change _globalHandlerErrors to an object with push method, to process further error + // events directly + window._globalHandlerErrors = {_inited: true, push: (e) => processWindowErrorEvent(e)}; +} + +initGlobalErrorHandler(); diff --git a/web_src/js/bootstrap.test.js b/web_src/js/bootstrap.test.js new file mode 100644 index 0000000..a6b901b --- /dev/null +++ b/web_src/js/bootstrap.test.js @@ -0,0 +1,12 @@ +import {showGlobalErrorMessage} from './bootstrap.js'; + +test('showGlobalErrorMessage', () => { + document.body.innerHTML = '<div class="page-content"></div>'; + showGlobalErrorMessage('test msg 1'); + showGlobalErrorMessage('test msg 2'); + showGlobalErrorMessage('test msg 1'); // duplicated + + expect(document.body.innerHTML).toContain('>test msg 1 (2)<'); + expect(document.body.innerHTML).toContain('>test msg 2<'); + expect(document.querySelectorAll('.js-global-error').length).toEqual(2); +}); diff --git a/web_src/js/components/.eslintrc.yaml b/web_src/js/components/.eslintrc.yaml new file mode 100644 index 0000000..0d23344 --- /dev/null +++ b/web_src/js/components/.eslintrc.yaml @@ -0,0 +1,21 @@ +plugins: + - eslint-plugin-vue + - eslint-plugin-vue-scoped-css + +extends: + - ../../../.eslintrc.yaml + - plugin:vue/vue3-recommended + - plugin:vue-scoped-css/vue3-recommended + +parserOptions: + sourceType: module + ecmaVersion: latest + +env: + browser: true + +rules: + vue/attributes-order: [0] + vue/html-closing-bracket-spacing: [2, {startTag: never, endTag: never, selfClosingTag: never}] + vue/max-attributes-per-line: [0] + vue-scoped-css/enforce-style-type: [0] diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue new file mode 100644 index 0000000..7ada543 --- /dev/null +++ b/web_src/js/components/ActionRunStatus.vue @@ -0,0 +1,39 @@ +<!-- This vue should be kept the same as templates/repo/actions/status.tmpl + Please also update the template file above if this vue is modified. + action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown +--> +<script> +import {SvgIcon} from '../svg.js'; + +export default { + components: {SvgIcon}, + props: { + status: { + type: String, + required: true, + }, + size: { + type: Number, + default: 16, + }, + className: { + type: String, + default: '', + }, + localeStatus: { + type: String, + default: '', + }, + }, +}; +</script> +<template> + <span class="tw-flex tw-items-center" :data-tooltip-content="localeStatus" v-if="status"> + <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/> + <SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/> + <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/> + <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/> + <SvgIcon name="octicon-meter" class="text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/> + <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else-if="['failure', 'cancelled', 'unknown'].includes(status)"/> + </span> +</template> diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue new file mode 100644 index 0000000..be0841e --- /dev/null +++ b/web_src/js/components/ActivityHeatmap.vue @@ -0,0 +1,83 @@ +<script> +import {CalendarHeatmap} from 'vue3-calendar-heatmap'; + +export default { + components: {CalendarHeatmap}, + props: { + values: { + type: Array, + default: () => [], + }, + locale: { + type: Object, + default: () => {}, + }, + }, + data: () => ({ + colorRange: [ + 'var(--color-secondary-alpha-60)', + 'var(--color-secondary-alpha-60)', + 'var(--color-primary-light-4)', + 'var(--color-primary-light-2)', + 'var(--color-primary)', + 'var(--color-primary-dark-2)', + 'var(--color-primary-dark-4)', + ], + endDate: new Date(), + }), + mounted() { + // work around issue with first legend color being rendered twice and legend cut off + const legend = document.querySelector('.vch__external-legend-wrapper'); + legend.setAttribute('viewBox', '12 0 80 10'); + legend.style.marginRight = '-12px'; + }, + methods: { + handleDayClick(e) { + // Reset filter if same date is clicked + const params = new URLSearchParams(document.location.search); + const queryDate = params.get('date'); + // Timezone has to be stripped because toISOString() converts to UTC + const clickedDate = new Date(e.date - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10); + + if (queryDate && queryDate === clickedDate) { + params.delete('date'); + } else { + params.set('date', clickedDate); + } + + params.delete('page'); + + const newSearch = params.toString(); + window.location.search = newSearch.length ? `?${newSearch}` : ''; + }, + }, +}; +</script> +<template> + <div class="total-contributions"> + {{ locale.contributions_in_the_last_12_months }} + </div> + <calendar-heatmap + :locale="locale" + :no-data-text="locale.contributions_zero" + :tooltip-formatter=" + (v) => + locale.contributions_format + .replace( + '{contributions}', + `<b>${v.count} ${ + v.count === 1 + ? locale.contributions_one + : locale.contributions_few + }</b>` + ) + .replace('{month}', locale.months[v.date.getMonth()]) + .replace('{day}', v.date.getDate()) + .replace('{year}', v.date.getFullYear()) + " + :end-date="endDate" + :values="values" + :range-color="colorRange" + @day-click="handleDayClick($event)" + /> +</template> diff --git a/web_src/js/components/ContextPopup.test.js b/web_src/js/components/ContextPopup.test.js new file mode 100644 index 0000000..2726567 --- /dev/null +++ b/web_src/js/components/ContextPopup.test.js @@ -0,0 +1,163 @@ +import {flushPromises, mount} from '@vue/test-utils'; +import ContextPopup from './ContextPopup.vue'; + +async function assertPopup(popupData, expectedIconColor, expectedIcon) { + const date = new Date('2024-07-13T22:00:00Z'); + + vi.spyOn(global, 'fetch').mockResolvedValue({ + json: vi.fn().mockResolvedValue({ + ok: true, + created_at: date.toISOString(), + repository: {full_name: 'user2/repo1'}, + ...popupData, + }), + ok: true, + }); + + const popup = mount(ContextPopup); + popup.vm.$el.dispatchEvent(new CustomEvent('ce-load-context-popup', { + detail: {owner: 'user2', repo: 'repo1', index: popupData.number}, + })); + await flushPromises(); + + expect(popup.get('p:nth-of-type(1)').text()).toEqual(`user2/repo1 on ${date.toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'})}`); + expect(popup.get('p:nth-of-type(2)').text()).toEqual(`${popupData.title} #${popupData.number}`); + expect(popup.get('p:nth-of-type(3)').text()).toEqual(popupData.body); + + expect(popup.get('svg').classes()).toContain(expectedIcon); + expect(popup.get('svg').classes()).toContain(expectedIconColor); + + for (const l of popupData.labels) { + expect(popup.findAll('.ui.label').map((x) => x.text())).toContain(l.name); + } +} + +test('renders an open issue popup', async () => { + await assertPopup({ + title: 'Open Issue', + body: 'Open Issue Body', + number: 1, + labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}], + state: 'open', + pull_request: null, + }, 'green', 'octicon-issue-opened'); +}); + +test('renders a closed issue popup', async () => { + await assertPopup({ + title: 'Closed Issue', + body: 'Closed Issue Body', + number: 1, + labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}], + state: 'closed', + pull_request: null, + }, 'red', 'octicon-issue-closed'); +}); + +test('renders an open PR popup', async () => { + await assertPopup({ + title: 'Open PR', + body: 'Open PR Body', + number: 1, + labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}], + state: 'open', + pull_request: {merged: false, draft: false}, + }, 'green', 'octicon-git-pull-request'); +}); + +test('renders an open WIP PR popup', async () => { + await assertPopup({ + title: 'WIP: Open PR', + body: 'WIP Open PR Body', + number: 1, + labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}], + state: 'open', + pull_request: {merged: false, draft: true}, + }, 'grey', 'octicon-git-pull-request-draft'); +}); + +test('renders a closed PR popup', async () => { + await assertPopup({ + title: 'Closed PR', + body: 'Closed PR Body', + number: 1, + labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}], + state: 'closed', + pull_request: {merged: false, draft: false}, + }, 'red', 'octicon-git-pull-request-closed'); +}); + +test('renders a closed WIP PR popup', async () => { + await assertPopup({ + title: 'WIP: Closed PR', + body: 'WIP Closed PR Body', + number: 1, + labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}], + state: 'closed', + pull_request: {merged: false, draft: true}, + }, 'red', 'octicon-git-pull-request-closed'); +}); + +test('renders a merged PR popup', async () => { + await assertPopup({ + title: 'Merged PR', + body: 'Merged PR Body', + number: 1, + labels: [{color: 'd21b1fff', name: 'Bug'}, {color: 'aaff00', name: 'Confirmed'}], + state: 'closed', + pull_request: {merged: true, draft: false}, + }, 'purple', 'octicon-git-merge'); +}); + +test('renders an issue popup with escaped HTML', async () => { + const evil = '<script class="evil">alert("evil message");</script>'; + + vi.spyOn(global, 'fetch').mockResolvedValue({ + json: vi.fn().mockResolvedValue({ + ok: true, + created_at: '2024-07-13T22:00:00Z', + repository: {full_name: evil}, + title: evil, + body: evil, + labels: [{color: '000666', name: evil}], + state: 'open', + pull_request: null, + }), + ok: true, + }); + + const popup = mount(ContextPopup); + popup.vm.$el.dispatchEvent(new CustomEvent('ce-load-context-popup', { + detail: {owner: evil, repo: evil, index: 1}, + })); + await flushPromises(); + + expect(() => popup.get('.evil')).toThrowError(); + expect(popup.get('p:nth-of-type(1)').text()).toContain(evil); + expect(popup.get('p:nth-of-type(2)').text()).toContain(evil); + expect(popup.get('p:nth-of-type(3)').text()).toContain(evil); +}); + +test('renders an issue popup with emojis', async () => { + vi.spyOn(global, 'fetch').mockResolvedValue({ + json: vi.fn().mockResolvedValue({ + ok: true, + created_at: '2024-07-13T22:00:00Z', + repository: {full_name: 'user2/repo1'}, + title: 'Title', + body: 'Body', + labels: [{color: '000666', name: 'Tag :+1:'}], + state: 'open', + pull_request: null, + }), + ok: true, + }); + + const popup = mount(ContextPopup); + popup.vm.$el.dispatchEvent(new CustomEvent('ce-load-context-popup', { + detail: {owner: 'user2', repo: 'repo1', index: 1}, + })); + await flushPromises(); + + expect(popup.get('.ui.label').text()).toEqual('Tag 👍'); +}); diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue new file mode 100644 index 0000000..752a9a1 --- /dev/null +++ b/web_src/js/components/ContextPopup.vue @@ -0,0 +1,130 @@ +<script> +import {SvgIcon} from '../svg.js'; +import {contrastColor} from '../utils/color.js'; +import {GET} from '../modules/fetch.js'; +import {emojiHTML} from '../features/emoji.js'; +import {htmlEscape} from 'escape-goat'; + +const {appSubUrl, i18n} = window.config; + +export default { + components: {SvgIcon}, + data: () => ({ + loading: false, + issue: null, + i18nErrorOccurred: i18n.error_occurred, + i18nErrorMessage: null, + }), + computed: { + createdAt() { + return new Date(this.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'}); + }, + + body() { + const body = this.issue.body.replace(/\n+/g, ' '); + if (body.length > 85) { + return `${body.substring(0, 85)}…`; + } + return body; + }, + + icon() { + if (this.issue.pull_request !== null) { + if (this.issue.pull_request.merged === true) { + return 'octicon-git-merge'; // Merged PR + } + + if (this.issue.state === 'closed') { + return 'octicon-git-pull-request-closed'; // Closed PR + } + + if (this.issue.pull_request.draft === true) { + return 'octicon-git-pull-request-draft'; // WIP PR + } + + return 'octicon-git-pull-request'; // Open PR + } + + if (this.issue.state === 'closed') { + return 'octicon-issue-closed'; // Closed issue + } + + return 'octicon-issue-opened'; // Open issue + }, + + color() { + if (this.issue.pull_request !== null) { + if (this.issue.pull_request.merged === true) { + return 'purple'; // Merged PR + } + + if (this.issue.pull_request.draft === true && this.issue.state === 'open') { + return 'grey'; // WIP PR + } + } + + if (this.issue.state === 'closed') { + return 'red'; // Closed issue + } + + return 'green'; // Open issue + }, + + labels() { + return this.issue.labels.map((label) => ({ + name: htmlEscape(label.name).replaceAll(/:[-+\w]+:/g, (emoji) => { + return emojiHTML(emoji.substring(1, emoji.length - 1)); + }), + color: `#${label.color}`, + textColor: contrastColor(`#${label.color}`), + })); + }, + }, + mounted() { + this.$refs.root.addEventListener('ce-load-context-popup', (e) => { + const data = e.detail; + if (!this.loading && this.issue === null) { + this.load(data); + } + }); + }, + methods: { + async load(data) { + this.loading = true; + this.i18nErrorMessage = null; + + try { + const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); + const respJson = await response.json(); + if (!response.ok) { + this.i18nErrorMessage = respJson.message ?? i18n.network_error; + return; + } + this.issue = respJson; + } catch { + this.i18nErrorMessage = i18n.network_error; + } finally { + this.loading = false; + } + }, + }, +}; +</script> +<template> + <div ref="root"> + <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/> + <div v-if="!loading && issue !== null" id="issue-info-popup"> + <p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p> + <p><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p> + <p>{{ body }}</p> + <div class="labels-list"> + <!-- eslint-disable-next-line vue/no-v-html --> + <div v-for="label in labels" :key="label.name" class="ui label" :style="{ color: label.textColor, backgroundColor: label.color }" v-html="label.name"/> + </div> + </div> + <div v-if="!loading && issue === null"> + <p><small>{{ i18nErrorOccurred }}</small></p> + <p>{{ i18nErrorMessage }}</p> + </div> + </div> +</template> diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue new file mode 100644 index 0000000..e587413 --- /dev/null +++ b/web_src/js/components/DashboardRepoList.vue @@ -0,0 +1,537 @@ +<script> +import {createApp, nextTick} from 'vue'; +import $ from 'jquery'; +import {SvgIcon} from '../svg.js'; +import {GET} from '../modules/fetch.js'; + +const {appSubUrl, assetUrlPrefix, pageData} = window.config; + +// make sure this matches templates/repo/commit_status.tmpl +const commitStatus = { + pending: {name: 'octicon-dot-fill', color: 'yellow'}, + success: {name: 'octicon-check', color: 'green'}, + error: {name: 'gitea-exclamation', color: 'red'}, + failure: {name: 'octicon-x', color: 'red'}, + warning: {name: 'gitea-exclamation', color: 'yellow'}, +}; + +const sfc = { + components: {SvgIcon}, + data() { + const params = new URLSearchParams(window.location.search); + const tab = params.get('repo-search-tab') || 'repos'; + const reposFilter = params.get('repo-search-filter') || 'all'; + const privateFilter = params.get('repo-search-private') || 'both'; + const archivedFilter = params.get('repo-search-archived') || 'unarchived'; + const searchQuery = params.get('repo-search-query') || ''; + const page = Number(params.get('repo-search-page')) || 1; + + return { + tab, + repos: [], + reposTotalCount: 0, + reposFilter, + archivedFilter, + privateFilter, + page, + finalPage: 1, + searchQuery, + isLoading: false, + staticPrefix: assetUrlPrefix, + counts: {}, + repoTypes: { + all: { + searchMode: '', + }, + forks: { + searchMode: 'fork', + }, + mirrors: { + searchMode: 'mirror', + }, + sources: { + searchMode: 'source', + }, + collaborative: { + searchMode: 'collaborative', + }, + }, + textArchivedFilterTitles: {}, + textPrivateFilterTitles: {}, + + organizations: [], + isOrganization: true, + canCreateOrganization: false, + organizationsTotalCount: 0, + organizationId: 0, + + subUrl: appSubUrl, + ...pageData.dashboardRepoList, + activeIndex: -1, // don't select anything at load, first cursor down will select + }; + }, + + computed: { + showMoreReposLink() { + return this.repos.length > 0 && this.repos.length < this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`]; + }, + searchURL() { + return `${this.subUrl}/repo/search?sort=updated&order=desc&uid=${this.uid}&team_id=${this.teamId}&q=${this.searchQuery + }&page=${this.page}&limit=${this.searchLimit}&mode=${this.repoTypes[this.reposFilter].searchMode + }${this.archivedFilter === 'archived' ? '&archived=true' : ''}${this.archivedFilter === 'unarchived' ? '&archived=false' : '' + }${this.privateFilter === 'private' ? '&is_private=true' : ''}${this.privateFilter === 'public' ? '&is_private=false' : '' + }`; + }, + repoTypeCount() { + return this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`]; + }, + checkboxArchivedFilterTitle() { + return this.textArchivedFilterTitles[this.archivedFilter]; + }, + checkboxArchivedFilterProps() { + return {checked: this.archivedFilter === 'archived', indeterminate: this.archivedFilter === 'both'}; + }, + checkboxPrivateFilterTitle() { + return this.textPrivateFilterTitles[this.privateFilter]; + }, + checkboxPrivateFilterProps() { + return {checked: this.privateFilter === 'private', indeterminate: this.privateFilter === 'both'}; + }, + }, + + mounted() { + const el = document.getElementById('dashboard-repo-list'); + this.changeReposFilter(this.reposFilter); + $(el).find('.dropdown').dropdown(); + nextTick(() => { + this.$refs.search.focus(); + }); + + this.textArchivedFilterTitles = { + 'archived': this.textShowOnlyArchived, + 'unarchived': this.textShowOnlyUnarchived, + 'both': this.textShowBothArchivedUnarchived, + }; + + this.textPrivateFilterTitles = { + 'private': this.textShowOnlyPrivate, + 'public': this.textShowOnlyPublic, + 'both': this.textShowBothPrivatePublic, + }; + }, + + methods: { + changeTab(t) { + this.tab = t; + this.updateHistory(); + }, + + changeReposFilter(filter) { + this.reposFilter = filter; + this.repos = []; + this.page = 1; + this.counts[`${filter}:${this.archivedFilter}:${this.privateFilter}`] = 0; + this.searchRepos(); + }, + + updateHistory() { + const params = new URLSearchParams(window.location.search); + + if (this.tab === 'repos') { + params.delete('repo-search-tab'); + } else { + params.set('repo-search-tab', this.tab); + } + + if (this.reposFilter === 'all') { + params.delete('repo-search-filter'); + } else { + params.set('repo-search-filter', this.reposFilter); + } + + if (this.privateFilter === 'both') { + params.delete('repo-search-private'); + } else { + params.set('repo-search-private', this.privateFilter); + } + + if (this.archivedFilter === 'unarchived') { + params.delete('repo-search-archived'); + } else { + params.set('repo-search-archived', this.archivedFilter); + } + + if (this.searchQuery === '') { + params.delete('repo-search-query'); + } else { + params.set('repo-search-query', this.searchQuery); + } + + if (this.page === 1) { + params.delete('repo-search-page'); + } else { + params.set('repo-search-page', `${this.page}`); + } + + const queryString = params.toString(); + if (queryString) { + window.history.replaceState({}, '', `?${queryString}`); + } else { + window.history.replaceState({}, '', window.location.pathname); + } + }, + + toggleArchivedFilter() { + if (this.archivedFilter === 'unarchived') { + this.archivedFilter = 'archived'; + } else if (this.archivedFilter === 'archived') { + this.archivedFilter = 'both'; + } else { // including both + this.archivedFilter = 'unarchived'; + } + this.page = 1; + this.repos = []; + this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0; + this.searchRepos(); + }, + + togglePrivateFilter() { + if (this.privateFilter === 'both') { + this.privateFilter = 'public'; + } else if (this.privateFilter === 'public') { + this.privateFilter = 'private'; + } else { // including private + this.privateFilter = 'both'; + } + this.page = 1; + this.repos = []; + this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0; + this.searchRepos(); + }, + + changePage(page) { + this.page = page; + if (this.page > this.finalPage) { + this.page = this.finalPage; + } + if (this.page < 1) { + this.page = 1; + } + this.repos = []; + this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0; + this.searchRepos(); + }, + + async searchRepos() { + this.isLoading = true; + + const searchedMode = this.repoTypes[this.reposFilter].searchMode; + const searchedURL = this.searchURL; + const searchedQuery = this.searchQuery; + + let response, json; + try { + if (!this.reposTotalCount) { + const totalCountSearchURL = `${this.subUrl}/repo/search?count_only=1&uid=${this.uid}&team_id=${this.teamId}&q=&page=1&mode=`; + response = await GET(totalCountSearchURL); + this.reposTotalCount = response.headers.get('X-Total-Count') ?? '?'; + } + + response = await GET(searchedURL); + json = await response.json(); + } catch { + if (searchedURL === this.searchURL) { + this.isLoading = false; + } + return; + } + + if (searchedURL === this.searchURL) { + this.repos = json.data.map((webSearchRepo) => { + return { + ...webSearchRepo.repository, + latest_commit_status: webSearchRepo.latest_commit_status, + locale_latest_commit_status: webSearchRepo.locale_latest_commit_status, + }; + }); + const count = response.headers.get('X-Total-Count'); + if (searchedQuery === '' && searchedMode === '' && this.archivedFilter === 'both') { + this.reposTotalCount = count; + } + this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = count; + this.finalPage = Math.ceil(count / this.searchLimit); + this.updateHistory(); + this.isLoading = false; + } + }, + + repoIcon(repo) { + if (repo.fork) { + return 'octicon-repo-forked'; + } else if (repo.mirror) { + return 'octicon-mirror'; + } else if (repo.template) { + return `octicon-repo-template`; + } else if (repo.private) { + return 'octicon-lock'; + } else if (repo.internal) { + return 'octicon-repo'; + } + return 'octicon-repo'; + }, + + statusIcon(status) { + return commitStatus[status].name; + }, + + statusColor(status) { + return commitStatus[status].color; + }, + + reposFilterKeyControl(e) { + switch (e.key) { + case 'Enter': + document.querySelector('.repo-owner-name-list li.active a')?.click(); + break; + case 'ArrowUp': + if (this.activeIndex > 0) { + this.activeIndex--; + } else if (this.page > 1) { + this.changePage(this.page - 1); + this.activeIndex = this.searchLimit - 1; + } + break; + case 'ArrowDown': + if (this.activeIndex < this.repos.length - 1) { + this.activeIndex++; + } else if (this.page < this.finalPage) { + this.activeIndex = 0; + this.changePage(this.page + 1); + } + break; + case 'ArrowRight': + if (this.page < this.finalPage) { + this.changePage(this.page + 1); + } + break; + case 'ArrowLeft': + if (this.page > 1) { + this.changePage(this.page - 1); + } + break; + } + if (this.activeIndex === -1 || this.activeIndex > this.repos.length - 1) { + this.activeIndex = 0; + } + }, + }, +}; + +export function initDashboardRepoList() { + const el = document.getElementById('dashboard-repo-list'); + if (el) { + createApp(sfc).mount(el); + } +} + +export default sfc; // activate the IDE's Vue plugin +</script> +<template> + <div> + <div v-if="!isOrganization" class="ui secondary stackable menu tabs-with-labels"> + <a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{ textMyRepos }} <span class="ui grey label tw-ml-2">{{ reposTotalCount }}</span></a> + <a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textMyOrgs }} <span class="ui grey label tw-ml-2">{{ organizationsTotalCount }}</span></a> + </div> + <div v-show="tab === 'repos'" class="ui tab active list dashboard-repos"> + <h4 v-if="isOrganization" class="ui top attached tw-mt-4 tw-flex tw-items-center"> + <div class="tw-flex-1 tw-flex tw-items-center"> + {{ textMyRepos }} + <span class="ui grey label tw-ml-2">{{ reposTotalCount }}</span> + </div> + </h4> + <div class="ui top attached segment repos-search"> + <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"> + <svg-icon name="octicon-filter" :size="16"/> + <div class="menu"> + <a class="item" @click="toggleArchivedFilter()"> + <div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle"> + <!--the "hidden" is necessary to make the checkbox work without Fomantic UI js, + otherwise if the "input" handles click event for intermediate status, it breaks the internal state--> + <input type="checkbox" class="hidden" v-bind.prop="checkboxArchivedFilterProps"> + <label> + <svg-icon name="octicon-archive" :size="16" class-name="tw-mr-1"/> + {{ textShowArchived }} + </label> + </div> + </a> + <a class="item" @click="togglePrivateFilter()"> + <div class="ui checkbox" ref="checkboxPrivateFilter" :title="checkboxPrivateFilterTitle"> + <input type="checkbox" class="hidden" v-bind.prop="checkboxPrivateFilterProps"> + <label> + <svg-icon name="octicon-lock" :size="16" class-name="tw-mr-1"/> + {{ textShowPrivate }} + </label> + </div> + </a> + </div> + </div> + </div> + <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter"> + <div class="overflow-menu-items tw-justify-center"> + <a class="item" tabindex="0" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')"> + {{ textAll }} + <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + <a class="item" tabindex="0" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')"> + {{ textSources }} + <div v-show="reposFilter === 'sources'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + <a class="item" tabindex="0" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')"> + {{ textForks }} + <div v-show="reposFilter === 'forks'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + <a class="item" tabindex="0" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')" v-if="isMirrorsEnabled"> + {{ textMirrors }} + <div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + <a class="item" tabindex="0" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')"> + {{ textCollaborative }} + <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + </div> + </overflow-menu> + </div> + <div v-if="repos.length" class="ui attached table segment tw-rounded-b"> + <ul class="repo-owner-name-list"> + <li class="tw-flex tw-items-center tw-py-2" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id"> + <a class="repo-list-link muted" :href="repo.link"> + <svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/> + <div class="text truncate">{{ repo.full_name }}</div> + <div v-if="repo.archived"> + <svg-icon name="octicon-archive" :size="16"/> + </div> + </a> + <a class="tw-flex tw-items-center" v-if="repo.latest_commit_status" :href="repo.latest_commit_status.TargetURL" :data-tooltip-content="repo.locale_latest_commit_status"> + <!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl --> + <svg-icon :name="statusIcon(repo.latest_commit_status.State)" :class-name="'tw-ml-2 commit-status icon text ' + statusColor(repo.latest_commit_status.State)" :size="16"/> + </a> + </li> + </ul> + <div v-if="showMoreReposLink" class="tw-text-center"> + <div class="divider tw-my-0"/> + <div class="ui borderless pagination menu narrow tw-my-2"> + <a + class="item navigation tw-py-1" :class="{'disabled': page === 1}" + @click="changePage(1)" :title="textFirstPage" + > + <svg-icon name="gitea-double-chevron-left" :size="16" class-name="tw-mr-1"/> + </a> + <a + class="item navigation tw-py-1" :class="{'disabled': page === 1}" + @click="changePage(page - 1)" :title="textPreviousPage" + > + <svg-icon name="octicon-chevron-left" :size="16" clsas-name="tw-mr-1"/> + </a> + <a class="active item tw-py-1">{{ page }}</a> + <a + class="item navigation" :class="{'disabled': page === finalPage}" + @click="changePage(page + 1)" :title="textNextPage" + > + <svg-icon name="octicon-chevron-right" :size="16" class-name="tw-ml-1"/> + </a> + <a + class="item navigation tw-py-1" :class="{'disabled': page === finalPage}" + @click="changePage(finalPage)" :title="textLastPage" + > + <svg-icon name="gitea-double-chevron-right" :size="16" class-name="tw-ml-1"/> + </a> + </div> + </div> + </div> + </div> + <div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs"> + <div v-if="organizations.length" class="ui attached table segment tw-rounded"> + <ul class="repo-owner-name-list"> + <li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name"> + <a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)"> + <svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/> + <div class="text truncate">{{ org.name }}</div> + <div><!-- div to prevent underline of label on hover --> + <span class="ui tiny basic label" v-if="org.org_visibility !== 'public'"> + {{ org.org_visibility === 'limited' ? textOrgVisibilityLimited: textOrgVisibilityPrivate }} + </span> + </div> + </a> + <div class="text light grey tw-flex tw-items-center tw-ml-2"> + {{ org.num_repos }} + <svg-icon name="octicon-repo" :size="16" class-name="tw-ml-1 tw-mt-0.5"/> + </div> + </li> + </ul> + </div> + </div> + </div> +</template> +<style scoped> +ul { + list-style: none; + margin: 0; + padding-left: 0; +} + +ul li { + padding: 0 10px; +} + +ul li:not(:last-child) { + border-bottom: 1px solid var(--color-secondary); +} + +.repos-search { + padding-bottom: 0 !important; +} + +.repos-filter { + padding-top: 0 !important; + margin-top: 0 !important; + border-bottom-width: 0 !important; + margin-bottom: 2px !important; +} + +.repos-filter .item { + padding-left: 6px !important; + padding-right: 6px !important; +} + +.repo-list-link { + min-width: 0; /* for text truncation */ + display: flex; + align-items: center; + flex: 1; + gap: 0.5rem; +} + +.repo-list-link .svg { + color: var(--color-text-light-2); +} + +.repo-list-icon { + min-width: 16px; + margin-right: 2px; +} + +/* octicon-mirror has no padding inside the SVG */ +.repo-list-icon.octicon-mirror { + width: 14px; + min-width: 14px; + margin-left: 1px; + margin-right: 3px; +} + +.repo-owner-name-list li.active { + background: var(--color-hover); +} +</style> diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue new file mode 100644 index 0000000..3f6e4e4 --- /dev/null +++ b/web_src/js/components/DiffCommitSelector.vue @@ -0,0 +1,306 @@ +<script> +import {SvgIcon} from '../svg.js'; +import {GET} from '../modules/fetch.js'; + +export default { + components: {SvgIcon}, + data: () => { + const el = document.getElementById('diff-commit-select'); + return { + menuVisible: false, + isLoading: false, + locale: { + filter_changes_by_commit: el.getAttribute('data-filter_changes_by_commit'), + }, + commits: [], + hoverActivated: false, + lastReviewCommitSha: null, + }; + }, + computed: { + commitsSinceLastReview() { + if (this.lastReviewCommitSha) { + return this.commits.length - this.commits.findIndex((x) => x.id === this.lastReviewCommitSha) - 1; + } + return 0; + }, + queryParams() { + return this.$el.parentNode.getAttribute('data-queryparams'); + }, + issueLink() { + return this.$el.parentNode.getAttribute('data-issuelink'); + }, + }, + mounted() { + document.body.addEventListener('click', this.onBodyClick); + this.$el.addEventListener('keydown', this.onKeyDown); + this.$el.addEventListener('keyup', this.onKeyUp); + }, + unmounted() { + document.body.removeEventListener('click', this.onBodyClick); + this.$el.removeEventListener('keydown', this.onKeyDown); + this.$el.removeEventListener('keyup', this.onKeyUp); + }, + methods: { + onBodyClick(event) { + // close this menu on click outside of this element when the dropdown is currently visible opened + if (this.$el.contains(event.target)) return; + if (this.menuVisible) { + this.toggleMenu(); + } + }, + onKeyDown(event) { + if (!this.menuVisible) return; + const item = document.activeElement; + if (!this.$el.contains(item)) return; + switch (event.key) { + case 'ArrowDown': // select next element + event.preventDefault(); + this.focusElem(item.nextElementSibling, item); + break; + case 'ArrowUp': // select previous element + event.preventDefault(); + this.focusElem(item.previousElementSibling, item); + break; + case 'Escape': // close menu + event.preventDefault(); + item.tabIndex = -1; + this.toggleMenu(); + break; + } + }, + onKeyUp(event) { + if (!this.menuVisible) return; + const item = document.activeElement; + if (!this.$el.contains(item)) return; + if (event.key === 'Shift' && this.hoverActivated) { + // shift is not pressed anymore -> deactivate hovering and reset hovered and selected + this.hoverActivated = false; + for (const commit of this.commits) { + commit.hovered = false; + commit.selected = false; + } + } + }, + highlight(commit) { + if (!this.hoverActivated) return; + const indexSelected = this.commits.findIndex((x) => x.selected); + const indexCurrentElem = this.commits.findIndex((x) => x.id === commit.id); + for (const [idx, commit] of this.commits.entries()) { + commit.hovered = Math.min(indexSelected, indexCurrentElem) <= idx && idx <= Math.max(indexSelected, indexCurrentElem); + } + }, + /** Focus given element */ + focusElem(elem, prevElem) { + if (elem) { + elem.tabIndex = 0; + if (prevElem) prevElem.tabIndex = -1; + elem.focus(); + } + }, + /** Opens our menu, loads commits before opening */ + async toggleMenu() { + this.menuVisible = !this.menuVisible; + // load our commits when the menu is not yet visible (it'll be toggled after loading) + // and we got no commits + if (!this.commits.length && this.menuVisible && !this.isLoading) { + this.isLoading = true; + try { + await this.fetchCommits(); + } finally { + this.isLoading = false; + } + } + // set correct tabindex to allow easier navigation + this.$nextTick(() => { + const expandBtn = this.$el.querySelector('#diff-commit-list-expand'); + const showAllChanges = this.$el.querySelector('#diff-commit-list-show-all'); + if (this.menuVisible) { + this.focusElem(showAllChanges, expandBtn); + } else { + this.focusElem(expandBtn, showAllChanges); + } + }); + }, + /** Load the commits to show in this dropdown */ + async fetchCommits() { + const resp = await GET(`${this.issueLink}/commits/list`); + const results = await resp.json(); + this.commits.push(...results.commits.map((x) => { + x.hovered = false; + return x; + })); + this.commits.reverse(); + this.lastReviewCommitSha = results.last_review_commit_sha || null; + if (this.lastReviewCommitSha && !this.commits.some((x) => x.id === this.lastReviewCommitSha)) { + // the lastReviewCommit is not available (probably due to a force push) + // reset the last review commit sha + this.lastReviewCommitSha = null; + } + Object.assign(this.locale, results.locale); + }, + showAllChanges() { + window.location = `${this.issueLink}/files${this.queryParams}`; + }, + /** Called when user clicks on since last review */ + changesSinceLastReviewClick() { + window.location = `${this.issueLink}/files/${this.lastReviewCommitSha}..${this.commits.at(-1).id}${this.queryParams}`; + }, + /** Clicking on a single commit opens this specific commit */ + commitClicked(commitId, newWindow = false) { + const url = `${this.issueLink}/commits/${commitId}${this.queryParams}`; + if (newWindow) { + window.open(url); + } else { + window.location = url; + } + }, + /** + * When a commit is clicked with shift this enables the range + * selection. Second click (with shift) defines the end of the + * range. This opens the diff of this range + * Exception: first commit is the first commit of this PR. Then + * the diff from beginning of PR up to the second clicked commit is + * opened + */ + commitClickedShift(commit) { + this.hoverActivated = !this.hoverActivated; + commit.selected = true; + // Second click -> determine our range and open links accordingly + if (!this.hoverActivated) { + // find all selected commits and generate a link + if (this.commits[0].selected) { + // first commit is selected - generate a short url with only target sha + const lastCommitIdx = this.commits.findLastIndex((x) => x.selected); + if (lastCommitIdx === this.commits.length - 1) { + // user selected all commits - just show the normal diff page + window.location = `${this.issueLink}/files${this.queryParams}`; + } else { + window.location = `${this.issueLink}/files/${this.commits[lastCommitIdx].id}${this.queryParams}`; + } + } else { + const start = this.commits[this.commits.findIndex((x) => x.selected) - 1].id; + const end = this.commits.findLast((x) => x.selected).id; + window.location = `${this.issueLink}/files/${start}..${end}${this.queryParams}`; + } + } + }, + }, +}; +</script> +<template> + <div class="ui scrolling dropdown custom"> + <button + class="ui basic button" + id="diff-commit-list-expand" + @click.stop="toggleMenu()" + :data-tooltip-content="locale.filter_changes_by_commit" + aria-haspopup="true" + aria-controls="diff-commit-selector-menu" + :aria-label="locale.filter_changes_by_commit" + aria-activedescendant="diff-commit-list-show-all" + > + <svg-icon name="octicon-git-commit"/> + </button> + <div class="menu left transition" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'"> + <div class="loading-indicator is-loading" v-if="isLoading"/> + <div v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()"> + <div class="gt-ellipsis"> + {{ locale.show_all_commits }} + </div> + <div class="gt-ellipsis text light-2 tw-mb-0"> + {{ locale.stats_num_commits }} + </div> + </div> + <!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review --> + <div + v-if="lastReviewCommitSha != null" role="menuitem" + class="vertical item" + :class="{disabled: !commitsSinceLastReview}" + @keydown.enter="changesSinceLastReviewClick()" + @click="changesSinceLastReviewClick()" + > + <div class="gt-ellipsis"> + {{ locale.show_changes_since_your_last_review }} + </div> + <div class="gt-ellipsis text light-2"> + {{ commitsSinceLastReview }} commits + </div> + </div> + <span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span> + <template v-for="commit in commits" :key="commit.id"> + <div + class="vertical item" role="menuitem" + :class="{selection: commit.selected, hovered: commit.hovered}" + @keydown.enter.exact="commitClicked(commit.id)" + @keydown.enter.shift.exact="commitClickedShift(commit)" + @mouseover.shift="highlight(commit)" + @click.exact="commitClicked(commit.id)" + @click.ctrl.exact="commitClicked(commit.id, true)" + @click.meta.exact="commitClicked(commit.id, true)" + @click.shift.exact.stop.prevent="commitClickedShift(commit)" + > + <div class="tw-flex-1 tw-flex tw-flex-col tw-gap-1"> + <div class="gt-ellipsis commit-list-summary"> + {{ commit.summary }} + </div> + <div class="gt-ellipsis text light-2"> + {{ commit.committer_or_author_name }} + <span class="text right"> + <!-- TODO: make this respect the PreferredTimestampTense setting --> + <relative-time prefix="" :datetime="commit.time" data-tooltip-content data-tooltip-interactive="true">{{ commit.time }}</relative-time> + </span> + </div> + </div> + <div class="tw-font-mono"> + {{ commit.short_sha }} + </div> + </div> + </template> + </div> + </div> +</template> +<style scoped> + .hovered:not(.selection) { + background-color: var(--color-small-accent) !important; + } + .selection { + background-color: var(--color-accent) !important; + } + + .info { + display: inline-block; + padding: 7px 14px !important; + line-height: 1.4; + width: 100%; + } + + #diff-commit-selector-menu { + overflow-x: hidden; + max-height: 450px; + } + + #diff-commit-selector-menu .loading-indicator { + height: 200px; + width: 350px; + } + + #diff-commit-selector-menu .item, + #diff-commit-selector-menu .info { + display: flex !important; + flex-direction: row; + line-height: 1.4; + padding: 7px 14px !important; + border-top: 1px solid var(--color-secondary) !important; + gap: 0.25em; + } + + #diff-commit-selector-menu .item:focus { + color: var(--color-text); + background: var(--color-hover); + } + + #diff-commit-selector-menu .commit-list-summary { + max-width: min(380px, 96vw); + } +</style> diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue new file mode 100644 index 0000000..916780d --- /dev/null +++ b/web_src/js/components/DiffFileList.vue @@ -0,0 +1,58 @@ +<script> +import {loadMoreFiles} from '../features/repo-diff.js'; +import {diffTreeStore} from '../modules/stores.js'; + +export default { + data: () => { + return {store: diffTreeStore()}; + }, + mounted() { + document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList); + }, + unmounted() { + document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList); + }, + methods: { + toggleFileList() { + this.store.fileListIsVisible = !this.store.fileListIsVisible; + }, + diffTypeToString(pType) { + const diffTypes = { + 1: 'add', + 2: 'modify', + 3: 'del', + 4: 'rename', + 5: 'copy', + }; + return diffTypes[pType]; + }, + diffStatsWidth(adds, dels) { + return `${adds / (adds + dels) * 100}%`; + }, + loadMoreData() { + loadMoreFiles(this.store.linkLoadMore); + }, + }, +}; +</script> +<template> + <ol class="diff-stats tw-m-0" ref="root" v-if="store.fileListIsVisible"> + <li v-for="file in store.files" :key="file.NameHash"> + <div class="tw-font-semibold tw-flex tw-items-center pull-right"> + <span v-if="file.IsBin" class="tw-ml-0.5 tw-mr-2">{{ store.binaryFileMessage }}</span> + {{ file.IsBin ? '' : file.Addition + file.Deletion }} + <span v-if="!file.IsBin" class="diff-stats-bar tw-mx-2" :data-tooltip-content="store.statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)"> + <div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }"/> + </span> + </div> + <!-- todo finish all file status, now modify, add, delete and rename --> + <span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)"> </span> + <a class="file tw-font-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a> + </li> + <li v-if="store.isIncomplete" class="tw-pt-1"> + <span class="file tw-flex tw-items-center tw-justify-between">{{ store.tooManyFilesMessage }} + <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a> + </span> + </li> + </ol> +</template> diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue new file mode 100644 index 0000000..cddfee1 --- /dev/null +++ b/web_src/js/components/DiffFileTree.vue @@ -0,0 +1,144 @@ +<script> +import DiffFileTreeItem from './DiffFileTreeItem.vue'; +import {loadMoreFiles} from '../features/repo-diff.js'; +import {toggleElem} from '../utils/dom.js'; +import {diffTreeStore} from '../modules/stores.js'; +import {setFileFolding} from '../features/file-fold.js'; + +const LOCAL_STORAGE_KEY = 'diff_file_tree_visible'; + +export default { + components: {DiffFileTreeItem}, + data: () => { + return {store: diffTreeStore()}; + }, + computed: { + fileTree() { + const result = []; + for (const file of this.store.files) { + // Split file into directories + const splits = file.Name.split('/'); + let index = 0; + let parent = null; + let isFile = false; + for (const split of splits) { + index += 1; + // reached the end + if (index === splits.length) { + isFile = true; + } + let newParent = { + name: split, + children: [], + isFile, + }; + + if (isFile === true) { + newParent.file = file; + } + + if (parent) { + // check if the folder already exists + const existingFolder = parent.children.find( + (x) => x.name === split, + ); + if (existingFolder) { + newParent = existingFolder; + } else { + parent.children.push(newParent); + } + } else { + const existingFolder = result.find((x) => x.name === split); + if (existingFolder) { + newParent = existingFolder; + } else { + result.push(newParent); + } + } + parent = newParent; + } + } + const mergeChildIfOnlyOneDir = (entries) => { + for (const entry of entries) { + if (entry.children) { + mergeChildIfOnlyOneDir(entry.children); + } + if (entry.children.length === 1 && entry.children[0].isFile === false) { + // Merge it to the parent + entry.name = `${entry.name}/${entry.children[0].name}`; + entry.children = entry.children[0].children; + } + } + }; + // Merge folders with just a folder as children in order to + // reduce the depth of our tree. + mergeChildIfOnlyOneDir(result); + return result; + }, + }, + mounted() { + // Default to true if unset + this.store.fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) !== 'false'; + document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility); + + this.hashChangeListener = () => { + this.store.selectedItem = window.location.hash; + this.expandSelectedFile(); + }; + this.hashChangeListener(); + window.addEventListener('hashchange', this.hashChangeListener); + }, + unmounted() { + document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility); + window.removeEventListener('hashchange', this.hashChangeListener); + }, + methods: { + expandSelectedFile() { + // expand file if the selected file is folded + if (this.store.selectedItem) { + const box = document.querySelector(this.store.selectedItem); + const folded = box?.getAttribute('data-folded') === 'true'; + if (folded) setFileFolding(box, box.querySelector('.fold-file'), false); + } + }, + toggleVisibility() { + this.updateVisibility(!this.store.fileTreeIsVisible); + }, + updateVisibility(visible) { + this.store.fileTreeIsVisible = visible; + localStorage.setItem(LOCAL_STORAGE_KEY, this.store.fileTreeIsVisible); + this.updateState(this.store.fileTreeIsVisible); + }, + updateState(visible) { + const btn = document.querySelector('.diff-toggle-file-tree-button'); + const [toShow, toHide] = btn.querySelectorAll('.icon'); + const tree = document.getElementById('diff-file-tree'); + const newTooltip = btn.getAttribute(visible ? 'data-hide-text' : 'data-show-text'); + btn.setAttribute('data-tooltip-content', newTooltip); + toggleElem(tree, visible); + toggleElem(toShow, !visible); + toggleElem(toHide, visible); + }, + loadMoreData() { + loadMoreFiles(this.store.linkLoadMore); + }, + }, +}; +</script> +<template> + <div v-if="store.fileTreeIsVisible" class="diff-file-tree-items"> + <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> + <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/> + <div v-if="store.isIncomplete" class="tw-pt-1"> + <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a> + </div> + </div> +</template> +<style scoped> +.diff-file-tree-items { + display: flex; + flex-direction: column; + gap: 1px; + margin-right: .5rem; +} +</style> diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue new file mode 100644 index 0000000..0f6e543 --- /dev/null +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -0,0 +1,97 @@ +<script> +import {SvgIcon} from '../svg.js'; +import {diffTreeStore} from '../modules/stores.js'; + +export default { + components: {SvgIcon}, + props: { + item: { + type: Object, + required: true, + }, + }, + data: () => ({ + store: diffTreeStore(), + collapsed: false, + }), + methods: { + getIconForDiffType(pType) { + const diffTypes = { + 1: {name: 'octicon-diff-added', classes: ['text', 'green']}, + 2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']}, + 3: {name: 'octicon-diff-removed', classes: ['text', 'red']}, + 4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']}, + 5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok + }; + return diffTypes[pType]; + }, + }, +}; +</script> +<template> + <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"--> + <a + v-if="item.isFile" class="item-file" + :class="{'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed}" + :title="item.name" :href="'#diff-' + item.file.NameHash" + > + <!-- file --> + <SvgIcon name="octicon-file"/> + <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span> + <SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).classes"/> + </a> + <div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed"> + <!-- directory --> + <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/> + <SvgIcon class="text primary" name="octicon-file-directory-fill"/> + <span class="gt-ellipsis">{{ item.name }}</span> + </div> + + <div v-if="item.children?.length" v-show="!collapsed" class="sub-items"> + <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem"/> + </div> +</template> +<style scoped> +a, a:hover { + text-decoration: none; + color: var(--color-text); +} + +.sub-items { + display: flex; + flex-direction: column; + gap: 1px; + margin-left: 13px; + border-left: 1px solid var(--color-secondary); +} + +.sub-items .item-file { + padding-left: 18px; +} + +.item-file.selected { + color: var(--color-text); + background: var(--color-active); + border-radius: 4px; +} + +.item-file.viewed { + color: var(--color-text-light-3); +} + +.item-file, +.item-directory { + display: flex; + align-items: center; + gap: 0.25em; + padding: 3px 6px; +} + +.item-file:hover, +.item-directory:hover { + color: var(--color-text); + background: var(--color-hover); + border-radius: 4px; + cursor: pointer; +} +</style> diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue new file mode 100644 index 0000000..bd0901a --- /dev/null +++ b/web_src/js/components/PullRequestMergeForm.vue @@ -0,0 +1,252 @@ +<script> +import {SvgIcon} from '../svg.js'; +import {toggleElem} from '../utils/dom.js'; + +const {csrfToken, pageData} = window.config; + +export default { + components: {SvgIcon}, + data: () => ({ + csrfToken, + mergeForm: pageData.pullRequestMergeForm, + + mergeTitleFieldValue: '', + mergeMessageFieldValue: '', + deleteBranchAfterMerge: false, + autoMergeWhenSucceed: false, + + mergeStyle: '', + mergeStyleDetail: { // dummy only, these values will come from one of the mergeForm.mergeStyles + hideMergeMessageTexts: false, + textDoMerge: '', + mergeTitleFieldText: '', + mergeMessageFieldText: '', + hideAutoMerge: false, + }, + mergeStyleAllowedCount: 0, + + showMergeStyleMenu: false, + showActionForm: false, + }), + computed: { + mergeButtonStyleClass() { + if (this.mergeForm.allOverridableChecksOk) return 'primary'; + return this.autoMergeWhenSucceed ? 'primary' : 'red'; + }, + forceMerge() { + return this.mergeForm.canMergeNow && !this.mergeForm.allOverridableChecksOk; + }, + }, + watch: { + mergeStyle(val) { + this.mergeStyleDetail = this.mergeForm.mergeStyles.find((e) => e.name === val); + for (const elem of document.querySelectorAll('[data-pull-merge-style]')) { + toggleElem(elem, elem.getAttribute('data-pull-merge-style') === val); + } + }, + }, + created() { + this.mergeStyleAllowedCount = this.mergeForm.mergeStyles.reduce((v, msd) => v + (msd.allowed ? 1 : 0), 0); + + let mergeStyle = this.mergeForm.mergeStyles.find((e) => e.allowed && e.name === this.mergeForm.defaultMergeStyle)?.name; + if (!mergeStyle) mergeStyle = this.mergeForm.mergeStyles.find((e) => e.allowed)?.name; + this.switchMergeStyle(mergeStyle, !this.mergeForm.canMergeNow); + }, + mounted() { + document.addEventListener('mouseup', this.hideMergeStyleMenu); + }, + unmounted() { + document.removeEventListener('mouseup', this.hideMergeStyleMenu); + }, + methods: { + hideMergeStyleMenu() { + this.showMergeStyleMenu = false; + }, + toggleActionForm(show) { + this.showActionForm = show; + if (!show) return; + this.deleteBranchAfterMerge = this.mergeForm.defaultDeleteBranchAfterMerge; + this.mergeTitleFieldValue = this.mergeStyleDetail.mergeTitleFieldText; + this.mergeMessageFieldValue = this.mergeStyleDetail.mergeMessageFieldText; + }, + switchMergeStyle(name, autoMerge = false) { + this.mergeStyle = name; + this.autoMergeWhenSucceed = autoMerge; + }, + clearMergeMessage() { + this.mergeMessageFieldValue = this.mergeForm.defaultMergeMessage; + }, + }, +}; +</script> +<template> + <!-- + if this component is shown, either the user is an admin (can do a merge without checks), or they are a writer who has the permission to do a merge + if the user is a writer and can't do a merge now (canMergeNow==false), then only show the Auto Merge for them + How to test the UI manually: + * Method 1: manually set some variables in pull.tmpl, eg: {{$notAllOverridableChecksOk = true}} {{$canMergeNow = false}} + * Method 2: make a protected branch, then set state=pending/success : + curl -X POST ${root_url}/api/v1/repos/${owner}/${repo}/statuses/${sha} \ + -H "accept: application/json" -H "authorization: Basic $base64_auth" -H "Content-Type: application/json" \ + -d '{"context": "test/context", "description": "description", "state": "${state}", "target_url": "http://localhost"}' + --> + <div> + <!-- eslint-disable-next-line vue/no-v-html --> + <div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"/> + + <!-- another similar form is in pull.tmpl (manual merge)--> + <form class="ui form form-fetch-action" v-if="showActionForm" :action="mergeForm.baseLink+'/merge'" method="post"> + <input type="hidden" name="_csrf" :value="csrfToken"> + <input type="hidden" name="head_commit_id" v-model="mergeForm.pullHeadCommitID"> + <input type="hidden" name="merge_when_checks_succeed" v-model="autoMergeWhenSucceed"> + <input type="hidden" name="force_merge" v-model="forceMerge"> + + <template v-if="!mergeStyleDetail.hideMergeMessageTexts"> + <div class="field"> + <input type="text" name="merge_title_field" v-model="mergeTitleFieldValue"> + </div> + <div class="field"> + <textarea name="merge_message_field" rows="5" :placeholder="mergeForm.mergeMessageFieldPlaceHolder" v-model="mergeMessageFieldValue"/> + <template v-if="mergeMessageFieldValue !== mergeForm.defaultMergeMessage"> + <button @click.prevent="clearMergeMessage" class="btn tw-mt-1 tw-p-1 interact-fg" :data-tooltip-content="mergeForm.textClearMergeMessageHint"> + {{ mergeForm.textClearMergeMessage }} + </button> + </template> + </div> + </template> + + <div class="field" v-if="mergeStyle === 'manually-merged'"> + <input type="text" name="merge_commit_id" :placeholder="mergeForm.textMergeCommitId"> + </div> + + <button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle"> + {{ mergeStyleDetail.textDoMerge }} + <template v-if="autoMergeWhenSucceed"> + {{ mergeForm.textAutoMergeButtonWhenSucceed }} + </template> + </button> + + <button class="ui button merge-cancel" @click="toggleActionForm(false)"> + {{ mergeForm.textCancel }} + </button> + + <div class="ui checkbox tw-ml-1" v-if="mergeForm.isPullBranchDeletable && !autoMergeWhenSucceed"> + <input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge"> + <label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label> + </div> + </form> + + <div v-if="!showActionForm" class="tw-flex"> + <!-- the merge button --> + <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)"> + <button class="ui button"> + <svg-icon name="octicon-git-merge"/> + <span class="button-text"> + {{ mergeStyleDetail.textDoMerge }} + <template v-if="autoMergeWhenSucceed"> + {{ mergeForm.textAutoMergeButtonWhenSucceed }} + </template> + </span> + </button> + <div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1"> + <svg-icon name="octicon-triangle-down" :size="14"/> + <div class="menu" :class="{'show':showMergeStyleMenu}"> + <template v-for="msd in mergeForm.mergeStyles"> + <!-- if can merge now, show one action "merge now", and an action "auto merge when succeed" --> + <div class="item" v-if="msd.allowed && mergeForm.canMergeNow" :key="msd.name" @click.stop="switchMergeStyle(msd.name)"> + <div class="action-text"> + {{ msd.textDoMerge }} + </div> + <div v-if="!msd.hideAutoMerge" class="auto-merge-small" @click.stop="switchMergeStyle(msd.name, true)"> + <svg-icon name="octicon-clock" :size="14"/> + <div class="auto-merge-tip"> + {{ mergeForm.textAutoMergeWhenSucceed }} + </div> + </div> + </div> + + <!-- if can NOT merge now, only show one action "auto merge when succeed" --> + <div class="item" v-if="msd.allowed && !mergeForm.canMergeNow && !msd.hideAutoMerge" :key="msd.name" @click.stop="switchMergeStyle(msd.name, true)"> + <div class="action-text"> + {{ msd.textDoMerge }} {{ mergeForm.textAutoMergeButtonWhenSucceed }} + </div> + </div> + </template> + </div> + </div> + </div> + + <!-- the cancel auto merge button --> + <form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="tw-ml-4"> + <input type="hidden" name="_csrf" :value="csrfToken"> + <button class="ui button"> + {{ mergeForm.textAutoMergeCancelSchedule }} + </button> + </form> + </div> + </div> +</template> +<style scoped> +/* to keep UI the same, at the moment we are still using some Fomantic UI styles, but we do not use their scripts, so we need to fine tune some styles */ +.ui.dropdown .menu.show { + display: block; +} +.ui.checkbox label { + cursor: pointer; +} + +/* make the dropdown list left-aligned */ +.ui.merge-button { + position: relative; +} +.ui.merge-button .ui.dropdown { + position: static; +} +.ui.merge-button > .ui.dropdown:last-child > .menu:not(.left) { + left: 0; + right: auto; +} +.ui.merge-button .ui.dropdown .menu > .item { + display: flex; + align-items: stretch; + padding: 0 !important; /* polluted by semantic.css: .ui.dropdown .menu > .item { !important } */ +} + +/* merge style list item */ +.action-text { + padding: 0.8rem; + flex: 1 +} + +.auto-merge-small { + width: 40px; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} +.auto-merge-small .auto-merge-tip { + display: none; + left: 38px; + top: -1px; + bottom: -1px; + position: absolute; + align-items: center; + color: var(--color-info-text); + background-color: var(--color-info-bg); + border: 1px solid var(--color-info-border); + border-left: none; + padding-right: 1rem; +} + +.auto-merge-small:hover { + color: var(--color-info-text); + background-color: var(--color-info-bg); + border: 1px solid var(--color-info-border); +} + +.auto-merge-small:hover .auto-merge-tip { + display: flex; +} + +</style> diff --git a/web_src/js/components/RepoActionView.test.js b/web_src/js/components/RepoActionView.test.js new file mode 100644 index 0000000..8c4e150 --- /dev/null +++ b/web_src/js/components/RepoActionView.test.js @@ -0,0 +1,105 @@ +import {mount, flushPromises} from '@vue/test-utils'; +import RepoActionView from './RepoActionView.vue'; + +test('processes ##[group] and ##[endgroup]', async () => { + Object.defineProperty(document.documentElement, 'lang', {value: 'en'}); + vi.spyOn(global, 'fetch').mockImplementation((url, opts) => { + const artifacts_value = { + artifacts: [], + }; + const stepsLog_value = [ + { + step: 0, + cursor: 0, + lines: [ + {index: 1, message: '##[group]Test group', timestamp: 0}, + {index: 2, message: 'A test line', timestamp: 0}, + {index: 3, message: '##[endgroup]', timestamp: 0}, + {index: 4, message: 'A line outside the group', timestamp: 0}, + ], + }, + ]; + const jobs_value = { + state: { + run: { + status: 'success', + commit: { + pusher: {}, + }, + }, + currentJob: { + steps: [ + { + summary: 'Test Job', + duration: '1s', + status: 'success', + }, + ], + }, + }, + logs: { + stepsLog: opts.body?.includes('"cursor":null') ? stepsLog_value : [], + }, + }; + + return Promise.resolve({ + ok: true, + json: vi.fn().mockResolvedValue( + url.endsWith('/artifacts') ? artifacts_value : jobs_value, + ), + }); + }); + + const wrapper = mount(RepoActionView, { + props: { + jobIndex: '1', + locale: { + approve: '', + cancel: '', + rerun: '', + artifactsTitle: '', + areYouSure: '', + confirmDeleteArtifact: '', + rerun_all: '', + showTimeStamps: '', + showLogSeconds: '', + showFullScreen: '', + downloadLogs: '', + status: { + unknown: '', + waiting: '', + running: '', + success: '', + failure: '', + cancelled: '', + skipped: '', + blocked: '', + }, + }, + }, + }); + await flushPromises(); + await wrapper.get('.job-step-summary').trigger('click'); + await flushPromises(); + + // Test if header was loaded correctly + expect(wrapper.get('.step-summary-msg').text()).toEqual('Test Job'); + + // Check if 3 lines where rendered + expect(wrapper.findAll('.job-log-line').length).toEqual(3); + + // Check if line 1 contains the group header + expect(wrapper.get('.job-log-line:nth-of-type(1) > details.log-msg').text()).toEqual('Test group'); + + // Check if right after the header line exists a log list + expect(wrapper.find('.job-log-line:nth-of-type(1) + .job-log-list.hidden').exists()).toBe(true); + + // Check if inside the loglist exist exactly one log line + expect(wrapper.findAll('.job-log-list > .job-log-line').length).toEqual(1); + + // Check if inside the loglist is an logline with our second logline + expect(wrapper.get('.job-log-list > .job-log-line > .log-msg').text()).toEqual('A test line'); + + // Check if after the log list exists another log line + expect(wrapper.get('.job-log-list + .job-log-line > .log-msg').text()).toEqual('A line outside the group'); +}); diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue new file mode 100644 index 0000000..4e8e18e --- /dev/null +++ b/web_src/js/components/RepoActionView.vue @@ -0,0 +1,905 @@ +<script> +import {SvgIcon} from '../svg.js'; +import ActionRunStatus from './ActionRunStatus.vue'; +import {createApp} from 'vue'; +import {toggleElem} from '../utils/dom.js'; +import {formatDatetime} from '../utils/time.js'; +import {renderAnsi} from '../render/ansi.js'; +import {GET, POST, DELETE} from '../modules/fetch.js'; + +const sfc = { + name: 'RepoActionView', + components: { + SvgIcon, + ActionRunStatus, + }, + props: { + runIndex: String, + jobIndex: String, + actionsURL: String, + workflowName: String, + workflowURL: String, + locale: Object, + }, + + data() { + return { + // internal state + loading: false, + intervalID: null, + currentJobStepsStates: [], + artifacts: [], + onHoverRerunIndex: -1, + menuVisible: false, + isFullScreen: false, + timeVisible: { + 'log-time-stamp': false, + 'log-time-seconds': false, + }, + + // provided by backend + run: { + link: '', + title: '', + status: '', + canCancel: false, + canApprove: false, + canRerun: false, + done: false, + jobs: [ + // { + // id: 0, + // name: '', + // status: '', + // canRerun: false, + // duration: '', + // }, + ], + commit: { + localeCommit: '', + localePushedBy: '', + localeWorkflow: '', + shortSHA: '', + link: '', + pusher: { + displayName: '', + link: '', + }, + branch: { + name: '', + link: '', + }, + }, + }, + currentJob: { + title: '', + detail: '', + steps: [ + // { + // summary: '', + // duration: '', + // status: '', + // } + ], + }, + }; + }, + + async mounted() { + // load job data and then auto-reload periodically + // need to await first loadJob so this.currentJobStepsStates is initialized and can be used in hashChangeListener + await this.loadJob(); + this.intervalID = setInterval(this.loadJob, 1000); + document.body.addEventListener('click', this.closeDropdown); + this.hashChangeListener(); + window.addEventListener('hashchange', this.hashChangeListener); + }, + + beforeUnmount() { + document.body.removeEventListener('click', this.closeDropdown); + window.removeEventListener('hashchange', this.hashChangeListener); + }, + + unmounted() { + // clear the interval timer when the component is unmounted + // even our page is rendered once, not spa style + if (this.intervalID) { + clearInterval(this.intervalID); + this.intervalID = null; + } + }, + + methods: { + // show/hide the step logs for a step + toggleStepLogs(idx) { + this.currentJobStepsStates[idx].expanded = !this.currentJobStepsStates[idx].expanded; + if (this.currentJobStepsStates[idx].expanded) { + this.loadJob(); // try to load the data immediately instead of waiting for next timer interval + } + }, + // cancel a run + cancelRun() { + POST(`${this.run.link}/cancel`); + }, + // approve a run + approveRun() { + POST(`${this.run.link}/approve`); + }, + // show/hide the step logs for a group + toggleGroupLogs(event) { + const line = event.target.parentElement; + const list = line.nextSibling; + if (event.newState === 'open') { + list.classList.remove('hidden'); + } else { + list.classList.add('hidden'); + } + }, + + createLogLine(line, startTime, stepIndex, group) { + const div = document.createElement('div'); + div.classList.add('job-log-line'); + div.setAttribute('id', `jobstep-${stepIndex}-${line.index}`); + div._jobLogTime = line.timestamp; + + const lineNumber = document.createElement('a'); + lineNumber.classList.add('line-num', 'muted'); + lineNumber.textContent = line.index; + lineNumber.setAttribute('href', `#jobstep-${stepIndex}-${line.index}`); + div.append(lineNumber); + + // for "Show timestamps" + const logTimeStamp = document.createElement('span'); + logTimeStamp.className = 'log-time-stamp'; + const date = new Date(parseFloat(line.timestamp * 1000)); + const timeStamp = formatDatetime(date); + logTimeStamp.textContent = timeStamp; + toggleElem(logTimeStamp, this.timeVisible['log-time-stamp']); + // for "Show seconds" + const logTimeSeconds = document.createElement('span'); + logTimeSeconds.className = 'log-time-seconds'; + const seconds = Math.floor(parseFloat(line.timestamp) - parseFloat(startTime)); + logTimeSeconds.textContent = `${seconds}s`; + toggleElem(logTimeSeconds, this.timeVisible['log-time-seconds']); + + let logMessage = document.createElement('span'); + logMessage.innerHTML = renderAnsi(line.message); + if (group.isHeader) { + const details = document.createElement('details'); + details.addEventListener('toggle', this.toggleGroupLogs); + const summary = document.createElement('summary'); + summary.append(logMessage); + details.append(summary); + logMessage = details; + } + logMessage.className = 'log-msg'; + logMessage.style.paddingLeft = `${group.depth}em`; + + div.append(logTimeStamp); + div.append(logMessage); + div.append(logTimeSeconds); + + return div; + }, + + appendLogs(stepIndex, logLines, startTime) { + const groupStack = []; + const container = this.$refs.logs[stepIndex]; + for (const line of logLines) { + const el = groupStack.length > 0 ? groupStack[groupStack.length - 1] : container; + const group = { + depth: groupStack.length, + isHeader: false, + }; + if (line.message.startsWith('##[group]')) { + group.isHeader = true; + + const logLine = this.createLogLine( + { + ...line, + message: line.message.substring(9), + }, + startTime, stepIndex, group, + ); + logLine.setAttribute('data-group', group.index); + el.append(logLine); + + const list = document.createElement('div'); + list.classList.add('job-log-list'); + list.classList.add('hidden'); + list.setAttribute('data-group', group.index); + groupStack.push(list); + el.append(list); + } else if (line.message.startsWith('##[endgroup]')) { + groupStack.pop(); + } else { + el.append(this.createLogLine(line, startTime, stepIndex, group)); + } + } + }, + + async fetchArtifacts() { + const resp = await GET(`${this.actionsURL}/runs/${this.runIndex}/artifacts`); + return await resp.json(); + }, + + async deleteArtifact(name) { + if (!window.confirm(this.locale.confirmDeleteArtifact.replace('%s', name))) return; + await DELETE(`${this.run.link}/artifacts/${name}`); + await this.loadJob(); + }, + + async fetchJob() { + const logCursors = this.currentJobStepsStates.map((it, idx) => { + // cursor is used to indicate the last position of the logs + // it's only used by backend, frontend just reads it and passes it back, it and can be any type. + // for example: make cursor=null means the first time to fetch logs, cursor=eof means no more logs, etc + return {step: idx, cursor: it.cursor, expanded: it.expanded}; + }); + const resp = await POST(`${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}`, { + data: {logCursors}, + }); + return await resp.json(); + }, + + async loadJob() { + if (this.loading) return; + try { + this.loading = true; + + let job, artifacts; + try { + [job, artifacts] = await Promise.all([ + this.fetchJob(), + this.fetchArtifacts(), // refresh artifacts if upload-artifact step done + ]); + } catch (err) { + if (err instanceof TypeError) return; // avoid network error while unloading page + throw err; + } + + this.artifacts = artifacts['artifacts'] || []; + + // save the state to Vue data, then the UI will be updated + this.run = job.state.run; + this.currentJob = job.state.currentJob; + + // sync the currentJobStepsStates to store the job step states + for (let i = 0; i < this.currentJob.steps.length; i++) { + if (!this.currentJobStepsStates[i]) { + // initial states for job steps + this.currentJobStepsStates[i] = {cursor: null, expanded: false}; + } + } + // append logs to the UI + for (const logs of job.logs.stepsLog) { + // save the cursor, it will be passed to backend next time + this.currentJobStepsStates[logs.step].cursor = logs.cursor; + this.appendLogs(logs.step, logs.lines, logs.started); + } + + if (this.run.done && this.intervalID) { + clearInterval(this.intervalID); + this.intervalID = null; + } + } finally { + this.loading = false; + } + }, + + isDone(status) { + return ['success', 'skipped', 'failure', 'cancelled'].includes(status); + }, + + isExpandable(status) { + return ['success', 'running', 'failure', 'cancelled'].includes(status); + }, + + closeDropdown() { + if (this.menuVisible) this.menuVisible = false; + }, + + toggleTimeDisplay(type) { + this.timeVisible[`log-time-${type}`] = !this.timeVisible[`log-time-${type}`]; + for (const el of this.$refs.steps.querySelectorAll(`.log-time-${type}`)) { + toggleElem(el, this.timeVisible[`log-time-${type}`]); + } + }, + + toggleFullScreen() { + this.isFullScreen = !this.isFullScreen; + const fullScreenEl = document.querySelector('.action-view-right'); + const outerEl = document.querySelector('.full.height'); + const actionBodyEl = document.querySelector('.action-view-body'); + const headerEl = document.querySelector('#navbar'); + const contentEl = document.querySelector('.page-content.repository'); + const footerEl = document.querySelector('.page-footer'); + toggleElem(headerEl, !this.isFullScreen); + toggleElem(contentEl, !this.isFullScreen); + toggleElem(footerEl, !this.isFullScreen); + // move .action-view-right to new parent + if (this.isFullScreen) { + outerEl.append(fullScreenEl); + } else { + actionBodyEl.append(fullScreenEl); + } + }, + async hashChangeListener() { + const selectedLogStep = window.location.hash; + if (!selectedLogStep) return; + const [_, step, _line] = selectedLogStep.split('-'); + if (!this.currentJobStepsStates[step]) return; + if (!this.currentJobStepsStates[step].expanded && this.currentJobStepsStates[step].cursor === null) { + this.currentJobStepsStates[step].expanded = true; + // need to await for load job if the step log is loaded for the first time + // so logline can be selected by querySelector + await this.loadJob(); + } + const logLine = this.$refs.steps.querySelector(selectedLogStep); + if (!logLine) return; + logLine.querySelector('.line-num').click(); + }, + }, +}; + +export default sfc; + +export function initRepositoryActionView() { + const el = document.getElementById('repo-action-view'); + if (!el) return; + + // TODO: the parent element's full height doesn't work well now, + // but we can not pollute the global style at the moment, only fix the height problem for pages with this component + const parentFullHeight = document.querySelector('body > div.full.height'); + if (parentFullHeight) parentFullHeight.style.paddingBottom = '0'; + + const view = createApp(sfc, { + runIndex: el.getAttribute('data-run-index'), + jobIndex: el.getAttribute('data-job-index'), + actionsURL: el.getAttribute('data-actions-url'), + workflowName: el.getAttribute('data-workflow-name'), + workflowURL: el.getAttribute('data-workflow-url'), + locale: { + approve: el.getAttribute('data-locale-approve'), + cancel: el.getAttribute('data-locale-cancel'), + rerun: el.getAttribute('data-locale-rerun'), + artifactsTitle: el.getAttribute('data-locale-artifacts-title'), + areYouSure: el.getAttribute('data-locale-are-you-sure'), + confirmDeleteArtifact: el.getAttribute('data-locale-confirm-delete-artifact'), + rerun_all: el.getAttribute('data-locale-rerun-all'), + showTimeStamps: el.getAttribute('data-locale-show-timestamps'), + showLogSeconds: el.getAttribute('data-locale-show-log-seconds'), + showFullScreen: el.getAttribute('data-locale-show-full-screen'), + downloadLogs: el.getAttribute('data-locale-download-logs'), + status: { + unknown: el.getAttribute('data-locale-status-unknown'), + waiting: el.getAttribute('data-locale-status-waiting'), + running: el.getAttribute('data-locale-status-running'), + success: el.getAttribute('data-locale-status-success'), + failure: el.getAttribute('data-locale-status-failure'), + cancelled: el.getAttribute('data-locale-status-cancelled'), + skipped: el.getAttribute('data-locale-status-skipped'), + blocked: el.getAttribute('data-locale-status-blocked'), + }, + }, + }); + view.mount(el); +} +</script> +<template> + <div class="ui container action-view-container"> + <div class="action-view-header"> + <div class="action-info-summary"> + <div class="action-info-summary-title"> + <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/> + <h2 class="action-info-summary-title-text"> + {{ run.title }} + </h2> + </div> + <button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove"> + {{ locale.approve }} + </button> + <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel"> + {{ locale.cancel }} + </button> + <button class="ui basic small compact button tw-mr-0 tw-whitespace-nowrap link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun"> + {{ locale.rerun_all }} + </button> + </div> + <div class="action-summary"> + {{ run.commit.localeCommit }} + <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a> + {{ run.commit.localePushedBy }} + <a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a> + <span class="ui label tw-max-w-full" v-if="run.commit.shortSHA"> + <a class="gt-ellipsis" :href="run.commit.branch.link">{{ run.commit.branch.name }}</a> + </span> + </div> + <div class="action-summary"> + {{ run.commit.localeWorkflow }} + <a class="muted" :href="workflowURL">{{ workflowName }}</a> + </div> + </div> + <div class="action-view-body"> + <div class="action-view-left"> + <div class="job-group-section"> + <div class="job-brief-list"> + <a class="job-brief-item" :href="run.link+'/jobs/'+index" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id" @mouseleave="onHoverRerunIndex = -1"> + <div class="job-brief-item-left"> + <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/> + <span class="job-brief-name tw-mx-2 gt-ellipsis">{{ job.name }}</span> + </div> + <span class="job-brief-item-right"> + <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun && onHoverRerunIndex === job.id"/> + <span class="step-summary-duration">{{ job.duration }}</span> + </span> + </a> + </div> + </div> + <div class="job-artifacts" v-if="artifacts.length > 0"> + <div class="job-artifacts-title"> + {{ locale.artifactsTitle }} + </div> + <ul class="job-artifacts-list"> + <li class="job-artifacts-item" v-for="artifact in artifacts" :key="artifact.name"> + <a class="job-artifacts-link" target="_blank" :href="run.link+'/artifacts/'+artifact.name"> + <SvgIcon name="octicon-file" class="ui text black job-artifacts-icon"/>{{ artifact.name }} + </a> + <a v-if="run.canDeleteArtifact" @click="deleteArtifact(artifact.name)" class="job-artifacts-delete"> + <SvgIcon name="octicon-trash" class="ui text black job-artifacts-icon"/> + </a> + </li> + </ul> + </div> + </div> + + <div class="action-view-right"> + <div class="job-info-header"> + <div class="job-info-header-left gt-ellipsis"> + <h3 class="job-info-header-title gt-ellipsis"> + {{ currentJob.title }} + </h3> + <p class="job-info-header-detail"> + {{ currentJob.detail }} + </p> + </div> + <div class="job-info-header-right"> + <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible"> + <button class="btn gt-interact-bg tw-p-2"> + <SvgIcon name="octicon-gear" :size="18"/> + </button> + <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> + <a class="item" tabindex="0" @click="toggleTimeDisplay('seconds')" @keyup.space="toggleTimeDisplay('seconds')" @keyup.enter="toggleTimeDisplay('seconds')"> + <i class="icon"><SvgIcon :name="timeVisible['log-time-seconds'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> + {{ locale.showLogSeconds }} + </a> + <a class="item" tabindex="0" @click="toggleTimeDisplay('stamp')" @keyup.space="toggleTimeDisplay('stamp')" @keyup.enter="toggleTimeDisplay('stamp')"> + <i class="icon"><SvgIcon :name="timeVisible['log-time-stamp'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> + {{ locale.showTimeStamps }} + </a> + <a class="item" tabindex="0" @click="toggleFullScreen()" @keyup.space="toggleFullScreen()" @keyup.enter="toggleFullScreen()"> + <i class="icon"><SvgIcon :name="isFullScreen ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> + {{ locale.showFullScreen }} + </a> + <div class="divider"/> + <a :class="['item', !currentJob.steps.length ? 'disabled' : '']" :href="run.link+'/jobs/'+jobIndex+'/logs'" target="_blank"> + <i class="icon"><SvgIcon name="octicon-download"/></i> + {{ locale.downloadLogs }} + </a> + </div> + </div> + </div> + </div> + <div class="job-step-container" ref="steps" v-if="currentJob.steps.length"> + <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i"> + <div class="job-step-summary" tabindex="0" @click.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" @keyup.enter.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" @keyup.space.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']"> + <!-- If the job is done and the job step log is loaded for the first time, show the loading icon + currentJobStepsStates[i].cursor === null means the log is loaded for the first time + --> + <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 job-status-rotate"/> + <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/> + <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/> + + <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span> + <span class="step-summary-duration">{{ jobStep.duration }}</span> + </div> + + <!-- the log elements could be a lot, do not use v-if to destroy/reconstruct the DOM, + use native DOM elements for "log line" to improve performance, Vue is not suitable for managing so many reactive elements. --> + <div class="job-step-logs" ref="logs" v-show="currentJobStepsStates[i].expanded"/> + </div> + </div> + </div> + </div> + </div> +</template> +<style scoped> +.action-view-body { + padding-top: 12px; + padding-bottom: 12px; + display: flex; + gap: 12px; +} + +/* ================ */ +/* action view header */ + +.action-view-header { + margin-top: 8px; +} + +.action-info-summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.action-info-summary-title { + display: flex; +} + +.action-info-summary-title-text { + font-size: 20px; + margin: 0 0 0 8px; + flex: 1; + overflow-wrap: anywhere; +} + +.action-summary { + display: flex; + flex-wrap: wrap; + gap: 5px; + margin-left: 28px; +} + +@media (max-width: 767.98px) { + .action-commit-summary { + margin-left: 0; + margin-top: 8px; + } +} + +/* ================ */ +/* action view left */ + +.action-view-left { + width: 30%; + max-width: 400px; + position: sticky; + top: 12px; + max-height: 100vh; + overflow-y: auto; + background: var(--color-body); + z-index: 2; /* above .job-info-header */ +} + +@media (max-width: 767.98px) { + .action-view-left { + position: static; /* can not sticky because multiple jobs would overlap into right view */ + } +} + +.job-artifacts-title { + font-size: 18px; + margin-top: 16px; + padding: 16px 10px 0 20px; + border-top: 1px solid var(--color-secondary); +} + +.job-artifacts-item { + margin: 5px 0; + padding: 6px; + display: flex; + justify-content: space-between; +} + +.job-artifacts-list { + padding-left: 12px; + list-style: none; +} + +.job-artifacts-icon { + padding-right: 3px; +} + +.job-brief-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.job-brief-item { + padding: 10px; + border-radius: var(--border-radius); + text-decoration: none; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + color: var(--color-text); +} + +.job-brief-item:hover { + background-color: var(--color-hover); +} + +.job-brief-item.selected { + font-weight: var(--font-weight-bold); + background-color: var(--color-active); +} + +.job-brief-item:first-of-type { + margin-top: 0; +} + +.job-brief-item .job-brief-rerun { + cursor: pointer; + transition: transform 0.2s; +} + +.job-brief-item .job-brief-rerun:hover { + transform: scale(130%); +} + +.job-brief-item .job-brief-item-left { + display: flex; + width: 100%; + min-width: 0; +} + +.job-brief-item .job-brief-item-left span { + display: flex; + align-items: center; +} + +.job-brief-item .job-brief-item-left .job-brief-name { + display: block; + width: 70%; +} + +.job-brief-item .job-brief-item-right { + display: flex; + align-items: center; +} + +/* ================ */ +/* action view right */ + +.action-view-right { + flex: 1; + color: var(--color-console-fg-subtle); + max-height: 100%; + width: 70%; + display: flex; + flex-direction: column; + border: 1px solid var(--color-console-border); + border-radius: var(--border-radius); + background: var(--color-console-bg); + align-self: flex-start; +} + +/* begin fomantic button overrides */ + +.action-view-right .ui.button, +.action-view-right .ui.button:focus { + background: transparent; + color: var(--color-console-fg-subtle); +} + +.action-view-right .ui.button:hover { + background: var(--color-console-hover-bg); + color: var(--color-console-fg); +} + +.action-view-right .ui.button:active { + background: var(--color-console-active-bg); + color: var(--color-console-fg); +} + +/* end fomantic button overrides */ + +/* begin fomantic dropdown menu overrides */ + +.action-view-right .ui.dropdown .menu { + background: var(--color-console-menu-bg); + border-color: var(--color-console-menu-border); +} + +.action-view-right .ui.dropdown .menu > .item { + color: var(--color-console-fg); +} + +.action-view-right .ui.dropdown .menu > .item:hover { + color: var(--color-console-fg); + background: var(--color-console-hover-bg); +} + +.action-view-right .ui.dropdown .menu > .item:active { + color: var(--color-console-fg); + background: var(--color-console-active-bg); +} + +.action-view-right .ui.dropdown .menu > .divider { + border-top-color: var(--color-console-menu-border); +} + +.action-view-right .ui.pointing.dropdown > .menu:not(.hidden)::after { + background: var(--color-console-menu-bg); + box-shadow: -1px -1px 0 0 var(--color-console-menu-border); +} + +/* end fomantic dropdown menu overrides */ + +.job-info-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 12px; + position: sticky; + top: 0; + height: 60px; + z-index: 1; /* above .job-step-container */ + background: var(--color-console-bg); + border-radius: 3px; +} + +.job-info-header:has(+ .job-step-container) { + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +.job-info-header .job-info-header-title { + color: var(--color-console-fg); + font-size: 16px; + margin: 0; +} + +.job-info-header .job-info-header-detail { + color: var(--color-console-fg-subtle); + font-size: 12px; +} + +.job-info-header-left { + flex: 1; +} + +.job-step-container { + max-height: 100%; + border-radius: 0 0 var(--border-radius) var(--border-radius); + border-top: 1px solid var(--color-console-border); + z-index: 0; +} + +.job-step-container .job-step-summary { + padding: 5px 10px; + display: flex; + align-items: center; + border-radius: var(--border-radius); +} + +.job-step-container .job-step-summary.step-expandable { + cursor: pointer; +} + +.job-step-container .job-step-summary.step-expandable:hover { + color: var(--color-console-fg); + background: var(--color-console-hover-bg); +} + +.job-step-container .job-step-summary .step-summary-msg { + flex: 1; +} + +.job-step-container .job-step-summary .step-summary-duration { + margin-left: 16px; +} + +.job-step-container .job-step-summary.selected { + color: var(--color-console-fg); + background-color: var(--color-console-active-bg); + position: sticky; + top: 60px; +} + +@media (max-width: 767.98px) { + .action-view-body { + flex-direction: column; + } + .action-view-left, .action-view-right { + width: 100%; + } + .action-view-left { + max-width: none; + } +} +</style> + +<style> +/* some elements are not managed by vue, so we need to use global style */ +.job-status-rotate { + animation: job-status-rotate-keyframes 1s linear infinite; +} + +@keyframes job-status-rotate-keyframes { + 100% { + transform: rotate(-360deg); + } +} + +.job-step-section { + margin: 10px; +} + +.job-step-section .job-step-logs { + font-family: var(--fonts-monospace); + margin: 8px 0; + font-size: 12px; +} + +.job-step-section .job-step-logs .job-log-line { + display: flex; +} + +.job-log-line:hover, +.job-log-line:target { + background-color: var(--color-console-hover-bg); +} + +.job-log-line:target { + scroll-margin-top: 95px; +} + +/* class names 'log-time-seconds' and 'log-time-stamp' are used in the method toggleTimeDisplay */ +.job-log-line .line-num, .log-time-seconds { + width: 48px; + color: var(--color-text-light-3); + text-align: right; + user-select: none; +} + +.job-log-line:target > .line-num { + color: var(--color-primary); + text-decoration: underline; +} + +.log-time-seconds { + padding-right: 2px; +} + +.job-log-line .log-time, +.log-time-stamp { + color: var(--color-text-light-3); + margin-left: 10px; + white-space: nowrap; +} + +.job-step-section .job-step-logs .job-log-line .log-msg { + flex: 1; + word-break: break-all; + white-space: break-spaces; + margin-left: 10px; + overflow-wrap: anywhere; +} + +/* selectors here are intentionally exact to only match fullscreen */ + +.full.height > .action-view-right { + width: 100%; + height: 100%; + padding: 0; + border-radius: 0; +} + +.full.height > .action-view-right > .job-info-header { + border-radius: 0; +} + +.full.height > .action-view-right > .job-step-container { + height: calc(100% - 60px); + border-radius: 0; +} + +.job-log-list.hidden { + display: none; +} +</style> diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue new file mode 100644 index 0000000..3752bc5 --- /dev/null +++ b/web_src/js/components/RepoActivityTopAuthors.vue @@ -0,0 +1,164 @@ +<script> +import {Bar} from 'vue-chartjs'; +import { + Chart, + Tooltip, + BarElement, + CategoryScale, + LinearScale, +} from 'chart.js'; +import {chartJsColors} from '../utils/color.js'; +import {createApp} from 'vue'; + +Chart.defaults.color = chartJsColors.text; +Chart.defaults.borderColor = chartJsColors.border; + +Chart.register( + CategoryScale, + LinearScale, + BarElement, + Tooltip, +); + +const sfc = { + components: {Bar}, + props: { + locale: { + type: Object, + required: true, + }, + }, + data: () => ({ + colors: { + barColor: 'green', + }, + + // possible keys: + // * avatar_link: (...) + // * commits: (...) + // * home_link: (...) + // * login: (...) + // * name: (...) + activityTopAuthors: window.config.pageData.repoActivityTopAuthors || [], + i18nCommitActivity: this, + }), + methods: { + graphPoints() { + return { + datasets: [{ + label: this.locale.commitActivity, + data: this.activityTopAuthors.map((item) => item.commits), + backgroundColor: this.colors.barColor, + barThickness: 40, + borderWidth: 0, + tension: 0.3, + }], + labels: this.activityTopAuthors.map((item) => item.name), + }; + }, + getOptions() { + return { + responsive: true, + maintainAspectRatio: false, + animation: true, + scales: { + x: { + type: 'category', + grid: { + display: false, + }, + ticks: { + // Disable the drawing of the labels on the x-asis and force them all + // of them to be 'shown', this avoids them being internally skipped + // for some data points. We rely on the internally generated ticks + // to know where to draw our own ticks. Set rotation to 90 degree + // and disable autoSkip. autoSkip is disabled to ensure no ticks are + // skipped and rotation is set to avoid messing with the width of the chart. + color: 'transparent', + minRotation: 90, + maxRotation: 90, + autoSkip: false, + }, + }, + y: { + ticks: { + stepSize: 1, + }, + }, + }, + }; + }, + }, + mounted() { + const refStyle = window.getComputedStyle(this.$refs.style); + this.colors.barColor = refStyle.backgroundColor; + + for (const item of this.activityTopAuthors) { + const img = new Image(); + img.src = item.avatar_link; + item.avatar_img = img; + } + + Chart.register({ + id: 'image_label', + afterDraw: (chart) => { + const xAxis = chart.boxes[0]; + const yAxis = chart.boxes[1]; + for (const [index] of xAxis.ticks.entries()) { + const x = xAxis.getPixelForTick(index); + const img = this.activityTopAuthors[index].avatar_img; + + chart.ctx.save(); + chart.ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, x - 10, yAxis.bottom + 10, 20, 20); + chart.ctx.restore(); + } + }, + beforeEvent: (chart, args) => { + const event = args.event; + if (event.type !== 'mousemove' && event.type !== 'click') return; + + const yAxis = chart.boxes[1]; + if (event.y < yAxis.bottom + 10 || event.y > yAxis.bottom + 30) { + chart.canvas.style.cursor = ''; + return; + } + + const xAxis = chart.boxes[0]; + const pointIdx = xAxis.ticks.findIndex((_, index) => { + const x = xAxis.getPixelForTick(index); + return event.x >= x - 10 && event.x <= x + 10; + }); + + if (pointIdx === -1) { + chart.canvas.style.cursor = ''; + return; + } + + chart.canvas.style.cursor = 'pointer'; + if (event.type === 'click' && this.activityTopAuthors[pointIdx].home_link) { + window.location.href = this.activityTopAuthors[pointIdx].home_link; + } + }, + }); + }, +}; + +export function initRepoActivityTopAuthorsChart() { + const el = document.getElementById('repo-activity-top-authors-chart'); + if (el) { + createApp(sfc, { + locale: { + commitActivity: el.getAttribute('data-locale-commit-activity'), + }, + }).mount(el); + } +} + +export default sfc; // activate the IDE's Vue plugin +</script> +<template> + <div> + <div class="activity-bar-graph" ref="style" style="width: 0; height: 0;"/> + <Bar height="150px" :data="graphPoints()" :options="getOptions()"/> + </div> +</template> diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue new file mode 100644 index 0000000..bfba203 --- /dev/null +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -0,0 +1,357 @@ +<script> +import {createApp, nextTick} from 'vue'; +import $ from 'jquery'; +import {SvgIcon} from '../svg.js'; +import {pathEscapeSegments} from '../utils/url.js'; +import {showErrorToast} from '../modules/toast.js'; +import {GET} from '../modules/fetch.js'; + +const sfc = { + components: {SvgIcon}, + + // no `data()`, at the moment, the `data()` is provided by the init code, which is not ideal and should be fixed in the future + + computed: { + filteredItems() { + const items = this.items.filter((item) => { + return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) && + (!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase())); + }); + + // TODO: fix this anti-pattern: side-effects-in-computed-properties + this.active = !items.length && this.showCreateNewBranch ? 0 : -1; + return items; + }, + showNoResults() { + return !this.filteredItems.length && !this.showCreateNewBranch; + }, + showCreateNewBranch() { + if (this.disableCreateBranch || !this.searchTerm) { + return false; + } + return !this.items.filter((item) => { + return item.name.toLowerCase() === this.searchTerm.toLowerCase(); + }).length; + }, + formActionUrl() { + return `${this.repoLink}/branches/_new/${this.branchNameSubURL}`; + }, + shouldCreateTag() { + return this.mode === 'tags'; + }, + }, + + watch: { + menuVisible(visible) { + if (visible) { + this.focusSearchField(); + this.fetchBranchesOrTags(); + } + }, + }, + + beforeMount() { + if (this.viewType === 'tree') { + this.isViewTree = true; + this.refNameText = this.commitIdShort; + } else if (this.viewType === 'tag') { + this.isViewTag = true; + this.refNameText = this.tagName; + } else { + this.isViewBranch = true; + this.refNameText = this.branchName; + } + + document.body.addEventListener('click', (event) => { + if (this.$el.contains(event.target)) return; + if (this.menuVisible) { + this.menuVisible = false; + } + }); + }, + methods: { + selectItem(item) { + const prev = this.getSelected(); + if (prev !== null) { + prev.selected = false; + } + item.selected = true; + const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix; + if (!this.branchForm) { + window.location.href = url; + } else { + this.isViewTree = false; + this.isViewTag = false; + this.isViewBranch = false; + this.$refs.dropdownRefName.textContent = item.name; + if (this.setAction) { + document.getElementById(this.branchForm)?.setAttribute('action', url); + } else { + $(`#${this.branchForm} input[name="refURL"]`).val(url); + } + $(`#${this.branchForm} input[name="ref"]`).val(item.name); + if (item.tag) { + this.isViewTag = true; + $(`#${this.branchForm} input[name="refType"]`).val('tag'); + } else { + this.isViewBranch = true; + $(`#${this.branchForm} input[name="refType"]`).val('branch'); + } + if (this.submitForm) { + $(`#${this.branchForm}`).trigger('submit'); + } + this.menuVisible = false; + } + }, + createNewBranch() { + if (!this.showCreateNewBranch) return; + $(this.$refs.newBranchForm).trigger('submit'); + }, + focusSearchField() { + nextTick(() => { + this.$refs.searchField.focus(); + }); + }, + getSelected() { + for (let i = 0, j = this.items.length; i < j; ++i) { + if (this.items[i].selected) return this.items[i]; + } + return null; + }, + getSelectedIndexInFiltered() { + for (let i = 0, j = this.filteredItems.length; i < j; ++i) { + if (this.filteredItems[i].selected) return i; + } + return -1; + }, + scrollToActive() { + let el = this.$refs[`listItem${this.active}`]; // eslint-disable-line no-jquery/variable-pattern + if (!el || !el.length) return; + if (Array.isArray(el)) { + el = el[0]; + } + + const cont = this.$refs.scrollContainer; + if (el.offsetTop < cont.scrollTop) { + cont.scrollTop = el.offsetTop; + } else if (el.offsetTop + el.clientHeight > cont.scrollTop + cont.clientHeight) { + cont.scrollTop = el.offsetTop + el.clientHeight - cont.clientHeight; + } + }, + keydown(event) { + if (event.keyCode === 40) { // arrow down + event.preventDefault(); + + if (this.active === -1) { + this.active = this.getSelectedIndexInFiltered(); + } + + if (this.active + (this.showCreateNewBranch ? 0 : 1) >= this.filteredItems.length) { + return; + } + this.active++; + this.scrollToActive(); + } else if (event.keyCode === 38) { // arrow up + event.preventDefault(); + + if (this.active === -1) { + this.active = this.getSelectedIndexInFiltered(); + } + + if (this.active <= 0) { + return; + } + this.active--; + this.scrollToActive(); + } else if (event.keyCode === 13) { // enter + event.preventDefault(); + + if (this.active >= this.filteredItems.length) { + this.createNewBranch(); + } else if (this.active >= 0) { + this.selectItem(this.filteredItems[this.active]); + } + } else if (event.keyCode === 27) { // escape + event.preventDefault(); + this.menuVisible = false; + } + }, + handleTabSwitch(mode) { + if (this.isLoading) return; + this.mode = mode; + this.focusSearchField(); + this.fetchBranchesOrTags(); + }, + async fetchBranchesOrTags() { + if (!['branches', 'tags'].includes(this.mode) || this.isLoading) return; + // only fetch when branch/tag list has not been initialized + if (this.hasListInitialized[this.mode] || + (this.mode === 'branches' && !this.showBranchesInDropdown) || + (this.mode === 'tags' && this.noTag) + ) { + return; + } + this.isLoading = true; + try { + const resp = await GET(`${this.repoLink}/${this.mode}/list`); + const {results} = await resp.json(); + for (const result of results) { + let selected = false; + if (this.mode === 'branches') { + selected = result === this.defaultSelectedRefName; + } else { + selected = result === (this.release ? this.release.tagName : this.defaultSelectedRefName); + } + this.items.push({name: result, url: pathEscapeSegments(result), branch: this.mode === 'branches', tag: this.mode === 'tags', selected}); + } + this.hasListInitialized[this.mode] = true; + } catch (e) { + showErrorToast(`Network error when fetching ${this.mode}, error: ${e}`); + } finally { + this.isLoading = false; + } + }, + }, +}; + +export function initRepoBranchTagSelector(selector) { + for (const [elIndex, elRoot] of document.querySelectorAll(selector).entries()) { + const data = { + csrfToken: window.config.csrfToken, + items: [], + searchTerm: '', + refNameText: '', + menuVisible: false, + release: null, + + isViewTag: false, + isViewBranch: false, + isViewTree: false, + + active: 0, + isLoading: false, + // This means whether branch list/tag list has initialized + hasListInitialized: { + 'branches': false, + 'tags': false, + }, + ...window.config.pageData.branchDropdownDataList[elIndex], + }; + + const comp = {...sfc, data() { return data }}; + createApp(comp).mount(elRoot); + } +} + +export default sfc; // activate IDE's Vue plugin +</script> +<template> + <div class="ui dropdown custom"> + <button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> + <span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis"> + <template v-if="release">{{ textReleaseCompare }}</template> + <template v-else> + <svg-icon v-if="isViewTag" name="octicon-tag"/> + <svg-icon v-else name="octicon-git-branch"/> + <strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ refNameText }}</strong> + </template> + </span> + <svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/> + </button> + <div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak> + <div class="ui icon search input"> + <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i> + <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder"> + </div> + <div v-if="showBranchesInDropdown" class="branch-tag-tab"> + <a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')"> + <svg-icon name="octicon-git-branch" :size="16" class-name="tw-mr-1"/>{{ textBranches }} + </a> + <a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')"> + <svg-icon name="octicon-tag" :size="16" class-name="tw-mr-1"/>{{ textTags }} + </a> + </div> + <div class="branch-tag-divider"/> + <div class="scrolling menu" ref="scrollContainer"> + <svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/> + <div class="loading-indicator is-loading" v-if="isLoading"/> + <div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index"> + {{ item.name }} + <div class="ui label" v-if="item.name===repoDefaultBranch && mode === 'branches'"> + {{ textDefaultBranchLabel }} + </div> + <a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon tw-float-right" :href="rssURLPrefix + item.url" target="_blank" @click.stop> + <!-- creating a lot of Vue component is pretty slow, so we use a static SVG here --> + <svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg> + </a> + </div> + <div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length"> + <a href="#" @click="createNewBranch()"> + <div v-show="shouldCreateTag"> + <i class="reference tags icon"/> + <span v-text="textCreateTag.replace('%s', searchTerm)"/> + </div> + <div v-show="!shouldCreateTag"> + <svg-icon name="octicon-git-branch"/> + <span v-text="textCreateBranch.replace('%s', searchTerm)"/> + </div> + <div class="text small"> + <span v-if="isViewBranch || release">{{ textCreateBranchFrom.replace('%s', branchName) }}</span> + <span v-else-if="isViewTag">{{ textCreateBranchFrom.replace('%s', tagName) }}</span> + <span v-else>{{ textCreateBranchFrom.replace('%s', commitIdShort) }}</span> + </div> + </a> + <form ref="newBranchForm" :action="formActionUrl" method="post"> + <input type="hidden" name="_csrf" :value="csrfToken"> + <input type="hidden" name="new_branch_name" v-model="searchTerm"> + <input type="hidden" name="create_tag" v-model="shouldCreateTag"> + <input type="hidden" name="current_path" v-model="treePath" v-if="treePath"> + </form> + </div> + </div> + <div class="message" v-if="showNoResults && !isLoading"> + {{ noResults }} + </div> + </div> + </div> +</template> +<style scoped> +.branch-tag-tab { + padding: 0 10px; +} + +.branch-tag-item { + display: inline-block; + padding: 10px; + border: 1px solid transparent; + border-bottom: none; +} + +.branch-tag-item.active { + border-color: var(--color-secondary); + background: var(--color-menu); + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); +} + +.branch-tag-divider { + margin-top: -1px !important; + border-top: 1px solid var(--color-secondary); +} + +.scrolling.menu { + border-top: none !important; +} + +.menu .item .rss-icon { + display: none; /* only show RSS icon on hover */ +} + +.menu .item:hover .rss-icon { + display: inline-block; +} + +.scrolling.menu .loading-indicator { + height: 4em; +} +</style> diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue new file mode 100644 index 0000000..1d40d6d --- /dev/null +++ b/web_src/js/components/RepoCodeFrequency.vue @@ -0,0 +1,172 @@ +<script> +import {SvgIcon} from '../svg.js'; +import { + Chart, + Legend, + LinearScale, + TimeScale, + PointElement, + LineElement, + Filler, +} from 'chart.js'; +import {GET} from '../modules/fetch.js'; +import {Line as ChartLine} from 'vue-chartjs'; +import { + startDaysBetween, + firstStartDateAfterDate, + fillEmptyStartDaysWithZeroes, +} from '../utils/time.js'; +import {chartJsColors} from '../utils/color.js'; +import {sleep} from '../utils.js'; +import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm'; + +const {pageData} = window.config; + +Chart.defaults.color = chartJsColors.text; +Chart.defaults.borderColor = chartJsColors.border; + +Chart.register( + TimeScale, + LinearScale, + Legend, + PointElement, + LineElement, + Filler, +); + +export default { + components: {ChartLine, SvgIcon}, + props: { + locale: { + type: Object, + required: true, + }, + }, + data: () => ({ + isLoading: false, + errorText: '', + repoLink: pageData.repoLink || [], + data: [], + }), + mounted() { + this.fetchGraphData(); + }, + methods: { + async fetchGraphData() { + this.isLoading = true; + try { + let response; + do { + response = await GET(`${this.repoLink}/activity/code-frequency/data`); + if (response.status === 202) { + await sleep(1000); // wait for 1 second before retrying + } + } while (response.status === 202); + if (response.ok) { + this.data = await response.json(); + const weekValues = Object.values(this.data); + const start = weekValues[0].week; + const end = firstStartDateAfterDate(new Date()); + const startDays = startDaysBetween(start, end); + this.data = fillEmptyStartDaysWithZeroes(startDays, this.data); + this.errorText = ''; + } else { + this.errorText = response.statusText; + } + } catch (err) { + this.errorText = err.message; + } finally { + this.isLoading = false; + } + }, + + toGraphData(data) { + return { + datasets: [ + { + data: data.map((i) => ({x: i.week, y: i.additions})), + pointRadius: 0, + pointHitRadius: 0, + fill: true, + label: 'Additions', + backgroundColor: chartJsColors['additions'], + borderWidth: 0, + tension: 0.3, + }, + { + data: data.map((i) => ({x: i.week, y: -i.deletions})), + pointRadius: 0, + pointHitRadius: 0, + fill: true, + label: 'Deletions', + backgroundColor: chartJsColors['deletions'], + borderWidth: 0, + tension: 0.3, + }, + ], + }; + }, + + getOptions() { + return { + responsive: true, + maintainAspectRatio: false, + animation: true, + plugins: { + legend: { + display: true, + }, + }, + scales: { + x: { + type: 'time', + grid: { + display: false, + }, + time: { + minUnit: 'month', + }, + ticks: { + maxRotation: 0, + maxTicksLimit: 12, + }, + }, + y: { + ticks: { + maxTicksLimit: 6, + }, + }, + }, + }; + }, + }, +}; +</script> +<template> + <div> + <div class="ui header tw-flex tw-items-center tw-justify-between"> + {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: `Code frequency over the history of ${repoLink.slice(1)}` }} + </div> + <div class="tw-flex ui segment main-graph"> + <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto"> + <div v-if="isLoading"> + <SvgIcon name="octicon-sync" class="tw-mr-2 job-status-rotate"/> + {{ locale.loadingInfo }} + </div> + <div v-else class="text red"> + <SvgIcon name="octicon-x-circle-fill"/> + {{ errorText }} + </div> + </div> + <ChartLine + v-memo="data" v-if="data.length !== 0" + :data="toGraphData(data)" :options="getOptions()" + /> + </div> + </div> +</template> +<style scoped> +.main-graph { + height: 440px; +} +</style> diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue new file mode 100644 index 0000000..dec2599 --- /dev/null +++ b/web_src/js/components/RepoContributors.vue @@ -0,0 +1,431 @@ +<script> +import {SvgIcon} from '../svg.js'; +import { + Chart, + Title, + BarElement, + LinearScale, + TimeScale, + PointElement, + LineElement, + Filler, +} from 'chart.js'; +import {GET} from '../modules/fetch.js'; +import zoomPlugin from 'chartjs-plugin-zoom'; +import {Line as ChartLine} from 'vue-chartjs'; +import { + startDaysBetween, + firstStartDateAfterDate, + fillEmptyStartDaysWithZeroes, +} from '../utils/time.js'; +import {chartJsColors} from '../utils/color.js'; +import {sleep} from '../utils.js'; +import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm'; +import $ from 'jquery'; + +const customEventListener = { + id: 'customEventListener', + afterEvent: (chart, args, opts) => { + // event will be replayed from chart.update when reset zoom, + // so we need to check whether args.replay is true to avoid call loops + if (args.event.type === 'dblclick' && opts.chartType === 'main' && !args.replay) { + chart.resetZoom(); + opts.instance.updateOtherCharts(args.event, true); + } + }, +}; + +Chart.defaults.color = chartJsColors.text; +Chart.defaults.borderColor = chartJsColors.border; + +Chart.register( + TimeScale, + LinearScale, + BarElement, + Title, + PointElement, + LineElement, + Filler, + zoomPlugin, + customEventListener, +); + +export default { + components: {ChartLine, SvgIcon}, + props: { + locale: { + type: Object, + required: true, + }, + repoLink: { + type: String, + required: true, + }, + }, + data: () => ({ + isLoading: false, + errorText: '', + totalStats: {}, + sortedContributors: {}, + type: 'commits', + contributorsStats: [], + xAxisStart: null, + xAxisEnd: null, + xAxisMin: null, + xAxisMax: null, + }), + mounted() { + this.fetchGraphData(); + + $('#repo-contributors').dropdown({ + onChange: (val) => { + this.xAxisMin = this.xAxisStart; + this.xAxisMax = this.xAxisEnd; + this.type = val; + this.sortContributors(); + }, + }); + }, + methods: { + sortContributors() { + const contributors = this.filterContributorWeeksByDateRange(); + const criteria = `total_${this.type}`; + this.sortedContributors = Object.values(contributors) + .filter((contributor) => contributor[criteria] !== 0) + .sort((a, b) => a[criteria] > b[criteria] ? -1 : a[criteria] === b[criteria] ? 0 : 1) + .slice(0, 100); + }, + + async fetchGraphData() { + this.isLoading = true; + try { + let response; + do { + response = await GET(`${this.repoLink}/activity/contributors/data`); + if (response.status === 202) { + await sleep(1000); // wait for 1 second before retrying + } + } while (response.status === 202); + if (response.ok) { + const data = await response.json(); + const {total, ...rest} = data; + // below line might be deleted if we are sure go produces map always sorted by keys + total.weeks = Object.fromEntries(Object.entries(total.weeks).sort()); + + const weekValues = Object.values(total.weeks); + this.xAxisStart = weekValues[0].week; + this.xAxisEnd = firstStartDateAfterDate(new Date()); + const startDays = startDaysBetween(this.xAxisStart, this.xAxisEnd); + total.weeks = fillEmptyStartDaysWithZeroes(startDays, total.weeks); + this.xAxisMin = this.xAxisStart; + this.xAxisMax = this.xAxisEnd; + this.contributorsStats = {}; + for (const [email, user] of Object.entries(rest)) { + user.weeks = fillEmptyStartDaysWithZeroes(startDays, user.weeks); + this.contributorsStats[email] = user; + } + this.sortContributors(); + this.totalStats = total; + this.errorText = ''; + } else { + this.errorText = response.statusText; + } + } catch (err) { + this.errorText = err.message; + } finally { + this.isLoading = false; + } + }, + + filterContributorWeeksByDateRange() { + const filteredData = {}; + const data = this.contributorsStats; + for (const key of Object.keys(data)) { + const user = data[key]; + user.total_commits = 0; + user.total_additions = 0; + user.total_deletions = 0; + user.max_contribution_type = 0; + const filteredWeeks = user.weeks.filter((week) => { + const oneWeek = 7 * 24 * 60 * 60 * 1000; + if (week.week >= this.xAxisMin - oneWeek && week.week <= this.xAxisMax + oneWeek) { + user.total_commits += week.commits; + user.total_additions += week.additions; + user.total_deletions += week.deletions; + if (week[this.type] > user.max_contribution_type) { + user.max_contribution_type = week[this.type]; + } + return true; + } + return false; + }); + // this line is required. See https://github.com/sahinakkaya/gitea/pull/3#discussion_r1396495722 + // for details. + user.max_contribution_type += 1; + + filteredData[key] = {...user, weeks: filteredWeeks}; + } + + return filteredData; + }, + + maxMainGraph() { + // This method calculates maximum value for Y value of the main graph. If the number + // of maximum contributions for selected contribution type is 15.955 it is probably + // better to round it up to 20.000.This method is responsible for doing that. + // Normally, chartjs handles this automatically, but it will resize the graph when you + // zoom, pan etc. I think resizing the graph makes it harder to compare things visually. + const maxValue = Math.max( + ...this.totalStats.weeks.map((o) => o[this.type]), + ); + const [coefficient, exp] = maxValue.toExponential().split('e').map(Number); + if (coefficient % 1 === 0) return maxValue; + return (1 - (coefficient % 1)) * 10 ** exp + maxValue; + }, + + maxContributorGraph() { + // Similar to maxMainGraph method this method calculates maximum value for Y value + // for contributors' graph. If I let chartjs do this for me, it will choose different + // maxY value for each contributors' graph which again makes it harder to compare. + const maxValue = Math.max( + ...this.sortedContributors.map((c) => c.max_contribution_type), + ); + const [coefficient, exp] = maxValue.toExponential().split('e').map(Number); + if (coefficient % 1 === 0) return maxValue; + return (1 - (coefficient % 1)) * 10 ** exp + maxValue; + }, + + toGraphData(data) { + return { + datasets: [ + { + data: data.map((i) => ({x: i.week, y: i[this.type]})), + pointRadius: 0, + pointHitRadius: 0, + fill: 'start', + backgroundColor: chartJsColors[this.type], + borderWidth: 0, + tension: 0.3, + }, + ], + }; + }, + + updateOtherCharts(event, reset) { + const minVal = event.chart.options.scales.x.min; + const maxVal = event.chart.options.scales.x.max; + if (reset) { + this.xAxisMin = this.xAxisStart; + this.xAxisMax = this.xAxisEnd; + this.sortContributors(); + } else if (minVal) { + this.xAxisMin = minVal; + this.xAxisMax = maxVal; + this.sortContributors(); + } + }, + + getOptions(type) { + return { + responsive: true, + maintainAspectRatio: false, + animation: false, + events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove', 'dblclick'], + plugins: { + title: { + display: type === 'main', + text: 'drag: zoom, shift+drag: pan, double click: reset zoom', + position: 'top', + align: 'center', + }, + customEventListener: { + chartType: type, + instance: this, + }, + zoom: { + pan: { + enabled: true, + modifierKey: 'shift', + mode: 'x', + threshold: 20, + onPanComplete: this.updateOtherCharts, + }, + limits: { + x: { + // Check https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#scale-limits + // to know what each option means + min: 'original', + max: 'original', + + // number of milliseconds in 2 weeks. Minimum x range will be 2 weeks when you zoom on the graph + minRange: 2 * 7 * 24 * 60 * 60 * 1000, + }, + }, + zoom: { + drag: { + enabled: type === 'main', + }, + pinch: { + enabled: type === 'main', + }, + mode: 'x', + onZoomComplete: this.updateOtherCharts, + }, + }, + }, + scales: { + x: { + min: this.xAxisMin, + max: this.xAxisMax, + type: 'time', + grid: { + display: false, + }, + time: { + minUnit: 'month', + }, + ticks: { + maxRotation: 0, + maxTicksLimit: type === 'main' ? 12 : 6, + }, + }, + y: { + min: 0, + max: type === 'main' ? this.maxMainGraph() : this.maxContributorGraph(), + ticks: { + maxTicksLimit: type === 'main' ? 6 : 4, + }, + }, + }, + }; + }, + }, +}; +</script> +<template> + <div> + <div class="ui header tw-flex tw-items-center tw-justify-between"> + <div> + <relative-time + v-if="xAxisMin > 0" + format="datetime" + year="numeric" + month="short" + day="numeric" + weekday="" + :datetime="new Date(xAxisMin)" + > + {{ new Date(xAxisMin) }} + </relative-time> + {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "-" }} + <relative-time + v-if="xAxisMax > 0" + format="datetime" + year="numeric" + month="short" + day="numeric" + weekday="" + :datetime="new Date(xAxisMax)" + > + {{ new Date(xAxisMax) }} + </relative-time> + </div> + <div> + <!-- Contribution type --> + <div class="ui dropdown jump" 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"/> + </div> + <div class="menu"> + <div :class="['item', {'selected': type === 'commits'}]" data-value="commits"> + {{ locale.contributionType.commits }} + </div> + <div :class="['item', {'selected': type === 'additions'}]" data-value="additions"> + {{ locale.contributionType.additions }} + </div> + <div :class="['item', {'selected': type === 'deletions'}]" data-value="deletions"> + {{ locale.contributionType.deletions }} + </div> + </div> + </div> + </div> + </div> + <div class="tw-flex ui segment main-graph"> + <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto"> + <div v-if="isLoading"> + <SvgIcon name="octicon-sync" class="tw-mr-2 job-status-rotate"/> + {{ locale.loadingInfo }} + </div> + <div v-else class="text red"> + <SvgIcon name="octicon-x-circle-fill"/> + {{ errorText }} + </div> + </div> + <ChartLine + v-memo="[totalStats.weeks, type]" v-if="Object.keys(totalStats).length !== 0" + :data="toGraphData(totalStats.weeks)" :options="getOptions('main')" + /> + </div> + <div class="contributor-grid"> + <div + v-for="(contributor, index) in sortedContributors" + :key="index" + v-memo="[sortedContributors, type]" + > + <div class="ui top attached header tw-flex tw-flex-1"> + <b class="ui right">#{{ index + 1 }}</b> + <a :href="contributor.home_link"> + <img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link"> + </a> + <div class="tw-ml-2"> + <a v-if="contributor.home_link !== ''" :href="contributor.home_link"><h4>{{ contributor.name }}</h4></a> + <h4 v-else class="contributor-name"> + {{ contributor.name }} + </h4> + <p class="tw-text-12 tw-flex tw-gap-1"> + <strong v-if="contributor.total_commits">{{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}</strong> + <strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong> + <strong v-if="contributor.total_deletions" class="text red"> + {{ contributor.total_deletions.toLocaleString() }}--</strong> + </p> + </div> + </div> + <div class="ui attached segment"> + <div> + <ChartLine + :data="toGraphData(contributor.weeks)" + :options="getOptions('contributor')" + /> + </div> + </div> + </div> + </div> + </div> +</template> +<style scoped> +.main-graph { + height: 260px; + padding-top: 2px; +} + +.contributor-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; +} + +.contributor-grid > * { + min-width: 0; +} + +@media (max-width: 991.98px) { + .contributor-grid { + grid-template-columns: repeat(1, 1fr); + } +} + +.contributor-name { + margin-bottom: 0; +} +</style> diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue new file mode 100644 index 0000000..8759978 --- /dev/null +++ b/web_src/js/components/RepoRecentCommits.vue @@ -0,0 +1,149 @@ +<script> +import {SvgIcon} from '../svg.js'; +import { + Chart, + Tooltip, + BarElement, + LinearScale, + TimeScale, +} from 'chart.js'; +import {GET} from '../modules/fetch.js'; +import {Bar} from 'vue-chartjs'; +import { + startDaysBetween, + firstStartDateAfterDate, + fillEmptyStartDaysWithZeroes, +} from '../utils/time.js'; +import {chartJsColors} from '../utils/color.js'; +import {sleep} from '../utils.js'; +import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm'; + +const {pageData} = window.config; + +Chart.defaults.color = chartJsColors.text; +Chart.defaults.borderColor = chartJsColors.border; + +Chart.register( + TimeScale, + LinearScale, + BarElement, + Tooltip, +); + +export default { + components: {Bar, SvgIcon}, + props: { + locale: { + type: Object, + required: true, + }, + }, + data: () => ({ + isLoading: false, + errorText: '', + repoLink: pageData.repoLink || [], + data: [], + }), + mounted() { + this.fetchGraphData(); + }, + methods: { + async fetchGraphData() { + this.isLoading = true; + try { + let response; + do { + response = await GET(`${this.repoLink}/activity/recent-commits/data`); + if (response.status === 202) { + await sleep(1000); // wait for 1 second before retrying + } + } while (response.status === 202); + if (response.ok) { + const data = await response.json(); + const start = Object.values(data)[0].week; + const end = firstStartDateAfterDate(new Date()); + const startDays = startDaysBetween(start, end); + this.data = fillEmptyStartDaysWithZeroes(startDays, data).slice(-52); + this.errorText = ''; + } else { + this.errorText = response.statusText; + } + } catch (err) { + this.errorText = err.message; + } finally { + this.isLoading = false; + } + }, + + toGraphData(data) { + return { + datasets: [ + { + data: data.map((i) => ({x: i.week, y: i.commits})), + label: 'Commits', + backgroundColor: chartJsColors['commits'], + borderWidth: 0, + tension: 0.3, + }, + ], + }; + }, + + getOptions() { + return { + responsive: true, + maintainAspectRatio: false, + animation: true, + scales: { + x: { + type: 'time', + grid: { + display: false, + }, + time: { + minUnit: 'week', + }, + ticks: { + maxRotation: 0, + maxTicksLimit: 52, + }, + }, + y: { + ticks: { + maxTicksLimit: 6, + }, + }, + }, + }; + }, + }, +}; +</script> +<template> + <div> + <div class="ui header tw-flex tw-items-center tw-justify-between"> + {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }} + </div> + <div class="tw-flex ui segment main-graph"> + <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto"> + <div v-if="isLoading"> + <SvgIcon name="octicon-sync" class="tw-mr-2 job-status-rotate"/> + {{ locale.loadingInfo }} + </div> + <div v-else class="text red"> + <SvgIcon name="octicon-x-circle-fill"/> + {{ errorText }} + </div> + </div> + <Bar + v-memo="data" v-if="data.length !== 0" + :data="toGraphData(data)" :options="getOptions()" + /> + </div> + </div> +</template> +<style scoped> +.main-graph { + height: 250px; +} +</style> diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue new file mode 100644 index 0000000..925e531 --- /dev/null +++ b/web_src/js/components/ScopedAccessTokenSelector.vue @@ -0,0 +1,115 @@ +<script> +import {createApp} from 'vue'; +import {hideElem, showElem} from '../utils/dom.js'; + +const sfc = { + props: { + isAdmin: { + type: Boolean, + required: true, + }, + noAccessLabel: { + type: String, + required: true, + }, + readLabel: { + type: String, + required: true, + }, + writeLabel: { + type: String, + required: true, + }, + }, + + computed: { + categories() { + const categories = [ + 'activitypub', + ]; + if (this.isAdmin) { + categories.push('admin'); + } + categories.push( + 'issue', + 'misc', + 'notification', + 'organization', + 'package', + 'repository', + 'user'); + return categories; + }, + }, + + mounted() { + document.getElementById('scoped-access-submit').addEventListener('click', this.onClickSubmit); + }, + + unmounted() { + document.getElementById('scoped-access-submit').removeEventListener('click', this.onClickSubmit); + }, + + methods: { + onClickSubmit(e) { + e.preventDefault(); + + const warningEl = document.getElementById('scoped-access-warning'); + // check that at least one scope has been selected + for (const el of document.getElementsByClassName('access-token-select')) { + if (el.value) { + // Hide the error if it was visible from previous attempt. + hideElem(warningEl); + // Submit the form. + document.getElementById('scoped-access-form').submit(); + // Don't show the warning. + return; + } + } + // no scopes selected, show validation error + showElem(warningEl); + }, + }, +}; + +export default sfc; + +/** + * Initialize category toggle sections + */ +export function initScopedAccessTokenCategories() { + for (const el of document.getElementsByClassName('scoped-access-token')) { + createApp(sfc, { + isAdmin: el.getAttribute('data-is-admin') === 'true', + noAccessLabel: el.getAttribute('data-no-access-label'), + readLabel: el.getAttribute('data-read-label'), + writeLabel: el.getAttribute('data-write-label'), + }).mount(el); + } +} + +</script> +<template> + <div v-for="category in categories" :key="category" class="field tw-pl-1 tw-pb-1 access-token-category"> + <label class="category-label" :for="'access-token-scope-' + category"> + {{ category }} + </label> + <div class="gitea-select"> + <select + class="ui selection access-token-select" + name="scope" + :id="'access-token-scope-' + category" + > + <option value=""> + {{ noAccessLabel }} + </option> + <option :value="'read:' + category"> + {{ readLabel }} + </option> + <option :value="'write:' + category"> + {{ writeLabel }} + </option> + </select> + </div> + </div> +</template> diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js new file mode 100644 index 0000000..1a5bd6e --- /dev/null +++ b/web_src/js/features/admin/common.js @@ -0,0 +1,258 @@ +import $ from 'jquery'; +import {checkAppUrl} from '../common-global.js'; +import {hideElem, showElem, toggleElem} from '../../utils/dom.js'; +import {POST} from '../../modules/fetch.js'; + +const {appSubUrl} = window.config; + +function onSecurityProtocolChange() { + if (Number(document.getElementById('security_protocol')?.value) > 0) { + showElem('.has-tls'); + } else { + hideElem('.has-tls'); + } +} + +export function initAdminCommon() { + if (!document.querySelector('.page-content.admin')) return; + + // check whether appUrl(ROOT_URL) is correct, if not, show an error message + checkAppUrl(); + + // New user + if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) { + document.getElementById('login_type')?.addEventListener('change', function () { + if (this.value?.substring(0, 1) === '0') { + document.getElementById('user_name')?.removeAttribute('disabled'); + document.getElementById('login_name')?.removeAttribute('required'); + hideElem('.non-local'); + showElem('.local'); + document.getElementById('user_name')?.focus(); + + if (this.getAttribute('data-password') === 'required') { + document.getElementById('password')?.setAttribute('required', 'required'); + } + } else { + if (document.querySelector('.admin.edit.user')) { + document.getElementById('user_name')?.setAttribute('disabled', 'disabled'); + } + document.getElementById('login_name')?.setAttribute('required', 'required'); + showElem('.non-local'); + hideElem('.local'); + document.getElementById('login_name')?.focus(); + + document.getElementById('password')?.removeAttribute('required'); + } + }); + } + + function onUsePagedSearchChange() { + const searchPageSizeElements = document.querySelectorAll('.search-page-size'); + if (document.getElementById('use_paged_search').checked) { + showElem('.search-page-size'); + for (const el of searchPageSizeElements) { + el.querySelector('input')?.setAttribute('required', 'required'); + } + } else { + hideElem('.search-page-size'); + for (const el of searchPageSizeElements) { + el.querySelector('input')?.removeAttribute('required'); + } + } + } + + function onOAuth2Change(applyDefaultValues) { + hideElem('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url'); + for (const input of document.querySelectorAll('.open_id_connect_auto_discovery_url input[required]')) { + input.removeAttribute('required'); + } + + const provider = document.getElementById('oauth2_provider')?.value; + switch (provider) { + case 'openidConnect': + for (const input of document.querySelectorAll('.open_id_connect_auto_discovery_url input')) { + input.setAttribute('required', 'required'); + } + showElem('.open_id_connect_auto_discovery_url'); + break; + default: { + const customURLSettings = document.getElementById(`${provider}_customURLSettings`); + if (!customURLSettings) break; + const customURLRequired = (customURLSettings.getAttribute('data-required') === 'true'); + document.getElementById('oauth2_use_custom_url').checked = customURLRequired; + if (customURLRequired || customURLSettings.getAttribute('data-available') === 'true') { + showElem('.oauth2_use_custom_url'); + } + } + } + onOAuth2UseCustomURLChange(applyDefaultValues); + } + + function onOAuth2UseCustomURLChange(applyDefaultValues) { + const provider = document.getElementById('oauth2_provider')?.value; + hideElem('.oauth2_use_custom_url_field'); + for (const input of document.querySelectorAll('.oauth2_use_custom_url_field input[required]')) { + input.removeAttribute('required'); + } + + if (document.getElementById('oauth2_use_custom_url')?.checked) { + for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) { + const customInput = document.getElementById(`${provider}_${custom}`); + if (!customInput) continue; + if (applyDefaultValues) { + document.getElementById(`oauth2_${custom}`).value = customInput.value; + } + if (customInput.getAttribute('data-available') === 'true') { + for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) { + input.setAttribute('required', 'required'); + } + showElem(`.oauth2_${custom}`); + } + } + } + } + + function onEnableLdapGroupsChange() { + toggleElem(document.getElementById('ldap-group-options'), $('.js-ldap-group-toggle')[0].checked); + } + + // New authentication + if (document.querySelector('.admin.new.authentication')) { + document.getElementById('auth_type')?.addEventListener('change', function () { + hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi'); + + for (const input of document.querySelectorAll('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]')) { + input.removeAttribute('required'); + } + + document.querySelector('.binddnrequired')?.classList.remove('required'); + + const authType = this.value; + switch (authType) { + case '2': // LDAP + showElem('.ldap'); + for (const input of document.querySelectorAll('.binddnrequired input, .ldap div.required:not(.dldap) input')) { + input.setAttribute('required', 'required'); + } + document.querySelector('.binddnrequired')?.classList.add('required'); + break; + case '3': // SMTP + showElem('.smtp'); + showElem('.has-tls'); + for (const input of document.querySelectorAll('.smtp div.required input, .has-tls')) { + input.setAttribute('required', 'required'); + } + break; + case '4': // PAM + showElem('.pam'); + for (const input of document.querySelectorAll('.pam input')) { + input.setAttribute('required', 'required'); + } + break; + case '5': // LDAP + showElem('.dldap'); + for (const input of document.querySelectorAll('.dldap div.required:not(.ldap) input')) { + input.setAttribute('required', 'required'); + } + break; + case '6': // OAuth2 + showElem('.oauth2'); + for (const input of document.querySelectorAll('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input')) { + input.setAttribute('required', 'required'); + } + onOAuth2Change(true); + break; + case '7': // SSPI + showElem('.sspi'); + for (const input of document.querySelectorAll('.sspi div.required input')) { + input.setAttribute('required', 'required'); + } + break; + } + if (authType === '2' || authType === '5') { + onSecurityProtocolChange(); + onEnableLdapGroupsChange(); + } + if (authType === '2') { + onUsePagedSearchChange(); + } + }); + $('#auth_type').trigger('change'); + document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange); + document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange); + document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true)); + document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true)); + $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange); + } + // Edit authentication + if (document.querySelector('.admin.edit.authentication')) { + const authType = document.getElementById('auth_type')?.value; + if (authType === '2' || authType === '5') { + document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange); + $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange); + onEnableLdapGroupsChange(); + if (authType === '2') { + document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange); + } + } else if (authType === '6') { + document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true)); + document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false)); + onOAuth2Change(false); + } + } + + if (document.querySelector('.admin.authentication')) { + $('#auth_name').on('input', function () { + // appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash. + document.getElementById('oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`; + }).trigger('input'); + } + + // Notice + if (document.querySelector('.admin.notice')) { + const detailModal = document.getElementById('detail-modal'); + + // Attach view detail modals + $('.view-detail').on('click', function () { + const description = this.closest('tr').querySelector('.notice-description').textContent; + detailModal.querySelector('.content pre').textContent = description; + $(detailModal).modal('show'); + return false; + }); + + // Select actions + const checkboxes = document.querySelectorAll('.select.table .ui.checkbox input'); + + $('.select.action').on('click', function () { + switch ($(this).data('action')) { + case 'select-all': + for (const checkbox of checkboxes) { + checkbox.checked = true; + } + break; + case 'deselect-all': + for (const checkbox of checkboxes) { + checkbox.checked = false; + } + break; + case 'inverse': + for (const checkbox of checkboxes) { + checkbox.checked = !checkbox.checked; + } + break; + } + }); + document.getElementById('delete-selection')?.addEventListener('click', async function (e) { + e.preventDefault(); + this.classList.add('is-loading', 'disabled'); + const data = new FormData(); + for (const checkbox of checkboxes) { + if (checkbox.checked) { + data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id')); + } + } + await POST(this.getAttribute('data-link'), {data}); + window.location.href = this.getAttribute('data-redirect'); + }); + } +} diff --git a/web_src/js/features/admin/config.js b/web_src/js/features/admin/config.js new file mode 100644 index 0000000..c382342 --- /dev/null +++ b/web_src/js/features/admin/config.js @@ -0,0 +1,24 @@ +import {showTemporaryTooltip} from '../../modules/tippy.js'; +import {POST} from '../../modules/fetch.js'; + +const {appSubUrl} = window.config; + +export function initAdminConfigs() { + const elAdminConfig = document.querySelector('.page-content.admin.config'); + if (!elAdminConfig) return; + + for (const el of elAdminConfig.querySelectorAll('input[type="checkbox"][data-config-dyn-key]')) { + el.addEventListener('change', async () => { + try { + const resp = await POST(`${appSubUrl}/admin/config`, { + data: new URLSearchParams({key: el.getAttribute('data-config-dyn-key'), value: el.checked}), + }); + const json = await resp.json(); + if (json.errorMessage) throw new Error(json.errorMessage); + } catch (ex) { + showTemporaryTooltip(el, ex.toString()); + el.checked = !el.checked; + } + }); + } +} diff --git a/web_src/js/features/admin/emails.js b/web_src/js/features/admin/emails.js new file mode 100644 index 0000000..46fafa7 --- /dev/null +++ b/web_src/js/features/admin/emails.js @@ -0,0 +1,14 @@ +import $ from 'jquery'; + +export function initAdminEmails() { + function linkEmailAction(e) { + const $this = $(this); + $('#form-uid').val($this.data('uid')); + $('#form-email').val($this.data('email')); + $('#form-primary').val($this.data('primary')); + $('#form-activate').val($this.data('activate')); + $('#change-email-modal').modal('show'); + e.preventDefault(); + } + $('.link-email-action').on('click', linkEmailAction); +} diff --git a/web_src/js/features/admin/users.js b/web_src/js/features/admin/users.js new file mode 100644 index 0000000..7cac603 --- /dev/null +++ b/web_src/js/features/admin/users.js @@ -0,0 +1,39 @@ +export function initAdminUserListSearchForm() { + const searchForm = window.config.pageData.adminUserListSearchForm; + if (!searchForm) return; + + const form = document.querySelector('#user-list-search-form'); + if (!form) return; + + for (const button of form.querySelectorAll(`button[name=sort][value="${searchForm.SortType}"]`)) { + button.classList.add('active'); + } + + if (searchForm.StatusFilterMap) { + for (const [k, v] of Object.entries(searchForm.StatusFilterMap)) { + if (!v) continue; + for (const input of form.querySelectorAll(`input[name="status_filter[${k}]"][value="${v}"]`)) { + input.checked = true; + } + } + } + + for (const radio of form.querySelectorAll('input[type=radio]')) { + radio.addEventListener('click', () => { + form.submit(); + }); + } + + const resetButtons = form.querySelectorAll('.j-reset-status-filter'); + for (const button of resetButtons) { + button.addEventListener('click', (e) => { + e.preventDefault(); + for (const input of form.querySelectorAll('input[type=radio]')) { + if (input.name.startsWith('status_filter[')) { + input.checked = false; + } + } + form.submit(); + }); + } +} diff --git a/web_src/js/features/autofocus-end.js b/web_src/js/features/autofocus-end.js new file mode 100644 index 0000000..da71ce9 --- /dev/null +++ b/web_src/js/features/autofocus-end.js @@ -0,0 +1,6 @@ +export function initAutoFocusEnd() { + for (const el of document.querySelectorAll('.js-autofocus-end')) { + el.focus(); // expects only one such element on one page. If there are many, then the last one gets the focus. + el.setSelectionRange(el.value.length, el.value.length); + } +} diff --git a/web_src/js/features/captcha.js b/web_src/js/features/captcha.js new file mode 100644 index 0000000..c803a50 --- /dev/null +++ b/web_src/js/features/captcha.js @@ -0,0 +1,51 @@ +import {isDarkTheme} from '../utils.js'; + +export async function initCaptcha() { + const captchaEl = document.querySelector('#captcha'); + if (!captchaEl) return; + + const siteKey = captchaEl.getAttribute('data-sitekey'); + const isDark = isDarkTheme(); + + const params = { + sitekey: siteKey, + theme: isDark ? 'dark' : 'light', + }; + + switch (captchaEl.getAttribute('data-captcha-type')) { + case 'g-recaptcha': { + if (window.grecaptcha) { + window.grecaptcha.ready(() => { + window.grecaptcha.render(captchaEl, params); + }); + } + break; + } + case 'cf-turnstile': { + if (window.turnstile) { + window.turnstile.render(captchaEl, params); + } + break; + } + case 'h-captcha': { + if (window.hcaptcha) { + window.hcaptcha.render(captchaEl, params); + } + break; + } + case 'm-captcha': { + const {default: mCaptcha} = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@mcaptcha/vanilla-glue'); + mCaptcha.INPUT_NAME = 'm-captcha-response'; + const instanceURL = captchaEl.getAttribute('data-instance-url'); + + mCaptcha.default({ + siteKey: { + instanceUrl: new URL(instanceURL), + key: siteKey, + }, + }); + break; + } + default: + } +} diff --git a/web_src/js/features/citation.js b/web_src/js/features/citation.js new file mode 100644 index 0000000..7e26bff --- /dev/null +++ b/web_src/js/features/citation.js @@ -0,0 +1,50 @@ +import $ from 'jquery'; +import {getCurrentLocale} from '../utils.js'; + +const {pageData} = window.config; + +async function initInputCitationValue(inputContent) { + const [{Cite, plugins}] = await Promise.all([ + import(/* webpackChunkName: "citation-js-core" */'@citation-js/core'), + import(/* webpackChunkName: "citation-js-formats" */'@citation-js/plugin-software-formats'), + import(/* webpackChunkName: "citation-js-bibtex" */'@citation-js/plugin-bibtex'), + ]); + const {citationFileContent} = pageData; + const config = plugins.config.get('@bibtex'); + config.constants.fieldTypes.doi = ['field', 'literal']; + config.constants.fieldTypes.version = ['field', 'literal']; + const citationFormatter = new Cite(citationFileContent); + const lang = getCurrentLocale() || 'en-US'; + const bibtexOutput = citationFormatter.format('bibtex', {lang}); + inputContent.value = bibtexOutput; +} + +export async function initCitationFileCopyContent() { + if (!pageData.citationFileContent) return; + + const inputContent = document.getElementById('citation-copy-content'); + + if (!inputContent) return; + + document.getElementById('cite-repo-button')?.addEventListener('click', async (e) => { + const dropdownBtn = e.target.closest('.ui.dropdown.button'); + dropdownBtn.classList.add('is-loading'); + + try { + try { + await initInputCitationValue(inputContent); + } catch (e) { + console.error(`initCitationFileCopyContent error: ${e}`, e); + return; + } + + inputContent.addEventListener('click', () => { + inputContent.select(); + }); + } finally { + dropdownBtn.classList.remove('is-loading'); + } + + $('#cite-repo-modal').modal('show'); + }); +} diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js new file mode 100644 index 0000000..daf7e2a --- /dev/null +++ b/web_src/js/features/clipboard.js @@ -0,0 +1,32 @@ +import {showTemporaryTooltip} from '../modules/tippy.js'; +import {toAbsoluteUrl} from '../utils.js'; +import {clippie} from 'clippie'; + +const {copy_success, copy_error} = window.config.i18n; + +// Enable clipboard copy from HTML attributes. These properties are supported: +// - data-clipboard-text: Direct text to copy +// - data-clipboard-target: Holds a selector for a <input> or <textarea> whose content is copied +// - data-clipboard-text-type: When set to 'url' will convert relative to absolute urls +export function initGlobalCopyToClipboardListener() { + document.addEventListener('click', async (e) => { + const target = e.target.closest('[data-clipboard-text], [data-clipboard-target]'); + if (!target) return; + + e.preventDefault(); + + let text = target.getAttribute('data-clipboard-text'); + if (!text) { + text = document.querySelector(target.getAttribute('data-clipboard-target'))?.value; + } + + if (text && target.getAttribute('data-clipboard-text-type') === 'url') { + text = toAbsoluteUrl(text); + } + + if (text) { + const success = await clippie(text); + showTemporaryTooltip(target, success ? copy_success : copy_error); + } + }); +} diff --git a/web_src/js/features/code-frequency.js b/web_src/js/features/code-frequency.js new file mode 100644 index 0000000..47e1539 --- /dev/null +++ b/web_src/js/features/code-frequency.js @@ -0,0 +1,21 @@ +import {createApp} from 'vue'; + +export async function initRepoCodeFrequency() { + const el = document.getElementById('repo-code-frequency-chart'); + if (!el) return; + + const {default: RepoCodeFrequency} = await import(/* webpackChunkName: "code-frequency-graph" */'../components/RepoCodeFrequency.vue'); + try { + const View = createApp(RepoCodeFrequency, { + locale: { + loadingTitle: el.getAttribute('data-locale-loading-title'), + loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'), + loadingInfo: el.getAttribute('data-locale-loading-info'), + }, + }); + View.mount(el); + } catch (err) { + console.error('RepoCodeFrequency failed to load', err); + el.textContent = el.getAttribute('data-locale-component-failed-to-load'); + } +} diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js new file mode 100644 index 0000000..07a686f --- /dev/null +++ b/web_src/js/features/codeeditor.js @@ -0,0 +1,191 @@ +import tinycolor from 'tinycolor2'; +import {basename, extname, isObject, isDarkTheme} from '../utils.js'; +import {onInputDebounce} from '../utils/dom.js'; + +const languagesByFilename = {}; +const languagesByExt = {}; + +const baseOptions = { + fontFamily: 'var(--fonts-monospace)', + fontSize: 14, // https://github.com/microsoft/monaco-editor/issues/2242 + guides: {bracketPairs: false, indentation: false}, + links: false, + minimap: {enabled: false}, + occurrencesHighlight: 'off', + overviewRulerLanes: 0, + renderLineHighlight: 'all', + renderLineHighlightOnlyWhenFocus: true, + rulers: false, + scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6}, + scrollBeyondLastLine: false, + automaticLayout: true, +}; + +function getEditorconfig(input) { + try { + return JSON.parse(input.getAttribute('data-editorconfig')); + } catch { + return null; + } +} + +function initLanguages(monaco) { + for (const {filenames, extensions, id} of monaco.languages.getLanguages()) { + for (const filename of filenames || []) { + languagesByFilename[filename] = id; + } + for (const extension of extensions || []) { + languagesByExt[extension] = id; + } + } +} + +function getLanguage(filename) { + return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext'; +} + +function updateEditor(monaco, editor, filename, lineWrapExts) { + editor.updateOptions(getFileBasedOptions(filename, lineWrapExts)); + const model = editor.getModel(); + const language = model.getLanguageId(); + const newLanguage = getLanguage(filename); + if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage); +} + +// export editor for customization - https://github.com/go-gitea/gitea/issues/10409 +function exportEditor(editor) { + if (!window.codeEditors) window.codeEditors = []; + if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor); +} + +export async function createMonaco(textarea, filename, editorOpts) { + const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor'); + + initLanguages(monaco); + let {language, ...other} = editorOpts; + if (!language) language = getLanguage(filename); + + const container = document.createElement('div'); + container.className = 'monaco-editor-container'; + textarea.parentNode.append(container); + + // https://github.com/microsoft/monaco-editor/issues/2427 + // also, monaco can only parse 6-digit hex colors, so we convert the colors to that format + const styles = window.getComputedStyle(document.documentElement); + const getColor = (name) => tinycolor(styles.getPropertyValue(name).trim()).toString('hex6'); + + monaco.editor.defineTheme('gitea', { + base: isDarkTheme() ? 'vs-dark' : 'vs', + inherit: true, + rules: [ + { + background: getColor('--color-code-bg'), + }, + ], + colors: { + 'editor.background': getColor('--color-code-bg'), + 'editor.foreground': getColor('--color-text'), + 'editor.inactiveSelectionBackground': getColor('--color-primary-light-4'), + 'editor.lineHighlightBackground': getColor('--color-editor-line-highlight'), + 'editor.selectionBackground': getColor('--color-primary-light-3'), + 'editor.selectionForeground': getColor('--color-primary-light-3'), + 'editorLineNumber.background': getColor('--color-code-bg'), + 'editorLineNumber.foreground': getColor('--color-secondary-dark-6'), + 'editorWidget.background': getColor('--color-body'), + 'editorWidget.border': getColor('--color-secondary'), + 'input.background': getColor('--color-input-background'), + 'input.border': getColor('--color-input-border'), + 'input.foreground': getColor('--color-input-text'), + 'scrollbar.shadow': getColor('--color-shadow'), + 'progressBar.background': getColor('--color-primary'), + }, + }); + + const editor = monaco.editor.create(container, { + value: textarea.value, + theme: 'gitea', + language, + ...other, + }); + + monaco.editor.addKeybindingRules([ + {keybinding: monaco.KeyCode.Enter, command: null}, // disable enter from accepting code completion + ]); + + const model = editor.getModel(); + model.onDidChangeContent(() => { + textarea.value = editor.getValue({preserveBOM: true}); + textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure + }); + + exportEditor(editor); + + const loading = document.querySelector('.editor-loading'); + if (loading) loading.remove(); + + return {monaco, editor}; +} + +function getFileBasedOptions(filename, lineWrapExts) { + return { + wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off', + }; +} + +function togglePreviewDisplay(previewable) { + const previewTab = document.querySelector('a[data-tab="preview"]'); + if (!previewTab) return; + + if (previewable) { + const newUrl = (previewTab.getAttribute('data-url') || '').replace(/(.*)\/.*/, `$1/markup`); + previewTab.setAttribute('data-url', newUrl); + previewTab.style.display = ''; + } else { + previewTab.style.display = 'none'; + // If the "preview" tab was active, user changes the filename to a non-previewable one, + // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active + if (previewTab.classList.contains('active')) { + const writeTab = document.querySelector('a[data-tab="write"]'); + writeTab.click(); + } + } +} + +export async function createCodeEditor(textarea, filenameInput) { + const filename = basename(filenameInput.value); + const previewableExts = new Set((textarea.getAttribute('data-previewable-extensions') || '').split(',')); + const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(','); + const previewable = previewableExts.has(extname(filename)); + const editorConfig = getEditorconfig(filenameInput); + + togglePreviewDisplay(previewable); + + const {monaco, editor} = await createMonaco(textarea, filename, { + ...baseOptions, + ...getFileBasedOptions(filenameInput.value, lineWrapExts), + ...getEditorConfigOptions(editorConfig), + }); + + filenameInput.addEventListener('input', onInputDebounce(() => { + const filename = filenameInput.value; + const previewable = previewableExts.has(extname(filename)); + togglePreviewDisplay(previewable); + updateEditor(monaco, editor, filename, lineWrapExts); + })); + + return editor; +} + +function getEditorConfigOptions(ec) { + if (!isObject(ec)) return {}; + + const opts = {}; + opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec); + if ('indent_size' in ec) opts.indentSize = Number(ec.indent_size); + if ('tab_width' in ec) opts.tabSize = Number(ec.tab_width) || opts.indentSize; + if ('max_line_length' in ec) opts.rulers = [Number(ec.max_line_length)]; + opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true; + opts.insertSpaces = ec.indent_style === 'space'; + opts.useTabStops = ec.indent_style === 'tab'; + return opts; +} diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js new file mode 100644 index 0000000..6d00d90 --- /dev/null +++ b/web_src/js/features/colorpicker.js @@ -0,0 +1,66 @@ +import {createTippy} from '../modules/tippy.js'; + +export async function initColorPickers() { + const els = document.getElementsByClassName('js-color-picker-input'); + if (!els.length) return; + + await Promise.all([ + import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'), + import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'), + ]); + + for (const el of els) { + initPicker(el); + } +} + +function updateSquare(el, newValue) { + el.style.color = /#[0-9a-f]{6}/i.test(newValue) ? newValue : 'transparent'; +} + +function updatePicker(el, newValue) { + el.setAttribute('color', newValue); +} + +function initPicker(el) { + const input = el.querySelector('input'); + + const square = document.createElement('div'); + square.classList.add('preview-square'); + updateSquare(square, input.value); + el.append(square); + + const picker = document.createElement('hex-color-picker'); + picker.addEventListener('color-changed', (e) => { + input.value = e.detail.value; + input.focus(); + updateSquare(square, e.detail.value); + }); + + input.addEventListener('input', (e) => { + updateSquare(square, e.target.value); + updatePicker(picker, e.target.value); + }); + + createTippy(input, { + trigger: 'focus click', + theme: 'bare', + hideOnClick: true, + content: picker, + placement: 'bottom-start', + interactive: true, + onShow() { + updatePicker(picker, input.value); + }, + }); + + // init precolors + for (const colorEl of el.querySelectorAll('.precolors .color')) { + colorEl.addEventListener('click', (e) => { + const newValue = e.target.getAttribute('data-color-hex'); + input.value = newValue; + input.dispatchEvent(new Event('input', {bubbles: true})); + updateSquare(square, newValue); + }); + } +} diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js new file mode 100644 index 0000000..5a304d9 --- /dev/null +++ b/web_src/js/features/common-global.js @@ -0,0 +1,463 @@ +import $ from 'jquery'; +import '../vendor/jquery.are-you-sure.js'; +import {clippie} from 'clippie'; +import {createDropzone} from './dropzone.js'; +import {showGlobalErrorMessage} from '../bootstrap.js'; +import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js'; +import {svg} from '../svg.js'; +import {hideElem, showElem, toggleElem, initSubmitEventPolyfill, submitEventSubmitter} from '../utils/dom.js'; +import {htmlEscape} from 'escape-goat'; +import {showTemporaryTooltip} from '../modules/tippy.js'; +import {confirmModal} from './comp/ConfirmModal.js'; +import {showErrorToast} from '../modules/toast.js'; +import {request, POST, GET} from '../modules/fetch.js'; +import '../htmx.js'; + +const {appUrl, appSubUrl, csrfToken, i18n} = window.config; + +export function initGlobalFormDirtyLeaveConfirm() { + // Warn users that try to leave a page after entering data into a form. + // Except on sign-in pages, and for forms marked as 'ignore-dirty'. + if (!$('.user.signin').length) { + $('form:not(.ignore-dirty)').areYouSure(); + } +} + +export function initHeadNavbarContentToggle() { + const navbar = document.getElementById('navbar'); + const btn = document.getElementById('navbar-expand-toggle'); + if (!navbar || !btn) return; + + btn.addEventListener('click', () => { + const isExpanded = btn.classList.contains('active'); + navbar.classList.toggle('navbar-menu-open', !isExpanded); + btn.classList.toggle('active', !isExpanded); + }); +} + +export function initFootLanguageMenu() { + async function linkLanguageAction() { + const $this = $(this); + await GET($this.data('url')); + window.location.reload(); + } + + $('.language-menu a[lang]').on('click', linkLanguageAction); +} + +export function initGlobalEnterQuickSubmit() { + $(document).on('keydown', '.js-quick-submit', (e) => { + if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter')) { + handleGlobalEnterQuickSubmit(e.target); + return false; + } + }); +} + +export function initGlobalButtonClickOnEnter() { + $(document).on('keypress', 'div.ui.button,span.ui.button', (e) => { + if (e.code === ' ' || e.code === 'Enter') { + $(e.target).trigger('click'); + e.preventDefault(); + } + }); +} + +// fetchActionDoRedirect does real redirection to bypass the browser's limitations of "location" +// more details are in the backend's fetch-redirect handler +function fetchActionDoRedirect(redirect) { + const form = document.createElement('form'); + const input = document.createElement('input'); + form.method = 'post'; + form.action = `${appSubUrl}/-/fetch-redirect`; + input.type = 'hidden'; + input.name = 'redirect'; + input.value = redirect; + form.append(input); + document.body.append(form); + form.submit(); +} + +async function fetchActionDoRequest(actionElem, url, opt) { + try { + const resp = await request(url, opt); + if (resp.status === 200) { + let {redirect} = await resp.json(); + redirect = redirect || actionElem.getAttribute('data-redirect'); + actionElem.classList.remove('dirty'); // remove the areYouSure check before reloading + if (redirect) { + fetchActionDoRedirect(redirect); + } else { + window.location.reload(); + } + return; + } else if (resp.status >= 400 && resp.status < 500) { + const data = await resp.json(); + // the code was quite messy, sometimes the backend uses "err", sometimes it uses "error", and even "user_error" + // but at the moment, as a new approach, we only use "errorMessage" here, backend can use JSONError() to respond. + if (data.errorMessage) { + showErrorToast(data.errorMessage, {useHtmlBody: data.renderFormat === 'html'}); + } else { + showErrorToast(`server error: ${resp.status}`); + } + } else { + showErrorToast(`server error: ${resp.status}`); + } + } catch (e) { + if (e.name !== 'AbortError') { + console.error('error when doRequest', e); + showErrorToast(`${i18n.network_error} ${e}`); + } + } + actionElem.classList.remove('is-loading', 'loading-icon-2px'); +} + +async function formFetchAction(e) { + if (!e.target.classList.contains('form-fetch-action')) return; + + e.preventDefault(); + const formEl = e.target; + if (formEl.classList.contains('is-loading')) return; + + formEl.classList.add('is-loading'); + if (formEl.clientHeight < 50) { + formEl.classList.add('loading-icon-2px'); + } + + const formMethod = formEl.getAttribute('method') || 'get'; + const formActionUrl = formEl.getAttribute('action'); + const formData = new FormData(formEl); + const formSubmitter = submitEventSubmitter(e); + const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')]; + if (submitterName) { + formData.append(submitterName, submitterValue || ''); + } + + let reqUrl = formActionUrl; + const reqOpt = {method: formMethod.toUpperCase()}; + if (formMethod.toLowerCase() === 'get') { + const params = new URLSearchParams(); + for (const [key, value] of formData) { + params.append(key, value.toString()); + } + const pos = reqUrl.indexOf('?'); + if (pos !== -1) { + reqUrl = reqUrl.slice(0, pos); + } + reqUrl += `?${params.toString()}`; + } else { + reqOpt.body = formData; + } + + await fetchActionDoRequest(formEl, reqUrl, reqOpt); +} + +export function initGlobalCommon() { + // Semantic UI modules. + const $uiDropdowns = $('.ui.dropdown'); + + // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code. + $uiDropdowns.filter(':not(.custom)').dropdown(); + + // 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({ + action: 'hide', + onShow() { + // hide associated tooltip while dropdown is open + this._tippy?.hide(); + this._tippy?.disable(); + }, + onHide() { + this._tippy?.enable(); + + // hide all tippy elements of items after a while. eg: use Enter to click "Copy Link" in the Issue Context Menu + setTimeout(() => { + const $dropdown = $(this); + if ($dropdown.dropdown('is hidden')) { + $(this).find('.menu > .item').each((_, item) => { + item._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. + $uiDropdowns.filter('.upward').dropdown('setting', 'direction', 'upward'); + $uiDropdowns.filter('.downward').dropdown('setting', 'direction', 'downward'); + + $('.tabular.menu .item').tab(); + + initSubmitEventPolyfill(); + document.addEventListener('submit', formFetchAction); + document.addEventListener('click', linkAction); +} + +export function initGlobalDropzone() { + for (const el of document.querySelectorAll('.dropzone')) { + initDropzone(el); + } +} + +export function initDropzone(el) { + const $dropzone = $(el); + const _promise = createDropzone(el, { + url: $dropzone.data('upload-url'), + headers: {'X-Csrf-Token': csrfToken}, + maxFiles: $dropzone.data('max-file'), + maxFilesize: $dropzone.data('max-size'), + acceptedFiles: (['*/*', ''].includes($dropzone.data('accepts'))) ? null : $dropzone.data('accepts'), + addRemoveLinks: true, + dictDefaultMessage: $dropzone.data('default-message'), + dictInvalidFileType: $dropzone.data('invalid-input-type'), + dictFileTooBig: $dropzone.data('file-too-big'), + dictRemoveFile: $dropzone.data('remove-file'), + timeout: 0, + thumbnailMethod: 'contain', + thumbnailWidth: 480, + thumbnailHeight: 480, + init() { + this.on('success', (file, data) => { + file.uuid = data.uuid; + const $input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); + $dropzone.find('.files').append($input); + // Create a "Copy Link" element, to conveniently copy the image + // or file link as Markdown to the clipboard + const copyLinkElement = document.createElement('div'); + copyLinkElement.className = 'tw-text-center'; + // The a element has a hardcoded cursor: pointer because the default is overridden by .dropzone + copyLinkElement.innerHTML = `<a href="#" style="cursor: pointer;">${svg('octicon-copy', 14, 'copy link')} Copy link</a>`; + copyLinkElement.addEventListener('click', async (e) => { + e.preventDefault(); + let fileMarkdown = `[${file.name}](/attachments/${file.uuid})`; + if (file.type.startsWith('image/')) { + fileMarkdown = `!${fileMarkdown}`; + } else if (file.type.startsWith('video/')) { + fileMarkdown = `<video src="/attachments/${file.uuid}" title="${htmlEscape(file.name)}" controls></video>`; + } + const success = await clippie(fileMarkdown); + showTemporaryTooltip(e.target, success ? i18n.copy_success : i18n.copy_error); + }); + file.previewTemplate.append(copyLinkElement); + }); + this.on('removedfile', (file) => { + $(`#${file.uuid}`).remove(); + if ($dropzone.data('remove-url')) { + POST($dropzone.data('remove-url'), { + data: new URLSearchParams({file: file.uuid}), + }); + } + }); + this.on('error', function (file, message) { + showErrorToast(message); + this.removeFile(file); + }); + }, + }); +} + +async function linkAction(e) { + // A "link-action" can post AJAX request to its "data-url" + // Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading. + // If the "link-action" has "data-modal-confirm" attribute, a confirm modal dialog will be shown before taking action. + const el = e.target.closest('.link-action'); + if (!el) return; + + e.preventDefault(); + const url = el.getAttribute('data-url'); + const doRequest = async () => { + el.disabled = true; + await fetchActionDoRequest(el, url, {method: 'POST'}); + el.disabled = false; + }; + + const modalConfirmContent = htmlEscape(el.getAttribute('data-modal-confirm') || ''); + if (!modalConfirmContent) { + await doRequest(); + return; + } + + const isRisky = el.classList.contains('red') || el.classList.contains('yellow') || el.classList.contains('orange') || el.classList.contains('negative'); + if (await confirmModal({content: modalConfirmContent, buttonColor: isRisky ? 'orange' : 'primary'})) { + await doRequest(); + } +} + +export function initGlobalLinkActions() { + function showDeletePopup(e) { + e.preventDefault(); + const $this = $(this || e.target); + const dataArray = $this.data(); + let filter = ''; + if ($this[0].getAttribute('data-modal-id')) { + filter += `#${$this[0].getAttribute('data-modal-id')}`; + } + + const $dialog = $(`.delete.modal${filter}`); + $dialog.find('.name').text($this.data('name')); + for (const [key, value] of Object.entries(dataArray)) { + if (key && key.startsWith('data')) { + $dialog.find(`.${key}`).text(value); + } + } + + $dialog.modal({ + closable: false, + onApprove: async () => { + if ($this.data('type') === 'form') { + $($this.data('form')).trigger('submit'); + return; + } + if ($this[0].getAttribute('hx-confirm')) { + e.detail.issueRequest(true); + return; + } + const postData = new FormData(); + for (const [key, value] of Object.entries(dataArray)) { + if (key && key.startsWith('data')) { + postData.append(key.slice(4), value); + } + if (key === 'id') { + postData.append('id', value); + } + } + + const response = await POST($this.data('url'), {data: postData}); + if (response.ok) { + const data = await response.json(); + window.location.href = data.redirect; + } + }, + }).modal('show'); + } + + // Helpers. + $('.delete-button').on('click', showDeletePopup); + + document.addEventListener('htmx:confirm', (e) => { + e.preventDefault(); + // htmx:confirm is triggered for every HTMX request, even those that don't + // have the `hx-confirm` attribute specified. To avoid opening modals for + // those elements, check if 'e.detail.question' is empty, which contains the + // value of the `hx-confirm` attribute. + if (!e.detail.question) { + e.detail.issueRequest(true); + } else { + showDeletePopup(e); + } + }); +} + +function initGlobalShowModal() { + // 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 '.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. + $('.show-modal').on('click', function (e) { + e.preventDefault(); + const modalSelector = this.getAttribute('data-modal'); + const $modal = $(modalSelector); + if (!$modal.length) { + throw new Error('no modal for this action'); + } + const modalAttrPrefix = 'data-modal-'; + for (const attrib of this.attributes) { + if (!attrib.name.startsWith(modalAttrPrefix)) { + continue; + } + + const attrTargetCombo = attrib.name.substring(modalAttrPrefix.length); + const [attrTargetName, attrTargetAttr] = attrTargetCombo.split('.'); + // try to find target by: "#target" -> ".target" -> "target tag" + let $attrTarget = $modal.find(`#${attrTargetName}`); + if (!$attrTarget.length) $attrTarget = $modal.find(`.${attrTargetName}`); + if (!$attrTarget.length) $attrTarget = $modal.find(`${attrTargetName}`); + if (!$attrTarget.length) continue; // TODO: show errors in dev mode to remind developers that there is a bug + + if (attrTargetAttr) { + $attrTarget[0][attrTargetAttr] = attrib.value; + } else if ($attrTarget[0].matches('input, textarea')) { + $attrTarget.val(attrib.value); // FIXME: add more supports like checkbox + } else { + $attrTarget.text(attrib.value); // FIXME: it should be more strict here, only handle div/span/p + } + } + + $modal.modal('setting', { + onApprove: () => { + // "form-fetch-action" can handle network errors gracefully, + // so keep the modal dialog to make users can re-submit the form if anything wrong happens. + if ($modal.find('.form-fetch-action').length) return false; + }, + }).modal('show'); + }); +} + +export function initGlobalButtons() { + // 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") + $(document).on('click', 'form button.ui.cancel.button', (e) => { + e.preventDefault(); + }); + + $('.show-panel').on('click', function (e) { + // a '.show-panel' element can show a panel, by `data-panel="selector"` + // if it has "toggle" class, it toggles the panel + e.preventDefault(); + const sel = this.getAttribute('data-panel'); + if (this.classList.contains('toggle')) { + toggleElem(sel); + } else { + showElem(sel); + } + }); + + $('.hide-panel').on('click', function (e) { + // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"` + e.preventDefault(); + let sel = this.getAttribute('data-panel'); + if (sel) { + hideElem($(sel)); + return; + } + sel = this.getAttribute('data-panel-closest'); + if (sel) { + hideElem($(this).closest(sel)); + return; + } + // should never happen, otherwise there is a bug in code + showErrorToast('Nothing to hide'); + }); + + initGlobalShowModal(); +} + +/** + * Too many users set their ROOT_URL to wrong value, and it causes a lot of problems: + * * Cross-origin API request without correct cookie + * * Incorrect href in <a> + * * ... + * So we check whether current URL starts with AppUrl(ROOT_URL). + * If they don't match, show a warning to users. + */ +export function checkAppUrl() { + const curUrl = window.location.href; + // some users visit "https://domain/gitea" while appUrl is "https://domain/gitea/", there should be no warning + if (curUrl.startsWith(appUrl) || `${curUrl}/` === appUrl) { + return; + } + showGlobalErrorMessage(`Your ROOT_URL in app.ini is "${appUrl}", it's unlikely matching the site you are visiting. +Mismatched ROOT_URL config causes wrong URL links for web UI/mail content/webhook notification/OAuth2 sign-in.`); +} diff --git a/web_src/js/features/common-issue-list.js b/web_src/js/features/common-issue-list.js new file mode 100644 index 0000000..0c0f6c5 --- /dev/null +++ b/web_src/js/features/common-issue-list.js @@ -0,0 +1,68 @@ +import {isElemHidden, onInputDebounce, submitEventSubmitter, toggleElem} from '../utils/dom.js'; +import {GET} from '../modules/fetch.js'; + +const {appSubUrl} = window.config; +const reIssueIndex = /^(\d+)$/; // eg: "123" +const reIssueSharpIndex = /^#(\d+)$/; // eg: "#123" +const reIssueOwnerRepoIndex = /^([-.\w]+)\/([-.\w]+)#(\d+)$/; // eg: "{owner}/{repo}#{index}" + +// if the searchText can be parsed to an "issue goto link", return the link, otherwise return empty string +export function parseIssueListQuickGotoLink(repoLink, searchText) { + searchText = searchText.trim(); + let targetUrl = ''; + if (repoLink) { + // try to parse it in current repo + if (reIssueIndex.test(searchText)) { + targetUrl = `${repoLink}/issues/${searchText}`; + } else if (reIssueSharpIndex.test(searchText)) { + targetUrl = `${repoLink}/issues/${searchText.substr(1)}`; + } + } else { + // try to parse it for a global search (eg: "owner/repo#123") + const matchIssueOwnerRepoIndex = searchText.match(reIssueOwnerRepoIndex); + if (matchIssueOwnerRepoIndex) { + const [_, owner, repo, index] = matchIssueOwnerRepoIndex; + targetUrl = `${appSubUrl}/${owner}/${repo}/issues/${index}`; + } + } + return targetUrl; +} + +export function initCommonIssueListQuickGoto() { + const goto = document.getElementById('issue-list-quick-goto'); + if (!goto) return; + + const form = goto.closest('form'); + const input = form.querySelector('input[name=q]'); + const repoLink = goto.getAttribute('data-repo-link'); + + form.addEventListener('submit', (e) => { + // if there is no goto button, or the form is submitted by non-quick-goto elements, submit the form directly + let doQuickGoto = !isElemHidden(goto); + const submitter = submitEventSubmitter(e); + if (submitter !== form && submitter !== input && submitter !== goto) doQuickGoto = false; + if (!doQuickGoto) return; + + // if there is a goto button, use its link + e.preventDefault(); + window.location.href = goto.getAttribute('data-issue-goto-link'); + }); + + const onInput = async () => { + const searchText = input.value; + // try to check whether the parsed goto link is valid + let targetUrl = parseIssueListQuickGotoLink(repoLink, searchText); + if (targetUrl) { + const res = await GET(`${targetUrl}/info`); + if (res.status !== 200) targetUrl = ''; + } + // if the input value has changed, then ignore the result + if (input.value !== searchText) return; + + toggleElem(goto, Boolean(targetUrl)); + goto.setAttribute('data-issue-goto-link', targetUrl); + }; + + input.addEventListener('input', onInputDebounce(onInput)); + onInput(); +} diff --git a/web_src/js/features/common-issue-list.test.js b/web_src/js/features/common-issue-list.test.js new file mode 100644 index 0000000..da7ea64 --- /dev/null +++ b/web_src/js/features/common-issue-list.test.js @@ -0,0 +1,16 @@ +import {parseIssueListQuickGotoLink} from './common-issue-list.js'; + +test('parseIssueListQuickGotoLink', () => { + expect(parseIssueListQuickGotoLink('/link', '')).toEqual(''); + expect(parseIssueListQuickGotoLink('/link', 'abc')).toEqual(''); + expect(parseIssueListQuickGotoLink('/link', '123')).toEqual('/link/issues/123'); + expect(parseIssueListQuickGotoLink('/link', '#123')).toEqual('/link/issues/123'); + expect(parseIssueListQuickGotoLink('/link', 'owner/repo#123')).toEqual(''); + + expect(parseIssueListQuickGotoLink('', '')).toEqual(''); + expect(parseIssueListQuickGotoLink('', 'abc')).toEqual(''); + expect(parseIssueListQuickGotoLink('', '123')).toEqual(''); + expect(parseIssueListQuickGotoLink('', '#123')).toEqual(''); + expect(parseIssueListQuickGotoLink('', 'owner/repo#')).toEqual(''); + expect(parseIssueListQuickGotoLink('', 'owner/repo#123')).toEqual('/owner/repo/issues/123'); +}); diff --git a/web_src/js/features/common-organization.js b/web_src/js/features/common-organization.js new file mode 100644 index 0000000..442714a --- /dev/null +++ b/web_src/js/features/common-organization.js @@ -0,0 +1,16 @@ +import {initCompLabelEdit} from './comp/LabelEdit.js'; +import {toggleElem} from '../utils/dom.js'; + +export function initCommonOrganization() { + if (!document.querySelectorAll('.organization').length) { + return; + } + + document.querySelector('.organization.settings.options #org_name')?.addEventListener('input', function () { + const nameChanged = this.value.toLowerCase() !== this.getAttribute('data-org-name').toLowerCase(); + toggleElem('#org-name-change-prompt', nameChanged); + }); + + // Labels + initCompLabelEdit('.organization.settings.labels'); +} diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js new file mode 100644 index 0000000..70e92de --- /dev/null +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -0,0 +1,413 @@ +import '@github/markdown-toolbar-element'; +import '@github/text-expander-element'; +import $ from 'jquery'; +import {attachTribute} from '../tribute.js'; +import {hideElem, showElem, autosize, isElemVisible} from '../../utils/dom.js'; +import {initEasyMDEPaste, initTextareaPaste} from './Paste.js'; +import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js'; +import {renderPreviewPanelContent} from '../repo-editor.js'; +import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js'; +import {initTextExpander} from './TextExpander.js'; +import {showErrorToast} from '../../modules/toast.js'; +import {POST} from '../../modules/fetch.js'; + +let elementIdCounter = 0; + +/** + * validate if the given textarea is non-empty. + * @param {HTMLElement} textarea - The textarea element to be validated. + * @returns {boolean} returns true if validation succeeded. + */ +export function validateTextareaNonEmpty(textarea) { + // When using EasyMDE, the original edit area HTML element is hidden, breaking HTML5 input validation. + // The workaround (https://github.com/sparksuite/simplemde-markdown-editor/issues/324) doesn't work with contenteditable, so we just show an alert. + if (!textarea.value) { + if (isElemVisible(textarea)) { + textarea.required = true; + const form = textarea.closest('form'); + form?.reportValidity(); + } else { + // The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places. + showErrorToast('Require non-empty content'); + } + return false; + } + return true; +} + +class ComboMarkdownEditor { + constructor(container, options = {}) { + container._giteaComboMarkdownEditor = this; + this.options = options; + this.container = container; + } + + async init() { + this.prepareEasyMDEToolbarActions(); + this.setupContainer(); + this.setupTab(); + this.setupDropzone(); + this.setupTextarea(); + + await this.switchToUserPreference(); + } + + applyEditorHeights(el, heights) { + if (!heights) return; + if (heights.minHeight) el.style.minHeight = heights.minHeight; + if (heights.height) el.style.height = heights.height; + if (heights.maxHeight) el.style.maxHeight = heights.maxHeight; + } + + setupContainer() { + initTextExpander(this.container.querySelector('text-expander')); + this.container.addEventListener('ce-editor-content-changed', (e) => this.options?.onContentChanged?.(this, e)); + } + + setupTextarea() { + this.textarea = this.container.querySelector('.markdown-text-editor'); + this.textarea._giteaComboMarkdownEditor = this; + this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter++)}`; + this.textarea.addEventListener('input', (e) => this.options?.onContentChanged?.(this, e)); + this.applyEditorHeights(this.textarea, this.options.editorHeights); + + if (this.textarea.getAttribute('data-disable-autosize') !== 'true') { + this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130}); + } + + this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar'); + this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id); + for (const el of this.textareaMarkdownToolbar.querySelectorAll('.markdown-toolbar-button')) { + // upstream bug: The role code is never executed in base MarkdownButtonElement https://github.com/github/markdown-toolbar-element/issues/70 + el.setAttribute('role', 'button'); + // the editor usually is in a form, so the buttons should have "type=button", avoiding conflicting with the form's submit. + if (el.nodeName === 'BUTTON' && !el.getAttribute('type')) el.setAttribute('type', 'button'); + } + this.textareaMarkdownToolbar.querySelector('button[data-md-action="indent"]')?.addEventListener('click', () => { + this.indentSelection(false); + }); + this.textareaMarkdownToolbar.querySelector('button[data-md-action="unindent"]')?.addEventListener('click', () => { + this.indentSelection(true); + }); + + this.textarea.addEventListener('keydown', (e) => { + if (e.shiftKey) { + e.target._shiftDown = true; + } + if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.altKey) { + if (!this.breakLine()) return; // Nothing changed, let the default handler work. + this.options?.onContentChanged?.(this, e); + e.preventDefault(); + } + }); + this.textarea.addEventListener('keyup', (e) => { + if (!e.shiftKey) { + e.target._shiftDown = false; + } + }); + + const monospaceButton = this.container.querySelector('.markdown-switch-monospace'); + const monospaceEnabled = localStorage?.getItem('markdown-editor-monospace') === 'true'; + const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text'); + monospaceButton.setAttribute('data-tooltip-content', monospaceText); + monospaceButton.setAttribute('aria-checked', String(monospaceEnabled)); + + monospaceButton?.addEventListener('click', (e) => { + e.preventDefault(); + const enabled = localStorage?.getItem('markdown-editor-monospace') !== 'true'; + localStorage.setItem('markdown-editor-monospace', String(enabled)); + this.textarea.classList.toggle('tw-font-mono', enabled); + const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text'); + monospaceButton.setAttribute('data-tooltip-content', text); + monospaceButton.setAttribute('aria-checked', String(enabled)); + }); + + const easymdeButton = this.container.querySelector('.markdown-switch-easymde'); + easymdeButton?.addEventListener('click', async (e) => { + e.preventDefault(); + this.userPreferredEditor = 'easymde'; + await this.switchToEasyMDE(); + }); + + if (this.dropzone) { + initTextareaPaste(this.textarea, this.dropzone); + } + } + + setupDropzone() { + const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container'); + if (dropzoneParentContainer) { + this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone'); + } + } + + setupTab() { + const $container = $(this.container); + const tabs = $container[0].querySelectorAll('.tabular.menu > .item'); + + // Fomantic Tab requires the "data-tab" to be globally unique. + // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic. + const tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer'); + const tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer'); + tabEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`); + tabPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`); + const panelEditor = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-writer"]'); + const panelPreviewer = $container[0].querySelector('.ui.tab[data-tab-panel="markdown-previewer"]'); + panelEditor.setAttribute('data-tab', `markdown-writer-${elementIdCounter}`); + panelPreviewer.setAttribute('data-tab', `markdown-previewer-${elementIdCounter}`); + elementIdCounter++; + + tabEditor.addEventListener('click', () => { + requestAnimationFrame(() => { + this.focus(); + }); + }); + + $(tabs).tab(); + + this.previewUrl = tabPreviewer.getAttribute('data-preview-url'); + this.previewContext = tabPreviewer.getAttribute('data-preview-context'); + this.previewMode = this.options.previewMode ?? 'comment'; + this.previewWiki = this.options.previewWiki ?? false; + tabPreviewer.addEventListener('click', async () => { + const formData = new FormData(); + formData.append('mode', this.previewMode); + formData.append('context', this.previewContext); + formData.append('text', this.value()); + formData.append('wiki', this.previewWiki); + const response = await POST(this.previewUrl, {data: formData}); + const data = await response.text(); + renderPreviewPanelContent($(panelPreviewer), data); + }); + } + + prepareEasyMDEToolbarActions() { + this.easyMDEToolbarDefault = [ + 'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', + 'heading-bigger', 'heading-smaller', '|', 'code', 'quote', '|', 'gitea-checkbox-empty', + 'gitea-checkbox-checked', '|', 'unordered-list', 'ordered-list', '|', 'link', 'image', + 'table', 'horizontal-rule', '|', 'gitea-switch-to-textarea', + ]; + } + + parseEasyMDEToolbar(EasyMDE, actions) { + this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(EasyMDE, this); + const processed = []; + for (const action of actions) { + const actionButton = this.easyMDEToolbarActions[action]; + if (!actionButton) throw new Error(`Unknown EasyMDE toolbar action ${action}`); + processed.push(actionButton); + } + return processed; + } + + async switchToUserPreference() { + if (this.userPreferredEditor === 'easymde') { + await this.switchToEasyMDE(); + } else { + this.switchToTextarea(); + } + } + + switchToTextarea() { + if (!this.easyMDE) return; + showElem(this.textareaMarkdownToolbar); + if (this.easyMDE) { + this.easyMDE.toTextArea(); + this.easyMDE = null; + } + } + + async switchToEasyMDE() { + if (this.easyMDE) return; + // EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles. + const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde'); + const easyMDEOpt = { + autoDownloadFontAwesome: false, + element: this.textarea, + forceSync: true, + renderingConfig: {singleLineBreaks: false}, + indentWithTabs: false, + tabSize: 4, + spellChecker: false, + inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable + nativeSpellcheck: true, + ...this.options.easyMDEOptions, + }; + easyMDEOpt.toolbar = this.parseEasyMDEToolbar(EasyMDE, easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault); + + this.easyMDE = new EasyMDE(easyMDEOpt); + this.easyMDE.codemirror.on('change', (...args) => {this.options?.onContentChanged?.(this, ...args)}); + this.easyMDE.codemirror.setOption('extraKeys', { + 'Cmd-Enter': (cm) => handleGlobalEnterQuickSubmit(cm.getTextArea()), + 'Ctrl-Enter': (cm) => handleGlobalEnterQuickSubmit(cm.getTextArea()), + Enter: (cm) => { + const tributeContainer = document.querySelector('.tribute-container'); + if (!tributeContainer || tributeContainer.style.display === 'none') { + cm.execCommand('newlineAndIndent'); + } + }, + Up: (cm) => { + const tributeContainer = document.querySelector('.tribute-container'); + if (!tributeContainer || tributeContainer.style.display === 'none') { + return cm.execCommand('goLineUp'); + } + }, + Down: (cm) => { + const tributeContainer = document.querySelector('.tribute-container'); + if (!tributeContainer || tributeContainer.style.display === 'none') { + return cm.execCommand('goLineDown'); + } + }, + }); + this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll'), this.options.editorHeights); + await attachTribute(this.easyMDE.codemirror.getInputField(), {mentions: true, emoji: true}); + initEasyMDEPaste(this.easyMDE, this.dropzone); + hideElem(this.textareaMarkdownToolbar); + } + + value(v = undefined) { + if (v === undefined) { + if (this.easyMDE) { + return this.easyMDE.value(); + } + return this.textarea.value; + } + + if (this.easyMDE) { + this.easyMDE.value(v); + } else { + this.textarea.value = v; + } + this.textareaAutosize?.resizeToFit(); + } + + focus() { + if (this.easyMDE) { + this.easyMDE.codemirror.focus(); + } else { + this.textarea.focus(); + } + } + + moveCursorToEnd() { + this.textarea.focus(); + this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length); + if (this.easyMDE) { + this.easyMDE.codemirror.focus(); + this.easyMDE.codemirror.setCursor(this.easyMDE.codemirror.lineCount(), 0); + } + } + + indentSelection(unindent) { + // Indent with 4 spaces, unindent 4 spaces or fewer or a lost tab. + const indentPrefix = ' '; + const unindentRegex = /^( {1,4}|\t)/; + + // Indent all lines that are included in the selection, partially or whole, while preserving the original selection at the end. + const lines = this.textarea.value.split('\n'); + const changedLines = []; + // The current selection or cursor position. + const [start, end] = [this.textarea.selectionStart, this.textarea.selectionEnd]; + // The range containing whole lines that will effectively be replaced. + let [editStart, editEnd] = [start, end]; + // The range that needs to be re-selected to match previous selection. + let [newStart, newEnd] = [start, end]; + // The start and end position of the current line (where end points to the newline or EOF) + let [lineStart, lineEnd] = [0, 0]; + + for (const line of lines) { + lineEnd = lineStart + line.length + 1; + if (lineEnd <= start) { + lineStart = lineEnd; + continue; + } + + const updated = unindent ? line.replace(unindentRegex, '') : indentPrefix + line; + changedLines.push(updated); + const move = updated.length - line.length; + + if (start >= lineStart && start < lineEnd) { + editStart = lineStart; + newStart = Math.max(start + move, lineStart); + } + + newEnd += move; + editEnd = lineEnd - 1; + lineStart = lineEnd; + if (lineStart > end) break; + } + + // Update changed lines whole. + const text = changedLines.join('\n'); + this.textarea.focus(); + this.textarea.setSelectionRange(editStart, editEnd); + if (!document.execCommand('insertText', false, text)) { + // execCommand is deprecated, but setRangeText (and any other direct value modifications) erases the native undo history. + // So only fall back to it if execCommand fails. + this.textarea.setRangeText(text); + } + + // Set selection to (effectively) be the same as before. + this.textarea.setSelectionRange(newStart, Math.max(newStart, newEnd)); + } + + breakLine() { + const [start, end] = [this.textarea.selectionStart, this.textarea.selectionEnd]; + + // Do nothing if a range is selected + if (start !== end) return false; + + const value = this.textarea.value; + // Find the beginning of the current line. + const lineStart = Math.max(0, value.lastIndexOf('\n', start - 1) + 1); + // Find the end and extract the line. + const lineEnd = value.indexOf('\n', start); + const line = value.slice(lineStart, lineEnd < 0 ? value.length : lineEnd); + // Match any whitespace at the start + any repeatable prefix + exactly one space after. + const prefix = line.match(/^\s*((\d+)[.)]\s|[-*+]\s+(\[[ x]\]\s?)?|(>\s+)+)?/); + + // Defer to browser if we can't do anything more useful, or if the cursor is inside the prefix. + if (!prefix || !prefix[0].length || lineStart + prefix[0].length > start) return false; + + // Insert newline + prefix. + let text = `\n${prefix[0]}`; + // Increment a number if present. (perhaps detecting repeating 1. and not doing that then would be a good idea) + const num = text.match(/\d+/); + if (num) text = text.replace(num[0], Number(num[0]) + 1); + text = text.replace('[x]', '[ ]'); + + if (!document.execCommand('insertText', false, text)) { + this.textarea.setRangeText(text); + } + + return true; + } + + get userPreferredEditor() { + return window.localStorage.getItem(`markdown-editor-${this.options.useScene ?? 'default'}`); + } + set userPreferredEditor(s) { + window.localStorage.setItem(`markdown-editor-${this.options.useScene ?? 'default'}`, s); + } +} + +export function getComboMarkdownEditor(el) { + if (el instanceof $) el = el[0]; + return el?._giteaComboMarkdownEditor; +} + +export async function initComboMarkdownEditor(container, options = {}) { + if (container instanceof $) { + if (container.length !== 1) { + throw new Error('initComboMarkdownEditor: container must be a single element'); + } + container = container[0]; + } + if (!container) { + throw new Error('initComboMarkdownEditor: container is null'); + } + const editor = new ComboMarkdownEditor(container, options); + await editor.init(); + return editor; +} diff --git a/web_src/js/features/comp/ConfirmModal.js b/web_src/js/features/comp/ConfirmModal.js new file mode 100644 index 0000000..e64996a --- /dev/null +++ b/web_src/js/features/comp/ConfirmModal.js @@ -0,0 +1,30 @@ +import $ from 'jquery'; +import {svg} from '../../svg.js'; +import {htmlEscape} from 'escape-goat'; + +const {i18n} = window.config; + +export async function confirmModal(opts = {content: '', buttonColor: 'primary'}) { + return new Promise((resolve) => { + const $modal = $(` +<div class="ui g-modal-confirm modal"> + <div class="content">${htmlEscape(opts.content)}</div> + <div class="actions"> + <button class="ui cancel button">${svg('octicon-x')} ${i18n.modal_cancel}</button> + <button class="ui ${opts.buttonColor || 'primary'} ok button">${svg('octicon-check')} ${i18n.modal_confirm}</button> + </div> +</div> +`); + + $modal.appendTo(document.body); + $modal.modal({ + onApprove() { + resolve(true); + }, + onHidden() { + $modal.remove(); + resolve(false); + }, + }).modal('show'); + }); +} diff --git a/web_src/js/features/comp/EasyMDEToolbarActions.js b/web_src/js/features/comp/EasyMDEToolbarActions.js new file mode 100644 index 0000000..35abb87 --- /dev/null +++ b/web_src/js/features/comp/EasyMDEToolbarActions.js @@ -0,0 +1,152 @@ +import {svg} from '../../svg.js'; + +export function easyMDEToolbarActions(EasyMDE, editor) { + const actions = { + '|': '|', + 'heading-1': { + action: EasyMDE.toggleHeading1, + icon: svg('octicon-heading'), + title: 'Heading 1', + }, + 'heading-2': { + action: EasyMDE.toggleHeading2, + icon: svg('octicon-heading'), + title: 'Heading 2', + }, + 'heading-3': { + action: EasyMDE.toggleHeading3, + icon: svg('octicon-heading'), + title: 'Heading 3', + }, + 'heading-smaller': { + action: EasyMDE.toggleHeadingSmaller, + icon: svg('octicon-heading'), + title: 'Decrease Heading', + }, + 'heading-bigger': { + action: EasyMDE.toggleHeadingBigger, + icon: svg('octicon-heading'), + title: 'Increase Heading', + }, + 'bold': { + action: EasyMDE.toggleBold, + icon: svg('octicon-bold'), + title: 'Bold', + }, + 'italic': { + action: EasyMDE.toggleItalic, + icon: svg('octicon-italic'), + title: 'Italic', + }, + 'strikethrough': { + action: EasyMDE.toggleStrikethrough, + icon: svg('octicon-strikethrough'), + title: 'Strikethrough', + }, + 'quote': { + action: EasyMDE.toggleBlockquote, + icon: svg('octicon-quote'), + title: 'Quote', + }, + 'code': { + action: EasyMDE.toggleCodeBlock, + icon: svg('octicon-code'), + title: 'Code', + }, + 'link': { + action: EasyMDE.drawLink, + icon: svg('octicon-link'), + title: 'Link', + }, + 'unordered-list': { + action: EasyMDE.toggleUnorderedList, + icon: svg('octicon-list-unordered'), + title: 'Unordered List', + }, + 'ordered-list': { + action: EasyMDE.toggleOrderedList, + icon: svg('octicon-list-ordered'), + title: 'Ordered List', + }, + 'image': { + action: EasyMDE.drawImage, + icon: svg('octicon-image'), + title: 'Image', + }, + 'table': { + action: EasyMDE.drawTable, + icon: svg('octicon-table'), + title: 'Table', + }, + 'horizontal-rule': { + action: EasyMDE.drawHorizontalRule, + icon: svg('octicon-horizontal-rule'), + title: 'Horizontal Rule', + }, + 'preview': { + action: EasyMDE.togglePreview, + icon: svg('octicon-eye'), + title: 'Preview', + }, + 'fullscreen': { + action: EasyMDE.toggleFullScreen, + icon: svg('octicon-screen-full'), + title: 'Fullscreen', + }, + 'side-by-side': { + action: EasyMDE.toggleSideBySide, + icon: svg('octicon-columns'), + title: 'Side by Side', + }, + + // Forgejo custom actions + 'gitea-checkbox-empty': { + action(e) { + const cm = e.codemirror; + cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`); + cm.focus(); + }, + icon: svg('gitea-empty-checkbox'), + title: 'Add Checkbox (empty)', + }, + 'gitea-checkbox-checked': { + action(e) { + const cm = e.codemirror; + cm.replaceSelection(`\n- [x] ${cm.getSelection()}`); + cm.focus(); + }, + icon: svg('octicon-checkbox'), + title: 'Add Checkbox (checked)', + }, + 'gitea-switch-to-textarea': { + action: () => { + editor.userPreferredEditor = 'textarea'; + editor.switchToTextarea(); + }, + icon: svg('octicon-arrow-switch'), + title: 'Revert to simple textarea', + }, + 'gitea-code-inline': { + action(e) { + const cm = e.codemirror; + const selection = cm.getSelection(); + cm.replaceSelection(`\`${selection}\``); + if (!selection) { + const cursorPos = cm.getCursor(); + cm.setCursor(cursorPos.line, cursorPos.ch - 1); + } + cm.focus(); + }, + icon: svg('octicon-chevron-right'), + title: 'Add Inline Code', + }, + }; + + for (const [key, value] of Object.entries(actions)) { + if (typeof value !== 'string') { + value.name = key; + } + } + + return actions; +} diff --git a/web_src/js/features/comp/LabelEdit.js b/web_src/js/features/comp/LabelEdit.js new file mode 100644 index 0000000..2cc75cc --- /dev/null +++ b/web_src/js/features/comp/LabelEdit.js @@ -0,0 +1,96 @@ +import $ from 'jquery'; + +function isExclusiveScopeName(name) { + return /.*[^/]\/[^/].*/.test(name); +} + +function updateExclusiveLabelEdit(form) { + const nameInput = document.querySelector(`${form} .label-name-input`); + const exclusiveField = document.querySelector(`${form} .label-exclusive-input-field`); + const exclusiveCheckbox = document.querySelector(`${form} .label-exclusive-input`); + const exclusiveWarning = document.querySelector(`${form} .label-exclusive-warning`); + + if (isExclusiveScopeName(nameInput.value)) { + exclusiveField?.classList.remove('muted'); + exclusiveField?.removeAttribute('aria-disabled'); + if (exclusiveCheckbox.checked && exclusiveCheckbox.getAttribute('data-exclusive-warn')) { + exclusiveWarning?.classList.remove('tw-hidden'); + } else { + exclusiveWarning?.classList.add('tw-hidden'); + } + } else { + exclusiveField?.classList.add('muted'); + exclusiveField?.setAttribute('aria-disabled', 'true'); + exclusiveWarning?.classList.add('tw-hidden'); + } +} + +export function initCompLabelEdit(selector) { + if (!$(selector).length) return; + + // Create label + $('.new-label.button').on('click', () => { + updateExclusiveLabelEdit('.new-label'); + $('.new-label.modal').modal({ + onApprove() { + const form = document.querySelector('.new-label.form'); + if (!form.checkValidity()) { + form.reportValidity(); + return false; + } + $('.new-label.form').trigger('submit'); + }, + }).modal('show'); + return false; + }); + + // Edit label + $('.edit-label-button').on('click', function () { + $('#label-modal-id').val($(this).data('id')); + + const $nameInput = $('.edit-label .label-name-input'); + $nameInput.val($(this).data('title')); + + const $isArchivedCheckbox = $('.edit-label .label-is-archived-input'); + $isArchivedCheckbox[0].checked = this.hasAttribute('data-is-archived'); + + const $exclusiveCheckbox = $('.edit-label .label-exclusive-input'); + $exclusiveCheckbox[0].checked = this.hasAttribute('data-exclusive'); + // Warn when label was previously not exclusive and used in issues + $exclusiveCheckbox.data('exclusive-warn', + $(this).data('num-issues') > 0 && + (!this.hasAttribute('data-exclusive') || !isExclusiveScopeName($nameInput.val()))); + updateExclusiveLabelEdit('.edit-label'); + + $('.edit-label .label-desc-input').val(this.getAttribute('data-description')); + + const colorInput = document.querySelector('.edit-label .js-color-picker-input input'); + colorInput.value = this.getAttribute('data-color'); + colorInput.dispatchEvent(new Event('input', {bubbles: true})); + + $('.edit-label.modal').modal({ + onApprove() { + const form = document.querySelector('.edit-label.form'); + if (!form.checkValidity()) { + form.reportValidity(); + return false; + } + $('.edit-label.form').trigger('submit'); + }, + }).modal('show'); + return false; + }); + + $('.new-label .label-name-input').on('input', () => { + updateExclusiveLabelEdit('.new-label'); + }); + $('.new-label .label-exclusive-input').on('change', () => { + updateExclusiveLabelEdit('.new-label'); + }); + $('.edit-label .label-name-input').on('input', () => { + updateExclusiveLabelEdit('.edit-label'); + }); + $('.edit-label .label-exclusive-input').on('change', () => { + updateExclusiveLabelEdit('.edit-label'); + }); +} diff --git a/web_src/js/features/comp/Paste.js b/web_src/js/features/comp/Paste.js new file mode 100644 index 0000000..7e4ecbb --- /dev/null +++ b/web_src/js/features/comp/Paste.js @@ -0,0 +1,144 @@ +import {POST} from '../../modules/fetch.js'; +import {getPastedContent, replaceTextareaSelection} from '../../utils/dom.js'; +import {isUrl} from '../../utils/url.js'; + +async function uploadFile(file, uploadUrl) { + const formData = new FormData(); + formData.append('file', file, file.name); + + const res = await POST(uploadUrl, {data: formData}); + return await res.json(); +} + +function triggerEditorContentChanged(target) { + target.dispatchEvent(new CustomEvent('ce-editor-content-changed', {bubbles: true})); +} + +class TextareaEditor { + constructor(editor) { + this.editor = editor; + } + + insertPlaceholder(value) { + const editor = this.editor; + const startPos = editor.selectionStart; + const endPos = editor.selectionEnd; + editor.value = editor.value.substring(0, startPos) + value + editor.value.substring(endPos); + editor.selectionStart = startPos; + editor.selectionEnd = startPos + value.length; + editor.focus(); + triggerEditorContentChanged(editor); + } + + replacePlaceholder(oldVal, newVal) { + const editor = this.editor; + const startPos = editor.selectionStart; + const endPos = editor.selectionEnd; + if (editor.value.substring(startPos, endPos) === oldVal) { + editor.value = editor.value.substring(0, startPos) + newVal + editor.value.substring(endPos); + editor.selectionEnd = startPos + newVal.length; + } else { + editor.value = editor.value.replace(oldVal, newVal); + editor.selectionEnd -= oldVal.length; + editor.selectionEnd += newVal.length; + } + editor.selectionStart = editor.selectionEnd; + editor.focus(); + triggerEditorContentChanged(editor); + } +} + +class CodeMirrorEditor { + constructor(editor) { + this.editor = editor; + } + + insertPlaceholder(value) { + const editor = this.editor; + const startPoint = editor.getCursor('start'); + const endPoint = editor.getCursor('end'); + editor.replaceSelection(value); + endPoint.ch = startPoint.ch + value.length; + editor.setSelection(startPoint, endPoint); + editor.focus(); + triggerEditorContentChanged(editor.getTextArea()); + } + + replacePlaceholder(oldVal, newVal) { + const editor = this.editor; + const endPoint = editor.getCursor('end'); + if (editor.getSelection() === oldVal) { + editor.replaceSelection(newVal); + } else { + editor.setValue(editor.getValue().replace(oldVal, newVal)); + } + endPoint.ch -= oldVal.length; + endPoint.ch += newVal.length; + editor.setSelection(endPoint, endPoint); + editor.focus(); + triggerEditorContentChanged(editor.getTextArea()); + } +} + +async function handleClipboardImages(editor, dropzone, images, e) { + const uploadUrl = dropzone.getAttribute('data-upload-url'); + const filesContainer = dropzone.querySelector('.files'); + + if (!dropzone || !uploadUrl || !filesContainer || !images.length) return; + + e.preventDefault(); + e.stopPropagation(); + + for (const img of images) { + const name = img.name.slice(0, img.name.lastIndexOf('.')); + + const placeholder = ``; + editor.insertPlaceholder(placeholder); + + const {uuid} = await uploadFile(img, uploadUrl); + + const url = `/attachments/${uuid}`; + const text = ``; + editor.replacePlaceholder(placeholder, text); + + const input = document.createElement('input'); + input.setAttribute('name', 'files'); + input.setAttribute('type', 'hidden'); + input.setAttribute('id', uuid); + input.value = uuid; + filesContainer.append(input); + } +} + +function handleClipboardText(textarea, text, e) { + // when pasting links over selected text, turn it into [text](link), except when shift key is held + const {value, selectionStart, selectionEnd, _shiftDown} = textarea; + if (_shiftDown) return; + const selectedText = value.substring(selectionStart, selectionEnd); + const trimmedText = text.trim(); + if (selectedText && isUrl(trimmedText) && !isUrl(selectedText)) { + e.stopPropagation(); + e.preventDefault(); + replaceTextareaSelection(textarea, `[${selectedText}](${trimmedText})`); + } +} + +export function initEasyMDEPaste(easyMDE, dropzone) { + easyMDE.codemirror.on('paste', (_, e) => { + const {images} = getPastedContent(e); + if (images.length) { + handleClipboardImages(new CodeMirrorEditor(easyMDE.codemirror), dropzone, images, e); + } + }); +} + +export function initTextareaPaste(textarea, dropzone) { + textarea.addEventListener('paste', (e) => { + const {images, text} = getPastedContent(e); + if (images.length) { + handleClipboardImages(new TextareaEditor(textarea), dropzone, images, e); + } else if (text) { + handleClipboardText(textarea, text, e); + } + }); +} diff --git a/web_src/js/features/comp/QuickSubmit.js b/web_src/js/features/comp/QuickSubmit.js new file mode 100644 index 0000000..e6d7080 --- /dev/null +++ b/web_src/js/features/comp/QuickSubmit.js @@ -0,0 +1,17 @@ +export function handleGlobalEnterQuickSubmit(target) { + const form = target.closest('form'); + if (form) { + if (!form.checkValidity()) { + form.reportValidity(); + return; + } + + // here use the event to trigger the submit event (instead of calling `submit()` method directly) + // otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog + form.dispatchEvent(new SubmitEvent('submit', {bubbles: true, cancelable: true})); + } else { + // if no form, then the editor is for an AJAX request, dispatch an event to the target, let the target's event handler to do the AJAX request. + // the 'ce-' prefix means this is a CustomEvent + target.dispatchEvent(new CustomEvent('ce-quick-submit', {bubbles: true})); + } +} diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js new file mode 100644 index 0000000..fd4601f --- /dev/null +++ b/web_src/js/features/comp/ReactionSelector.js @@ -0,0 +1,38 @@ +import $ from 'jquery'; +import {POST} from '../../modules/fetch.js'; + +export function initCompReactionSelector($parent) { + $parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) { + e.preventDefault(); + + if (this.classList.contains('disabled')) return; + + const actionUrl = this.closest('[data-action-url]')?.getAttribute('data-action-url'); + const reactionContent = this.getAttribute('data-reaction-content'); + const hasReacted = this.closest('.comment')?.querySelector(`.ui.segment.reactions a[data-reaction-content="${reactionContent}"]`)?.getAttribute('data-has-reacted') === 'true'; + + const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { + data: new URLSearchParams({content: reactionContent}), + }); + + const data = await res.json(); + if (data && (data.html || data.empty)) { + const $content = $(this).closest('.content'); + let $react = $content.find('.segment.reactions'); + if ((!data.empty || data.html === '') && $react.length > 0) { + $react.remove(); + } + if (!data.empty) { + const $attachments = $content.find('.segment.bottom:first'); + $react = $(data.html); + if ($attachments.length > 0) { + $react.insertBefore($attachments); + } else { + $react.appendTo($content); + } + $react.find('.dropdown').dropdown(); + initCompReactionSelector($react); + } + } + }); +} diff --git a/web_src/js/features/comp/SearchUserBox.js b/web_src/js/features/comp/SearchUserBox.js new file mode 100644 index 0000000..081c474 --- /dev/null +++ b/web_src/js/features/comp/SearchUserBox.js @@ -0,0 +1,51 @@ +import $ from 'jquery'; +import {htmlEscape} from 'escape-goat'; + +const {appSubUrl} = window.config; +const looksLikeEmailAddressCheck = /^\S+@\S+$/; + +export function initCompSearchUserBox() { + const searchUserBox = document.getElementById('search-user-box'); + if (!searchUserBox) return; + + const $searchUserBox = $(searchUserBox); + const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true'; + const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined; + $searchUserBox.search({ + minCharacters: 2, + apiSettings: { + url: `${appSubUrl}/user/search?active=1&q={query}`, + onResponse(response) { + const items = []; + const searchQuery = $searchUserBox.find('input').val(); + const searchQueryUppercase = searchQuery.toUpperCase(); + $.each(response.data, (_i, item) => { + const resultItem = { + title: item.login, + image: item.avatar_url, + }; + if (item.full_name) { + resultItem.description = htmlEscape(item.full_name); + } + if (searchQueryUppercase === item.login.toUpperCase()) { + items.unshift(resultItem); + } else { + items.push(resultItem); + } + }); + + if (allowEmailInput && !items.length && looksLikeEmailAddressCheck.test(searchQuery)) { + const resultItem = { + title: searchQuery, + description: allowEmailDescription, + }; + items.push(resultItem); + } + + return {results: items}; + }, + }, + searchFields: ['login', 'full_name'], + showNoResults: false, + }); +} diff --git a/web_src/js/features/comp/TextExpander.js b/web_src/js/features/comp/TextExpander.js new file mode 100644 index 0000000..128a2dd --- /dev/null +++ b/web_src/js/features/comp/TextExpander.js @@ -0,0 +1,61 @@ +import {matchEmoji, matchMention} from '../../utils/match.js'; +import {emojiString} from '../emoji.js'; + +export function initTextExpander(expander) { + expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => { + if (key === ':') { + const matches = matchEmoji(text); + if (!matches.length) return provide({matched: false}); + + const ul = document.createElement('ul'); + ul.classList.add('suggestions'); + for (const name of matches) { + const emoji = emojiString(name); + const li = document.createElement('li'); + li.setAttribute('role', 'option'); + li.setAttribute('data-value', emoji); + li.textContent = `${emoji} ${name}`; + ul.append(li); + } + + provide({matched: true, fragment: ul}); + } else if (key === '@') { + const matches = matchMention(text); + if (!matches.length) return provide({matched: false}); + + const ul = document.createElement('ul'); + ul.classList.add('suggestions'); + for (const {value, name, fullname, avatar} of matches) { + const li = document.createElement('li'); + li.setAttribute('role', 'option'); + li.setAttribute('data-value', `${key}${value}`); + + const img = document.createElement('img'); + img.src = avatar; + li.append(img); + + const nameSpan = document.createElement('span'); + nameSpan.textContent = name; + li.append(nameSpan); + + if (fullname && fullname.toLowerCase() !== name) { + const fullnameSpan = document.createElement('span'); + fullnameSpan.classList.add('fullname'); + fullnameSpan.textContent = fullname; + li.append(fullnameSpan); + } + + ul.append(li); + } + + provide({matched: true, fragment: ul}); + } + }); + expander?.addEventListener('text-expander-value', ({detail}) => { + if (detail?.item) { + // add a space after @mentions as it's likely the user wants one + const suffix = detail.key === '@' ? ' ' : ''; + detail.value = `${detail.item.getAttribute('data-value')}${suffix}`; + } + }); +} diff --git a/web_src/js/features/comp/WebHookEditor.js b/web_src/js/features/comp/WebHookEditor.js new file mode 100644 index 0000000..522daa1 --- /dev/null +++ b/web_src/js/features/comp/WebHookEditor.js @@ -0,0 +1,28 @@ +import {POST} from '../../modules/fetch.js'; +import {toggleElem} from '../../utils/dom.js'; + +export function initCompWebHookEditor() { + if (!document.querySelectorAll('.new.webhook').length) { + return; + } + + // some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field + const httpMethodInput = document.getElementById('http_method'); + if (httpMethodInput) { + const updateContentType = function () { + const visible = httpMethodInput.value === 'POST'; + toggleElem(document.getElementById('content_type').closest('.field'), visible); + }; + updateContentType(); + httpMethodInput.addEventListener('change', updateContentType); + } + + // Test delivery + document.getElementById('test-delivery')?.addEventListener('click', async function () { + this.classList.add('is-loading', 'disabled'); + await POST(this.getAttribute('data-link')); + setTimeout(() => { + window.location.href = this.getAttribute('data-redirect'); + }, 5000); + }); +} diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js new file mode 100644 index 0000000..ce90f3e --- /dev/null +++ b/web_src/js/features/contextpopup.js @@ -0,0 +1,43 @@ +import {createApp} from 'vue'; +import ContextPopup from '../components/ContextPopup.vue'; +import {parseIssueHref} from '../utils.js'; +import {createTippy} from '../modules/tippy.js'; + +export function initContextPopups() { + const refIssues = document.querySelectorAll('.ref-issue'); + attachRefIssueContextPopup(refIssues); +} + +export function attachRefIssueContextPopup(refIssues) { + for (const refIssue of refIssues) { + if (refIssue.classList.contains('ref-external-issue')) { + return; + } + + const {owner, repo, index} = parseIssueHref(refIssue.getAttribute('href')); + if (!owner) return; + + const el = document.createElement('div'); + refIssue.parentNode.insertBefore(el, refIssue.nextSibling); + + const view = createApp(ContextPopup); + + try { + view.mount(el); + } catch (err) { + console.error(err); + el.textContent = 'ContextPopup failed to load'; + } + + createTippy(refIssue, { + content: el, + placement: 'top-start', + interactive: true, + role: 'dialog', + interactiveBorder: 5, + onShow: () => { + el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}})); + }, + }); + } +} diff --git a/web_src/js/features/contributors.js b/web_src/js/features/contributors.js new file mode 100644 index 0000000..79b3389 --- /dev/null +++ b/web_src/js/features/contributors.js @@ -0,0 +1,29 @@ +import {createApp} from 'vue'; + +export async function initRepoContributors() { + const el = document.getElementById('repo-contributors-chart'); + if (!el) return; + + const {default: RepoContributors} = await import(/* webpackChunkName: "contributors-graph" */'../components/RepoContributors.vue'); + try { + const View = createApp(RepoContributors, { + repoLink: el.getAttribute('data-repo-link'), + locale: { + filterLabel: el.getAttribute('data-locale-filter-label'), + contributionType: { + commits: el.getAttribute('data-locale-contribution-type-commits'), + additions: el.getAttribute('data-locale-contribution-type-additions'), + deletions: el.getAttribute('data-locale-contribution-type-deletions'), + }, + + loadingTitle: el.getAttribute('data-locale-loading-title'), + loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'), + loadingInfo: el.getAttribute('data-locale-loading-info'), + }, + }); + View.mount(el); + } catch (err) { + console.error('RepoContributors failed to load', err); + el.textContent = el.getAttribute('data-locale-component-failed-to-load'); + } +} diff --git a/web_src/js/features/copycontent.js b/web_src/js/features/copycontent.js new file mode 100644 index 0000000..03efe00 --- /dev/null +++ b/web_src/js/features/copycontent.js @@ -0,0 +1,56 @@ +import {clippie} from 'clippie'; +import {showTemporaryTooltip} from '../modules/tippy.js'; +import {convertImage} from '../utils.js'; +import {GET} from '../modules/fetch.js'; + +const {i18n} = window.config; + +export function initCopyContent() { + const btn = document.getElementById('copy-content'); + if (!btn || btn.classList.contains('disabled')) return; + + btn.addEventListener('click', async () => { + if (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 + // fetched to copy in full resolution + if (link) { + btn.classList.add('is-loading', 'loading-icon-2px'); + try { + const res = await GET(link, {credentials: 'include', redirect: 'follow'}); + const contentType = res.headers.get('content-type'); + + if (contentType.startsWith('image/') && !contentType.startsWith('image/svg')) { + isRasterImage = true; + content = await res.blob(); + } else { + content = await res.text(); + } + } catch { + return showTemporaryTooltip(btn, i18n.copy_error); + } finally { + btn.classList.remove('is-loading', 'loading-icon-2px'); + } + } else { // text, read from DOM + const lineEls = document.querySelectorAll('.file-view .lines-code'); + content = Array.from(lineEls, (el) => el.textContent).join(''); + } + + // 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); + } else { + if (isRasterImage) { + const success = await clippie(await convertImage(content, 'image/png')); + showTemporaryTooltip(btn, success ? i18n.copy_success : i18n.copy_error); + } else { + showTemporaryTooltip(btn, i18n.copy_error); + } + } + }); +} diff --git a/web_src/js/features/dropzone.js b/web_src/js/features/dropzone.js new file mode 100644 index 0000000..e7b8a9d --- /dev/null +++ b/web_src/js/features/dropzone.js @@ -0,0 +1,7 @@ +export async function createDropzone(el, opts) { + const [{Dropzone}] = await Promise.all([ + import(/* webpackChunkName: "dropzone" */'dropzone'), + import(/* webpackChunkName: "dropzone" */'dropzone/dist/dropzone.css'), + ]); + return new Dropzone(el, opts); +} diff --git a/web_src/js/features/emoji.js b/web_src/js/features/emoji.js new file mode 100644 index 0000000..032a3ef --- /dev/null +++ b/web_src/js/features/emoji.js @@ -0,0 +1,38 @@ +import emojis from '../../../assets/emoji.json'; + +const {assetUrlPrefix, customEmojis} = window.config; + +const tempMap = {...customEmojis}; +for (const {emoji, aliases} of emojis) { + for (const alias of aliases || []) { + tempMap[alias] = emoji; + } +} + +export const emojiKeys = Object.keys(tempMap).sort((a, b) => { + if (a === '+1' || a === '-1') return -1; + if (b === '+1' || b === '-1') return 1; + return a.localeCompare(b); +}); + +const emojiMap = {}; +for (const key of emojiKeys) { + emojiMap[key] = tempMap[key]; +} + +// retrieve HTML for given emoji name +export function emojiHTML(name) { + let inner; + if (Object.hasOwn(customEmojis, name)) { + inner = `<img alt=":${name}:" src="${assetUrlPrefix}/img/emoji/${name}.png">`; + } else { + inner = emojiString(name); + } + + return `<span class="emoji" title=":${name}:">${inner}</span>`; +} + +// retrieve string for given emoji name +export function emojiString(name) { + return emojiMap[name] || `:${name}:`; +} diff --git a/web_src/js/features/eventsource.sharedworker.js b/web_src/js/features/eventsource.sharedworker.js new file mode 100644 index 0000000..62581cf --- /dev/null +++ b/web_src/js/features/eventsource.sharedworker.js @@ -0,0 +1,141 @@ +const sourcesByUrl = {}; +const sourcesByPort = {}; + +class Source { + constructor(url) { + this.url = url; + this.eventSource = new EventSource(url); + this.listening = {}; + this.clients = []; + this.listen('open'); + this.listen('close'); + this.listen('logout'); + this.listen('notification-count'); + this.listen('stopwatches'); + this.listen('error'); + } + + register(port) { + if (this.clients.includes(port)) return; + + this.clients.push(port); + + port.postMessage({ + type: 'status', + message: `registered to ${this.url}`, + }); + } + + deregister(port) { + const portIdx = this.clients.indexOf(port); + if (portIdx < 0) { + return this.clients.length; + } + this.clients.splice(portIdx, 1); + return this.clients.length; + } + + close() { + if (!this.eventSource) return; + + this.eventSource.close(); + this.eventSource = null; + } + + listen(eventType) { + if (this.listening[eventType]) return; + this.listening[eventType] = true; + this.eventSource.addEventListener(eventType, (event) => { + this.notifyClients({ + type: eventType, + data: event.data, + }); + }); + } + + notifyClients(event) { + for (const client of this.clients) { + client.postMessage(event); + } + } + + status(port) { + port.postMessage({ + type: 'status', + message: `url: ${this.url} readyState: ${this.eventSource.readyState}`, + }); + } +} + +self.addEventListener('connect', (e) => { + for (const port of e.ports) { + port.addEventListener('message', (event) => { + if (!self.EventSource) { + // some browsers (like PaleMoon, Firefox<53) don't support EventSource in SharedWorkerGlobalScope. + // this event handler needs EventSource when doing "new Source(url)", so just post a message back to the caller, + // in case the caller would like to use a fallback method to do its work. + port.postMessage({type: 'no-event-source'}); + return; + } + if (event.data.type === 'start') { + const url = event.data.url; + if (sourcesByUrl[url]) { + // we have a Source registered to this url + const source = sourcesByUrl[url]; + source.register(port); + sourcesByPort[port] = source; + return; + } + let source = sourcesByPort[port]; + if (source) { + if (source.eventSource && source.url === url) return; + + // How this has happened I don't understand... + // deregister from that source + const count = source.deregister(port); + // Clean-up + if (count === 0) { + source.close(); + sourcesByUrl[source.url] = null; + } + } + // Create a new Source + source = new Source(url); + source.register(port); + sourcesByUrl[url] = source; + sourcesByPort[port] = source; + } else if (event.data.type === 'listen') { + const source = sourcesByPort[port]; + source.listen(event.data.eventType); + } else if (event.data.type === 'close') { + const source = sourcesByPort[port]; + + if (!source) return; + + const count = source.deregister(port); + if (count === 0) { + source.close(); + sourcesByUrl[source.url] = null; + sourcesByPort[port] = null; + } + } else if (event.data.type === 'status') { + const source = sourcesByPort[port]; + if (!source) { + port.postMessage({ + type: 'status', + message: 'not connected', + }); + return; + } + source.status(port); + } else { + // just send it back + port.postMessage({ + type: 'error', + message: `received but don't know how to handle: ${event.data}`, + }); + } + }); + port.start(); + } +}); diff --git a/web_src/js/features/file-fold.js b/web_src/js/features/file-fold.js new file mode 100644 index 0000000..3efefaf --- /dev/null +++ b/web_src/js/features/file-fold.js @@ -0,0 +1,19 @@ +import {svg} from '../svg.js'; + +// Hides the file if newFold is true, and shows it otherwise. The actual hiding is performed using CSS. +// +// The fold arrow is the icon displayed on the upper left of the file box, especially intended for components having the 'fold-file' class. +// The file content box is the box that should be hidden or shown, especially intended for components having the 'file-content' class. +// +export function setFileFolding(fileContentBox, foldArrow, newFold) { + foldArrow.innerHTML = svg(`octicon-chevron-${newFold ? 'right' : 'down'}`, 18); + fileContentBox.setAttribute('data-folded', newFold); + if (newFold && fileContentBox.getBoundingClientRect().top < 0) { + fileContentBox.scrollIntoView(); + } +} + +// Like `setFileFolding`, except that it automatically inverts the current file folding state. +export function invertFileFolding(fileContentBox, foldArrow) { + setFileFolding(fileContentBox, foldArrow, fileContentBox.getAttribute('data-folded') !== 'true'); +} diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js new file mode 100644 index 0000000..688f06c --- /dev/null +++ b/web_src/js/features/heatmap.js @@ -0,0 +1,40 @@ +import {createApp} from 'vue'; +import ActivityHeatmap from '../components/ActivityHeatmap.vue'; +import {translateMonth, translateDay} from '../utils.js'; + +export function initHeatmap() { + const el = document.getElementById('user-heatmap'); + if (!el) return; + + try { + const heatmap = {}; + for (const {contributions, timestamp} of JSON.parse(el.getAttribute('data-heatmap-data'))) { + // Convert to user timezone and sum contributions by date + const dateStr = new Date(timestamp * 1000).toDateString(); + heatmap[dateStr] = (heatmap[dateStr] || 0) + contributions; + } + + const values = Object.keys(heatmap).map((v) => { + return {date: new Date(v), count: heatmap[v]}; + }); + + const locale = { + months: new Array(12).fill().map((_, idx) => translateMonth(idx)), + days: new Array(7).fill().map((_, idx) => translateDay(idx)), + contributions_in_the_last_12_months: el.getAttribute('data-locale-total-contributions'), + contributions_zero: el.getAttribute('data-locale-contributions-zero'), + contributions_format: el.getAttribute('data-locale-contributions-format'), + contributions_one: el.getAttribute('data-locale-contributions-one'), + contributions_few: el.getAttribute('data-locale-contributions-few'), + more: el.getAttribute('data-locale-more'), + less: el.getAttribute('data-locale-less'), + }; + + const View = createApp(ActivityHeatmap, {values, locale}); + View.mount(el); + el.classList.remove('is-loading'); + } catch (err) { + console.error('Heatmap failed to load', err); + el.textContent = 'Heatmap failed to load'; + } +} diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js new file mode 100644 index 0000000..d1b139f --- /dev/null +++ b/web_src/js/features/imagediff.js @@ -0,0 +1,271 @@ +import $ from 'jquery'; +import {GET} from '../modules/fetch.js'; +import {hideElem, loadElem, queryElemChildren} from '../utils/dom.js'; +import {parseDom} from '../utils.js'; + +function getDefaultSvgBoundsIfUndefined(text, src) { + const DefaultSize = 300; + const MaxSize = 99999; + + const svgDoc = parseDom(text, 'image/svg+xml'); + const svg = svgDoc.documentElement; + const width = svg?.width?.baseVal; + const height = svg?.height?.baseVal; + if (width === undefined || height === undefined) { + return null; // in case some svg is invalid or doesn't have the width/height + } + if (width.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE || height.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE) { + const img = new Image(); + img.src = src; + if (img.width > 1 && img.width < MaxSize && img.height > 1 && img.height < MaxSize) { + return { + width: img.width, + height: img.height, + }; + } + if (svg.hasAttribute('viewBox')) { + const viewBox = svg.viewBox.baseVal; + return { + width: DefaultSize, + height: DefaultSize * viewBox.width / viewBox.height, + }; + } + return { + width: DefaultSize, + height: DefaultSize, + }; + } + return null; +} + +function createContext(imageAfter, imageBefore) { + const sizeAfter = { + width: imageAfter?.width || 0, + height: imageAfter?.height || 0, + }; + const sizeBefore = { + width: imageBefore?.width || 0, + height: imageBefore?.height || 0, + }; + const maxSize = { + width: Math.max(sizeBefore.width, sizeAfter.width), + height: Math.max(sizeBefore.height, sizeAfter.height), + }; + + return { + imageAfter, + imageBefore, + sizeAfter, + sizeBefore, + maxSize, + ratio: [ + Math.floor(maxSize.width - sizeAfter.width) / 2, + Math.floor(maxSize.height - sizeAfter.height) / 2, + Math.floor(maxSize.width - sizeBefore.width) / 2, + Math.floor(maxSize.height - sizeBefore.height) / 2, + ], + }; +} + +export function initImageDiff() { + $('.image-diff:not([data-image-diff-loaded])').each(async function() { + const $container = $(this); + this.setAttribute('data-image-diff-loaded', 'true'); + + // the container may be hidden by "viewed" checkbox, so use the parent's width for reference + const diffContainerWidth = Math.max($container.closest('.diff-file-box').width() - 300, 100); + + const imageInfos = [{ + path: this.getAttribute('data-path-after'), + mime: this.getAttribute('data-mime-after'), + $images: $container.find('img.image-after'), // matches 3 <img> + $boundsInfo: $container.find('.bounds-info-after'), + }, { + path: this.getAttribute('data-path-before'), + mime: this.getAttribute('data-mime-before'), + $images: $container.find('img.image-before'), // matches 3 <img> + $boundsInfo: $container.find('.bounds-info-before'), + }]; + + await Promise.all(imageInfos.map(async (info) => { + const [success] = await Promise.all(Array.from(info.$images, (img) => { + return loadElem(img, info.path); + })); + // only the first images is associated with $boundsInfo + if (!success) info.$boundsInfo.text('(image error)'); + if (info.mime === 'image/svg+xml') { + const resp = await GET(info.path); + const text = await resp.text(); + const bounds = getDefaultSvgBoundsIfUndefined(text, info.path); + if (bounds) { + info.$images.each(function() { + this.setAttribute('width', bounds.width); + this.setAttribute('height', bounds.height); + }); + hideElem(info.$boundsInfo); + } + } + })); + + const $imagesAfter = imageInfos[0].$images; + const $imagesBefore = imageInfos[1].$images; + + initSideBySide(this, createContext($imagesAfter[0], $imagesBefore[0])); + if ($imagesAfter.length > 0 && $imagesBefore.length > 0) { + initSwipe(createContext($imagesAfter[1], $imagesBefore[1])); + initOverlay(createContext($imagesAfter[2], $imagesBefore[2])); + } + + queryElemChildren(this, '.image-diff-tabs', (el) => el.classList.remove('is-loading')); + + function initSideBySide(container, sizes) { + let factor = 1; + if (sizes.maxSize.width > (diffContainerWidth - 24) / 2) { + factor = (diffContainerWidth - 24) / 2 / sizes.maxSize.width; + } + + const widthChanged = sizes.imageAfter && sizes.imageBefore && sizes.imageAfter.naturalWidth !== sizes.imageBefore.naturalWidth; + const heightChanged = sizes.imageAfter && sizes.imageBefore && sizes.imageAfter.naturalHeight !== sizes.imageBefore.naturalHeight; + if (sizes.imageAfter) { + const boundsInfoAfterWidth = container.querySelector('.bounds-info-after .bounds-info-width'); + if (boundsInfoAfterWidth) { + boundsInfoAfterWidth.textContent = `${sizes.imageAfter.naturalWidth}px`; + boundsInfoAfterWidth.classList.toggle('green', widthChanged); + } + const boundsInfoAfterHeight = container.querySelector('.bounds-info-after .bounds-info-height'); + if (boundsInfoAfterHeight) { + boundsInfoAfterHeight.textContent = `${sizes.imageAfter.naturalHeight}px`; + boundsInfoAfterHeight.classList.toggle('green', heightChanged); + } + } + + if (sizes.imageBefore) { + const boundsInfoBeforeWidth = container.querySelector('.bounds-info-before .bounds-info-width'); + if (boundsInfoBeforeWidth) { + boundsInfoBeforeWidth.textContent = `${sizes.imageBefore.naturalWidth}px`; + boundsInfoBeforeWidth.classList.toggle('red', widthChanged); + } + const boundsInfoBeforeHeight = container.querySelector('.bounds-info-before .bounds-info-height'); + if (boundsInfoBeforeHeight) { + boundsInfoBeforeHeight.textContent = `${sizes.imageBefore.naturalHeight}px`; + boundsInfoBeforeHeight.classList.add('red', heightChanged); + } + } + + if (sizes.imageAfter) { + const container = sizes.imageAfter.parentNode; + sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`; + sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`; + container.style.margin = '10px auto'; + container.style.width = `${sizes.sizeAfter.width * factor + 2}px`; + container.style.height = `${sizes.sizeAfter.height * factor + 2}px`; + } + + if (sizes.imageBefore) { + const container = sizes.imageBefore.parentNode; + sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`; + sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`; + container.style.margin = '10px auto'; + container.style.width = `${sizes.sizeBefore.width * factor + 2}px`; + container.style.height = `${sizes.sizeBefore.height * factor + 2}px`; + } + } + + function initSwipe(sizes) { + let factor = 1; + if (sizes.maxSize.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.maxSize.width; + } + + if (sizes.imageAfter) { + const container = sizes.imageAfter.parentNode; + const swipeFrame = container.parentNode; + sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`; + sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`; + container.style.margin = `0px ${sizes.ratio[0] * factor}px`; + container.style.width = `${sizes.sizeAfter.width * factor + 2}px`; + container.style.height = `${sizes.sizeAfter.height * factor + 2}px`; + swipeFrame.style.padding = `${sizes.ratio[1] * factor}px 0 0 0`; + swipeFrame.style.width = `${sizes.maxSize.width * factor + 2}px`; + } + + if (sizes.imageBefore) { + const container = sizes.imageBefore.parentNode; + const swipeFrame = container.parentNode; + sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`; + sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`; + container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`; + container.style.width = `${sizes.sizeBefore.width * factor + 2}px`; + container.style.height = `${sizes.sizeBefore.height * factor + 2}px`; + swipeFrame.style.width = `${sizes.maxSize.width * factor + 2}px`; + swipeFrame.style.height = `${sizes.maxSize.height * factor + 2}px`; + } + + // extra height for inner "position: absolute" elements + const swipe = $container.find('.diff-swipe')[0]; + if (swipe) { + swipe.style.width = `${sizes.maxSize.width * factor + 2}px`; + swipe.style.height = `${sizes.maxSize.height * factor + 30}px`; + } + + $container.find('.swipe-bar').on('mousedown', function(e) { + e.preventDefault(); + + const $swipeBar = $(this); + const $swipeFrame = $swipeBar.parent(); + const width = $swipeFrame.width() - $swipeBar.width() - 2; + + $(document).on('mousemove.diff-swipe', (e2) => { + e2.preventDefault(); + + const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); + $swipeBar[0].style.left = `${value}px`; + $container.find('.swipe-container')[0].style.width = `${$swipeFrame.width() - value}px`; + + $(document).on('mouseup.diff-swipe', () => { + $(document).off('.diff-swipe'); + }); + }); + }); + } + + function initOverlay(sizes) { + let factor = 1; + if (sizes.maxSize.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.maxSize.width; + } + + if (sizes.imageAfter) { + const container = sizes.imageAfter.parentNode; + sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`; + sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`; + container.style.margin = `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`; + container.style.width = `${sizes.sizeAfter.width * factor + 2}px`; + container.style.height = `${sizes.sizeAfter.height * factor + 2}px`; + } + + if (sizes.imageBefore) { + const container = sizes.imageBefore.parentNode; + const overlayFrame = container.parentNode; + sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`; + sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`; + container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`; + container.style.width = `${sizes.sizeBefore.width * factor + 2}px`; + container.style.height = `${sizes.sizeBefore.height * factor + 2}px`; + + // some inner elements are `position: absolute`, so the container's height must be large enough + overlayFrame.style.width = `${sizes.maxSize.width * factor + 2}px`; + overlayFrame.style.height = `${sizes.maxSize.height * factor + 2}px`; + } + + const rangeInput = $container[0].querySelector('input[type="range"]'); + function updateOpacity() { + if (sizes.imageAfter) { + sizes.imageAfter.parentNode.style.opacity = `${rangeInput.value / 100}`; + } + } + rangeInput?.addEventListener('input', updateOpacity); + updateOpacity(); + } + }); +} diff --git a/web_src/js/features/install.js b/web_src/js/features/install.js new file mode 100644 index 0000000..897f5fb --- /dev/null +++ b/web_src/js/features/install.js @@ -0,0 +1,119 @@ +import {hideElem, showElem} from '../utils/dom.js'; +import {GET} from '../modules/fetch.js'; + +export function initInstall() { + const page = document.querySelector('.page-content.install'); + if (!page) { + return; + } + if (page.classList.contains('post-install')) { + initPostInstall(); + } else { + initPreInstall(); + } +} +function initPreInstall() { + const defaultDbUser = 'forgejo'; + const defaultDbName = 'forgejo'; + + const defaultDbHosts = { + mysql: '127.0.0.1:3306', + postgres: '127.0.0.1:5432', + }; + + const dbHost = document.getElementById('db_host'); + const dbUser = document.getElementById('db_user'); + const dbName = document.getElementById('db_name'); + + // Database type change detection. + document.getElementById('db_type').addEventListener('change', function () { + const dbType = this.value; + hideElem('div[data-db-setting-for]'); + showElem(`div[data-db-setting-for=${dbType}]`); + + if (dbType !== 'sqlite3') { + // for most remote database servers + showElem('div[data-db-setting-for=common-host]'); + const lastDbHost = dbHost.value; + const isDbHostDefault = !lastDbHost || Object.values(defaultDbHosts).includes(lastDbHost); + if (isDbHostDefault) { + dbHost.value = defaultDbHosts[dbType] ?? ''; + } + if (!dbUser.value && !dbName.value) { + dbUser.value = defaultDbUser; + dbName.value = defaultDbName; + } + } // else: for SQLite3, the default path is always prepared by backend code (setting) + }); + document.getElementById('db_type').dispatchEvent(new Event('change')); + + const appUrl = document.getElementById('app_url'); + if (appUrl.value.includes('://localhost')) { + appUrl.value = window.location.href; + } + + const domain = document.getElementById('domain'); + if (domain.value.trim() === 'localhost') { + domain.value = window.location.hostname; + } + + // TODO: better handling of exclusive relations. + document.querySelector('#offline-mode input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#disable-gravatar input').checked = true; + document.querySelector('#federated-avatar-lookup input').checked = false; + } + }); + document.querySelector('#disable-gravatar input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#federated-avatar-lookup input').checked = false; + } else { + document.querySelector('#offline-mode input').checked = false; + } + }); + document.querySelector('#federated-avatar-lookup input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#disable-gravatar input').checked = false; + document.querySelector('#offline-mode input').checked = false; + } + }); + document.querySelector('#enable-openid-signin input').addEventListener('change', function () { + if (this.checked) { + if (!document.querySelector('#disable-registration input').checked) { + document.querySelector('#enable-openid-signup input').checked = true; + } + } else { + document.querySelector('#enable-openid-signup input').checked = false; + } + }); + document.querySelector('#disable-registration input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#enable-captcha input').checked = false; + document.querySelector('#enable-openid-signup input').checked = false; + } else { + document.querySelector('#enable-openid-signup input').checked = true; + } + }); + document.querySelector('#enable-captcha input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#disable-registration input').checked = false; + } + }); +} + +function initPostInstall() { + const el = document.getElementById('goto-user-login'); + if (!el) return; + + const targetUrl = el.getAttribute('href'); + let tid = setInterval(async () => { + try { + const resp = await GET(targetUrl); + if (tid && resp.status === 200) { + clearInterval(tid); + tid = null; + window.location.href = targetUrl; + } + } catch {} + }, 1000); +} diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js new file mode 100644 index 0000000..b57df9c --- /dev/null +++ b/web_src/js/features/notification.js @@ -0,0 +1,192 @@ +import $ from 'jquery'; +import {GET} from '../modules/fetch.js'; +import {toggleElem} from '../utils/dom.js'; + +const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config; +let notificationSequenceNumber = 0; + +export function initNotificationsTable() { + const table = document.getElementById('notification_table'); + if (!table) return; + + // when page restores from bfcache, delete previously clicked items + window.addEventListener('pageshow', (e) => { + if (e.persisted) { // page was restored from bfcache + const table = document.getElementById('notification_table'); + const unreadCountEl = document.querySelector('.notifications-unread-count'); + let unreadCount = parseInt(unreadCountEl.textContent); + for (const item of table.querySelectorAll('.notifications-item[data-remove="true"]')) { + item.remove(); + unreadCount -= 1; + } + unreadCountEl.textContent = unreadCount; + } + }); + + // mark clicked unread links for deletion on bfcache restore + for (const link of table.querySelectorAll('.notifications-item[data-status="1"] .notifications-link')) { + link.addEventListener('click', (e) => { + e.target.closest('.notifications-item').setAttribute('data-remove', 'true'); + }); + } +} + +async function receiveUpdateCount(event) { + try { + const data = JSON.parse(event.data); + + for (const count of document.querySelectorAll('.notification_count')) { + count.classList.toggle('tw-hidden', data.Count === 0); + count.textContent = `${data.Count}`; + } + await updateNotificationTable(); + } catch (error) { + console.error(error, event); + } +} + +export function initNotificationCount() { + const $notificationCount = $('.notification_count'); + + if (!$notificationCount.length) { + return; + } + + let usingPeriodicPoller = false; + const startPeriodicPoller = (timeout, lastCount) => { + if (timeout <= 0 || !Number.isFinite(timeout)) return; + usingPeriodicPoller = true; + lastCount = lastCount ?? $notificationCount.text(); + setTimeout(async () => { + await updateNotificationCountWithCallback(startPeriodicPoller, timeout, lastCount); + }, timeout); + }; + + if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) { + // Try to connect to the event source via the shared worker first + const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker'); + worker.addEventListener('error', (event) => { + console.error('worker error', event); + }); + worker.port.addEventListener('messageerror', () => { + console.error('unable to deserialize message'); + }); + worker.port.postMessage({ + type: 'start', + url: `${window.location.origin}${appSubUrl}/user/events`, + }); + worker.port.addEventListener('message', (event) => { + if (!event.data || !event.data.type) { + console.error('unknown worker message event', event); + return; + } + if (event.data.type === 'notification-count') { + const _promise = receiveUpdateCount(event.data); + } else if (event.data.type === 'no-event-source') { + // browser doesn't support EventSource, falling back to periodic poller + if (!usingPeriodicPoller) startPeriodicPoller(notificationSettings.MinTimeout); + } else if (event.data.type === 'error') { + console.error('worker port event error', event.data); + } else if (event.data.type === 'logout') { + if (event.data.data !== 'here') { + return; + } + worker.port.postMessage({ + type: 'close', + }); + worker.port.close(); + window.location.href = `${window.location.origin}${appSubUrl}/`; + } else if (event.data.type === 'close') { + worker.port.postMessage({ + type: 'close', + }); + worker.port.close(); + } + }); + worker.port.addEventListener('error', (e) => { + console.error('worker port error', e); + }); + worker.port.start(); + window.addEventListener('beforeunload', () => { + worker.port.postMessage({ + type: 'close', + }); + worker.port.close(); + }); + + return; + } + + startPeriodicPoller(notificationSettings.MinTimeout); +} + +async function updateNotificationCountWithCallback(callback, timeout, lastCount) { + const currentCount = $('.notification_count').text(); + if (lastCount !== currentCount) { + callback(notificationSettings.MinTimeout, currentCount); + return; + } + + const newCount = await updateNotificationCount(); + let needsUpdate = false; + + if (lastCount !== newCount) { + needsUpdate = true; + timeout = notificationSettings.MinTimeout; + } else if (timeout < notificationSettings.MaxTimeout) { + timeout += notificationSettings.TimeoutStep; + } + + callback(timeout, newCount); + if (needsUpdate) { + await updateNotificationTable(); + } +} + +async function updateNotificationTable() { + const notificationDiv = document.getElementById('notification_div'); + if (notificationDiv) { + try { + const params = new URLSearchParams(window.location.search); + params.set('div-only', true); + params.set('sequence-number', ++notificationSequenceNumber); + const url = `${appSubUrl}/notifications?${params.toString()}`; + const response = await GET(url); + + if (!response.ok) { + throw new Error('Failed to fetch notification table'); + } + + const data = await response.text(); + if ($(data).data('sequence-number') === notificationSequenceNumber) { + notificationDiv.outerHTML = data; + initNotificationsTable(); + } + } catch (error) { + console.error(error); + } + } +} + +async function updateNotificationCount() { + try { + const response = await GET(`${appSubUrl}/notifications/new`); + + if (!response.ok) { + throw new Error('Failed to fetch notification count'); + } + + const data = await response.json(); + + toggleElem('.notification_count', data.new !== 0); + + for (const el of document.getElementsByClassName('notification_count')) { + el.textContent = `${data.new}`; + } + + return `${data.new}`; + } catch (error) { + console.error(error); + return '0'; + } +} diff --git a/web_src/js/features/org-team.js b/web_src/js/features/org-team.js new file mode 100644 index 0000000..9b059b3 --- /dev/null +++ b/web_src/js/features/org-team.js @@ -0,0 +1,26 @@ +import $ from 'jquery'; + +const {appSubUrl} = window.config; + +export function initOrgTeamSearchRepoBox() { + const $searchRepoBox = $('#search-repo-box'); + $searchRepoBox.search({ + minCharacters: 2, + apiSettings: { + url: `${appSubUrl}/repo/search?q={query}&uid=${$searchRepoBox.data('uid')}`, + onResponse(response) { + const items = []; + $.each(response.data, (_i, item) => { + items.push({ + title: item.repository.full_name.split('/')[1], + description: item.repository.full_name, + }); + }); + + return {results: items}; + }, + }, + searchFields: ['full_name'], + showNoResults: false, + }); +} diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js new file mode 100644 index 0000000..2472e5a --- /dev/null +++ b/web_src/js/features/pull-view-file.js @@ -0,0 +1,96 @@ +import {diffTreeStore} from '../modules/stores.js'; +import {setFileFolding} from './file-fold.js'; +import {POST} from '../modules/fetch.js'; + +const {pageData} = window.config; +const prReview = pageData.prReview || {}; +const viewedStyleClass = 'viewed-file-checked-form'; +const viewedCheckboxSelector = '.viewed-file-form'; // Selector under which all "Viewed" checkbox forms can be found +const expandFilesBtnSelector = '#expand-files-btn'; +const collapseFilesBtnSelector = '#collapse-files-btn'; + +// Refreshes the summary of viewed files if present +// The data used will be window.config.pageData.prReview.numberOf{Viewed}Files +function refreshViewedFilesSummary() { + const viewedFilesProgress = document.getElementById('viewed-files-summary'); + viewedFilesProgress?.setAttribute('value', prReview.numberOfViewedFiles); + const summaryLabel = document.getElementById('viewed-files-summary-label'); + if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template') + .replace('%[1]d', prReview.numberOfViewedFiles) + .replace('%[2]d', prReview.numberOfFiles); +} + +// Explicitly recounts how many files the user has currently reviewed by counting the number of checked "viewed" checkboxes +// Additionally, the viewed files summary will be updated if it exists +export function countAndUpdateViewedFiles() { + // The number of files is constant, but the number of viewed files can change because files can be loaded dynamically + prReview.numberOfViewedFiles = document.querySelectorAll(`${viewedCheckboxSelector} > input[type=checkbox][checked]`).length; + refreshViewedFilesSummary(); +} + +// Initializes a listener for all children of the given html element +// (for example 'document' in the most basic case) +// to watch for changes of viewed-file checkboxes +export function initViewedCheckboxListenerFor() { + for (const form of document.querySelectorAll(`${viewedCheckboxSelector}:not([data-has-viewed-checkbox-listener="true"])`)) { + // To prevent double addition of listeners + form.setAttribute('data-has-viewed-checkbox-listener', true); + + // The checkbox consists of a div containing the real checkbox with its label and the CSRF token, + // hence the actual checkbox first has to be found + const checkbox = form.querySelector('input[type=checkbox]'); + checkbox.addEventListener('input', function() { + // Mark the file as viewed visually - will especially change the background + if (this.checked) { + form.classList.add(viewedStyleClass); + checkbox.setAttribute('checked', ''); + prReview.numberOfViewedFiles++; + } else { + form.classList.remove(viewedStyleClass); + checkbox.removeAttribute('checked'); + prReview.numberOfViewedFiles--; + } + + // Update viewed-files summary and remove "has changed" label if present + refreshViewedFilesSummary(); + const hasChangedLabel = form.parentNode.querySelector('.changed-since-last-review'); + hasChangedLabel?.remove(); + + const fileName = checkbox.getAttribute('name'); + + // check if the file is in our difftreestore and if we find it -> change the IsViewed status + const fileInPageData = diffTreeStore().files.find((x) => x.Name === fileName); + if (fileInPageData) { + fileInPageData.IsViewed = this.checked; + } + + // Unfortunately, actual forms cause too many problems, hence another approach is needed + const files = {}; + files[fileName] = this.checked; + const data = {files}; + const headCommitSHA = form.getAttribute('data-headcommit'); + if (headCommitSHA) data.headCommitSHA = headCommitSHA; + POST(form.getAttribute('data-link'), {data}); + + // Fold the file accordingly + const parentBox = form.closest('.diff-file-header'); + setFileFolding(parentBox.closest('.file-content'), parentBox.querySelector('.fold-file'), this.checked); + }); + } +} + +export function initExpandAndCollapseFilesButton() { + // expand btn + document.querySelector(expandFilesBtnSelector)?.addEventListener('click', () => { + for (const box of document.querySelectorAll('.file-content[data-folded="true"]')) { + setFileFolding(box, box.querySelector('.fold-file'), false); + } + }); + // collapse btn, need to exclude the div of “show more” + document.querySelector(collapseFilesBtnSelector)?.addEventListener('click', () => { + for (const box of document.querySelectorAll('.file-content:not([data-folded="true"])')) { + if (box.getAttribute('id') === 'diff-incomplete') continue; + setFileFolding(box, box.querySelector('.fold-file'), true); + } + }); +} diff --git a/web_src/js/features/recent-commits.js b/web_src/js/features/recent-commits.js new file mode 100644 index 0000000..030c251 --- /dev/null +++ b/web_src/js/features/recent-commits.js @@ -0,0 +1,21 @@ +import {createApp} from 'vue'; + +export async function initRepoRecentCommits() { + const el = document.getElementById('repo-recent-commits-chart'); + if (!el) return; + + const {default: RepoRecentCommits} = await import(/* webpackChunkName: "recent-commits-graph" */'../components/RepoRecentCommits.vue'); + try { + const View = createApp(RepoRecentCommits, { + locale: { + loadingTitle: el.getAttribute('data-locale-loading-title'), + loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'), + loadingInfo: el.getAttribute('data-locale-loading-info'), + }, + }); + View.mount(el); + } catch (err) { + console.error('RepoRecentCommits failed to load', err); + el.textContent = el.getAttribute('data-locale-component-failed-to-load'); + } +} diff --git a/web_src/js/features/repo-branch.js b/web_src/js/features/repo-branch.js new file mode 100644 index 0000000..b9ffc61 --- /dev/null +++ b/web_src/js/features/repo-branch.js @@ -0,0 +1,42 @@ +import $ from 'jquery'; +import {toggleElem} from '../utils/dom.js'; + +export function initRepoBranchButton() { + initRepoCreateBranchButton(); + initRepoRenameBranchButton(); +} + +function initRepoCreateBranchButton() { + // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code) + for (const el of document.querySelectorAll('.show-create-branch-modal')) { + el.addEventListener('click', () => { + const modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form'; + const modalForm = document.querySelector(modalFormName); + if (!modalForm) return; + modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`; + + const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span'; + document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from'); + + $(el.getAttribute('data-modal')).modal('show'); + }); + } +} + +function initRepoRenameBranchButton() { + for (const el of document.querySelectorAll('.show-rename-branch-modal')) { + el.addEventListener('click', () => { + const target = el.getAttribute('data-modal'); + const modal = document.querySelector(target); + const oldBranchName = el.getAttribute('data-old-branch-name'); + modal.querySelector('input[name=from]').value = oldBranchName; + + // display the warning that the branch which is chosen is the default branch + const warn = modal.querySelector('.default-branch-warning'); + toggleElem(warn, el.getAttribute('data-is-default-branch') === 'true'); + + const text = modal.querySelector('[data-rename-branch-to]'); + text.textContent = text.getAttribute('data-rename-branch-to').replace('%s', oldBranchName); + }); + } +} diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js new file mode 100644 index 0000000..794cc38 --- /dev/null +++ b/web_src/js/features/repo-code.js @@ -0,0 +1,195 @@ +import $ from 'jquery'; +import {svg} from '../svg.js'; +import {invertFileFolding} from './file-fold.js'; +import {createTippy} from '../modules/tippy.js'; +import {clippie} from 'clippie'; +import {toAbsoluteUrl} from '../utils.js'; + +export const singleAnchorRegex = /^#(L|n)([1-9][0-9]*)$/; +export const rangeAnchorRegex = /^#(L[1-9][0-9]*)-(L[1-9][0-9]*)$/; + +function changeHash(hash) { + if (window.history.pushState) { + window.history.pushState(null, null, hash); + } else { + window.location.hash = hash; + } +} + +function isBlame() { + return Boolean(document.querySelector('div.blame')); +} + +function getLineEls() { + return document.querySelectorAll(`.code-view td.lines-code${isBlame() ? '.blame-code' : ''}`); +} + +function selectRange($linesEls, $selectionEndEl, $selectionStartEls) { + for (const el of $linesEls) { + el.closest('tr').classList.remove('active'); + } + + // add hashchange to permalink + const refInNewIssue = document.querySelector('a.ref-in-new-issue'); + const copyPermalink = document.querySelector('a.copy-line-permalink'); + const viewGitBlame = document.querySelector('a.view_git_blame'); + + const updateIssueHref = function (anchor) { + if (!refInNewIssue) return; + const urlIssueNew = refInNewIssue.getAttribute('data-url-issue-new'); + const urlParamBodyLink = refInNewIssue.getAttribute('data-url-param-body-link'); + const issueContent = `${toAbsoluteUrl(urlParamBodyLink)}#${anchor}`; // the default content for issue body + refInNewIssue.setAttribute('href', `${urlIssueNew}?body=${encodeURIComponent(issueContent)}`); + }; + + const updateViewGitBlameFragment = function (anchor) { + if (!viewGitBlame) return; + let href = viewGitBlame.getAttribute('href'); + href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`; + if (anchor.length !== 0) { + href = `${href}#${anchor}`; + } + viewGitBlame.setAttribute('href', href); + }; + + const updateCopyPermalinkUrl = function (anchor) { + if (!copyPermalink) return; + let link = copyPermalink.getAttribute('data-url'); + link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`; + copyPermalink.setAttribute('data-url', link); + }; + + if ($selectionStartEls) { + let a = parseInt($selectionEndEl[0].getAttribute('rel').slice(1)); + let b = parseInt($selectionStartEls[0].getAttribute('rel').slice(1)); + let c; + if (a !== b) { + if (a > b) { + c = a; + a = b; + b = c; + } + const classes = []; + for (let i = a; i <= b; i++) { + classes.push(`[rel=L${i}]`); + } + $linesEls.filter(classes.join(',')).each(function () { + this.closest('tr').classList.add('active'); + }); + changeHash(`#L${a}-L${b}`); + + updateIssueHref(`L${a}-L${b}`); + updateViewGitBlameFragment(`L${a}-L${b}`); + updateCopyPermalinkUrl(`L${a}-L${b}`); + return; + } + } + $selectionEndEl[0].closest('tr').classList.add('active'); + changeHash(`#${$selectionEndEl[0].getAttribute('rel')}`); + + updateIssueHref($selectionEndEl[0].getAttribute('rel')); + updateViewGitBlameFragment($selectionEndEl[0].getAttribute('rel')); + updateCopyPermalinkUrl($selectionEndEl[0].getAttribute('rel')); +} + +function showLineButton() { + const menu = document.querySelector('.code-line-menu'); + if (!menu) return; + + // remove all other line buttons + for (const el of document.querySelectorAll('.code-line-button')) { + el.remove(); + } + + // find active row and add button + const tr = document.querySelector('.code-view tr.active'); + const td = tr.querySelector('td.lines-num'); + const btn = document.createElement('button'); + btn.classList.add('code-line-button', 'ui', 'basic', 'button'); + btn.innerHTML = svg('octicon-kebab-horizontal'); + td.prepend(btn); + + // put a copy of the menu back into DOM for the next click + btn.closest('.code-view').append(menu.cloneNode(true)); + + createTippy(btn, { + trigger: 'click', + hideOnClick: true, + content: menu, + placement: 'right-start', + interactive: true, + onShow: (tippy) => { + tippy.popper.addEventListener('click', () => { + tippy.hide(); + }, {once: true}); + }, + }); +} + +export function initRepoCodeView() { + if ($('.code-view .lines-num').length > 0) { + $(document).on('click', '.lines-num span', function (e) { + const linesEls = getLineEls(); + const selectedEls = Array.from(linesEls).filter((el) => { + return el.matches(`[rel=${this.getAttribute('id')}]`); + }); + + let from; + if (e.shiftKey) { + from = Array.from(linesEls).filter((el) => { + return el.closest('tr').classList.contains('active'); + }); + } + selectRange($(linesEls), $(selectedEls), from ? $(from) : null); + + if (window.getSelection) { + window.getSelection().removeAllRanges(); + } else { + document.selection.empty(); + } + + showLineButton(); + }); + + $(window).on('hashchange', () => { + let m = window.location.hash.match(rangeAnchorRegex); + const $linesEls = $(getLineEls()); + let $first; + if (m) { + $first = $linesEls.filter(`[rel=${m[1]}]`); + if ($first.length) { + const $last = $linesEls.filter(`[rel=${m[2]}]`); + selectRange($linesEls, $first, $last.length ? $last : $linesEls.last()); + + // show code view menu marker (don't show in blame page) + if (!isBlame()) { + showLineButton(); + } + + $('html, body').scrollTop($first.offset().top - 200); + return; + } + } + m = window.location.hash.match(singleAnchorRegex); + if (m) { + $first = $linesEls.filter(`[rel=L${m[2]}]`); + if ($first.length) { + selectRange($linesEls, $first); + + // show code view menu marker (don't show in blame page) + if (!isBlame()) { + showLineButton(); + } + + $('html, body').scrollTop($first.offset().top - 200); + } + } + }).trigger('hashchange'); + } + $(document).on('click', '.fold-file', ({currentTarget}) => { + invertFileFolding(currentTarget.closest('.file-content'), currentTarget); + }); + $(document).on('click', '.copy-line-permalink', async ({currentTarget}) => { + await clippie(toAbsoluteUrl(currentTarget.getAttribute('data-url'))); + }); +} diff --git a/web_src/js/features/repo-code.test.js b/web_src/js/features/repo-code.test.js new file mode 100644 index 0000000..0e0062a --- /dev/null +++ b/web_src/js/features/repo-code.test.js @@ -0,0 +1,17 @@ +import {singleAnchorRegex, rangeAnchorRegex} from './repo-code.js'; + +test('singleAnchorRegex', () => { + expect(singleAnchorRegex.test('#L0')).toEqual(false); + expect(singleAnchorRegex.test('#L1')).toEqual(true); + expect(singleAnchorRegex.test('#L01')).toEqual(false); + expect(singleAnchorRegex.test('#n0')).toEqual(false); + expect(singleAnchorRegex.test('#n1')).toEqual(true); + expect(singleAnchorRegex.test('#n01')).toEqual(false); +}); + +test('rangeAnchorRegex', () => { + expect(rangeAnchorRegex.test('#L0-L10')).toEqual(false); + expect(rangeAnchorRegex.test('#L1-L10')).toEqual(true); + expect(rangeAnchorRegex.test('#L01-L10')).toEqual(false); + expect(rangeAnchorRegex.test('#L1-L01')).toEqual(false); +}); diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js new file mode 100644 index 0000000..f61ea08 --- /dev/null +++ b/web_src/js/features/repo-commit.js @@ -0,0 +1,27 @@ +import {createTippy} from '../modules/tippy.js'; +import {toggleElem} from '../utils/dom.js'; + +export function initRepoEllipsisButton() { + for (const button of document.querySelectorAll('.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)); + }); + } +} + +export function initCommitStatuses() { + for (const element of document.querySelectorAll('[data-tippy="commit-statuses"]')) { + const top = document.querySelector('.repository.file.list') || document.querySelector('.repository.diff'); + + createTippy(element, { + content: element.nextElementSibling, + placement: top ? 'top-start' : 'bottom-start', + interactive: true, + role: 'dialog', + theme: 'box-with-header', + }); + } +} diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js new file mode 100644 index 0000000..88aa93d --- /dev/null +++ b/web_src/js/features/repo-common.js @@ -0,0 +1,83 @@ +import $ from 'jquery'; +import {hideElem, queryElems, showElem} from '../utils/dom.js'; +import {POST} from '../modules/fetch.js'; +import {showErrorToast} from '../modules/toast.js'; +import {sleep} from '../utils.js'; + +async function onDownloadArchive(e) { + e.preventDefault(); + // there are many places using the "archive-link", eg: the dropdown on the repo code page, the release list + const el = e.target.closest('a.archive-link[href]'); + const targetLoading = el.closest('.ui.dropdown') ?? el; + targetLoading.classList.add('is-loading', 'loading-icon-2px'); + try { + for (let tryCount = 0; ;tryCount++) { + const response = await POST(el.href); + if (!response.ok) throw new Error(`Invalid server response: ${response.status}`); + + const data = await response.json(); + if (data.complete) break; + await sleep(Math.min((tryCount + 1) * 750, 2000)); + } + window.location.href = el.href; // the archive is ready, start real downloading + } catch (e) { + console.error(e); + showErrorToast(`Failed to download the archive: ${e}`, {duration: 2500}); + } finally { + targetLoading.classList.remove('is-loading', 'loading-icon-2px'); + } +} + +export function initRepoArchiveLinks() { + queryElems('a.archive-link[href]', (el) => el.addEventListener('click', onDownloadArchive)); +} + +export function initRepoCloneLink() { + const $repoCloneSsh = $('#repo-clone-ssh'); + const $repoCloneHttps = $('#repo-clone-https'); + const $inputLink = $('#repo-clone-url'); + + if ((!$repoCloneSsh.length && !$repoCloneHttps.length) || !$inputLink.length) { + return; + } + + $repoCloneSsh.on('click', () => { + localStorage.setItem('repo-clone-protocol', 'ssh'); + window.updateCloneStates(); + }); + $repoCloneHttps.on('click', () => { + localStorage.setItem('repo-clone-protocol', 'https'); + window.updateCloneStates(); + }); + + $inputLink.on('focus', () => { + $inputLink.trigger('select'); + }); +} + +export function initRepoCommonBranchOrTagDropdown(selector) { + $(selector).each(function () { + const $dropdown = $(this); + $dropdown.find('.reference.column').on('click', function () { + hideElem($dropdown.find('.scrolling.reference-list-menu')); + showElem($($(this).data('target'))); + return false; + }); + }); +} + +export function initRepoCommonFilterSearchDropdown(selector) { + const $dropdown = $(selector); + if (!$dropdown.length) return; + + $dropdown.dropdown({ + fullTextSearch: 'exact', + selectOnKeydown: false, + onChange(_text, _value, $choice) { + if ($choice[0].getAttribute('data-url')) { + window.location.href = $choice[0].getAttribute('data-url'); + } + }, + message: {noResults: $dropdown[0].getAttribute('data-no-results')}, + }); +} diff --git a/web_src/js/features/repo-diff-commit.js b/web_src/js/features/repo-diff-commit.js new file mode 100644 index 0000000..aa7fc38 --- /dev/null +++ b/web_src/js/features/repo-diff-commit.js @@ -0,0 +1,53 @@ +import {hideElem, showElem, toggleElem} from '../utils/dom.js'; +import {GET} from '../modules/fetch.js'; + +async function loadBranchesAndTags(area, loadingButton) { + loadingButton.classList.add('disabled'); + try { + const res = await GET(loadingButton.getAttribute('data-fetch-url')); + const data = await res.json(); + hideElem(loadingButton); + addTags(area, data.tags); + addBranches(area, data.branches, data.default_branch); + showElem(area.querySelectorAll('.branch-and-tag-detail')); + } finally { + loadingButton.classList.remove('disabled'); + } +} + +function addTags(area, tags) { + const tagArea = area.querySelector('.tag-area'); + toggleElem(tagArea.parentElement, tags.length > 0); + for (const tag of tags) { + addLink(tagArea, tag.web_link, tag.name); + } +} + +function addBranches(area, branches, defaultBranch) { + const defaultBranchTooltip = area.getAttribute('data-text-default-branch-tooltip'); + const branchArea = area.querySelector('.branch-area'); + toggleElem(branchArea.parentElement, branches.length > 0); + for (const branch of branches) { + const tooltip = defaultBranch === branch.name ? defaultBranchTooltip : null; + addLink(branchArea, branch.web_link, branch.name, tooltip); + } +} + +function addLink(parent, href, text, tooltip) { + const link = document.createElement('a'); + link.classList.add('muted', 'tw-px-1'); + link.href = href; + link.textContent = text; + if (tooltip) { + link.classList.add('tw-border', 'tw-border-secondary', 'tw-rounded'); + link.setAttribute('data-tooltip-content', tooltip); + } + parent.append(link); +} + +export function initRepoDiffCommitBranchesAndTags() { + for (const area of document.querySelectorAll('.branch-and-tag-area')) { + const btn = area.querySelector('.load-branches-and-tags'); + btn.addEventListener('click', () => loadBranchesAndTags(area, btn)); + } +} diff --git a/web_src/js/features/repo-diff-commitselect.js b/web_src/js/features/repo-diff-commitselect.js new file mode 100644 index 0000000..ebac64e --- /dev/null +++ b/web_src/js/features/repo-diff-commitselect.js @@ -0,0 +1,10 @@ +import {createApp} from 'vue'; +import DiffCommitSelector from '../components/DiffCommitSelector.vue'; + +export function initDiffCommitSelect() { + const el = document.getElementById('diff-commit-select'); + if (!el) return; + + const commitSelect = createApp(DiffCommitSelector); + commitSelect.mount(el); +} diff --git a/web_src/js/features/repo-diff-filetree.js b/web_src/js/features/repo-diff-filetree.js new file mode 100644 index 0000000..5dd2c42 --- /dev/null +++ b/web_src/js/features/repo-diff-filetree.js @@ -0,0 +1,17 @@ +import {createApp} from 'vue'; +import DiffFileTree from '../components/DiffFileTree.vue'; +import DiffFileList from '../components/DiffFileList.vue'; + +export function initDiffFileTree() { + const el = document.getElementById('diff-file-tree'); + if (!el) return; + + const fileTreeView = createApp(DiffFileTree); + fileTreeView.mount(el); + + const fileListElement = document.getElementById('diff-file-list'); + if (!fileListElement) return; + + const fileListView = createApp(DiffFileList); + fileListView.mount(fileListElement); +} diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js new file mode 100644 index 0000000..e5723af --- /dev/null +++ b/web_src/js/features/repo-diff.js @@ -0,0 +1,232 @@ +import $ from 'jquery'; +import {initCompReactionSelector} from './comp/ReactionSelector.js'; +import {initRepoIssueContentHistory} from './repo-issue-content.js'; +import {initDiffFileTree} from './repo-diff-filetree.js'; +import {initDiffCommitSelect} from './repo-diff-commitselect.js'; +import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js'; +import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js'; +import {initImageDiff} from './imagediff.js'; +import {showErrorToast} from '../modules/toast.js'; +import {submitEventSubmitter, queryElemSiblings, hideElem, showElem} from '../utils/dom.js'; +import {POST, GET} from '../modules/fetch.js'; + +const {pageData, i18n} = window.config; + +function initRepoDiffReviewButton() { + const reviewBox = document.getElementById('review-box'); + if (!reviewBox) return; + + const counter = reviewBox.querySelector('.review-comments-counter'); + if (!counter) return; + + $(document).on('click', 'button[name="pending_review"]', (e) => { + const $form = $(e.target).closest('form'); + // Watch for the form's submit event. + $form.on('submit', () => { + const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1; + counter.setAttribute('data-pending-comment-number', num); + counter.textContent = num; + + reviewBox.classList.remove('pulse'); + requestAnimationFrame(() => { + reviewBox.classList.add('pulse'); + }); + }); + }); +} + +function initRepoDiffFileViewToggle() { + $('.file-view-toggle').on('click', function () { + for (const el of queryElemSiblings(this)) { + el.classList.remove('active'); + } + this.classList.add('active'); + + const target = document.querySelector(this.getAttribute('data-toggle-selector')); + if (!target) return; + + hideElem(queryElemSiblings(target)); + showElem(target); + }); +} + +function initRepoDiffConversationForm() { + $(document).on('submit', '.conversation-holder form', async (e) => { + e.preventDefault(); + + const $form = $(e.target); + const textArea = e.target.querySelector('textarea'); + if (!validateTextareaNonEmpty(textArea)) { + return; + } + + if (e.target.classList.contains('is-loading')) return; + try { + e.target.classList.add('is-loading'); + const formData = new FormData($form[0]); + + // If the form is submitted by a button, append the button's name and value to the form data. + // originalEvent can be undefined, such as an event that's caused by Ctrl+Enter, in that case + // sent the event itself. + const submitter = submitEventSubmitter(e.originalEvent ?? e); + const isSubmittedByButton = (submitter?.nodeName === 'BUTTON') || (submitter?.nodeName === 'INPUT' && submitter.type === 'submit'); + if (isSubmittedByButton && submitter.name) { + formData.append(submitter.name, submitter.value); + } + + const response = await POST(e.target.getAttribute('action'), {data: formData}); + const $newConversationHolder = $(await response.text()); + const {path, side, idx} = $newConversationHolder.data(); + + $form.closest('.conversation-holder').replaceWith($newConversationHolder); + let selector; + if ($form.closest('tr').data('line-type') === 'same') { + selector = `[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`; + } else { + selector = `[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`; + } + for (const el of document.querySelectorAll(selector)) { + el.classList.add('tw-invisible'); + } + $newConversationHolder.find('.dropdown').dropdown(); + initCompReactionSelector($newConversationHolder); + } catch { // here the caught error might be a jQuery AJAX error (thrown by await $.post), which is not good to use for error message handling + console.error('error when submitting conversation', e); + showErrorToast(i18n.network_error); + } finally { + e.target.classList.remove('is-loading'); + } + }); + + $(document).on('click', '.resolve-conversation', async function (e) { + e.preventDefault(); + const comment_id = $(this).data('comment-id'); + const origin = $(this).data('origin'); + const action = $(this).data('action'); + const url = $(this).data('update-url'); + + try { + const response = await POST(url, {data: new URLSearchParams({origin, action, comment_id})}); + const data = await response.text(); + + if ($(this).closest('.conversation-holder').length) { + const $conversation = $(data); + $(this).closest('.conversation-holder').replaceWith($conversation); + $conversation.find('.dropdown').dropdown(); + initCompReactionSelector($conversation); + } else { + window.location.reload(); + } + } catch (error) { + console.error('Error:', error); + } + }); +} + +export function initRepoDiffConversationNav() { + // Previous/Next code review conversation + $(document).on('click', '.previous-conversation', (e) => { + const $conversation = $(e.currentTarget).closest('.comment-code-cloud'); + const $conversations = $('.comment-code-cloud:not(.tw-hidden)'); + const index = $conversations.index($conversation); + const previousIndex = index > 0 ? index - 1 : $conversations.length - 1; + const $previousConversation = $conversations.eq(previousIndex); + const anchor = $previousConversation.find('.comment').first()[0].getAttribute('id'); + window.location.href = `#${anchor}`; + }); + $(document).on('click', '.next-conversation', (e) => { + const $conversation = $(e.currentTarget).closest('.comment-code-cloud'); + const $conversations = $('.comment-code-cloud:not(.tw-hidden)'); + const index = $conversations.index($conversation); + const nextIndex = index < $conversations.length - 1 ? index + 1 : 0; + const $nextConversation = $conversations.eq(nextIndex); + const anchor = $nextConversation.find('.comment').first()[0].getAttribute('id'); + window.location.href = `#${anchor}`; + }); +} + +// Will be called when the show more (files) button has been pressed +function onShowMoreFiles() { + initRepoIssueContentHistory(); + initViewedCheckboxListenerFor(); + countAndUpdateViewedFiles(); + initImageDiff(); +} + +export async function loadMoreFiles(url) { + const target = document.querySelector('a#diff-show-more-files'); + if (target?.classList.contains('disabled') || pageData.diffFileInfo.isLoadingNewData) { + return; + } + + pageData.diffFileInfo.isLoadingNewData = true; + target?.classList.add('disabled'); + + try { + const response = await GET(url); + const resp = await response.text(); + const $resp = $(resp); + // the response is a full HTML page, we need to extract the relevant contents: + // 1. append the newly loaded file list items to the existing list + $('#diff-incomplete').replaceWith($resp.find('#diff-file-boxes').children()); + // 2. re-execute the script to append the newly loaded items to the JS variables to refresh the DiffFileTree + $('body').append($resp.find('script#diff-data-script')); + + onShowMoreFiles(); + } catch (error) { + console.error('Error:', error); + showErrorToast('An error occurred while loading more files.'); + } finally { + target?.classList.remove('disabled'); + pageData.diffFileInfo.isLoadingNewData = false; + } +} + +function initRepoDiffShowMore() { + $(document).on('click', 'a#diff-show-more-files', (e) => { + e.preventDefault(); + + const linkLoadMore = e.target.getAttribute('data-href'); + loadMoreFiles(linkLoadMore); + }); + + $(document).on('click', 'a.diff-load-button', async (e) => { + e.preventDefault(); + const $target = $(e.target); + + if (e.target.classList.contains('disabled')) { + return; + } + + e.target.classList.add('disabled'); + + const url = $target.data('href'); + + try { + const response = await GET(url); + const resp = await response.text(); + + if (!resp) { + return; + } + $target.parent().replaceWith($(resp).find('#diff-file-boxes .diff-file-body .file-body').children()); + onShowMoreFiles(); + } catch (error) { + console.error('Error:', error); + } finally { + e.target.classList.remove('disabled'); + } + }); +} + +export function initRepoDiffView() { + initRepoDiffConversationForm(); + if (!$('#diff-file-list').length) return; + initDiffFileTree(); + initDiffCommitSelect(); + initRepoDiffShowMore(); + initRepoDiffReviewButton(); + initRepoDiffFileViewToggle(); + initViewedCheckboxListenerFor(); + initExpandAndCollapseFilesButton(); +} diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js new file mode 100644 index 0000000..faf8ba1 --- /dev/null +++ b/web_src/js/features/repo-editor.js @@ -0,0 +1,203 @@ +import $ from 'jquery'; +import {htmlEscape} from 'escape-goat'; +import {createCodeEditor} from './codeeditor.js'; +import {hideElem, showElem, createElementFromHTML} from '../utils/dom.js'; +import {initMarkupContent} from '../markup/content.js'; +import {attachRefIssueContextPopup} from './contextpopup.js'; +import {POST} from '../modules/fetch.js'; + +function initEditPreviewTab($form) { + const $tabMenu = $form.find('.tabular.menu'); + $tabMenu.find('.item').tab(); + const $previewTab = $tabMenu.find( + `.item[data-tab="${$tabMenu.data('preview')}"]`, + ); + if ($previewTab.length) { + $previewTab.on('click', async function () { + const $this = $(this); + let context = `${$this.data('context')}/`; + const mode = $this.data('markup-mode') || 'comment'; + const $treePathEl = $form.find('input#tree_path'); + if ($treePathEl.length > 0) { + context += $treePathEl.val(); + } + context = context.substring(0, context.lastIndexOf('/')); + + const formData = new FormData(); + formData.append('mode', mode); + formData.append('context', context); + formData.append( + 'text', + $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val(), + ); + formData.append('file_path', $treePathEl.val()); + try { + const response = await POST($this.data('url'), {data: formData}); + const data = await response.text(); + const $previewPanel = $form.find( + `.tab[data-tab="${$tabMenu.data('preview')}"]`, + ); + renderPreviewPanelContent($previewPanel, data); + } catch (error) { + console.error('Error:', error); + } + }); + } +} + +function initEditorForm() { + const $form = $('.repository .edit.form'); + if (!$form) return; + initEditPreviewTab($form); +} + +function getCursorPosition($e) { + const el = $e.get(0); + let pos = 0; + if ('selectionStart' in el) { + pos = el.selectionStart; + } else if ('selection' in document) { + el.focus(); + const Sel = document.selection.createRange(); + const SelLength = document.selection.createRange().text.length; + Sel.moveStart('character', -el.value.length); + pos = Sel.text.length - SelLength; + } + return pos; +} + +export function initRepoEditor() { + initEditorForm(); + + $('.js-quick-pull-choice-option').on('change', function () { + if ($(this).val() === 'commit-to-new-branch') { + showElem('.quick-pull-branch-name'); + document.querySelector('.quick-pull-branch-name input').required = true; + } else { + hideElem('.quick-pull-branch-name'); + document.querySelector('.quick-pull-branch-name input').required = false; + } + $('#commit-button').text(this.getAttribute('button_text')); + }); + + const joinTreePath = ($fileNameEl) => { + const parts = []; + $('.breadcrumb span.section').each(function () { + const $element = $(this); + if ($element.find('a').length) { + parts.push($element.find('a').text()); + } else { + parts.push($element.text()); + } + }); + if ($fileNameEl.val()) parts.push($fileNameEl.val()); + $('#tree_path').val(parts.join('/')); + }; + + const $editFilename = $('#file-name'); + $editFilename.on('input', function () { + const parts = $(this).val().split('/'); + + if (parts.length > 1) { + for (let i = 0; i < parts.length; ++i) { + const value = parts[i]; + if (i < parts.length - 1) { + if (value.length) { + $editFilename[0].before( + createElementFromHTML( + `<span class="section"><a href="#">${htmlEscape(value)}</a></span>`, + ), + ); + $editFilename[0].before( + createElementFromHTML(`<div class="breadcrumb-divider">/</div>`), + ); + } + } else { + $(this).val(value); + } + this.setSelectionRange(0, 0); + } + } + + joinTreePath($(this)); + }); + + $editFilename.on('keydown', function (e) { + const $section = $('.breadcrumb span.section'); + + // Jump back to last directory once the filename is empty + if ( + e.code === 'Backspace' && + getCursorPosition($(this)) === 0 && + $section.length > 0 + ) { + e.preventDefault(); + const $divider = $('.breadcrumb .breadcrumb-divider'); + const value = $section.last().find('a').text(); + $(this).val(value + $(this).val()); + this.setSelectionRange(value.length, value.length); + $section.last().remove(); + $divider.last().remove(); + joinTreePath($(this)); + } + }); + + const $editArea = $('.repository.editor textarea#edit_area'); + if (!$editArea.length) return; + + (async () => { + const editor = await createCodeEditor($editArea[0], $editFilename[0]); + + // Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage + // to enable or disable the commit button + const commitButton = document.getElementById('commit-button'); + const $editForm = $('.ui.edit.form'); + const dirtyFileClass = 'dirty-file'; + + // Disabling the button at the start + if ($('input[name="page_has_posted"]').val() !== 'true') { + commitButton.disabled = true; + } + + // Registering a custom listener for the file path and the file content + $editForm.areYouSure({ + silent: true, + dirtyClass: dirtyFileClass, + fieldSelector: ':input:not(.commit-form-wrapper :input)', + change($form) { + const dirty = $form[0]?.classList.contains(dirtyFileClass); + commitButton.disabled = !dirty; + }, + }); + + // Update the editor from query params, if available, + // only after the dirtyFileClass initialization + const params = new URLSearchParams(window.location.search); + const value = params.get('value'); + if (value) { + editor.setValue(value); + } + + commitButton?.addEventListener('click', (e) => { + // A modal which asks if an empty file should be committed + if (!$editArea.val()) { + $('#edit-empty-content-modal') + .modal({ + onApprove() { + $('.edit.form').trigger('submit'); + }, + }) + .modal('show'); + e.preventDefault(); + } + }); + })(); +} + +export function renderPreviewPanelContent($panelPreviewer, data) { + $panelPreviewer.html(data); + initMarkupContent(); + + const $refIssues = $panelPreviewer.find('p .ref-issue'); + attachRefIssueContextPopup($refIssues); +} diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js new file mode 100644 index 0000000..cff5068 --- /dev/null +++ b/web_src/js/features/repo-findfile.js @@ -0,0 +1,117 @@ +import {svg} from '../svg.js'; +import {toggleElem} from '../utils/dom.js'; +import {pathEscapeSegments} from '../utils/url.js'; +import {GET} from '../modules/fetch.js'; + +const threshold = 50; +let files = []; +let repoFindFileInput, repoFindFileTableBody, repoFindFileNoResult; + +// return the case-insensitive sub-match result as an array: [unmatched, matched, unmatched, matched, ...] +// res[even] is unmatched, res[odd] is matched, see unit tests for examples +// argument subLower must be a lower-cased string. +export function strSubMatch(full, subLower) { + const res = ['']; + let i = 0, j = 0; + const fullLower = full.toLowerCase(); + while (i < subLower.length && j < fullLower.length) { + if (subLower[i] === fullLower[j]) { + if (res.length % 2 !== 0) res.push(''); + res[res.length - 1] += full[j]; + j++; + i++; + } else { + if (res.length % 2 === 0) res.push(''); + res[res.length - 1] += full[j]; + j++; + } + } + if (i !== subLower.length) { + // if the sub string doesn't match the full, only return the full as unmatched. + return [full]; + } + if (j < full.length) { + // append remaining chars from full to result as unmatched + if (res.length % 2 === 0) res.push(''); + res[res.length - 1] += full.substring(j); + } + return res; +} + +export function calcMatchedWeight(matchResult) { + let weight = 0; + for (let i = 0; i < matchResult.length; i++) { + if (i % 2 === 1) { // matches are on odd indices, see strSubMatch + // use a function f(x+x) > f(x) + f(x) to make the longer matched string has higher weight. + weight += matchResult[i].length * matchResult[i].length; + } + } + return weight; +} + +export function filterRepoFilesWeighted(files, filter) { + let filterResult = []; + if (filter) { + const filterLower = filter.toLowerCase(); + // TODO: for large repo, this loop could be slow, maybe there could be one more limit: + // ... && filterResult.length < threshold * 20, wait for more feedbacks + for (let i = 0; i < files.length; i++) { + const res = strSubMatch(files[i], filterLower); + if (res.length > 1) { // length==1 means unmatched, >1 means having matched sub strings + filterResult.push({matchResult: res, matchWeight: calcMatchedWeight(res)}); + } + } + filterResult.sort((a, b) => b.matchWeight - a.matchWeight); + filterResult = filterResult.slice(0, threshold); + } else { + for (let i = 0; i < files.length && i < threshold; i++) { + filterResult.push({matchResult: [files[i]], matchWeight: 0}); + } + } + return filterResult; +} + +function filterRepoFiles(filter) { + const treeLink = repoFindFileInput.getAttribute('data-url-tree-link'); + repoFindFileTableBody.innerHTML = ''; + + const filterResult = filterRepoFilesWeighted(files, filter); + + toggleElem(repoFindFileNoResult, !filterResult.length); + for (const r of filterResult) { + const row = document.createElement('tr'); + const cell = document.createElement('td'); + const a = document.createElement('a'); + a.setAttribute('href', `${treeLink}/${pathEscapeSegments(r.matchResult.join(''))}`); + a.innerHTML = svg('octicon-file', 16, 'tw-mr-2'); + row.append(cell); + cell.append(a); + for (const [index, part] of r.matchResult.entries()) { + const span = document.createElement('span'); + // safely escape by using textContent + span.textContent = part; + // if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz'] + // the matchResult[odd] is matched and highlighted to red. + if (index % 2 === 1) span.classList.add('ui', 'text', 'red'); + a.append(span); + } + repoFindFileTableBody.append(row); + } +} + +async function loadRepoFiles() { + const response = await GET(repoFindFileInput.getAttribute('data-url-data-link')); + files = await response.json(); + filterRepoFiles(repoFindFileInput.value); +} + +export function initFindFileInRepo() { + repoFindFileInput = document.getElementById('repo-file-find-input'); + if (!repoFindFileInput) return; + + repoFindFileTableBody = document.querySelector('#repo-find-file-table tbody'); + repoFindFileNoResult = document.getElementById('repo-find-file-no-result'); + repoFindFileInput.addEventListener('input', () => filterRepoFiles(repoFindFileInput.value)); + + loadRepoFiles(); +} diff --git a/web_src/js/features/repo-findfile.test.js b/web_src/js/features/repo-findfile.test.js new file mode 100644 index 0000000..2d96ed4 --- /dev/null +++ b/web_src/js/features/repo-findfile.test.js @@ -0,0 +1,34 @@ +import {strSubMatch, calcMatchedWeight, filterRepoFilesWeighted} from './repo-findfile.js'; + +describe('Repo Find Files', () => { + test('strSubMatch', () => { + expect(strSubMatch('abc', '')).toEqual(['abc']); + expect(strSubMatch('abc', 'a')).toEqual(['', 'a', 'bc']); + expect(strSubMatch('abc', 'b')).toEqual(['a', 'b', 'c']); + expect(strSubMatch('abc', 'c')).toEqual(['ab', 'c']); + expect(strSubMatch('abc', 'ac')).toEqual(['', 'a', 'b', 'c']); + expect(strSubMatch('abc', 'z')).toEqual(['abc']); + expect(strSubMatch('abc', 'az')).toEqual(['abc']); + + expect(strSubMatch('ABc', 'ac')).toEqual(['', 'A', 'B', 'c']); + expect(strSubMatch('abC', 'ac')).toEqual(['', 'a', 'b', 'C']); + + expect(strSubMatch('aabbcc', 'abc')).toEqual(['', 'a', 'a', 'b', 'b', 'c', 'c']); + expect(strSubMatch('the/directory', 'hedir')).toEqual(['t', 'he', '/', 'dir', 'ectory']); + }); + + test('calcMatchedWeight', () => { + expect(calcMatchedWeight(['a', 'b', 'c', 'd']) < calcMatchedWeight(['a', 'bc', 'c'])).toBeTruthy(); + }); + + test('filterRepoFilesWeighted', () => { + // the first matched result should always be the "word.txt" + let res = filterRepoFilesWeighted(['word.txt', 'we-got-result.dat'], 'word'); + expect(res).toHaveLength(2); + expect(res[0].matchResult).toEqual(['', 'word', '.txt']); + + res = filterRepoFilesWeighted(['we-got-result.dat', 'word.txt'], 'word'); + expect(res).toHaveLength(2); + expect(res[0].matchResult).toEqual(['', 'word', '.txt']); + }); +}); diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js new file mode 100644 index 0000000..689b6f1 --- /dev/null +++ b/web_src/js/features/repo-graph.js @@ -0,0 +1,155 @@ +import $ from 'jquery'; +import {hideElem, showElem} from '../utils/dom.js'; +import {GET} from '../modules/fetch.js'; + +export function initRepoGraphGit() { + const graphContainer = document.getElementById('git-graph-container'); + if (!graphContainer) return; + + document.getElementById('flow-color-monochrome')?.addEventListener('click', () => { + document.getElementById('flow-color-monochrome').classList.add('active'); + document.getElementById('flow-color-colored')?.classList.remove('active'); + graphContainer.classList.remove('colored'); + graphContainer.classList.add('monochrome'); + const params = new URLSearchParams(window.location.search); + params.set('mode', 'monochrome'); + const queryString = params.toString(); + if (queryString) { + window.history.replaceState({}, '', `?${queryString}`); + } else { + window.history.replaceState({}, '', window.location.pathname); + } + for (const link of document.querySelectorAll('.pagination a')) { + const href = link.getAttribute('href'); + if (!href) continue; + const url = new URL(href, window.location); + const params = url.searchParams; + params.set('mode', 'monochrome'); + url.search = `?${params.toString()}`; + link.setAttribute('href', url.href); + } + }); + + document.getElementById('flow-color-colored')?.addEventListener('click', () => { + document.getElementById('flow-color-colored').classList.add('active'); + document.getElementById('flow-color-monochrome')?.classList.remove('active'); + graphContainer.classList.add('colored'); + graphContainer.classList.remove('monochrome'); + for (const link of document.querySelectorAll('.pagination a')) { + const href = link.getAttribute('href'); + if (!href) continue; + const url = new URL(href, window.location); + const params = url.searchParams; + params.delete('mode'); + url.search = `?${params.toString()}`; + link.setAttribute('href', url.href); + } + const params = new URLSearchParams(window.location.search); + params.delete('mode'); + const queryString = params.toString(); + if (queryString) { + window.history.replaceState({}, '', `?${queryString}`); + } else { + window.history.replaceState({}, '', window.location.pathname); + } + }); + const url = new URL(window.location); + const params = url.searchParams; + const updateGraph = () => { + const queryString = params.toString(); + const ajaxUrl = new URL(url); + ajaxUrl.searchParams.set('div-only', 'true'); + window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname); + document.getElementById('pagination').innerHTML = ''; + hideElem('#rel-container'); + hideElem('#rev-container'); + showElem('#loading-indicator'); + (async () => { + const response = await GET(String(ajaxUrl)); + const html = await response.text(); + const div = document.createElement('div'); + div.innerHTML = html; + document.getElementById('pagination').innerHTML = div.querySelector('#pagination').innerHTML; + document.getElementById('rel-container').innerHTML = div.querySelector('#rel-container').innerHTML; + document.getElementById('rev-container').innerHTML = div.querySelector('#rev-container').innerHTML; + hideElem('#loading-indicator'); + showElem('#rel-container'); + showElem('#rev-container'); + })(); + }; + const dropdownSelected = params.getAll('branch'); + if (params.has('hide-pr-refs') && params.get('hide-pr-refs') === 'true') { + dropdownSelected.splice(0, 0, '...flow-hide-pr-refs'); + } + + const flowSelectRefsDropdown = document.getElementById('flow-select-refs-dropdown'); + $(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected); + $(flowSelectRefsDropdown).dropdown({ + clearable: true, + fullTextSeach: 'exact', + onRemove(toRemove) { + if (toRemove === '...flow-hide-pr-refs') { + params.delete('hide-pr-refs'); + } else { + const branches = params.getAll('branch'); + params.delete('branch'); + for (const branch of branches) { + if (branch !== toRemove) { + params.append('branch', branch); + } + } + } + updateGraph(); + }, + onAdd(toAdd) { + if (toAdd === '...flow-hide-pr-refs') { + params.set('hide-pr-refs', true); + } else { + params.append('branch', toAdd); + } + updateGraph(); + }, + }); + + graphContainer.addEventListener('mouseenter', (e) => { + if (e.target.matches('#rev-list li')) { + const flow = e.target.getAttribute('data-flow'); + if (flow === '0') return; + document.getElementById(`flow-${flow}`)?.classList.add('highlight'); + e.target.classList.add('hover'); + for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { + item.classList.add('highlight'); + } + } else if (e.target.matches('#rel-container .flow-group')) { + e.target.classList.add('highlight'); + const flow = e.target.getAttribute('data-flow'); + for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { + item.classList.add('highlight'); + } + } else if (e.target.matches('#rel-container .flow-commit')) { + const rev = e.target.getAttribute('data-rev'); + document.querySelector(`#rev-list li#commit-${rev}`)?.classList.add('hover'); + } + }); + + graphContainer.addEventListener('mouseleave', (e) => { + if (e.target.matches('#rev-list li')) { + const flow = e.target.getAttribute('data-flow'); + if (flow === '0') return; + document.getElementById(`flow-${flow}`)?.classList.remove('highlight'); + e.target.classList.remove('hover'); + for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { + item.classList.remove('highlight'); + } + } else if (e.target.matches('#rel-container .flow-group')) { + e.target.classList.remove('highlight'); + const flow = e.target.getAttribute('data-flow'); + for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { + item.classList.remove('highlight'); + } + } else if (e.target.matches('#rel-container .flow-commit')) { + const rev = e.target.getAttribute('data-rev'); + document.querySelector(`#rev-list li#commit-${rev}`)?.classList.remove('hover'); + } + }); +} diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js new file mode 100644 index 0000000..6a5bce8 --- /dev/null +++ b/web_src/js/features/repo-home.js @@ -0,0 +1,147 @@ +import $ from 'jquery'; +import {stripTags} from '../utils.js'; +import {hideElem, queryElemChildren, showElem} from '../utils/dom.js'; +import {POST} from '../modules/fetch.js'; +import {showErrorToast} from '../modules/toast.js'; + +const {appSubUrl} = window.config; + +export function initRepoTopicBar() { + const mgrBtn = document.getElementById('manage_topic'); + if (!mgrBtn) return; + + const editDiv = document.getElementById('topic_edit'); + const viewDiv = document.getElementById('repo-topics'); + const topicDropdown = editDiv.querySelector('.ui.dropdown'); + let lastErrorToast; + + mgrBtn.addEventListener('click', () => { + hideElem(viewDiv); + showElem(editDiv); + topicDropdown.querySelector('input.search').focus(); + }); + + document.querySelector('#cancel_topic_edit').addEventListener('click', () => { + lastErrorToast?.hideToast(); + hideElem(editDiv); + showElem(viewDiv); + mgrBtn.focus(); + }); + + document.getElementById('save_topic').addEventListener('click', async (e) => { + lastErrorToast?.hideToast(); + const topics = editDiv.querySelector('input[name=topics]').value; + + const data = new FormData(); + data.append('topics', topics); + + const response = await POST(e.target.getAttribute('data-link'), {data}); + + if (response.ok) { + const responseData = await response.json(); + if (responseData.status === 'ok') { + queryElemChildren(viewDiv, '.repo-topic', (el) => el.remove()); + if (topics.length) { + const topicArray = topics.split(','); + topicArray.sort(); + for (const topic of topicArray) { + // it should match the code in repo/home.tmpl + const link = document.createElement('a'); + link.classList.add('repo-topic', 'ui', 'large', 'label'); + link.href = `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`; + link.textContent = topic; + mgrBtn.parentNode.insertBefore(link, mgrBtn); // insert all new topics before manage button + } + } + hideElem(editDiv); + showElem(viewDiv); + } + } else if (response.status === 422) { + // how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save" + const responseData = await response.json(); + lastErrorToast = showErrorToast(responseData.message, {duration: 5000}); + if (responseData.invalidTopics.length > 0) { + const {invalidTopics} = responseData; + const topicLabels = queryElemChildren(topicDropdown, 'a.ui.label'); + for (const [index, value] of topics.split(',').entries()) { + if (invalidTopics.includes(value)) { + topicLabels[index].classList.remove('green'); + topicLabels[index].classList.add('red'); + } + } + } + } + }); + + $(topicDropdown).dropdown({ + allowAdditions: true, + forceSelection: false, + fullTextSearch: 'exact', + fields: {name: 'description', value: 'data-value'}, + saveRemoteData: false, + label: { + transition: 'horizontal flip', + duration: 200, + variation: false, + }, + apiSettings: { + url: `${appSubUrl}/explore/topics/search?q={query}`, + throttle: 500, + cache: false, + onResponse(res) { + const formattedResponse = { + success: false, + results: [], + }; + const query = stripTags(this.urlData.query.trim()); + let found_query = false; + const current_topics = []; + for (const el of queryElemChildren(topicDropdown, 'a.ui.label.visible')) { + current_topics.push(el.getAttribute('data-value')); + } + + if (res.topics) { + let found = false; + for (let i = 0; i < res.topics.length; i++) { + // skip currently added tags + if (current_topics.includes(res.topics[i].topic_name)) { + continue; + } + + if (res.topics[i].topic_name.toLowerCase() === query.toLowerCase()) { + found_query = true; + } + formattedResponse.results.push({description: res.topics[i].topic_name, 'data-value': res.topics[i].topic_name}); + found = true; + } + formattedResponse.success = found; + } + + if (query.length > 0 && !found_query) { + formattedResponse.success = true; + formattedResponse.results.unshift({description: query, 'data-value': query}); + } else if (query.length > 0 && found_query) { + formattedResponse.results.sort((a, b) => { + if (a.description.toLowerCase() === query.toLowerCase()) return -1; + if (b.description.toLowerCase() === query.toLowerCase()) return 1; + if (a.description > b.description) return -1; + if (a.description < b.description) return 1; + return 0; + }); + } + + return formattedResponse; + }, + }, + onLabelCreate(value) { + value = value.toLowerCase().trim(); + this.attr('data-value', value).contents().first().replaceWith(value); + return $(this); + }, + onAdd(addedValue, _addedText, $addedChoice) { + addedValue = addedValue.toLowerCase().trim(); + $addedChoice[0].setAttribute('data-value', addedValue); + $addedChoice[0].setAttribute('data-text', addedValue); + }, + }); +} diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js new file mode 100644 index 0000000..cef2f49 --- /dev/null +++ b/web_src/js/features/repo-issue-content.js @@ -0,0 +1,154 @@ +import $ from 'jquery'; +import {svg} from '../svg.js'; +import {showErrorToast} from '../modules/toast.js'; +import {GET, POST} from '../modules/fetch.js'; +import {showElem} from '../utils/dom.js'; + +const {appSubUrl} = window.config; +let i18nTextEdited; +let i18nTextOptions; +let i18nTextDeleteFromHistory; +let i18nTextDeleteFromHistoryConfirm; + +function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleHtml) { + let $dialog = $('.content-history-detail-dialog'); + if ($dialog.length) return; + + $dialog = $(` +<div class="ui modal content-history-detail-dialog"> + ${svg('octicon-x', 16, 'close icon inside')} + <div class="header tw-flex tw-items-center tw-justify-between"> + <div>${itemTitleHtml}</div> + <div class="ui dropdown dialog-header-options tw-mr-8 tw-hidden"> + ${i18nTextOptions} + ${svg('octicon-triangle-down', 14, 'dropdown icon')} + <div class="menu"> + <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div> + </div> + </div> + </div> + <div class="comment-diff-data is-loading"></div> +</div>`); + $dialog.appendTo($('body')); + $dialog.find('.dialog-header-options').dropdown({ + showOnFocus: false, + allowReselection: true, + async onChange(_value, _text, $item) { + const optionItem = $item.data('option-item'); + if (optionItem === 'delete') { + if (window.confirm(i18nTextDeleteFromHistoryConfirm)) { + try { + const params = new URLSearchParams(); + params.append('comment_id', commentId); + params.append('history_id', historyId); + + const response = await POST(`${issueBaseUrl}/content-history/soft-delete?${params.toString()}`); + const resp = await response.json(); + + if (resp.ok) { + $dialog.modal('hide'); + } else { + showErrorToast(resp.message); + } + } catch (error) { + console.error('Error:', error); + showErrorToast('An error occurred while deleting the history.'); + } + } + } else { // required by eslint + showErrorToast(`unknown option item: ${optionItem}`); + } + }, + onHide() { + $(this).dropdown('clear', true); + }, + }); + $dialog.modal({ + async onShow() { + try { + const params = new URLSearchParams(); + params.append('comment_id', commentId); + params.append('history_id', historyId); + + const url = `${issueBaseUrl}/content-history/detail?${params.toString()}`; + const response = await GET(url); + const resp = await response.json(); + + const commentDiffData = $dialog.find('.comment-diff-data')[0]; + commentDiffData?.classList.remove('is-loading'); + commentDiffData.innerHTML = resp.diffHtml; + // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden. + if (resp.canSoftDelete) { + showElem($dialog.find('.dialog-header-options')); + } + } catch (error) { + console.error('Error:', error); + } + }, + onHidden() { + $dialog.remove(); + }, + }).modal('show'); +} + +function showContentHistoryMenu(issueBaseUrl, $item, commentId) { + const $headerLeft = $item.find('.comment-header-left'); + const menuHtml = ` + <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}"> + • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')} + <div class="menu"> + </div> + </div>`; + + $headerLeft.find(`.content-history-menu`).remove(); + $headerLeft.append($(menuHtml)); + $headerLeft.find('.dropdown').dropdown({ + action: 'hide', + apiSettings: { + cache: false, + url: `${issueBaseUrl}/content-history/list?comment_id=${commentId}`, + }, + saveRemoteData: false, + onHide() { + $(this).dropdown('change values', null); + }, + onChange(value, itemHtml, $item) { + if (value && !$item.find('[data-history-is-deleted=1]').length) { + showContentHistoryDetail(issueBaseUrl, commentId, value, itemHtml); + } + }, + }); +} + +export async function initRepoIssueContentHistory() { + const issueIndex = $('#issueIndex').val(); + if (!issueIndex) return; + + const $itemIssue = $('.repository.issue .timeline-item.comment.first'); // issue(PR) main content + const $comments = $('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments + if (!$itemIssue.length && !$comments.length) return; + + const repoLink = $('#repolink').val(); + const issueBaseUrl = `${appSubUrl}/${repoLink}/issues/${issueIndex}`; + + try { + const response = await GET(`${issueBaseUrl}/content-history/overview`); + const resp = await response.json(); + + i18nTextEdited = resp.i18n.textEdited; + i18nTextDeleteFromHistory = resp.i18n.textDeleteFromHistory; + i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm; + i18nTextOptions = resp.i18n.textOptions; + + if (resp.editedHistoryCountMap[0] && $itemIssue.length) { + showContentHistoryMenu(issueBaseUrl, $itemIssue, '0'); + } + for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) { + if (commentId === '0') continue; + const $itemComment = $(`#issuecomment-${commentId}`); + showContentHistoryMenu(issueBaseUrl, $itemComment, commentId); + } + } catch (error) { + console.error('Error:', error); + } +} diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js new file mode 100644 index 0000000..92f058c --- /dev/null +++ b/web_src/js/features/repo-issue-list.js @@ -0,0 +1,245 @@ +import $ from 'jquery'; +import {updateIssuesMeta} from './repo-issue.js'; +import {toggleElem, hideElem, isElemHidden} from '../utils/dom.js'; +import {htmlEscape} from 'escape-goat'; +import {confirmModal} from './comp/ConfirmModal.js'; +import {showErrorToast} from '../modules/toast.js'; +import {createSortable} from '../modules/sortable.js'; +import {DELETE, POST} from '../modules/fetch.js'; +import {parseDom} from '../utils.js'; + +function initRepoIssueListCheckboxes() { + const issueSelectAll = document.querySelector('.issue-checkbox-all'); + if (!issueSelectAll) return; // logged out state + const issueCheckboxes = document.querySelectorAll('.issue-checkbox'); + + const syncIssueSelectionState = () => { + const checkedCheckboxes = Array.from(issueCheckboxes).filter((el) => el.checked); + const anyChecked = Boolean(checkedCheckboxes.length); + const allChecked = anyChecked && checkedCheckboxes.length === issueCheckboxes.length; + + if (allChecked) { + issueSelectAll.checked = true; + issueSelectAll.indeterminate = false; + } else if (anyChecked) { + issueSelectAll.checked = false; + issueSelectAll.indeterminate = true; + } else { + issueSelectAll.checked = false; + issueSelectAll.indeterminate = false; + } + // if any issue is selected, show the action panel, otherwise show the filter panel + toggleElem($('#issue-filters'), !anyChecked); + toggleElem($('#issue-actions'), anyChecked); + // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel + const panels = document.querySelectorAll('#issue-filters, #issue-actions'); + const visiblePanel = Array.from(panels).find((el) => !isElemHidden(el)); + const toolbarLeft = visiblePanel.querySelector('.issue-list-toolbar-left'); + toolbarLeft.prepend(issueSelectAll); + }; + + for (const el of issueCheckboxes) { + el.addEventListener('change', syncIssueSelectionState); + } + + issueSelectAll.addEventListener('change', () => { + for (const el of issueCheckboxes) { + el.checked = issueSelectAll.checked; + } + syncIssueSelectionState(); + }); + + $('.issue-action').on('click', async function (e) { + e.preventDefault(); + + const url = this.getAttribute('data-url'); + let action = this.getAttribute('data-action'); + let elementId = this.getAttribute('data-element-id'); + let issueIDs = []; + for (const el of document.querySelectorAll('.issue-checkbox:checked')) { + issueIDs.push(el.getAttribute('data-issue-id')); + } + issueIDs = issueIDs.join(','); + if (!issueIDs) return; + + // for assignee + if (elementId === '0' && url.endsWith('/assignee')) { + elementId = ''; + action = 'clear'; + } + + // for toggle + if (action === 'toggle' && e.altKey) { + action = 'toggle-alt'; + } + + // for delete + if (action === 'delete') { + const confirmText = e.target.getAttribute('data-action-delete-confirm'); + if (!await confirmModal({content: confirmText, buttonColor: 'orange'})) { + return; + } + } + + try { + await updateIssuesMeta(url, action, issueIDs, elementId); + window.location.reload(); + } catch (err) { + showErrorToast(err.responseJSON?.error ?? err.message); + } + }); +} + +function initRepoIssueListAuthorDropdown() { + const $searchDropdown = $('.user-remote-search'); + if (!$searchDropdown.length) return; + + let searchUrl = $searchDropdown[0].getAttribute('data-search-url'); + const actionJumpUrl = $searchDropdown[0].getAttribute('data-action-jump-url'); + const selectedUserId = $searchDropdown[0].getAttribute('data-selected-user-id'); + if (!searchUrl.includes('?')) searchUrl += '?'; + + $searchDropdown.dropdown('setting', { + fullTextSearch: true, + selectOnKeydown: false, + apiSettings: { + cache: false, + url: `${searchUrl}&q={query}`, + onResponse(resp) { + // the content is provided by backend IssuePosters handler + const processedResults = []; // to be used by dropdown to generate menu items + for (const item of resp.results) { + let html = `<img class="ui avatar tw-align-middle" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`; + if (item.full_name) html += `<span class="search-fullname tw-ml-2">${htmlEscape(item.full_name)}</span>`; + processedResults.push({value: item.user_id, name: html}); + } + resp.results = processedResults; + return resp; + }, + }, + action: (_text, value) => { + window.location.href = actionJumpUrl.replace('{user_id}', encodeURIComponent(value)); + }, + onShow: () => { + $searchDropdown.dropdown('filter', ' '); // trigger a search on first show + }, + }); + + // we want to generate the dropdown menu items by ourselves, replace its internal setup functions + const dropdownSetup = {...$searchDropdown.dropdown('internal', 'setup')}; + const dropdownTemplates = $searchDropdown.dropdown('setting', 'templates'); + $searchDropdown.dropdown('internal', 'setup', dropdownSetup); + dropdownSetup.menu = function (values) { + const menu = $searchDropdown.find('> .menu')[0]; + // remove old dynamic items + for (const el of menu.querySelectorAll(':scope > .dynamic-item')) { + el.remove(); + } + + const newMenuHtml = dropdownTemplates.menu(values, $searchDropdown.dropdown('setting', 'fields'), true /* html */, $searchDropdown.dropdown('setting', 'className')); + if (newMenuHtml) { + const newMenuItems = parseDom(newMenuHtml, 'text/html').querySelectorAll('body > div'); + for (const newMenuItem of newMenuItems) { + newMenuItem.classList.add('dynamic-item'); + } + const div = document.createElement('div'); + div.classList.add('divider', 'dynamic-item'); + menu.append(div, ...newMenuItems); + } + $searchDropdown.dropdown('refresh'); + // defer our selection to the next tick, because dropdown will set the selection item after this `menu` function + setTimeout(() => { + for (const el of menu.querySelectorAll('.item.active, .item.selected')) { + el.classList.remove('active', 'selected'); + } + menu.querySelector(`.item[data-value="${selectedUserId}"]`)?.classList.add('selected'); + }, 0); + }; +} + +function initPinRemoveButton() { + for (const button of document.getElementsByClassName('issue-card-unpin')) { + button.addEventListener('click', async (event) => { + const el = event.currentTarget; + const id = Number(el.getAttribute('data-issue-id')); + + // Send the unpin request + const response = await DELETE(el.getAttribute('data-unpin-url')); + if (response.ok) { + // Delete the tooltip + el._tippy.destroy(); + // Remove the Card + el.closest(`div.issue-card[data-issue-id="${id}"]`).remove(); + } + }); + } +} + +async function pinMoveEnd(e) { + const url = e.item.getAttribute('data-move-url'); + const id = Number(e.item.getAttribute('data-issue-id')); + await POST(url, {data: {id, position: e.newIndex + 1}}); +} + +async function initIssuePinSort() { + const pinDiv = document.getElementById('issue-pins'); + + if (pinDiv === null) return; + + // If the User is not a Repo Admin, we don't need to proceed + if (!pinDiv.hasAttribute('data-is-repo-admin')) return; + + initPinRemoveButton(); + + // If only one issue pinned, we don't need to make this Sortable + if (pinDiv.children.length < 2) return; + + createSortable(pinDiv, { + group: 'shared', + onEnd: pinMoveEnd, + }); +} + +function initArchivedLabelFilter() { + const archivedLabelEl = document.querySelector('#archived-filter-checkbox'); + if (!archivedLabelEl) { + return; + } + + const url = new URL(window.location.href); + const archivedLabels = document.querySelectorAll('[data-is-archived]'); + + if (!archivedLabels.length) { + hideElem('.archived-label-filter'); + return; + } + const selectedLabels = (url.searchParams.get('labels') || '') + .split(',') + .map((id) => id < 0 ? `${~id + 1}` : id); // selectedLabels contains -ve ids, which are excluded so convert any -ve value id to +ve + + const archivedElToggle = () => { + for (const label of archivedLabels) { + const id = label.getAttribute('data-label-id'); + toggleElem(label, archivedLabelEl.checked || selectedLabels.includes(id)); + } + }; + + archivedElToggle(); + archivedLabelEl.addEventListener('change', () => { + archivedElToggle(); + if (archivedLabelEl.checked) { + url.searchParams.set('archived', 'true'); + } else { + url.searchParams.delete('archived'); + } + window.location.href = url.href; + }); +} + +export function initRepoIssueList() { + if (!document.querySelectorAll('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list').length) return; + initRepoIssueListCheckboxes(); + initRepoIssueListAuthorDropdown(); + initIssuePinSort(); + initArchivedLabelFilter(); +} diff --git a/web_src/js/features/repo-issue-pr-form.js b/web_src/js/features/repo-issue-pr-form.js new file mode 100644 index 0000000..7b26e64 --- /dev/null +++ b/web_src/js/features/repo-issue-pr-form.js @@ -0,0 +1,10 @@ +import {createApp} from 'vue'; +import PullRequestMergeForm from '../components/PullRequestMergeForm.vue'; + +export function initRepoPullRequestMergeForm() { + const el = document.getElementById('pull-request-merge-form'); + if (!el) return; + + const view = createApp(PullRequestMergeForm); + view.mount(el); +} diff --git a/web_src/js/features/repo-issue-pr-status.js b/web_src/js/features/repo-issue-pr-status.js new file mode 100644 index 0000000..7890b9c --- /dev/null +++ b/web_src/js/features/repo-issue-pr-status.js @@ -0,0 +1,10 @@ +export function initRepoPullRequestCommitStatus() { + for (const btn of document.querySelectorAll('.commit-status-hide-checks')) { + const panel = btn.closest('.commit-status-panel'); + const list = panel.querySelector('.commit-status-list'); + btn.addEventListener('click', () => { + list.style.maxHeight = list.style.maxHeight ? '' : '0px'; // toggle + btn.textContent = btn.getAttribute(list.style.maxHeight ? 'data-show-all' : 'data-hide-all'); + }); + } +} diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js new file mode 100644 index 0000000..c4bd70b --- /dev/null +++ b/web_src/js/features/repo-issue.js @@ -0,0 +1,794 @@ +import $ from 'jquery'; +import {htmlEscape} from 'escape-goat'; +import {showTemporaryTooltip, createTippy} from '../modules/tippy.js'; +import {hideElem, showElem, toggleElem} from '../utils/dom.js'; +import {setFileFolding} from './file-fold.js'; +import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; +import {toAbsoluteUrl} from '../utils.js'; +import {initDropzone} from './common-global.js'; +import {POST, GET} from '../modules/fetch.js'; +import {showErrorToast} from '../modules/toast.js'; +import {emojiHTML} from './emoji.js'; + +const {appSubUrl} = window.config; + +// if there are draft comments, confirm before reloading, to avoid losing comments +export function reloadConfirmDraftComment() { + const commentTextareas = [ + document.querySelector('.edit-content-zone:not(.tw-hidden) textarea'), + document.querySelector('#comment-form textarea'), + ]; + for (const textarea of commentTextareas) { + // Most users won't feel too sad if they lose a comment with 10 chars, they can re-type these in seconds. + // But if they have typed more (like 50) chars and the comment is lost, they will be very unhappy. + if (textarea && textarea.value.trim().length > 10) { + textarea.parentElement.scrollIntoView(); + if (!window.confirm('Page will be reloaded, but there are draft comments. Continuing to reload will discard the comments. Continue?')) { + return; + } + break; + } + } + window.location.reload(); +} + +export function initRepoIssueTimeTracking() { + $(document).on('click', '.issue-add-time', () => { + $('.issue-start-time-modal').modal({ + duration: 200, + onApprove() { + $('#add_time_manual_form').trigger('submit'); + }, + }).modal('show'); + $('.issue-start-time-modal input').on('keydown', (e) => { + if ((e.keyCode || e.key) === 13) { + $('#add_time_manual_form').trigger('submit'); + } + }); + }); + $(document).on('click', '.issue-start-time, .issue-stop-time', () => { + $('#toggle_stopwatch_form').trigger('submit'); + }); + $(document).on('click', '.issue-cancel-time', () => { + $('#cancel_stopwatch_form').trigger('submit'); + }); + $(document).on('click', 'button.issue-delete-time', function () { + const sel = `.issue-delete-time-modal[data-id="${$(this).data('id')}"]`; + $(sel).modal({ + duration: 200, + onApprove() { + $(`${sel} form`).trigger('submit'); + }, + }).modal('show'); + }); +} + +async function updateDeadline(deadlineString) { + hideElem('#deadline-err-invalid-date'); + document.getElementById('deadline-loader')?.classList.add('is-loading'); + + let realDeadline = null; + if (deadlineString !== '') { + const newDate = Date.parse(deadlineString); + + if (Number.isNaN(newDate)) { + document.getElementById('deadline-loader')?.classList.remove('is-loading'); + showElem('#deadline-err-invalid-date'); + return false; + } + realDeadline = new Date(newDate); + } + + try { + const response = await POST(document.getElementById('update-issue-deadline-form').getAttribute('action'), { + data: {due_date: realDeadline}, + }); + + if (response.ok) { + window.location.reload(); + } else { + throw new Error('Invalid response'); + } + } catch (error) { + console.error(error); + document.getElementById('deadline-loader').classList.remove('is-loading'); + showElem('#deadline-err-invalid-date'); + } +} + +export function initRepoIssueDue() { + $(document).on('click', '.issue-due-edit', () => { + toggleElem('#deadlineForm'); + }); + $(document).on('click', '.issue-due-remove', () => { + updateDeadline(''); + }); + $(document).on('submit', '.issue-due-form', () => { + updateDeadline($('#deadlineDate').val()); + return false; + }); +} + +/** + * @param {HTMLElement} item + */ +function excludeLabel(item) { + const href = item.getAttribute('href'); + const id = item.getAttribute('data-label-id'); + + const regStr = `labels=((?:-?[0-9]+%2c)*)(${id})((?:%2c-?[0-9]+)*)&`; + const newStr = 'labels=$1-$2$3&'; + + window.location = href.replace(new RegExp(regStr), newStr); +} + +export function initRepoIssueSidebarList() { + const repolink = $('#repolink').val(); + const repoId = $('#repoId').val(); + const crossRepoSearch = $('#crossRepoSearch').val(); + const tp = $('#type').val(); + let issueSearchUrl = `${appSubUrl}/${repolink}/issues/search?q={query}&type=${tp}`; + if (crossRepoSearch === 'true') { + issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${repoId}&type=${tp}`; + } + $('#new-dependency-drop-list') + .dropdown({ + apiSettings: { + url: issueSearchUrl, + onResponse(response) { + const filteredResponse = {success: true, results: []}; + const currIssueId = $('#new-dependency-drop-list').data('issue-id'); + // Parse the response from the api to work with our dropdown + $.each(response, (_i, issue) => { + // Don't list current issue in the dependency list. + if (issue.id === currIssueId) { + return; + } + filteredResponse.results.push({ + name: `#${issue.number} ${issueTitleHTML(htmlEscape(issue.title)) + }<div class="text small tw-break-anywhere">${htmlEscape(issue.repository.full_name)}</div>`, + value: issue.id, + }); + }); + return filteredResponse; + }, + cache: false, + }, + + fullTextSearch: true, + }); + + $('.menu a.label-filter-item').each(function () { + $(this).on('click', function (e) { + if (e.altKey) { + e.preventDefault(); + excludeLabel(this); + } + }); + }); + + $('.menu .ui.dropdown.label-filter').on('keydown', (e) => { + if (e.altKey && e.keyCode === 13) { + const selectedItem = document.querySelector('.menu .ui.dropdown.label-filter .menu .item.selected'); + if (selectedItem) { + excludeLabel(selectedItem); + } + } + }); + $('.ui.dropdown.label-filter, .ui.dropdown.select-label').dropdown('setting', {'hideDividers': 'empty'}).dropdown('refreshItems'); +} + +export function initRepoIssueCommentDelete() { + // Delete comment + document.addEventListener('click', async (e) => { + if (!e.target.matches('.delete-comment')) return; + e.preventDefault(); + + const deleteButton = e.target; + if (window.confirm(deleteButton.getAttribute('data-locale'))) { + try { + const response = await POST(deleteButton.getAttribute('data-url')); + if (!response.ok) throw new Error('Failed to delete comment'); + + const conversationHolder = deleteButton.closest('.conversation-holder'); + const parentTimelineItem = deleteButton.closest('.timeline-item'); + const parentTimelineGroup = deleteButton.closest('.timeline-item-group'); + + // Check if this was a pending comment. + if (conversationHolder?.querySelector('.pending-label')) { + const counter = document.querySelector('#review-box .review-comments-counter'); + let num = parseInt(counter?.getAttribute('data-pending-comment-number')) - 1 || 0; + num = Math.max(num, 0); + counter.setAttribute('data-pending-comment-number', num); + counter.textContent = String(num); + } + + document.getElementById(deleteButton.getAttribute('data-comment-id'))?.remove(); + + if (conversationHolder && !conversationHolder.querySelector('.comment')) { + const path = conversationHolder.getAttribute('data-path'); + const side = conversationHolder.getAttribute('data-side'); + const idx = conversationHolder.getAttribute('data-idx'); + const lineType = conversationHolder.closest('tr').getAttribute('data-line-type'); + + if (lineType === 'same') { + document.querySelector(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).classList.remove('tw-invisible'); + } else { + document.querySelector(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).classList.remove('tw-invisible'); + } + + conversationHolder.remove(); + } + + // Check if there is no review content, move the time avatar upward to avoid overlapping the content below. + if (!parentTimelineGroup?.querySelector('.timeline-item.comment') && !parentTimelineItem?.querySelector('.conversation-holder')) { + const timelineAvatar = parentTimelineGroup?.querySelector('.timeline-avatar'); + timelineAvatar?.classList.remove('timeline-avatar-offset'); + } + } catch (error) { + console.error(error); + } + } + }); +} + +export function initRepoIssueDependencyDelete() { + // Delete Issue dependency + $(document).on('click', '.delete-dependency-button', (e) => { + const id = e.currentTarget.getAttribute('data-id'); + const type = e.currentTarget.getAttribute('data-type'); + + $('.remove-dependency').modal({ + closable: false, + duration: 200, + onApprove: () => { + $('#removeDependencyID').val(id); + $('#dependencyType').val(type); + $('#removeDependencyForm').trigger('submit'); + }, + }).modal('show'); + }); +} + +export function initRepoIssueCodeCommentCancel() { + // Cancel inline code comment + document.addEventListener('click', (e) => { + if (!e.target.matches('.cancel-code-comment')) return; + + const form = e.target.closest('form'); + if (form?.classList.contains('comment-form')) { + hideElem(form); + showElem(form.closest('.comment-code-cloud')?.querySelectorAll('button.comment-form-reply')); + } else { + form.closest('.comment-code-cloud')?.remove(); + } + }); +} + +export function initRepoPullRequestUpdate() { + // Pull Request update button + const pullUpdateButton = document.querySelector('.update-button > button'); + if (!pullUpdateButton) return; + + pullUpdateButton.addEventListener('click', async function (e) { + e.preventDefault(); + const redirect = this.getAttribute('data-redirect'); + this.classList.add('is-loading'); + let response; + try { + response = await POST(this.getAttribute('data-do')); + } catch (error) { + console.error(error); + } finally { + this.classList.remove('is-loading'); + } + let data; + try { + data = await response?.json(); // the response is probably not a JSON + } catch (error) { + console.error(error); + } + if (data?.redirect) { + window.location.href = data.redirect; + } else if (redirect) { + window.location.href = redirect; + } else { + window.location.reload(); + } + }); + + $('.update-button > .dropdown').dropdown({ + onChange(_text, _value, $choice) { + const url = $choice[0].getAttribute('data-do'); + if (url) { + const buttonText = pullUpdateButton.querySelector('.button-text'); + if (buttonText) { + buttonText.textContent = $choice.text(); + } + pullUpdateButton.setAttribute('data-do', url); + } + }, + }); +} + +export function initRepoPullRequestAllowMaintainerEdit() { + const wrapper = document.getElementById('allow-edits-from-maintainers'); + if (!wrapper) return; + const checkbox = wrapper.querySelector('input[type="checkbox"]'); + checkbox.addEventListener('input', async () => { + const url = `${wrapper.getAttribute('data-url')}/set_allow_maintainer_edit`; + wrapper.classList.add('is-loading'); + try { + const resp = await POST(url, {data: new URLSearchParams({allow_maintainer_edit: checkbox.checked})}); + if (!resp.ok) { + throw new Error('Failed to update maintainer edit permission'); + } + const data = await resp.json(); + checkbox.checked = data.allow_maintainer_edit; + } catch (error) { + checkbox.checked = !checkbox.checked; + console.error(error); + showTemporaryTooltip(wrapper, wrapper.getAttribute('data-prompt-error')); + } finally { + wrapper.classList.remove('is-loading'); + } + }); +} + +export function initRepoIssueReferenceRepositorySearch() { + $('.issue_reference_repository_search') + .dropdown({ + apiSettings: { + url: `${appSubUrl}/repo/search?q={query}&limit=20`, + onResponse(response) { + const filteredResponse = {success: true, results: []}; + $.each(response.data, (_r, repo) => { + filteredResponse.results.push({ + name: htmlEscape(repo.repository.full_name), + value: repo.repository.full_name, + }); + }); + return filteredResponse; + }, + cache: false, + }, + onChange(_value, _text, $choice) { + const $form = $choice.closest('form'); + if (!$form.length) return; + + $form[0].setAttribute('action', `${appSubUrl}/${_text}/issues/new`); + }, + fullTextSearch: true, + }); +} + +export function initRepoIssueWipTitle() { + $('.title_wip_desc > a').on('click', (e) => { + e.preventDefault(); + + const $issueTitle = $('#issue_title'); + $issueTitle.trigger('focus'); + const value = $issueTitle.val().trim().toUpperCase(); + + const wipPrefixes = $('.title_wip_desc').data('wip-prefixes'); + for (const prefix of wipPrefixes) { + if (value.startsWith(prefix.toUpperCase())) { + return; + } + } + + $issueTitle.val(`${wipPrefixes[0]} ${$issueTitle.val()}`); + }); +} + +export async function updateIssuesMeta(url, action, issue_ids, id) { + try { + const response = await POST(url, {data: new URLSearchParams({action, issue_ids, id})}); + if (!response.ok) { + throw new Error('Failed to update issues meta'); + } + } catch (error) { + console.error(error); + } +} + +export function initRepoIssueComments() { + if (!$('.repository.view.issue .timeline').length) return; + + $('.re-request-review').on('click', async function (e) { + e.preventDefault(); + const url = this.getAttribute('data-update-url'); + const issueId = this.getAttribute('data-issue-id'); + const id = this.getAttribute('data-id'); + const isChecked = this.classList.contains('checked'); + + await updateIssuesMeta(url, isChecked ? 'detach' : 'attach', issueId, id); + window.location.reload(); + }); + + document.addEventListener('click', (e) => { + const urlTarget = document.querySelector(':target'); + if (!urlTarget) return; + + const urlTargetId = urlTarget.id; + if (!urlTargetId) return; + + if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return; + + if (!e.target.closest(`#${urlTargetId}`)) { + const scrollPosition = $(window).scrollTop(); + window.location.hash = ''; + $(window).scrollTop(scrollPosition); + window.history.pushState(null, null, ' '); + } + }); +} + +export async function handleReply($el) { + hideElem($el); + const $form = $el.closest('.comment-code-cloud').find('.comment-form'); + showElem($form); + + const $textarea = $form.find('textarea'); + let editor = getComboMarkdownEditor($textarea); + if (!editor) { + // FIXME: the initialization of the dropzone is not consistent. + // When the page is loaded, the dropzone is initialized by initGlobalDropzone, but the editor is not initialized. + // When the form is submitted and partially reload, none of them is initialized. + const dropzone = $form.find('.dropzone')[0]; + if (!dropzone.dropzone) initDropzone(dropzone); + editor = await initComboMarkdownEditor($form.find('.combo-markdown-editor')); + } + editor.focus(); + return editor; +} + +export function initRepoPullRequestReview() { + if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) { + // set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing + if (window.history.scrollRestoration !== 'manual') { + window.history.scrollRestoration = 'manual'; + } + const commentDiv = document.querySelector(window.location.hash); + if (commentDiv) { + // get the name of the parent id + const groupID = commentDiv.closest('div[id^="code-comments-"]')?.getAttribute('id'); + if (groupID && groupID.startsWith('code-comments-')) { + const id = groupID.slice(14); + const ancestorDiffBox = commentDiv.closest('.diff-file-box'); + // on pages like conversation, there is no diff header + const diffHeader = ancestorDiffBox?.querySelector('.diff-file-header'); + + // offset is for scrolling + let offset = 30; + if (diffHeader) { + offset += $('.diff-detail-box').outerHeight() + $(diffHeader).outerHeight(); + } + + hideElem(`#show-outdated-${id}`); + showElem(`#code-comments-${id}, #code-preview-${id}, #hide-outdated-${id}`); + // if the comment box is folded, expand it + if (ancestorDiffBox?.getAttribute('data-folded') === 'true') { + setFileFolding(ancestorDiffBox, ancestorDiffBox.querySelector('.fold-file'), false); + } + + window.scrollTo({ + top: $(commentDiv).offset().top - offset, + behavior: 'instant', + }); + } + } + } + + $(document).on('click', '.show-outdated', function (e) { + e.preventDefault(); + const id = this.getAttribute('data-comment'); + hideElem(this); + showElem(`#code-comments-${id}`); + showElem(`#code-preview-${id}`); + showElem(`#hide-outdated-${id}`); + }); + + $(document).on('click', '.hide-outdated', function (e) { + e.preventDefault(); + const id = this.getAttribute('data-comment'); + hideElem(this); + hideElem(`#code-comments-${id}`); + hideElem(`#code-preview-${id}`); + showElem(`#show-outdated-${id}`); + }); + + $(document).on('click', 'button.comment-form-reply', async function (e) { + e.preventDefault(); + await handleReply($(this)); + }); + + const $reviewBox = $('.review-box-panel'); + if ($reviewBox.length === 1) { + const _promise = initComboMarkdownEditor($reviewBox.find('.combo-markdown-editor')); + } + + // The following part is only for diff views + if (!$('.repository.pull.diff').length) return; + + const $reviewBtn = $('.js-btn-review'); + const $panel = $reviewBtn.parent().find('.review-box-panel'); + const $closeBtn = $panel.find('.close'); + + if ($reviewBtn.length && $panel.length) { + const tippy = createTippy($reviewBtn[0], { + content: $panel[0], + placement: 'bottom', + trigger: 'click', + maxWidth: 'none', + interactive: true, + hideOnClick: true, + }); + + $closeBtn.on('click', (e) => { + e.preventDefault(); + tippy.hide(); + }); + } + + $(document).on('click', '.add-code-comment', async function (e) { + if (e.target.classList.contains('btn-add-single')) return; // https://github.com/go-gitea/gitea/issues/4745 + e.preventDefault(); + + const isSplit = this.closest('.code-diff')?.classList.contains('code-diff-split'); + const side = this.getAttribute('data-side'); + const idx = this.getAttribute('data-idx'); + const path = this.closest('[data-path]')?.getAttribute('data-path'); + const tr = this.closest('tr'); + const lineType = tr.getAttribute('data-line-type'); + + const ntr = tr.nextElementSibling; + let $ntr = $(ntr); + if (!ntr?.classList.contains('add-comment')) { + $ntr = $(` + <tr class="add-comment" data-line-type="${lineType}"> + ${isSplit ? ` + <td class="add-comment-left" colspan="4"></td> + <td class="add-comment-right" colspan="4"></td> + ` : ` + <td class="add-comment-left add-comment-right" colspan="5"></td> + `} + </tr>`); + $(tr).after($ntr); + } + + const $td = $ntr.find(`.add-comment-${side}`); + const $commentCloud = $td.find('.comment-code-cloud'); + if (!$commentCloud.length && !$ntr.find('button[name="pending_review"]').length) { + try { + const response = await GET(this.closest('[data-new-comment-url]')?.getAttribute('data-new-comment-url')); + const html = await response.text(); + $td.html(html); + $td.find("input[name='line']").val(idx); + $td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed'); + $td.find("input[name='path']").val(path); + + initDropzone($td.find('.dropzone')[0]); + const editor = await initComboMarkdownEditor($td.find('.combo-markdown-editor')); + editor.focus(); + } catch (error) { + console.error(error); + } + } + }); +} + +export function initRepoIssueReferenceIssue() { + // Reference issue + $(document).on('click', '.reference-issue', function (event) { + const $this = $(this); + const content = $(`#${$this.data('target')}`).text(); + const poster = $this.data('poster-username'); + const reference = toAbsoluteUrl($this.data('reference')); + const $modal = $($this.data('modal')); + $modal.find('textarea[name="content"]').val(`${content}\n\n_Originally posted by @${poster} in ${reference}_`); + $modal.modal('show'); + + event.preventDefault(); + }); +} + +export function initRepoIssueWipToggle() { + // Toggle WIP + $('.toggle-wip a, .toggle-wip button').on('click', async (e) => { + e.preventDefault(); + const toggleWip = e.currentTarget.closest('.toggle-wip'); + const title = toggleWip.getAttribute('data-title'); + const wipPrefixes = JSON.parse(toggleWip.getAttribute('data-wip-prefixes')); + const updateUrl = toggleWip.getAttribute('data-update-url'); + const prefix = wipPrefixes.find((prefix) => title.startsWith(prefix)); + + try { + const params = new URLSearchParams(); + params.append('title', prefix !== undefined ? title.slice(prefix.length).trim() : `${wipPrefixes[0].trim()} ${title}`); + + const response = await POST(updateUrl, {data: params}); + if (!response.ok) { + throw new Error('Failed to toggle WIP status'); + } + window.location.reload(); + } catch (error) { + console.error(error); + } + }); +} + +export function initRepoIssueTitleEdit() { + const issueTitleDisplay = document.querySelector('#issue-title-display'); + const issueTitleEditor = document.querySelector('#issue-title-editor'); + if (!issueTitleEditor) return; + + const issueTitleInput = issueTitleEditor.querySelector('input'); + const oldTitle = issueTitleInput.getAttribute('data-old-title'); + issueTitleDisplay.querySelector('#issue-title-edit-show').addEventListener('click', () => { + hideElem(issueTitleDisplay); + hideElem('#pull-desc-display'); + showElem(issueTitleEditor); + showElem('#pull-desc-editor'); + if (!issueTitleInput.value.trim()) { + issueTitleInput.value = oldTitle; + } + issueTitleInput.focus(); + }); + issueTitleEditor.querySelector('.ui.cancel.button').addEventListener('click', () => { + hideElem(issueTitleEditor); + hideElem('#pull-desc-editor'); + showElem(issueTitleDisplay); + showElem('#pull-desc-display'); + }); + + const pullDescEditor = document.querySelector('#pull-desc-editor'); // it may not exist for a merged PR + const prTargetUpdateUrl = pullDescEditor?.getAttribute('data-target-update-url'); + + const editSaveButton = issueTitleEditor.querySelector('.ui.primary.button'); + const saveAndRefresh = async () => { + const newTitle = issueTitleInput.value.trim(); + try { + if (newTitle && newTitle !== oldTitle) { + const resp = await POST(editSaveButton.getAttribute('data-update-url'), {data: new URLSearchParams({title: newTitle})}); + if (!resp.ok) { + throw new Error(`Failed to update issue title: ${resp.statusText}`); + } + } + if (prTargetUpdateUrl) { + const newTargetBranch = document.querySelector('#pull-target-branch').getAttribute('data-branch'); + const oldTargetBranch = document.querySelector('#branch_target').textContent; + if (newTargetBranch !== oldTargetBranch) { + const resp = await POST(prTargetUpdateUrl, {data: new URLSearchParams({target_branch: newTargetBranch})}); + if (!resp.ok) { + throw new Error(`Failed to update PR target branch: ${resp.statusText}`); + } + } + } + window.location.reload(); + } catch (error) { + console.error(error); + showErrorToast(error.message); + } + }; + editSaveButton.addEventListener('click', saveAndRefresh); + issueTitleEditor.querySelector('input').addEventListener('ce-quick-submit', saveAndRefresh); +} + +export function initRepoIssueBranchSelect() { + document.querySelector('#branch-select')?.addEventListener('click', (e) => { + const el = e.target.closest('.item[data-branch]'); + if (!el) return; + const pullTargetBranch = document.querySelector('#pull-target-branch'); + const baseName = pullTargetBranch.getAttribute('data-basename'); + const branchNameNew = el.getAttribute('data-branch'); + const branchNameOld = pullTargetBranch.getAttribute('data-branch'); + pullTargetBranch.textContent = pullTargetBranch.textContent.replace(`${baseName}:${branchNameOld}`, `${baseName}:${branchNameNew}`); + pullTargetBranch.setAttribute('data-branch', branchNameNew); + }); +} + +export function initRepoIssueAssignMe() { + // Assign to me button + document.querySelector('.ui.assignees.list .item.no-select .select-assign-me') + ?.addEventListener('click', (e) => { + e.preventDefault(); + const selectMe = e.target; + const noSelect = selectMe.parentElement; + const selectorList = document.querySelector('.ui.select-assignees .menu'); + + if (selectMe.getAttribute('data-action') === 'update') { + (async () => { + await updateIssuesMeta( + selectMe.getAttribute('data-update-url'), + selectMe.getAttribute('data-action'), + selectMe.getAttribute('data-issue-id'), + selectMe.getAttribute('data-id'), + ); + reloadConfirmDraftComment(); + })(); + } else { + for (const item of selectorList.querySelectorAll('.item')) { + if (item.getAttribute('data-id') === selectMe.getAttribute('data-id')) { + item.classList.add('checked'); + item.querySelector('.octicon-check').classList.remove('tw-invisible'); + } + } + document.querySelector(selectMe.getAttribute('data-id-selector')).classList.remove('tw-hidden'); + noSelect.classList.add('tw-hidden'); + document.querySelector(selectorList.getAttribute('data-id')).value = selectMe.getAttribute('data-id'); + return false; + } + }); +} + +export function initSingleCommentEditor($commentForm) { + // pages: + // * normal new issue/pr page, no status-button + // * issue/pr view page, with comment form, has status-button + const opts = {}; + const statusButton = document.getElementById('status-button'); + if (statusButton) { + opts.onContentChanged = (editor) => { + const statusText = statusButton.getAttribute(editor.value().trim() ? 'data-status-and-comment' : 'data-status'); + statusButton.textContent = statusText; + }; + } + initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts); +} + +export function initIssueTemplateCommentEditors($commentForm) { + // pages: + // * new issue with issue template + const $comboFields = $commentForm.find('.combo-editor-dropzone'); + + const initCombo = async ($combo) => { + const $dropzoneContainer = $combo.find('.form-field-dropzone'); + const $formField = $combo.find('.form-field-real'); + const $markdownEditor = $combo.find('.combo-markdown-editor'); + + const editor = await initComboMarkdownEditor($markdownEditor, { + onContentChanged: (editor) => { + $formField.val(editor.value()); + }, + }); + + $formField.on('focus', async () => { + // deactivate all markdown editors + showElem($commentForm.find('.combo-editor-dropzone .form-field-real')); + hideElem($commentForm.find('.combo-editor-dropzone .combo-markdown-editor')); + hideElem($commentForm.find('.combo-editor-dropzone .form-field-dropzone')); + + // activate this markdown editor + hideElem($formField); + showElem($markdownEditor); + showElem($dropzoneContainer); + + await editor.switchToUserPreference(); + editor.focus(); + }); + }; + + for (const el of $comboFields) { + initCombo($(el)); + } +} + +// This function used to show and hide archived label on issue/pr +// page in the sidebar where we select the labels +// If we have any archived label tagged to issue and pr. We will show that +// archived label with checked classed otherwise we will hide it +// with the help of this function. +// This function runs globally. +export function initArchivedLabelHandler() { + if (!document.querySelector('.archived-label-hint')) return; + for (const label of document.querySelectorAll('[data-is-archived]')) { + toggleElem(label, label.classList.contains('checked')); + } +} + +// Render the issue's title. It converts emojis and code blocks syntax into their respective HTML equivalent. +export function issueTitleHTML(title) { + return title.replaceAll(/:[-+\w]+:/g, (emoji) => emojiHTML(emoji.substring(1, emoji.length - 1))) + .replaceAll(/`[^`]+`/g, (code) => `<code class="inline-code-block">${code.substring(1, code.length - 1)}</code>`); +} diff --git a/web_src/js/features/repo-issue.test.js b/web_src/js/features/repo-issue.test.js new file mode 100644 index 0000000..8c9734b --- /dev/null +++ b/web_src/js/features/repo-issue.test.js @@ -0,0 +1,24 @@ +import {vi} from 'vitest'; + +import {issueTitleHTML} from './repo-issue.js'; + +// monaco-editor does not have any exports fields, which trips up vitest +vi.mock('./comp/ComboMarkdownEditor.js', () => ({})); +// jQuery is missing +vi.mock('./common-global.js', () => ({})); + +test('Convert issue title to html', () => { + expect(issueTitleHTML('')).toEqual(''); + expect(issueTitleHTML('issue title')).toEqual('issue title'); + + const expected_thumbs_up = `<span class="emoji" title=":+1:">👍</span>`; + expect(issueTitleHTML(':+1:')).toEqual(expected_thumbs_up); + expect(issueTitleHTML(':invalid emoji:')).toEqual(':invalid emoji:'); + + const expected_code_block = `<code class="inline-code-block">code</code>`; + expect(issueTitleHTML('`code`')).toEqual(expected_code_block); + expect(issueTitleHTML('`invalid code')).toEqual('`invalid code'); + expect(issueTitleHTML('invalid code`')).toEqual('invalid code`'); + + expect(issueTitleHTML('issue title :+1: `code`')).toEqual(`issue title ${expected_thumbs_up} ${expected_code_block}`); +}); diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js new file mode 100644 index 0000000..73aaa45 --- /dev/null +++ b/web_src/js/features/repo-legacy.js @@ -0,0 +1,610 @@ +import $ from 'jquery'; +import { + initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete, + initRepoIssueComments, initRepoIssueDependencyDelete, initRepoIssueReferenceIssue, + initRepoIssueTitleEdit, initRepoIssueWipToggle, + initRepoPullRequestUpdate, updateIssuesMeta, handleReply, initIssueTemplateCommentEditors, initSingleCommentEditor, + initRepoIssueAssignMe, reloadConfirmDraftComment, +} from './repo-issue.js'; +import {initUnicodeEscapeButton} from './repo-unicode-escape.js'; +import {svg} from '../svg.js'; +import {htmlEscape} from 'escape-goat'; +import {initRepoBranchTagSelector} from '../components/RepoBranchTagSelector.vue'; +import { + initRepoCloneLink, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown, +} from './repo-common.js'; +import {initCitationFileCopyContent} from './citation.js'; +import {initCompLabelEdit} from './comp/LabelEdit.js'; +import {initRepoDiffConversationNav} from './repo-diff.js'; +import {createDropzone} from './dropzone.js'; +import {showErrorToast} from '../modules/toast.js'; +import {initCommentContent, initMarkupContent} from '../markup/content.js'; +import {initCompReactionSelector} from './comp/ReactionSelector.js'; +import {initRepoSettingBranches} from './repo-settings.js'; +import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js'; +import {initRepoPullRequestCommitStatus} from './repo-issue-pr-status.js'; +import {hideElem, showElem} from '../utils/dom.js'; +import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; +import {attachRefIssueContextPopup} from './contextpopup.js'; +import {POST, GET} from '../modules/fetch.js'; + +const {csrfToken} = window.config; + +export function initRepoCommentForm() { + const $commentForm = $('.comment.form'); + if (!$commentForm.length) return; + + if ($commentForm.find('.field.combo-editor-dropzone').length) { + // at the moment, if a form has multiple combo-markdown-editors, it must be an issue template form + initIssueTemplateCommentEditors($commentForm); + } else if ($commentForm.find('.combo-markdown-editor').length) { + // it's quite unclear about the "comment form" elements, sometimes it's for issue comment, sometimes it's for file editor/uploader message + initSingleCommentEditor($commentForm); + } + + function initBranchSelector() { + const $selectBranch = $('.ui.select-branch'); + const $branchMenu = $selectBranch.find('.reference-list-menu'); + const $isNewIssue = $branchMenu[0]?.classList.contains('new-issue'); + $branchMenu.find('.item:not(.no-select)').on('click', async function () { + const selectedValue = $(this).data('id'); + const editMode = $('#editing_mode').val(); + $($(this).data('id-selector')).val(selectedValue); + if ($isNewIssue) { + $selectBranch.find('.ui .branch-name').text($(this).data('name')); + return; + } + + if (editMode === 'true') { + const form = document.getElementById('update_issueref_form'); + const params = new URLSearchParams(); + params.append('ref', selectedValue); + try { + await POST(form.getAttribute('action'), {data: params}); + window.location.reload(); + } catch (error) { + console.error(error); + } + } else if (editMode === '') { + $selectBranch.find('.ui .branch-name').text(selectedValue); + } + }); + $selectBranch.find('.reference.column').on('click', function () { + hideElem($selectBranch.find('.scrolling.reference-list-menu')); + $selectBranch.find('.reference .text').removeClass('black'); + showElem($($(this).data('target'))); + $(this).find('.text').addClass('black'); + return false; + }); + } + + initBranchSelector(); + + // List submits + function initListSubmits(selector, outerSelector) { + const $list = $(`.ui.${outerSelector}.list`); + const $noSelect = $list.find('.no-select'); + const $listMenu = $(`.${selector} .menu`); + let hasUpdateAction = $listMenu.data('action') === 'update'; + const items = {}; + + $(`.${selector}`).dropdown({ + 'action': 'nothing', // do not hide the menu if user presses Enter + fullTextSearch: 'exact', + async onHide() { + hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var + if (hasUpdateAction) { + // TODO: Add batch functionality and make this 1 network request. + const itemEntries = Object.entries(items); + for (const [elementId, item] of itemEntries) { + await updateIssuesMeta( + item['update-url'], + item.action, + item['issue-id'], + elementId, + ); + } + if (itemEntries.length) { + reloadConfirmDraftComment(); + } + } + }, + }); + + $listMenu.find('.item:not(.no-select)').on('click', function (e) { + e.preventDefault(); + if (this.classList.contains('ban-change')) { + return false; + } + + hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var + + const clickedItem = this; // eslint-disable-line unicorn/no-this-assignment + const scope = this.getAttribute('data-scope'); + + $(this).parent().find('.item').each(function () { + if (scope) { + // Enable only clicked item for scoped labels + if (this.getAttribute('data-scope') !== scope) { + return true; + } + if (this !== clickedItem && !this.classList.contains('checked')) { + return true; + } + } else if (this !== clickedItem) { + // Toggle for other labels + return true; + } + + if (this.classList.contains('checked')) { + $(this).removeClass('checked'); + $(this).find('.octicon-check').addClass('tw-invisible'); + if (hasUpdateAction) { + if (!($(this).data('id') in items)) { + items[$(this).data('id')] = { + 'update-url': $listMenu.data('update-url'), + action: 'detach', + 'issue-id': $listMenu.data('issue-id'), + }; + } else { + delete items[$(this).data('id')]; + } + } + } else { + $(this).addClass('checked'); + $(this).find('.octicon-check').removeClass('tw-invisible'); + if (hasUpdateAction) { + if (!($(this).data('id') in items)) { + items[$(this).data('id')] = { + 'update-url': $listMenu.data('update-url'), + action: 'attach', + 'issue-id': $listMenu.data('issue-id'), + }; + } else { + delete items[$(this).data('id')]; + } + } + } + }); + + // TODO: Which thing should be done for choosing review requests + // to make chosen items be shown on time here? + if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') { + return false; + } + + const listIds = []; + $(this).parent().find('.item').each(function () { + if (this.classList.contains('checked')) { + listIds.push($(this).data('id')); + $($(this).data('id-selector')).removeClass('tw-hidden'); + } else { + $($(this).data('id-selector')).addClass('tw-hidden'); + } + }); + if (!listIds.length) { + $noSelect.removeClass('tw-hidden'); + } else { + $noSelect.addClass('tw-hidden'); + } + $($(this).parent().data('id')).val(listIds.join(',')); + return false; + }); + $listMenu.find('.no-select.item').on('click', function (e) { + e.preventDefault(); + if (hasUpdateAction) { + (async () => { + await updateIssuesMeta( + $listMenu.data('update-url'), + 'clear', + $listMenu.data('issue-id'), + '', + ); + reloadConfirmDraftComment(); + })(); + } + + $(this).parent().find('.item').each(function () { + $(this).removeClass('checked'); + $(this).find('.octicon-check').addClass('tw-invisible'); + }); + + if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') { + return false; + } + + $list.find('.item').each(function () { + $(this).addClass('tw-hidden'); + }); + $noSelect.removeClass('tw-hidden'); + $($(this).parent().data('id')).val(''); + }); + } + + // Init labels and assignees + initListSubmits('select-label', 'labels'); + initListSubmits('select-assignees', 'assignees'); + initRepoIssueAssignMe(); + initListSubmits('select-assignees-modify', 'assignees'); + initListSubmits('select-reviewers-modify', 'assignees'); + + function selectItem(select_id, input_id) { + const $menu = $(`${select_id} .menu`); + const $list = $(`.ui${select_id}.list`); + const hasUpdateAction = $menu.data('action') === 'update'; + + $menu.find('.item:not(.no-select)').on('click', function () { + $(this).parent().find('.item').each(function () { + $(this).removeClass('selected active'); + }); + + $(this).addClass('selected active'); + if (hasUpdateAction) { + (async () => { + await updateIssuesMeta( + $menu.data('update-url'), + '', + $menu.data('issue-id'), + $(this).data('id'), + ); + reloadConfirmDraftComment(); + })(); + } + + let icon = ''; + if (input_id === '#milestone_id') { + icon = svg('octicon-milestone', 18, 'tw-mr-2'); + } else if (input_id === '#project_id') { + icon = svg('octicon-project', 18, 'tw-mr-2'); + } else if (input_id === '#assignee_ids') { + icon = `<img class="ui avatar image tw-mr-2" alt="avatar" src=${$(this).data('avatar')}>`; + } + + $list.find('.selected').html(` + <a class="item muted sidebar-item-link" href=${$(this).data('href')}> + ${icon} + ${htmlEscape($(this).text())} + </a> + `); + + $(`.ui${select_id}.list .no-select`).addClass('tw-hidden'); + $(input_id).val($(this).data('id')); + }); + $menu.find('.no-select.item').on('click', function () { + $(this).parent().find('.item:not(.no-select)').each(function () { + $(this).removeClass('selected active'); + }); + + if (hasUpdateAction) { + (async () => { + await updateIssuesMeta( + $menu.data('update-url'), + '', + $menu.data('issue-id'), + $(this).data('id'), + ); + reloadConfirmDraftComment(); + })(); + } + + $list.find('.selected').html(''); + $list.find('.no-select').removeClass('tw-hidden'); + $(input_id).val(''); + }); + } + + // Milestone, Assignee, Project + selectItem('.select-project', '#project_id'); + selectItem('.select-milestone', '#milestone_id'); + selectItem('.select-assignee', '#assignee_ids'); +} + +async function onEditContent(event) { + event.preventDefault(); + + const segment = this.closest('.header').nextElementSibling; + const editContentZone = segment.querySelector('.edit-content-zone'); + const renderContent = segment.querySelector('.render-content'); + const rawContent = segment.querySelector('.raw-content'); + + let comboMarkdownEditor; + + /** + * @param {HTMLElement} dropzone + */ + const setupDropzone = async (dropzone) => { + if (!dropzone) return null; + + let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event + let fileUuidDict = {}; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone + const dz = await createDropzone(dropzone, { + url: dropzone.getAttribute('data-upload-url'), + headers: {'X-Csrf-Token': csrfToken}, + maxFiles: dropzone.getAttribute('data-max-file'), + maxFilesize: dropzone.getAttribute('data-max-size'), + acceptedFiles: ['*/*', ''].includes(dropzone.getAttribute('data-accepts')) ? null : dropzone.getAttribute('data-accepts'), + addRemoveLinks: true, + dictDefaultMessage: dropzone.getAttribute('data-default-message'), + dictInvalidFileType: dropzone.getAttribute('data-invalid-input-type'), + dictFileTooBig: dropzone.getAttribute('data-file-too-big'), + dictRemoveFile: dropzone.getAttribute('data-remove-file'), + timeout: 0, + thumbnailMethod: 'contain', + thumbnailWidth: 480, + thumbnailHeight: 480, + init() { + this.on('success', (file, data) => { + file.uuid = data.uuid; + fileUuidDict[file.uuid] = {submitted: false}; + const input = document.createElement('input'); + input.id = data.uuid; + input.name = 'files'; + input.type = 'hidden'; + input.value = data.uuid; + dropzone.querySelector('.files').append(input); + }); + this.on('removedfile', async (file) => { + document.getElementById(file.uuid)?.remove(); + if (disableRemovedfileEvent) return; + if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) { + try { + await POST(dropzone.getAttribute('data-remove-url'), {data: new URLSearchParams({file: file.uuid})}); + } catch (error) { + console.error(error); + } + } + }); + this.on('submit', () => { + for (const fileUuid of Object.keys(fileUuidDict)) { + fileUuidDict[fileUuid].submitted = true; + } + }); + this.on('reload', async () => { + try { + const response = await GET(editContentZone.getAttribute('data-attachment-url')); + const data = await response.json(); + // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server + disableRemovedfileEvent = true; + dz.removeAllFiles(true); + dropzone.querySelector('.files').innerHTML = ''; + for (const el of dropzone.querySelectorAll('.dz-preview')) el.remove(); + fileUuidDict = {}; + disableRemovedfileEvent = false; + + for (const attachment of data) { + const imgSrc = `${dropzone.getAttribute('data-link-url')}/${attachment.uuid}`; + dz.emit('addedfile', attachment); + dz.emit('thumbnail', attachment, imgSrc); + dz.emit('complete', attachment); + fileUuidDict[attachment.uuid] = {submitted: true}; + dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%'; + const input = document.createElement('input'); + input.id = attachment.uuid; + input.name = 'files'; + input.type = 'hidden'; + input.value = attachment.uuid; + dropzone.querySelector('.files').append(input); + } + if (!dropzone.querySelector('.dz-preview')) { + dropzone.classList.remove('dz-started'); + } + } catch (error) { + console.error(error); + } + }); + }, + }); + dz.emit('reload'); + return dz; + }; + + const cancelAndReset = (e) => { + e.preventDefault(); + showElem(renderContent); + hideElem(editContentZone); + comboMarkdownEditor.attachedDropzoneInst?.emit('reload'); + }; + + const saveAndRefresh = async (e) => { + e.preventDefault(); + showElem(renderContent); + hideElem(editContentZone); + const dropzoneInst = comboMarkdownEditor.attachedDropzoneInst; + try { + const params = new URLSearchParams({ + content: comboMarkdownEditor.value(), + context: editContentZone.getAttribute('data-context'), + content_version: editContentZone.getAttribute('data-content-version'), + }); + for (const fileInput of dropzoneInst?.element.querySelectorAll('.files [name=files]')) params.append('files[]', fileInput.value); + + const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params}); + const data = await response.json(); + if (response.status === 400) { + showErrorToast(data.errorMessage); + return; + } + editContentZone.setAttribute('data-content-version', data.contentVersion); + if (!data.content) { + renderContent.innerHTML = document.getElementById('no-content').innerHTML; + rawContent.textContent = ''; + } else { + renderContent.innerHTML = data.content; + rawContent.textContent = comboMarkdownEditor.value(); + const refIssues = renderContent.querySelectorAll('p .ref-issue'); + attachRefIssueContextPopup(refIssues); + } + const content = segment; + if (!content.querySelector('.dropzone-attachments')) { + if (data.attachments !== '') { + content.insertAdjacentHTML('beforeend', data.attachments); + } + } else if (data.attachments === '') { + content.querySelector('.dropzone-attachments').remove(); + } else { + content.querySelector('.dropzone-attachments').outerHTML = data.attachments; + } + dropzoneInst?.emit('submit'); + dropzoneInst?.emit('reload'); + initMarkupContent(); + initCommentContent(); + } catch (error) { + console.error(error); + } + }; + + comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor')); + if (!comboMarkdownEditor) { + editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML; + comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor')); + comboMarkdownEditor.attachedDropzoneInst = await setupDropzone(editContentZone.querySelector('.dropzone')); + editContentZone.addEventListener('ce-quick-submit', saveAndRefresh); + editContentZone.querySelector('.cancel.button').addEventListener('click', cancelAndReset); + editContentZone.querySelector('.save.button').addEventListener('click', saveAndRefresh); + } else { + const tabEditor = editContentZone.querySelector('.combo-markdown-editor').querySelector('.tabular.menu > a[data-tab-for=markdown-writer]'); + tabEditor?.click(); + } + + // Show write/preview tab and copy raw content as needed + showElem(editContentZone); + hideElem(renderContent); + if (!comboMarkdownEditor.value()) { + comboMarkdownEditor.value(rawContent.textContent); + } + comboMarkdownEditor.focus(); +} + +export function initRepository() { + if (!$('.page-content.repository').length) return; + + initRepoBranchTagSelector('.js-branch-tag-selector'); + + // Options + if ($('.repository.settings.options').length > 0) { + // Enable or select internal/external wiki system and issue tracker. + $('.enable-system').on('change', function () { + if (this.checked) { + $($(this).data('target')).removeClass('disabled'); + if (!$(this).data('context')) $($(this).data('context')).addClass('disabled'); + } else { + $($(this).data('target')).addClass('disabled'); + if (!$(this).data('context')) $($(this).data('context')).removeClass('disabled'); + } + }); + $('.enable-system-radio').on('change', function () { + if (this.value === 'false') { + $($(this).data('target')).addClass('disabled'); + if ($(this).data('context') !== undefined) $($(this).data('context')).removeClass('disabled'); + } else if (this.value === 'true') { + $($(this).data('target')).removeClass('disabled'); + if ($(this).data('context') !== undefined) $($(this).data('context')).addClass('disabled'); + } + }); + const $trackerIssueStyleRadios = $('.js-tracker-issue-style'); + $trackerIssueStyleRadios.on('change input', () => { + const checkedVal = $trackerIssueStyleRadios.filter(':checked').val(); + $('#tracker-issue-style-regex-box').toggleClass('disabled', checkedVal !== 'regexp'); + }); + } + + // Labels + initCompLabelEdit('.repository.labels'); + + // Milestones + if ($('.repository.new.milestone').length > 0) { + $('#clear-date').on('click', () => { + $('#deadline').val(''); + return false; + }); + } + + // Repo Creation + if ($('.repository.new.repo').length > 0) { + $('input[name="gitignores"], input[name="license"]').on('change', () => { + const gitignores = $('input[name="gitignores"]').val(); + const license = $('input[name="license"]').val(); + if (gitignores || license) { + document.querySelector('input[name="auto_init"]').checked = true; + } + }); + } + + // Compare or pull request + const $repoDiff = $('.repository.diff'); + if ($repoDiff.length) { + initRepoCommonBranchOrTagDropdown('.choose.branch .dropdown'); + initRepoCommonFilterSearchDropdown('.choose.branch .dropdown'); + } + + initRepoCloneLink(); + initCitationFileCopyContent(); + initRepoSettingBranches(); + + // Issues + if ($('.repository.view.issue').length > 0) { + initRepoIssueCommentEdit(); + + initRepoIssueBranchSelect(); + initRepoIssueTitleEdit(); + initRepoIssueWipToggle(); + initRepoIssueComments(); + + initRepoDiffConversationNav(); + initRepoIssueReferenceIssue(); + + initRepoIssueCommentDelete(); + initRepoIssueDependencyDelete(); + initRepoIssueCodeCommentCancel(); + initRepoPullRequestUpdate(); + initCompReactionSelector($(document)); + + initRepoPullRequestMergeForm(); + initRepoPullRequestCommitStatus(); + } + + // Pull request + const $repoComparePull = $('.repository.compare.pull'); + if ($repoComparePull.length > 0) { + // show pull request form + $repoComparePull.find('button.show-form').on('click', function (e) { + e.preventDefault(); + hideElem($(this).parent()); + + const $form = $repoComparePull.find('.pullrequest-form'); + showElem($form); + }); + } + + initUnicodeEscapeButton(); +} + +function initRepoIssueCommentEdit() { + // Edit issue or comment content + $(document).on('click', '.edit-content', onEditContent); + + // Quote reply + $(document).on('click', '.quote-reply', async function (event) { + event.preventDefault(); + const target = $(this).data('target'); + const quote = $(`#${target}`).text().replace(/\n/g, '\n> '); + const content = `> ${quote}\n\n`; + let editor; + if (this.classList.contains('quote-reply-diff')) { + const $replyBtn = $(this).closest('.comment-code-cloud').find('button.comment-form-reply'); + editor = await handleReply($replyBtn); + } else { + // for normal issue/comment page + editor = getComboMarkdownEditor($('#comment-form .combo-markdown-editor')); + } + if (editor) { + if (editor.value()) { + editor.value(`${editor.value()}\n\n${content}`); + } else { + editor.value(content); + } + editor.focus(); + editor.moveCursorToEnd(); + } + }); +} diff --git a/web_src/js/features/repo-migrate.js b/web_src/js/features/repo-migrate.js new file mode 100644 index 0000000..fc42ce8 --- /dev/null +++ b/web_src/js/features/repo-migrate.js @@ -0,0 +1,64 @@ +import {hideElem, showElem} from '../utils/dom.js'; +import {GET, POST} from '../modules/fetch.js'; + +const {appSubUrl} = window.config; + +export function initRepoMigrationStatusChecker() { + const repoMigrating = document.getElementById('repo_migrating'); + if (!repoMigrating) return; + + document.getElementById('repo_migrating_retry')?.addEventListener('click', doMigrationRetry); + + const task = repoMigrating.getAttribute('data-migrating-task-id'); + + // returns true if the refresh still needs to be called after a while + const refresh = async () => { + const res = await GET(`${appSubUrl}/user/task/${task}`); + if (res.url.endsWith('/login')) return false; // stop refreshing if redirected to login + if (res.status !== 200) return true; // continue to refresh if network error occurs + + const data = await res.json(); + + // for all status + if (data.message) { + document.getElementById('repo_migrating_progress_message').textContent = data.message; + } + + // TaskStatusFinished + if (data.status === 4) { + window.location.reload(); + return false; + } + + // TaskStatusFailed + if (data.status === 3) { + hideElem('#repo_migrating_progress'); + hideElem('#repo_migrating'); + showElem('#repo_migrating_retry'); + showElem('#repo_migrating_failed'); + showElem('#repo_migrating_failed_image'); + document.getElementById('repo_migrating_failed_error').textContent = data.message; + return false; + } + + return true; // continue to refresh + }; + + const syncTaskStatus = async () => { + let doNextRefresh = true; + try { + doNextRefresh = await refresh(); + } finally { + if (doNextRefresh) { + setTimeout(syncTaskStatus, 2000); + } + } + }; + + syncTaskStatus(); // no await +} + +async function doMigrationRetry(e) { + await POST(e.target.getAttribute('data-migrating-task-retry-url')); + window.location.reload(); +} diff --git a/web_src/js/features/repo-migration.js b/web_src/js/features/repo-migration.js new file mode 100644 index 0000000..59e282e --- /dev/null +++ b/web_src/js/features/repo-migration.js @@ -0,0 +1,69 @@ +import {hideElem, showElem, toggleElem} from '../utils/dom.js'; + +const service = document.getElementById('service_type'); +const user = document.getElementById('auth_username'); +const pass = document.getElementById('auth_password'); +const token = document.getElementById('auth_token'); +const mirror = document.getElementById('mirror'); +const lfs = document.getElementById('lfs'); +const lfsSettings = document.getElementById('lfs_settings'); +const lfsEndpoint = document.getElementById('lfs_endpoint'); +const items = document.querySelectorAll('#migrate_items input[type=checkbox]'); + +export function initRepoMigration() { + checkAuth(); + setLFSSettingsVisibility(); + + user?.addEventListener('input', () => {checkItems(false)}); + pass?.addEventListener('input', () => {checkItems(false)}); + token?.addEventListener('input', () => {checkItems(true)}); + mirror?.addEventListener('change', () => {checkItems(true)}); + document.getElementById('lfs_settings_show')?.addEventListener('click', (e) => { + e.preventDefault(); + e.stopPropagation(); + showElem(lfsEndpoint); + }); + lfs?.addEventListener('change', setLFSSettingsVisibility); + + const cloneAddr = document.getElementById('clone_addr'); + cloneAddr?.addEventListener('change', () => { + const repoName = document.getElementById('repo_name'); + if (cloneAddr.value && !repoName?.value) { // Only modify if repo_name input is blank + repoName.value = cloneAddr.value.match(/^(.*\/)?((.+?)(\.git)?)$/)[3]; + } + }); +} + +function checkAuth() { + if (!service) return; + const serviceType = Number(service.value); + + checkItems(serviceType !== 1); +} + +function checkItems(tokenAuth) { + let enableItems; + if (tokenAuth) { + enableItems = token?.value !== ''; + } else { + enableItems = user?.value !== '' || pass?.value !== ''; + } + if (enableItems && Number(service?.value) > 1) { + if (mirror?.checked) { + for (const item of items) { + item.disabled = item.name !== 'wiki'; + } + return; + } + for (const item of items) item.disabled = false; + } else { + for (const item of items) item.disabled = true; + } +} + +function setLFSSettingsVisibility() { + if (!lfs) return; + const visible = lfs.checked; + toggleElem(lfsSettings, visible); + hideElem(lfsEndpoint); +} diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js new file mode 100644 index 0000000..a1cc4b3 --- /dev/null +++ b/web_src/js/features/repo-projects.js @@ -0,0 +1,188 @@ +import $ from 'jquery'; +import {contrastColor} from '../utils/color.js'; +import {createSortable} from '../modules/sortable.js'; +import {POST, DELETE, PUT} from '../modules/fetch.js'; + +function updateIssueCount(cards) { + const parent = cards.parentElement; + const cnt = parent.getElementsByClassName('issue-card').length; + parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt; +} + +async function createNewColumn(url, columnTitle, projectColorInput) { + try { + await POST(url, { + data: { + title: columnTitle.val(), + color: projectColorInput.val(), + }, + }); + } catch (error) { + console.error(error); + } finally { + columnTitle.closest('form').removeClass('dirty'); + window.location.reload(); + } +} + +async function moveIssue({item, from, to, oldIndex}) { + const columnCards = to.getElementsByClassName('issue-card'); + updateIssueCount(from); + updateIssueCount(to); + + const columnSorting = { + issues: Array.from(columnCards, (card, i) => ({ + issueID: parseInt(card.getAttribute('data-issue')), + sorting: i, + })), + }; + + try { + await POST(`${to.getAttribute('data-url')}/move`, { + data: columnSorting, + }); + } catch (error) { + console.error(error); + from.insertBefore(item, from.children[oldIndex]); + } +} + +async function initRepoProjectSortable() { + const els = document.querySelectorAll('#project-board > .board.sortable'); + if (!els.length) return; + + // the HTML layout is: #project-board > .board > .project-column .cards > .issue-card + const mainBoard = els[0]; + let boardColumns = mainBoard.getElementsByClassName('project-column'); + createSortable(mainBoard, { + group: 'project-column', + draggable: '.project-column', + handle: '.project-column-header', + delayOnTouchOnly: true, + delay: 500, + onSort: async () => { + boardColumns = mainBoard.getElementsByClassName('project-column'); + + const columnSorting = { + columns: Array.from(boardColumns, (column, i) => ({ + columnID: parseInt(column.getAttribute('data-id')), + sorting: i, + })), + }; + + try { + await POST(mainBoard.getAttribute('data-url'), { + data: columnSorting, + }); + } catch (error) { + console.error(error); + } + }, + }); + + for (const boardColumn of boardColumns) { + const boardCardList = boardColumn.getElementsByClassName('cards')[0]; + createSortable(boardCardList, { + group: 'shared', + onAdd: moveIssue, + onUpdate: moveIssue, + delayOnTouchOnly: true, + delay: 500, + }); + } +} + +export function initRepoProject() { + if (!document.querySelector('.repository.projects')) { + return; + } + + const _promise = initRepoProjectSortable(); + + for (const modal of document.getElementsByClassName('edit-project-column-modal')) { + const projectHeader = modal.closest('.project-column-header'); + const projectTitleLabel = projectHeader?.querySelector('.project-column-title-label'); + const projectTitleInput = modal.querySelector('.project-column-title-input'); + const projectColorInput = modal.querySelector('#new_project_column_color'); + const boardColumn = modal.closest('.project-column'); + modal.querySelector('.edit-project-column-button')?.addEventListener('click', async function (e) { + e.preventDefault(); + try { + await PUT(this.getAttribute('data-url'), { + data: { + title: projectTitleInput?.value, + color: projectColorInput?.value, + }, + }); + } catch (error) { + console.error(error); + } finally { + projectTitleLabel.textContent = projectTitleInput?.value; + projectTitleInput.closest('form')?.classList.remove('dirty'); + const dividers = boardColumn.querySelectorAll(':scope > .divider'); + if (projectColorInput.value) { + const color = contrastColor(projectColorInput.value); + boardColumn.style.setProperty('background', projectColorInput.value, 'important'); + boardColumn.style.setProperty('color', color, 'important'); + for (const divider of dividers) { + divider.style.setProperty('color', color); + } + } else { + boardColumn.style.removeProperty('background'); + boardColumn.style.removeProperty('color'); + for (const divider of dividers) { + divider.style.removeProperty('color'); + } + } + $('.ui.modal').modal('hide'); + } + }); + } + + $('.default-project-column-modal').each(function () { + const $boardColumn = $(this).closest('.project-column'); + const $showButton = $($boardColumn).find('.default-project-column-show'); + const $commitButton = $(this).find('.actions > .ok.button'); + + $($commitButton).on('click', async (e) => { + e.preventDefault(); + + try { + await POST($($showButton).data('url')); + } catch (error) { + console.error(error); + } finally { + window.location.reload(); + } + }); + }); + + $('.show-delete-project-column-modal').each(function () { + const $deleteColumnModal = $(`${this.getAttribute('data-modal')}`); + const $deleteColumnButton = $deleteColumnModal.find('.actions > .ok.button'); + const deleteUrl = this.getAttribute('data-url'); + + $deleteColumnButton.on('click', async (e) => { + e.preventDefault(); + + try { + await DELETE(deleteUrl); + } catch (error) { + console.error(error); + } finally { + window.location.reload(); + } + }); + }); + + $('#new_project_column_submit').on('click', (e) => { + e.preventDefault(); + const $columnTitle = $('#new_project_column'); + const $projectColorInput = $('#new_project_column_color_picker'); + if (!$columnTitle.val()) { + return; + } + const url = e.target.getAttribute('data-url'); + createNewColumn(url, $columnTitle, $projectColorInput); + }); +} diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js new file mode 100644 index 0000000..0db9b8a --- /dev/null +++ b/web_src/js/features/repo-release.js @@ -0,0 +1,95 @@ +import {hideElem, showElem} from '../utils/dom.js'; +import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; + +export function initRepoRelease() { + for (const el of document.querySelectorAll('.remove-rel-attach')) { + el.addEventListener('click', (e) => { + const uuid = e.target.getAttribute('data-uuid'); + const id = e.target.getAttribute('data-id'); + document.querySelector(`input[name='attachment-del-${uuid}']`).value = + 'true'; + hideElem(`#attachment-${id}`); + }); + } +} + +export function initRepoReleaseNew() { + if (!document.querySelector('.repository.new.release')) return; + + initTagNameEditor(); + initRepoReleaseEditor(); + initAddExternalLinkButton(); +} + +function initTagNameEditor() { + const el = document.getElementById('tag-name-editor'); + if (!el) return; + + const existingTags = JSON.parse(el.getAttribute('data-existing-tags')); + if (!Array.isArray(existingTags)) return; + + const defaultTagHelperText = el.getAttribute('data-tag-helper'); + const newTagHelperText = el.getAttribute('data-tag-helper-new'); + const existingTagHelperText = el.getAttribute('data-tag-helper-existing'); + + document.getElementById('tag-name').addEventListener('keyup', (e) => { + const value = e.target.value; + const tagHelper = document.getElementById('tag-helper'); + if (existingTags.includes(value)) { + // If the tag already exists, hide the target branch selector. + hideElem('#tag-target-selector'); + tagHelper.textContent = existingTagHelperText; + } else { + showElem('#tag-target-selector'); + tagHelper.textContent = value ? newTagHelperText : defaultTagHelperText; + } + }); +} + +function initRepoReleaseEditor() { + const editor = document.querySelector( + '.repository.new.release .combo-markdown-editor', + ); + if (!editor) { + return; + } + initComboMarkdownEditor(editor); +} + +let newAttachmentCount = 0; + +function initAddExternalLinkButton() { + const addExternalLinkButton = document.getElementById('add-external-link'); + if (!addExternalLinkButton) return; + + addExternalLinkButton.addEventListener('click', () => { + newAttachmentCount += 1; + const attachmentTemplate = document.getElementById('attachment-template'); + + const newAttachment = attachmentTemplate.cloneNode(true); + newAttachment.id = `attachment-N${newAttachmentCount}`; + newAttachment.classList.remove('tw-hidden'); + + const attachmentName = newAttachment.querySelector( + 'input[name="attachment-template-new-name"]', + ); + attachmentName.name = `attachment-new-name-${newAttachmentCount}`; + attachmentName.required = true; + + const attachmentExtUrl = newAttachment.querySelector( + 'input[name="attachment-template-new-exturl"]', + ); + attachmentExtUrl.name = `attachment-new-exturl-${newAttachmentCount}`; + attachmentExtUrl.required = true; + + const attachmentDel = newAttachment.querySelector('.remove-rel-attach'); + attachmentDel.addEventListener('click', () => { + newAttachment.remove(); + }); + + attachmentTemplate.parentNode.insertBefore( + newAttachment, + attachmentTemplate, + ); + }); +} diff --git a/web_src/js/features/repo-search.js b/web_src/js/features/repo-search.js new file mode 100644 index 0000000..185f611 --- /dev/null +++ b/web_src/js/features/repo-search.js @@ -0,0 +1,22 @@ +export function initRepositorySearch() { + const repositorySearchForm = document.querySelector('#repo-search-form'); + if (!repositorySearchForm) return; + + repositorySearchForm.addEventListener('change', (e) => { + e.preventDefault(); + + const formData = new FormData(repositorySearchForm); + const params = new URLSearchParams(formData); + + if (e.target.name === 'clear-filter') { + params.delete('archived'); + params.delete('fork'); + params.delete('mirror'); + params.delete('template'); + params.delete('private'); + } + + params.delete('clear-filter'); + window.location.search = params.toString(); + }); +} diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js new file mode 100644 index 0000000..52c5de2 --- /dev/null +++ b/web_src/js/features/repo-settings.js @@ -0,0 +1,120 @@ +import $ from 'jquery'; +import {minimatch} from 'minimatch'; +import {createMonaco} from './codeeditor.js'; +import {onInputDebounce, toggleElem} from '../utils/dom.js'; +import {POST} from '../modules/fetch.js'; + +const {appSubUrl, csrfToken} = window.config; + +export function initRepoSettingsCollaboration() { + // Change collaborator access mode + $('.page-content.repository .ui.dropdown.access-mode').each((_, el) => { + const $dropdown = $(el); + const $text = $dropdown.find('> .text'); + $dropdown.dropdown({ + async action(_text, value) { + const lastValue = el.getAttribute('data-last-value'); + try { + el.setAttribute('data-last-value', value); + $dropdown.dropdown('hide'); + const data = new FormData(); + data.append('uid', el.getAttribute('data-uid')); + data.append('mode', value); + await POST(el.getAttribute('data-url'), {data}); + } catch { + $text.text('(error)'); // prevent from misleading users when error occurs + el.setAttribute('data-last-value', lastValue); + } + }, + onChange(_value, text, _$choice) { + $text.text(text); // update the text when using keyboard navigating + }, + onHide() { + // set to the really selected value, defer to next tick to make sure `action` has finished its work because the calling order might be onHide -> action + setTimeout(() => { + const $item = $dropdown.dropdown('get item', el.getAttribute('data-last-value')); + if ($item) { + $dropdown.dropdown('set selected', el.getAttribute('data-last-value')); + } else { + $text.text('(none)'); // prevent from misleading users when the access mode is undefined + } + }, 0); + }, + }); + }); +} + +export function initRepoSettingSearchTeamBox() { + const searchTeamBox = document.getElementById('search-team-box'); + if (!searchTeamBox) return; + + $(searchTeamBox).search({ + minCharacters: 2, + apiSettings: { + url: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`, + headers: {'X-Csrf-Token': csrfToken}, + onResponse(response) { + const items = []; + $.each(response.data, (_i, item) => { + items.push({ + title: item.name, + description: `${item.permission} access`, // TODO: translate this string + }); + }); + + return {results: items}; + }, + }, + searchFields: ['name', 'description'], + showNoResults: false, + }); +} + +export function initRepoSettingGitHook() { + if (!$('.edit.githook').length) return; + const filename = document.querySelector('.hook-filename').textContent; + const _promise = createMonaco($('#content')[0], filename, {language: 'shell'}); +} + +export function initRepoSettingBranches() { + if (!document.querySelector('.repository.settings.branches')) return; + + for (const el of document.getElementsByClassName('toggle-target-enabled')) { + el.addEventListener('change', function () { + const target = document.querySelector(this.getAttribute('data-target')); + target?.classList.toggle('disabled', !this.checked); + }); + } + + for (const el of document.getElementsByClassName('toggle-target-disabled')) { + el.addEventListener('change', function () { + const target = document.querySelector(this.getAttribute('data-target')); + if (this.checked) target?.classList.add('disabled'); // only disable, do not auto enable + }); + } + + document.getElementById('dismiss_stale_approvals')?.addEventListener('change', function () { + document.getElementById('ignore_stale_approvals_box')?.classList.toggle('disabled', this.checked); + }); + + // show the `Matched` mark for the status checks that match the pattern + const markMatchedStatusChecks = () => { + const patterns = (document.getElementById('status_check_contexts').value || '').split(/[\r\n]+/); + const validPatterns = patterns.map((item) => item.trim()).filter(Boolean); + const marks = document.getElementsByClassName('status-check-matched-mark'); + + for (const el of marks) { + let matched = false; + const statusCheck = el.getAttribute('data-status-check'); + for (const pattern of validPatterns) { + if (minimatch(statusCheck, pattern)) { + matched = true; + break; + } + } + toggleElem(el, matched); + } + }; + markMatchedStatusChecks(); + document.getElementById('status_check_contexts').addEventListener('input', onInputDebounce(markMatchedStatusChecks)); +} diff --git a/web_src/js/features/repo-template.js b/web_src/js/features/repo-template.js new file mode 100644 index 0000000..5f63e8b --- /dev/null +++ b/web_src/js/features/repo-template.js @@ -0,0 +1,51 @@ +import $ from 'jquery'; +import {htmlEscape} from 'escape-goat'; +import {hideElem, showElem} from '../utils/dom.js'; + +const {appSubUrl} = window.config; + +export function initRepoTemplateSearch() { + const $repoTemplate = $('#repo_template'); + const checkTemplate = function () { + const $templateUnits = $('#template_units'); + const $nonTemplate = $('#non_template'); + if ($repoTemplate.val() !== '' && $repoTemplate.val() !== '0') { + showElem($templateUnits); + hideElem($nonTemplate); + } else { + hideElem($templateUnits); + showElem($nonTemplate); + } + }; + $repoTemplate.on('change', checkTemplate); + checkTemplate(); + + const changeOwner = function () { + $('#repo_template_search') + .dropdown({ + apiSettings: { + url: `${appSubUrl}/repo/search?q={query}&template=true&priority_owner_id=${$('#uid').val()}`, + onResponse(response) { + const filteredResponse = {success: true, results: []}; + filteredResponse.results.push({ + name: '', + value: '', + }); + // Parse the response from the api to work with our dropdown + $.each(response.data, (_r, repo) => { + filteredResponse.results.push({ + name: htmlEscape(repo.repository.full_name), + value: repo.repository.id, + }); + }); + return filteredResponse; + }, + cache: false, + }, + + fullTextSearch: true, + }); + }; + $('#uid').on('change', changeOwner); + changeOwner(); +} diff --git a/web_src/js/features/repo-unicode-escape.js b/web_src/js/features/repo-unicode-escape.js new file mode 100644 index 0000000..9f0c745 --- /dev/null +++ b/web_src/js/features/repo-unicode-escape.js @@ -0,0 +1,27 @@ +import {hideElem, queryElemSiblings, showElem, toggleElem} from '../utils/dom.js'; + +export function initUnicodeEscapeButton() { + document.addEventListener('click', (e) => { + const btn = e.target.closest('.escape-button, .unescape-button, .toggle-escape-button'); + if (!btn) return; + + e.preventDefault(); + + const fileContent = btn.closest('.file-content, .non-diff-file-content, .file-preview-box'); + const fileView = fileContent?.querySelectorAll('.file-code, .file-view, .file-preview'); + if (btn.matches('.escape-button')) { + for (const el of fileView) el.classList.add('unicode-escaped'); + hideElem(btn); + showElem(queryElemSiblings(btn, '.unescape-button')); + } else if (btn.matches('.unescape-button')) { + for (const el of fileView) el.classList.remove('unicode-escaped'); + hideElem(btn); + showElem(queryElemSiblings(btn, '.escape-button')); + } else if (btn.matches('.toggle-escape-button')) { + const isEscaped = fileView[0]?.classList.contains('unicode-escaped'); + for (const el of fileView) el.classList.toggle('unicode-escaped', !isEscaped); + toggleElem(fileContent.querySelectorAll('.unescape-button'), !isEscaped); + toggleElem(fileContent.querySelectorAll('.escape-button'), isEscaped); + } + }); +} diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js new file mode 100644 index 0000000..03a2c68 --- /dev/null +++ b/web_src/js/features/repo-wiki.js @@ -0,0 +1,89 @@ +import {initMarkupContent} from '../markup/content.js'; +import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; +import {fomanticMobileScreen} from '../modules/fomantic.js'; +import {POST} from '../modules/fetch.js'; + +async function initRepoWikiFormEditor() { + const editArea = document.querySelector('.repository.wiki .combo-markdown-editor textarea'); + if (!editArea) return; + + const form = document.querySelector('.repository.wiki.new .ui.form'); + const editorContainer = form.querySelector('.combo-markdown-editor'); + let editor; + + let renderRequesting = false; + let lastContent; + const renderEasyMDEPreview = async function () { + if (renderRequesting) return; + + const previewFull = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active'); + const previewSide = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active-side'); + const previewTarget = previewSide || previewFull; + const newContent = editArea.value; + if (editor && previewTarget && lastContent !== newContent) { + renderRequesting = true; + const formData = new FormData(); + formData.append('mode', editor.previewMode); + formData.append('context', editor.previewContext); + formData.append('text', newContent); + formData.append('wiki', editor.previewWiki); + try { + const response = await POST(editor.previewUrl, {data: formData}); + const data = await response.text(); + lastContent = newContent; + previewTarget.innerHTML = `<div class="markup ui segment">${data}</div>`; + initMarkupContent(); + } catch (error) { + console.error('Error rendering preview:', error); + } finally { + renderRequesting = false; + setTimeout(renderEasyMDEPreview, 1000); + } + } else { + setTimeout(renderEasyMDEPreview, 1000); + } + }; + renderEasyMDEPreview(); + + editor = await initComboMarkdownEditor(editorContainer, { + useScene: 'wiki', + // EasyMDE has some problems of height definition, it has inline style height 300px by default, so we also use inline styles to override it. + // And another benefit is that we only need to write the style once for both editors. + // TODO: Move height style to CSS after EasyMDE removal. + editorHeights: {minHeight: '300px', height: 'calc(100vh - 600px)'}, + previewMode: 'gfm', + previewWiki: true, + easyMDEOptions: { + previewRender: (_content, previewTarget) => previewTarget.innerHTML, // disable builtin preview render + toolbar: ['bold', 'italic', 'strikethrough', '|', + 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', + 'gitea-code-inline', 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|', + 'unordered-list', 'ordered-list', '|', + 'link', 'image', 'table', 'horizontal-rule', '|', + 'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea', + ], + }, + }); + + form.addEventListener('submit', (e) => { + if (!validateTextareaNonEmpty(editArea)) { + e.preventDefault(); + e.stopPropagation(); + } + }); +} + +function collapseWikiTocForMobile(collapse) { + if (collapse) { + document.querySelector('.wiki-content-toc details')?.removeAttribute('open'); + } +} + +export function initRepoWikiForm() { + if (!document.querySelector('.page-content.repository.wiki')) return; + + fomanticMobileScreen.addEventListener('change', (e) => collapseWikiTocForMobile(e.matches)); + collapseWikiTocForMobile(fomanticMobileScreen.matches); + + initRepoWikiFormEditor(); +} diff --git a/web_src/js/features/sshkey-helper.js b/web_src/js/features/sshkey-helper.js new file mode 100644 index 0000000..3960eef --- /dev/null +++ b/web_src/js/features/sshkey-helper.js @@ -0,0 +1,10 @@ +export function initSshKeyFormParser() { + // Parse SSH Key + document.getElementById('ssh-key-content')?.addEventListener('input', function () { + const arrays = this.value.split(' '); + const title = document.getElementById('ssh-key-title'); + if (!title.value && arrays.length === 3 && arrays[2] !== '') { + title.value = arrays[2]; + } + }); +} diff --git a/web_src/js/features/stopwatch.js b/web_src/js/features/stopwatch.js new file mode 100644 index 0000000..d070f52 --- /dev/null +++ b/web_src/js/features/stopwatch.js @@ -0,0 +1,167 @@ +import prettyMilliseconds from 'pretty-ms'; +import {createTippy} from '../modules/tippy.js'; +import {GET} from '../modules/fetch.js'; +import {hideElem, showElem} from '../utils/dom.js'; + +const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config; + +export function initStopwatch() { + if (!enableTimeTracking) { + return; + } + + const stopwatchEl = document.querySelector('.active-stopwatch-trigger'); + const stopwatchPopup = document.querySelector('.active-stopwatch-popup'); + + if (!stopwatchEl || !stopwatchPopup) { + return; + } + + stopwatchEl.removeAttribute('href'); // intended for noscript mode only + + createTippy(stopwatchEl, { + content: stopwatchPopup, + placement: 'bottom-end', + trigger: 'click', + maxWidth: 'none', + interactive: true, + hideOnClick: true, + }); + + // global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used. + const currSeconds = document.querySelector('.stopwatch-time')?.getAttribute('data-seconds'); + if (currSeconds) { + updateStopwatchTime(currSeconds); + } + + let usingPeriodicPoller = false; + const startPeriodicPoller = (timeout) => { + if (timeout <= 0 || !Number.isFinite(timeout)) return; + usingPeriodicPoller = true; + setTimeout(() => updateStopwatchWithCallback(startPeriodicPoller, timeout), timeout); + }; + + // if the browser supports EventSource and SharedWorker, use it instead of the periodic poller + if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) { + // Try to connect to the event source via the shared worker first + const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker'); + worker.addEventListener('error', (event) => { + console.error('worker error', event); + }); + worker.port.addEventListener('messageerror', () => { + console.error('unable to deserialize message'); + }); + worker.port.postMessage({ + type: 'start', + url: `${window.location.origin}${appSubUrl}/user/events`, + }); + worker.port.addEventListener('message', (event) => { + if (!event.data || !event.data.type) { + console.error('unknown worker message event', event); + return; + } + if (event.data.type === 'stopwatches') { + updateStopwatchData(JSON.parse(event.data.data)); + } else if (event.data.type === 'no-event-source') { + // browser doesn't support EventSource, falling back to periodic poller + if (!usingPeriodicPoller) startPeriodicPoller(notificationSettings.MinTimeout); + } else if (event.data.type === 'error') { + console.error('worker port event error', event.data); + } else if (event.data.type === 'logout') { + if (event.data.data !== 'here') { + return; + } + worker.port.postMessage({ + type: 'close', + }); + worker.port.close(); + window.location.href = `${window.location.origin}${appSubUrl}/`; + } else if (event.data.type === 'close') { + worker.port.postMessage({ + type: 'close', + }); + worker.port.close(); + } + }); + worker.port.addEventListener('error', (e) => { + console.error('worker port error', e); + }); + worker.port.start(); + window.addEventListener('beforeunload', () => { + worker.port.postMessage({ + type: 'close', + }); + worker.port.close(); + }); + + return; + } + + startPeriodicPoller(notificationSettings.MinTimeout); +} + +async function updateStopwatchWithCallback(callback, timeout) { + const isSet = await updateStopwatch(); + + if (!isSet) { + timeout = notificationSettings.MinTimeout; + } else if (timeout < notificationSettings.MaxTimeout) { + timeout += notificationSettings.TimeoutStep; + } + + callback(timeout); +} + +async function updateStopwatch() { + const response = await GET(`${appSubUrl}/user/stopwatches`); + if (!response.ok) { + console.error('Failed to fetch stopwatch data'); + return false; + } + const data = await response.json(); + return updateStopwatchData(data); +} + +function updateStopwatchData(data) { + const watch = data[0]; + const btnEl = document.querySelector('.active-stopwatch-trigger'); + if (!watch) { + clearStopwatchTimer(); + hideElem(btnEl); + } else { + const {repo_owner_name, repo_name, issue_index, seconds} = watch; + const issueUrl = `${appSubUrl}/${repo_owner_name}/${repo_name}/issues/${issue_index}`; + document.querySelector('.stopwatch-link')?.setAttribute('href', issueUrl); + document.querySelector('.stopwatch-commit')?.setAttribute('action', `${issueUrl}/times/stopwatch/toggle`); + document.querySelector('.stopwatch-cancel')?.setAttribute('action', `${issueUrl}/times/stopwatch/cancel`); + const stopwatchIssue = document.querySelector('.stopwatch-issue'); + if (stopwatchIssue) stopwatchIssue.textContent = `${repo_owner_name}/${repo_name}#${issue_index}`; + updateStopwatchTime(seconds); + showElem(btnEl); + } + return Boolean(data.length); +} + +let updateTimeIntervalId = null; // holds setInterval id when active +function clearStopwatchTimer() { + if (updateTimeIntervalId !== null) { + clearInterval(updateTimeIntervalId); + updateTimeIntervalId = null; + } +} +function updateStopwatchTime(seconds) { + const secs = parseInt(seconds); + if (!Number.isFinite(secs)) return; + + clearStopwatchTimer(); + const stopwatch = document.querySelector('.stopwatch-time'); + // TODO: replace with <relative-time> similar to how system status up time is shown + const start = Date.now(); + const updateUi = () => { + const delta = Date.now() - start; + const dur = prettyMilliseconds(secs * 1000 + delta, {compact: true}); + if (stopwatch) stopwatch.textContent = dur; + }; + updateUi(); + updateTimeIntervalId = setInterval(updateUi, 1000); +} diff --git a/web_src/js/features/tablesort.js b/web_src/js/features/tablesort.js new file mode 100644 index 0000000..436fe0a --- /dev/null +++ b/web_src/js/features/tablesort.js @@ -0,0 +1,22 @@ +export function initTableSort() { + for (const header of document.querySelectorAll('th[data-sortt-asc]') || []) { + const sorttAsc = header.getAttribute('data-sortt-asc'); + const sorttDesc = header.getAttribute('data-sortt-desc'); + const sorttDefault = header.getAttribute('data-sortt-default'); + header.addEventListener('click', () => { + tableSort(sorttAsc, sorttDesc, sorttDefault); + }); + } +} + +function tableSort(normSort, revSort, isDefault) { + if (!normSort) return false; + if (!revSort) revSort = ''; + + const url = new URL(window.location); + let urlSort = url.searchParams.get('sort'); + if (!urlSort && isDefault) urlSort = normSort; + + url.searchParams.set('sort', urlSort !== normSort ? normSort : revSort); + window.location.replace(url.href); +} diff --git a/web_src/js/features/tribute.js b/web_src/js/features/tribute.js new file mode 100644 index 0000000..02cd484 --- /dev/null +++ b/web_src/js/features/tribute.js @@ -0,0 +1,57 @@ +import {emojiKeys, emojiHTML, emojiString} from './emoji.js'; +import {htmlEscape} from 'escape-goat'; + +function makeCollections({mentions, emoji}) { + const collections = []; + + if (emoji) { + collections.push({ + trigger: ':', + requireLeadingSpace: true, + values: (query, cb) => { + const matches = []; + for (const name of emojiKeys) { + if (name.includes(query)) { + matches.push(name); + if (matches.length > 5) break; + } + } + cb(matches); + }, + lookup: (item) => item, + selectTemplate: (item) => { + if (item === undefined) return null; + return emojiString(item.original); + }, + menuItemTemplate: (item) => { + return `<div class="tribute-item">${emojiHTML(item.original)}<span>${htmlEscape(item.original)}</span></div>`; + }, + }); + } + + if (mentions) { + collections.push({ + values: window.config.mentionValues ?? [], + requireLeadingSpace: true, + menuItemTemplate: (item) => { + return ` + <div class="tribute-item"> + <img src="${htmlEscape(item.original.avatar)}" class="tw-mr-2"/> + <span class="name">${htmlEscape(item.original.name)}</span> + ${item.original.fullname && item.original.fullname !== '' ? `<span class="fullname">${htmlEscape(item.original.fullname)}</span>` : ''} + </div> + `; + }, + }); + } + + return collections; +} + +export async function attachTribute(element, {mentions, emoji} = {}) { + const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs'); + const collections = makeCollections({mentions, emoji}); + const tribute = new Tribute({collection: collections, noMatchTemplate: ''}); + tribute.attach(element); + return tribute; +} diff --git a/web_src/js/features/user-auth-webauthn.js b/web_src/js/features/user-auth-webauthn.js new file mode 100644 index 0000000..6dfbb4d --- /dev/null +++ b/web_src/js/features/user-auth-webauthn.js @@ -0,0 +1,194 @@ +import {encodeURLEncodedBase64, decodeURLEncodedBase64} from '../utils.js'; +import {showElem} from '../utils/dom.js'; +import {GET, POST} from '../modules/fetch.js'; + +const {appSubUrl} = window.config; + +export async function initUserAuthWebAuthn() { + const elPrompt = document.querySelector('.user.signin.webauthn-prompt'); + if (!elPrompt) { + return; + } + + if (!detectWebAuthnSupport()) { + return; + } + + const res = await GET(`${appSubUrl}/user/webauthn/assertion`); + if (res.status !== 200) { + webAuthnError('unknown'); + return; + } + const options = await res.json(); + options.publicKey.challenge = decodeURLEncodedBase64(options.publicKey.challenge); + for (const cred of options.publicKey.allowCredentials) { + cred.id = decodeURLEncodedBase64(cred.id); + } + try { + const credential = await navigator.credentials.get({ + publicKey: options.publicKey, + }); + await verifyAssertion(credential); + } catch (err) { + if (!options.publicKey.extensions?.appid) { + webAuthnError('general', err.message); + return; + } + delete options.publicKey.extensions.appid; + try { + const credential = await navigator.credentials.get({ + publicKey: options.publicKey, + }); + await verifyAssertion(credential); + } catch (err) { + webAuthnError('general', err.message); + } + } +} + +async function verifyAssertion(assertedCredential) { + // Move data into Arrays in case it is super long + const authData = new Uint8Array(assertedCredential.response.authenticatorData); + const clientDataJSON = new Uint8Array(assertedCredential.response.clientDataJSON); + const rawId = new Uint8Array(assertedCredential.rawId); + const sig = new Uint8Array(assertedCredential.response.signature); + const userHandle = new Uint8Array(assertedCredential.response.userHandle); + + const res = await POST(`${appSubUrl}/user/webauthn/assertion`, { + data: { + id: assertedCredential.id, + rawId: encodeURLEncodedBase64(rawId), + type: assertedCredential.type, + clientExtensionResults: assertedCredential.getClientExtensionResults(), + response: { + authenticatorData: encodeURLEncodedBase64(authData), + clientDataJSON: encodeURLEncodedBase64(clientDataJSON), + signature: encodeURLEncodedBase64(sig), + userHandle: encodeURLEncodedBase64(userHandle), + }, + }, + }); + if (res.status === 500) { + webAuthnError('unknown'); + return; + } else if (res.status !== 200) { + webAuthnError('unable-to-process'); + return; + } + const reply = await res.json(); + + window.location.href = reply?.redirect ?? `${appSubUrl}/`; +} + +async function webauthnRegistered(newCredential) { + const attestationObject = new Uint8Array(newCredential.response.attestationObject); + const clientDataJSON = new Uint8Array(newCredential.response.clientDataJSON); + const rawId = new Uint8Array(newCredential.rawId); + + const res = await POST(`${appSubUrl}/user/settings/security/webauthn/register`, { + data: { + id: newCredential.id, + rawId: encodeURLEncodedBase64(rawId), + type: newCredential.type, + response: { + attestationObject: encodeURLEncodedBase64(attestationObject), + clientDataJSON: encodeURLEncodedBase64(clientDataJSON), + }, + }, + }); + + if (res.status === 409) { + webAuthnError('duplicated'); + return; + } else if (res.status !== 201) { + webAuthnError('unknown'); + return; + } + + window.location.reload(); +} + +function webAuthnError(errorType, message) { + const elErrorMsg = document.getElementById(`webauthn-error-msg`); + + if (errorType === 'general') { + elErrorMsg.textContent = message || 'unknown error'; + } else { + const elTypedError = document.querySelector(`#webauthn-error [data-webauthn-error-msg=${errorType}]`); + if (elTypedError) { + elErrorMsg.textContent = `${elTypedError.textContent}${message ? ` ${message}` : ''}`; + } else { + elErrorMsg.textContent = `unknown error type: ${errorType}${message ? ` ${message}` : ''}`; + } + } + + showElem('#webauthn-error'); +} + +function detectWebAuthnSupport() { + if (!window.isSecureContext) { + webAuthnError('insecure'); + return false; + } + + if (typeof window.PublicKeyCredential !== 'function') { + webAuthnError('browser'); + return false; + } + + return true; +} + +export function initUserAuthWebAuthnRegister() { + const elRegister = document.getElementById('register-webauthn'); + if (!elRegister) { + return; + } + if (!detectWebAuthnSupport()) { + elRegister.disabled = true; + return; + } + elRegister.addEventListener('click', async (e) => { + e.preventDefault(); + await webAuthnRegisterRequest(); + }); +} + +async function webAuthnRegisterRequest() { + const elNickname = document.getElementById('nickname'); + + const formData = new FormData(); + formData.append('name', elNickname.value); + + const res = await POST(`${appSubUrl}/user/settings/security/webauthn/request_register`, { + data: formData, + }); + + if (res.status === 409) { + webAuthnError('duplicated'); + return; + } else if (res.status !== 200) { + webAuthnError('unknown'); + return; + } + + const options = await res.json(); + elNickname.closest('div.field').classList.remove('error'); + + options.publicKey.challenge = decodeURLEncodedBase64(options.publicKey.challenge); + options.publicKey.user.id = decodeURLEncodedBase64(options.publicKey.user.id); + if (options.publicKey.excludeCredentials) { + for (const cred of options.publicKey.excludeCredentials) { + cred.id = decodeURLEncodedBase64(cred.id); + } + } + + try { + const credential = await navigator.credentials.create({ + publicKey: options.publicKey, + }); + await webauthnRegistered(credential); + } catch (err) { + webAuthnError('unknown', err); + } +} diff --git a/web_src/js/features/user-auth.js b/web_src/js/features/user-auth.js new file mode 100644 index 0000000..a871ac4 --- /dev/null +++ b/web_src/js/features/user-auth.js @@ -0,0 +1,22 @@ +import {checkAppUrl} from './common-global.js'; + +export function initUserAuthOauth2() { + const outer = document.getElementById('oauth2-login-navigator'); + if (!outer) return; + const inner = document.getElementById('oauth2-login-navigator-inner'); + + checkAppUrl(); + + for (const link of outer.querySelectorAll('.oauth-login-link')) { + link.addEventListener('click', () => { + inner.classList.add('tw-invisible'); + outer.classList.add('is-loading'); + setTimeout(() => { + // recover previous content to let user try again + // usually redirection will be performed before this action + outer.classList.remove('is-loading'); + inner.classList.remove('tw-invisible'); + }, 5000); + }); + } +} diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js new file mode 100644 index 0000000..717ef94 --- /dev/null +++ b/web_src/js/features/user-settings.js @@ -0,0 +1,63 @@ +import {hideElem, showElem} from '../utils/dom.js'; + +function onPronounsDropdownUpdate() { + const pronounsCustom = document.getElementById('pronouns-custom'); + const pronounsDropdown = document.getElementById('pronouns-dropdown'); + const pronounsInput = pronounsDropdown.querySelector('input'); + // must be kept in sync with `routers/web/user/setting/profile.go` + const isCustom = !( + pronounsInput.value === '' || + pronounsInput.value === 'he/him' || + pronounsInput.value === 'she/her' || + pronounsInput.value === 'they/them' || + pronounsInput.value === 'it/its' || + pronounsInput.value === 'any pronouns' + ); + if (isCustom) { + if (pronounsInput.value === '!') { + pronounsCustom.value = ''; + } else { + pronounsCustom.value = pronounsInput.value; + } + pronounsCustom.style.display = ''; + } else { + pronounsCustom.style.display = 'none'; + } +} +function onPronounsCustomUpdate() { + const pronounsCustom = document.getElementById('pronouns-custom'); + const pronounsInput = document.querySelector('#pronouns-dropdown input'); + pronounsInput.value = pronounsCustom.value; +} + +export function initUserSettings() { + if (!document.querySelectorAll('.user.settings.profile').length) return; + + const usernameInput = document.getElementById('username'); + if (!usernameInput) return; + usernameInput.addEventListener('input', function () { + const prompt = document.getElementById('name-change-prompt'); + const promptRedirect = document.getElementById('name-change-redirect-prompt'); + if (this.value.toLowerCase() !== this.getAttribute('data-name').toLowerCase()) { + showElem(prompt); + showElem(promptRedirect); + } else { + hideElem(prompt); + hideElem(promptRedirect); + } + }); + + const pronounsDropdown = document.getElementById('pronouns-dropdown'); + const pronounsCustom = document.getElementById('pronouns-custom'); + const pronounsInput = pronounsDropdown.querySelector('input'); + + // If JS is disabled, the page will show the custom input, as the dropdown requires JS to work. + // JS progressively enhances the input by adding a dropdown, but it works regardless. + pronounsCustom.removeAttribute('name'); + pronounsInput.setAttribute('name', 'pronouns'); + pronounsDropdown.style.display = ''; + + onPronounsDropdownUpdate(); + pronounsInput.addEventListener('change', onPronounsDropdownUpdate); + pronounsCustom.addEventListener('input', onPronounsCustomUpdate); +} diff --git a/web_src/js/htmx.js b/web_src/js/htmx.js new file mode 100644 index 0000000..5ca3018 --- /dev/null +++ b/web_src/js/htmx.js @@ -0,0 +1,21 @@ +import * as htmx from 'htmx.org'; +import {showErrorToast} from './modules/toast.js'; + +// https://github.com/bigskysoftware/idiomorph#htmx +import 'idiomorph/dist/idiomorph-ext.js'; + +// https://htmx.org/reference/#config +htmx.config.requestClass = 'is-loading'; +htmx.config.scrollIntoViewOnBoost = false; + +// https://htmx.org/events/#htmx:sendError +document.body.addEventListener('htmx:sendError', (event) => { + // TODO: add translations + showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`); +}); + +// https://htmx.org/events/#htmx:responseError +document.body.addEventListener('htmx:responseError', (event) => { + // TODO: add translations + showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`); +}); diff --git a/web_src/js/index.js b/web_src/js/index.js new file mode 100644 index 0000000..77014a7 --- /dev/null +++ b/web_src/js/index.js @@ -0,0 +1,190 @@ +// bootstrap module must be the first one to be imported, it handles webpack lazy-loading and global errors +import './bootstrap.js'; + +import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue'; +import {initScopedAccessTokenCategories} from './components/ScopedAccessTokenSelector.vue'; +import {initDashboardRepoList} from './components/DashboardRepoList.vue'; + +import {initGlobalCopyToClipboardListener} from './features/clipboard.js'; +import {initContextPopups} from './features/contextpopup.js'; +import {initRepoGraphGit} from './features/repo-graph.js'; +import {initHeatmap} from './features/heatmap.js'; +import {initImageDiff} from './features/imagediff.js'; +import {initRepoMigration} from './features/repo-migration.js'; +import {initRepoProject} from './features/repo-projects.js'; +import {initTableSort} from './features/tablesort.js'; +import {initAutoFocusEnd} from './features/autofocus-end.js'; +import {initAdminUserListSearchForm} from './features/admin/users.js'; +import {initAdminConfigs} from './features/admin/config.js'; +import {initMarkupAnchors} from './markup/anchors.js'; +import {initNotificationCount, initNotificationsTable} from './features/notification.js'; +import {initRepoIssueContentHistory} from './features/repo-issue-content.js'; +import {initStopwatch} from './features/stopwatch.js'; +import {initFindFileInRepo} from './features/repo-findfile.js'; +import {initCommentContent, initMarkupContent} from './markup/content.js'; +import {initPdfViewer} from './render/pdf.js'; + +import {initUserAuthOauth2} from './features/user-auth.js'; +import { + initRepoIssueDue, + initRepoIssueReferenceRepositorySearch, + initRepoIssueTimeTracking, + initRepoIssueWipTitle, + initRepoPullRequestAllowMaintainerEdit, + initRepoPullRequestReview, initRepoIssueSidebarList, initArchivedLabelHandler, +} from './features/repo-issue.js'; +import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.js'; +import { + initFootLanguageMenu, + initGlobalButtonClickOnEnter, + initGlobalButtons, + initGlobalCommon, + initGlobalDropzone, + initGlobalEnterQuickSubmit, + initGlobalFormDirtyLeaveConfirm, + initGlobalLinkActions, + initHeadNavbarContentToggle, +} from './features/common-global.js'; +import {initRepoTopicBar} from './features/repo-home.js'; +import {initAdminEmails} from './features/admin/emails.js'; +import {initAdminCommon} from './features/admin/common.js'; +import {initRepoTemplateSearch} from './features/repo-template.js'; +import {initRepoCodeView} from './features/repo-code.js'; +import {initSshKeyFormParser} from './features/sshkey-helper.js'; +import {initUserSettings} from './features/user-settings.js'; +import {initRepoArchiveLinks} from './features/repo-common.js'; +import {initRepoMigrationStatusChecker} from './features/repo-migrate.js'; +import { + initRepoSettingGitHook, + initRepoSettingsCollaboration, + initRepoSettingSearchTeamBox, +} from './features/repo-settings.js'; +import {initRepoDiffView} from './features/repo-diff.js'; +import {initOrgTeamSearchRepoBox} from './features/org-team.js'; +import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.js'; +import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.js'; +import {initRepoEditor} from './features/repo-editor.js'; +import {initCompSearchUserBox} from './features/comp/SearchUserBox.js'; +import {initInstall} from './features/install.js'; +import {initCompWebHookEditor} from './features/comp/WebHookEditor.js'; +import {initRepoBranchButton} from './features/repo-branch.js'; +import {initCommonOrganization} from './features/common-organization.js'; +import {initRepoWikiForm} from './features/repo-wiki.js'; +import {initRepoCommentForm, initRepository} from './features/repo-legacy.js'; +import {initCopyContent} from './features/copycontent.js'; +import {initCaptcha} from './features/captcha.js'; +import {initRepositoryActionView} from './components/RepoActionView.vue'; +import {initGlobalTooltips} from './modules/tippy.js'; +import {initGiteaFomantic} from './modules/fomantic.js'; +import {onDomReady} from './utils/dom.js'; +import {initRepoIssueList} from './features/repo-issue-list.js'; +import {initCommonIssueListQuickGoto} from './features/common-issue-list.js'; +import {initRepoContributors} from './features/contributors.js'; +import {initRepoCodeFrequency} from './features/code-frequency.js'; +import {initRepoRecentCommits} from './features/recent-commits.js'; +import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js'; +import {initDirAuto} from './modules/dirauto.js'; +import {initRepositorySearch} from './features/repo-search.js'; +import {initColorPickers} from './features/colorpicker.js'; + +// Init Gitea's Fomantic settings +initGiteaFomantic(); +initDirAuto(); + +onDomReady(() => { + initGlobalCommon(); + + initGlobalTooltips(); + initGlobalButtonClickOnEnter(); + initGlobalButtons(); + initGlobalCopyToClipboardListener(); + initGlobalDropzone(); + initGlobalEnterQuickSubmit(); + initGlobalFormDirtyLeaveConfirm(); + initGlobalLinkActions(); + + initCommonOrganization(); + initCommonIssueListQuickGoto(); + + initCompSearchUserBox(); + initCompWebHookEditor(); + + initInstall(); + + initHeadNavbarContentToggle(); + initFootLanguageMenu(); + + initCommentContent(); + initContextPopups(); + initHeatmap(); + initImageDiff(); + initMarkupAnchors(); + initMarkupContent(); + initSshKeyFormParser(); + initStopwatch(); + initTableSort(); + initAutoFocusEnd(); + initFindFileInRepo(); + initCopyContent(); + + initAdminCommon(); + initAdminEmails(); + initAdminUserListSearchForm(); + initAdminConfigs(); + + initDashboardRepoList(); + + initNotificationCount(); + initNotificationsTable(); + + initOrgTeamSearchRepoBox(); + + initRepoActivityTopAuthorsChart(); + initRepoArchiveLinks(); + initRepoBranchButton(); + initRepoCodeView(); + initRepoCommentForm(); + initRepoEllipsisButton(); + initRepoDiffCommitBranchesAndTags(); + initRepoEditor(); + initRepoGraphGit(); + initRepoIssueContentHistory(); + initRepoIssueDue(); + initRepoIssueList(); + initRepoIssueSidebarList(); + initArchivedLabelHandler(); + initRepoIssueReferenceRepositorySearch(); + initRepoIssueTimeTracking(); + initRepoIssueWipTitle(); + initRepoMigration(); + initRepoMigrationStatusChecker(); + initRepoProject(); + initRepoPullRequestAllowMaintainerEdit(); + initRepoPullRequestReview(); + initRepoRelease(); + initRepoReleaseNew(); + initRepoSettingGitHook(); + initRepoSettingSearchTeamBox(); + initRepoSettingsCollaboration(); + initRepoTemplateSearch(); + initRepoTopicBar(); + initRepoWikiForm(); + initRepository(); + initRepositoryActionView(); + initRepositorySearch(); + initRepoContributors(); + initRepoCodeFrequency(); + initRepoRecentCommits(); + + initCommitStatuses(); + initCaptcha(); + + initUserAuthOauth2(); + initUserAuthWebAuthn(); + initUserAuthWebAuthnRegister(); + initUserSettings(); + initRepoDiffView(); + initPdfViewer(); + initScopedAccessTokenCategories(); + initColorPickers(); +}); diff --git a/web_src/js/jquery.js b/web_src/js/jquery.js new file mode 100644 index 0000000..6b21998 --- /dev/null +++ b/web_src/js/jquery.js @@ -0,0 +1,3 @@ +import $ from 'jquery'; + +window.$ = window.jQuery = $; // eslint-disable-line no-jquery/variable-pattern diff --git a/web_src/js/markup/anchors.js b/web_src/js/markup/anchors.js new file mode 100644 index 0000000..0e2c927 --- /dev/null +++ b/web_src/js/markup/anchors.js @@ -0,0 +1,70 @@ +import {svg} from '../svg.js'; + +const addPrefix = (str) => `user-content-${str}`; +const removePrefix = (str) => str.replace(/^user-content-/, ''); +const hasPrefix = (str) => str.startsWith('user-content-'); + +// scroll to anchor while respecting the `user-content` prefix that exists on the target +function scrollToAnchor(encodedId) { + if (!encodedId) return; + const id = decodeURIComponent(encodedId); + const prefixedId = addPrefix(id); + let el = document.getElementById(prefixedId); + + // check for matching user-generated `a[name]` + if (!el) { + const nameAnchors = document.getElementsByName(prefixedId); + if (nameAnchors.length) { + el = nameAnchors[0]; + } + } + + // compat for links with old 'user-content-' prefixed hashes + if (!el && hasPrefix(id)) { + return document.getElementById(id)?.scrollIntoView(); + } + + el?.scrollIntoView(); +} + +export function initMarkupAnchors() { + const markupEls = document.querySelectorAll('.markup'); + if (!markupEls.length) return; + + for (const markupEl of markupEls) { + // create link icons for markup headings, the resulting link href will remove `user-content-` + for (const heading of markupEl.querySelectorAll('h1, h2, h3, h4, h5, h6')) { + const a = document.createElement('a'); + a.classList.add('anchor'); + a.setAttribute('href', `#${encodeURIComponent(removePrefix(heading.id))}`); + a.innerHTML = svg('octicon-link'); + heading.prepend(a); + } + + // remove `user-content-` prefix from links so they don't show in url bar when clicked + for (const a of markupEl.querySelectorAll('a[href^="#"]')) { + const href = a.getAttribute('href'); + if (!href.startsWith('#user-content-')) continue; + a.setAttribute('href', `#${removePrefix(href.substring(1))}`); + } + + // add `user-content-` prefix to user-generated `a[name]` link targets + // TODO: this prefix should be added in backend instead + for (const a of markupEl.querySelectorAll('a[name]')) { + const name = a.getAttribute('name'); + if (!name) continue; + a.setAttribute('name', addPrefix(a.name)); + } + + for (const a of markupEl.querySelectorAll('a[href^="#"]')) { + a.addEventListener('click', (e) => { + scrollToAnchor(e.currentTarget.getAttribute('href')?.substring(1)); + }); + } + } + + // scroll to anchor unless the browser has already scrolled somewhere during page load + if (!document.querySelector(':target')) { + scrollToAnchor(window.location.hash?.substring(1)); + } +} diff --git a/web_src/js/markup/asciicast.js b/web_src/js/markup/asciicast.js new file mode 100644 index 0000000..97b1874 --- /dev/null +++ b/web_src/js/markup/asciicast.js @@ -0,0 +1,17 @@ +export async function renderAsciicast() { + const els = document.querySelectorAll('.asciinema-player-container'); + if (!els.length) return; + + const [player] = await Promise.all([ + import(/* webpackChunkName: "asciinema-player" */'asciinema-player'), + import(/* webpackChunkName: "asciinema-player" */'asciinema-player/dist/bundle/asciinema-player.css'), + ]); + + for (const el of els) { + player.create(el.getAttribute('data-asciinema-player-src'), el, { + // poster (a preview frame) to display until the playback is started. + // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more. + poster: 'npt:1:0:0', + }); + } +} diff --git a/web_src/js/markup/codecopy.js b/web_src/js/markup/codecopy.js new file mode 100644 index 0000000..078d741 --- /dev/null +++ b/web_src/js/markup/codecopy.js @@ -0,0 +1,21 @@ +import {svg} from '../svg.js'; + +export function makeCodeCopyButton() { + const button = document.createElement('button'); + button.classList.add('code-copy', 'ui', 'button'); + button.innerHTML = svg('octicon-copy'); + return button; +} + +export function renderCodeCopy() { + const els = document.querySelectorAll('.markup .code-block code'); + if (!els.length) return; + + for (const el of els) { + if (!el.textContent) continue; + const btn = makeCodeCopyButton(); + // remove final trailing newline introduced during HTML rendering + btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, '')); + el.after(btn); + } +} diff --git a/web_src/js/markup/common.js b/web_src/js/markup/common.js new file mode 100644 index 0000000..aff4a32 --- /dev/null +++ b/web_src/js/markup/common.js @@ -0,0 +1,8 @@ +export function displayError(el, err) { + el.classList.remove('is-loading'); + const errorNode = document.createElement('pre'); + errorNode.setAttribute('class', 'ui message error markup-block-error'); + errorNode.textContent = err.str || err.message || String(err); + el.before(errorNode); + el.setAttribute('data-render-done', 'true'); +} diff --git a/web_src/js/markup/content.js b/web_src/js/markup/content.js new file mode 100644 index 0000000..1d29dc0 --- /dev/null +++ b/web_src/js/markup/content.js @@ -0,0 +1,18 @@ +import {renderMermaid} from './mermaid.js'; +import {renderMath} from './math.js'; +import {renderCodeCopy} from './codecopy.js'; +import {renderAsciicast} from './asciicast.js'; +import {initMarkupTasklist} from './tasklist.js'; + +// code that runs for all markup content +export function initMarkupContent() { + renderMermaid(); + renderMath(); + renderCodeCopy(); + renderAsciicast(); +} + +// code that only runs for comments +export function initCommentContent() { + initMarkupTasklist(); +} diff --git a/web_src/js/markup/math.js b/web_src/js/markup/math.js new file mode 100644 index 0000000..872e50a --- /dev/null +++ b/web_src/js/markup/math.js @@ -0,0 +1,47 @@ +import {displayError} from './common.js'; + +function targetElement(el) { + // The target element is either the current element if it has the + // `is-loading` class or the pre that contains it + return el.classList.contains('is-loading') ? el : el.closest('pre'); +} + +export async function renderMath() { + const els = document.querySelectorAll('.markup code.language-math'); + if (!els.length) return; + + const [{default: katex}] = await Promise.all([ + import(/* webpackChunkName: "katex" */'katex'), + import(/* webpackChunkName: "katex" */'katex/dist/katex.css'), + ]); + + const MAX_CHARS = 1000; + const MAX_SIZE = 25; + const MAX_EXPAND = 1000; + + for (const el of els) { + const target = targetElement(el); + if (target.hasAttribute('data-render-done')) continue; + const source = el.textContent; + + if (source.length > MAX_CHARS) { + displayError(target, new Error(`Math source of ${source.length} characters exceeds the maximum allowed length of ${MAX_CHARS}.`)); + continue; + } + + const displayMode = el.classList.contains('display'); + const nodeName = displayMode ? 'p' : 'span'; + + try { + const tempEl = document.createElement(nodeName); + katex.render(source, tempEl, { + maxSize: MAX_SIZE, + maxExpand: MAX_EXPAND, + displayMode, + }); + target.replaceWith(tempEl); + } catch (error) { + displayError(target, error); + } + } +} diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js new file mode 100644 index 0000000..0549fb3 --- /dev/null +++ b/web_src/js/markup/mermaid.js @@ -0,0 +1,74 @@ +import {isDarkTheme} from '../utils.js'; +import {makeCodeCopyButton} from './codecopy.js'; +import {displayError} from './common.js'; + +const {mermaidMaxSourceCharacters} = window.config; + +// margin removal is for https://github.com/mermaid-js/mermaid/issues/4907 +const iframeCss = `:root {color-scheme: normal} +body {margin: 0; padding: 0; overflow: hidden} +#mermaid {display: block; margin: 0 auto} +blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {margin: 0}`; + +export async function renderMermaid() { + const els = document.querySelectorAll('.markup code.language-mermaid'); + if (!els.length) return; + + const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid'); + + mermaid.initialize({ + startOnLoad: false, + theme: isDarkTheme() ? 'dark' : 'neutral', + securityLevel: 'strict', + }); + + for (const el of els) { + const pre = el.closest('pre'); + if (pre.hasAttribute('data-render-done')) continue; + + const source = el.textContent; + if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) { + displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`)); + continue; + } + + try { + await mermaid.parse(source); + } catch (err) { + displayError(pre, err); + continue; + } + + try { + // can't use bindFunctions here because we can't cross the iframe boundary. This + // means js-based interactions won't work but they aren't intended to work either + const {svg} = await mermaid.render('mermaid', source); + + const iframe = document.createElement('iframe'); + iframe.classList.add('markup-render', 'tw-invisible'); + iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`; + + const mermaidBlock = document.createElement('div'); + mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden'); + mermaidBlock.append(iframe); + + const btn = makeCodeCopyButton(); + btn.setAttribute('data-clipboard-text', source); + mermaidBlock.append(btn); + + iframe.addEventListener('load', () => { + pre.replaceWith(mermaidBlock); + mermaidBlock.classList.remove('tw-hidden'); + iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`; + setTimeout(() => { // avoid flash of iframe background + mermaidBlock.classList.remove('is-loading'); + iframe.classList.remove('tw-invisible'); + }, 0); + }); + + document.body.append(mermaidBlock); + } catch (err) { + displayError(pre, err); + } + } +} diff --git a/web_src/js/markup/tasklist.js b/web_src/js/markup/tasklist.js new file mode 100644 index 0000000..375810d --- /dev/null +++ b/web_src/js/markup/tasklist.js @@ -0,0 +1,90 @@ +import {POST} from '../modules/fetch.js'; +import {showErrorToast} from '../modules/toast.js'; + +const preventListener = (e) => e.preventDefault(); + +/** + * Attaches `input` handlers to markdown rendered tasklist checkboxes in comments. + * + * When a checkbox value changes, the corresponding [ ] or [x] in the markdown string + * is set accordingly and sent to the server. On success it updates the raw-content on + * error it resets the checkbox to its original value. + */ +export function initMarkupTasklist() { + for (const el of document.querySelectorAll(`.markup[data-can-edit=true]`) || []) { + const container = el.parentNode; + const checkboxes = el.querySelectorAll(`.task-list-item input[type=checkbox]`); + + for (const checkbox of checkboxes) { + if (checkbox.hasAttribute('data-editable')) { + return; + } + + checkbox.setAttribute('data-editable', 'true'); + checkbox.addEventListener('input', async () => { + const checkboxCharacter = checkbox.checked ? 'x' : ' '; + const position = parseInt(checkbox.getAttribute('data-source-position')) + 1; + + const rawContent = container.querySelector('.raw-content'); + const oldContent = rawContent.textContent; + + const encoder = new TextEncoder(); + const buffer = encoder.encode(oldContent); + // Indexes may fall off the ends and return undefined. + if (buffer[position - 1] !== '['.codePointAt(0) || + buffer[position] !== ' '.codePointAt(0) && buffer[position] !== 'x'.codePointAt(0) && buffer[position] !== 'X'.codePointAt(0) || + buffer[position + 1] !== ']'.codePointAt(0)) { + // Position is probably wrong. Revert and don't allow change. + checkbox.checked = !checkbox.checked; + throw new Error(`Expected position to be space, x or X and surrounded by brackets, but it's not: position=${position}`); + } + buffer.set(encoder.encode(checkboxCharacter), position); + const newContent = new TextDecoder().decode(buffer); + + if (newContent === oldContent) { + return; + } + + // Prevent further inputs until the request is done. This does not use the + // `disabled` attribute because it causes the border to flash on click. + for (const checkbox of checkboxes) { + checkbox.addEventListener('click', preventListener); + } + + try { + const editContentZone = container.querySelector('.edit-content-zone'); + const updateUrl = editContentZone.getAttribute('data-update-url'); + const context = editContentZone.getAttribute('data-context'); + const contentVersion = editContentZone.getAttribute('data-content-version'); + + const requestBody = new FormData(); + requestBody.append('ignore_attachments', 'true'); + requestBody.append('content', newContent); + requestBody.append('context', context); + requestBody.append('content_version', contentVersion); + const response = await POST(updateUrl, {data: requestBody}); + const data = await response.json(); + if (response.status === 400) { + showErrorToast(data.errorMessage); + return; + } + editContentZone.setAttribute('data-content-version', data.contentVersion); + rawContent.textContent = newContent; + } catch (err) { + checkbox.checked = !checkbox.checked; + console.error(err); + } + + // Enable input on checkboxes again + for (const checkbox of checkboxes) { + checkbox.removeEventListener('click', preventListener); + } + }); + } + + // Enable the checkboxes as they are initially disabled by the markdown renderer + for (const checkbox of checkboxes) { + checkbox.disabled = false; + } + } +} diff --git a/web_src/js/modules/dirauto.js b/web_src/js/modules/dirauto.js new file mode 100644 index 0000000..cd90f81 --- /dev/null +++ b/web_src/js/modules/dirauto.js @@ -0,0 +1,40 @@ +import {isDocumentFragmentOrElementNode} from '../utils/dom.js'; + +// for performance considerations, it only uses performant syntax +function attachDirAuto(el) { + if (el.type !== 'hidden' && + el.type !== 'checkbox' && + el.type !== 'radio' && + el.type !== 'range' && + el.type !== 'color') { + el.dir = 'auto'; + } +} + +export function initDirAuto() { + const observer = new MutationObserver((mutationList) => { + const len = mutationList.length; + for (let i = 0; i < len; i++) { + const mutation = mutationList[i]; + const len = mutation.addedNodes.length; + for (let i = 0; i < len; i++) { + const addedNode = mutation.addedNodes[i]; + if (!isDocumentFragmentOrElementNode(addedNode)) continue; + if (addedNode.nodeName === 'INPUT' || addedNode.nodeName === 'TEXTAREA') attachDirAuto(addedNode); + const children = addedNode.querySelectorAll('input, textarea'); + const len = children.length; + for (let childIdx = 0; childIdx < len; childIdx++) { + attachDirAuto(children[childIdx]); + } + } + } + }); + + const docNodes = document.querySelectorAll('input, textarea'); + const len = docNodes.length; + for (let i = 0; i < len; i++) { + attachDirAuto(docNodes[i]); + } + + observer.observe(document, {subtree: true, childList: true}); +} diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js new file mode 100644 index 0000000..2191a8d --- /dev/null +++ b/web_src/js/modules/fetch.js @@ -0,0 +1,41 @@ +import {isObject} from '../utils.js'; + +const {csrfToken} = window.config; + +// safe HTTP methods that don't need a csrf token +const safeMethods = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE']); + +// fetch wrapper, use below method name functions and the `data` option to pass in data +// which will automatically set an appropriate headers. For json content, only object +// and array types are currently supported. +export function request(url, {method = 'GET', data, headers = {}, ...other} = {}) { + let body, contentType; + if (data instanceof FormData || data instanceof URLSearchParams) { + body = data; + } else if (isObject(data) || Array.isArray(data)) { + contentType = 'application/json'; + body = JSON.stringify(data); + } + + const headersMerged = new Headers({ + ...(!safeMethods.has(method) && {'x-csrf-token': csrfToken}), + ...(contentType && {'content-type': contentType}), + }); + + for (const [name, value] of Object.entries(headers)) { + headersMerged.set(name, value); + } + + return fetch(url, { + method, + headers: headersMerged, + ...other, + ...(body && {body}), + }); +} + +export const GET = (url, opts) => request(url, {method: 'GET', ...opts}); +export const POST = (url, opts) => request(url, {method: 'POST', ...opts}); +export const PATCH = (url, opts) => request(url, {method: 'PATCH', ...opts}); +export const PUT = (url, opts) => request(url, {method: 'PUT', ...opts}); +export const DELETE = (url, opts) => request(url, {method: 'DELETE', ...opts}); diff --git a/web_src/js/modules/fetch.test.js b/web_src/js/modules/fetch.test.js new file mode 100644 index 0000000..e4bec3c --- /dev/null +++ b/web_src/js/modules/fetch.test.js @@ -0,0 +1,10 @@ +import {GET, POST, PATCH, PUT, DELETE} from './fetch.js'; + +// tests here are only to satisfy the linter for unused functions +test('exports', () => { + expect(GET).toBeTruthy(); + expect(POST).toBeTruthy(); + expect(PATCH).toBeTruthy(); + expect(PUT).toBeTruthy(); + expect(DELETE).toBeTruthy(); +}); diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js new file mode 100644 index 0000000..c04bc6e --- /dev/null +++ b/web_src/js/modules/fomantic.js @@ -0,0 +1,34 @@ +import $ from 'jquery'; +import {initFomanticApiPatch} from './fomantic/api.js'; +import {initAriaCheckboxPatch} from './fomantic/checkbox.js'; +import {initAriaFormFieldPatch} from './fomantic/form.js'; +import {initAriaDropdownPatch} from './fomantic/dropdown.js'; +import {initAriaModalPatch} from './fomantic/modal.js'; +import {initFomanticTransition} from './fomantic/transition.js'; +import {svg} from '../svg.js'; + +export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)'); + +export function initGiteaFomantic() { + // Silence fomantic's error logging when tabs are used without a target content element + $.fn.tab.settings.silent = true; + + // By default, use "exact match" for full text search + $.fn.dropdown.settings.fullTextSearch = 'exact'; + // Do not use "cursor: pointer" for dropdown labels + $.fn.dropdown.settings.className.label += ' tw-cursor-default'; + // Always use Gitea's SVG icons + $.fn.dropdown.settings.templates.label = function(_value, text, preserveHTML, className) { + const escape = $.fn.dropdown.settings.templates.escape; + return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`); + }; + + initFomanticTransition(); + initFomanticApiPatch(); + + // Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future. + initAriaCheckboxPatch(); + initAriaFormFieldPatch(); + initAriaDropdownPatch(); + initAriaModalPatch(); +} diff --git a/web_src/js/modules/fomantic/api.js b/web_src/js/modules/fomantic/api.js new file mode 100644 index 0000000..ca212c9 --- /dev/null +++ b/web_src/js/modules/fomantic/api.js @@ -0,0 +1,40 @@ +import $ from 'jquery'; + +export function initFomanticApiPatch() { + // + // Fomantic API module has some very buggy behaviors: + // + // If encodeParameters=true, it calls `urlEncodedValue` to encode the parameter. + // However, `urlEncodedValue` just tries to "guess" whether the parameter is already encoded, by decoding the parameter and encoding it again. + // + // There are 2 problems: + // 1. It may guess wrong, and skip encoding a parameter which looks like encoded. + // 2. If the parameter can't be decoded, `decodeURIComponent` will throw an error, and the whole request will fail. + // + // This patch only fixes the second error behavior at the moment. + // + const patchKey = '_giteaFomanticApiPatch'; + const oldApi = $.api; + $.api = $.fn.api = function(...args) { + const apiCall = oldApi.bind(this); + const ret = oldApi.apply(this, args); + + if (typeof args[0] !== 'string') { + const internalGet = apiCall('internal', 'get'); + if (!internalGet.urlEncodedValue[patchKey]) { + const oldUrlEncodedValue = internalGet.urlEncodedValue; + internalGet.urlEncodedValue = function (value) { + try { + return oldUrlEncodedValue(value); + } catch { + // if Fomantic API module's `urlEncodedValue` throws an error, we encode it by ourselves. + return encodeURIComponent(value); + } + }; + internalGet.urlEncodedValue[patchKey] = true; + } + } + return ret; + }; + $.api.settings = oldApi.settings; +} diff --git a/web_src/js/modules/fomantic/aria.md b/web_src/js/modules/fomantic/aria.md new file mode 100644 index 0000000..5836a34 --- /dev/null +++ b/web_src/js/modules/fomantic/aria.md @@ -0,0 +1,117 @@ +# Background + +This document is used as aria/accessibility(a11y) reference for future developers. + +There are a lot of a11y problems in the Fomantic UI library. Files in +`web_src/js/modules/fomantic/` are used as a workaround to make the UI more accessible. + +The aria-related code is designed to avoid touching the official Fomantic UI library, +and to be as independent as possible, so it can be easily modified/removed in the future. + +To test the aria/accessibility with screen readers, developers can use the following steps: + +* On macOS, you can use VoiceOver. + * Press `Command + F5` to turn on VoiceOver. + * Try to operate the UI with keyboard-only. + * Use Tab/Shift+Tab to switch focus between elements. + * Arrow keys (Option+Up/Down) to navigate between menu/combobox items (only aria-active, not really focused). + * Press Enter to trigger the aria-active element. +* On Android, you can use TalkBack. + * Go to Settings -> Accessibility -> TalkBack, turn it on. + * Long-press or press+swipe to switch the aria-active element (not really focused). + * Double-tap means old single-tap on the aria-active element. + * Double-finger swipe means old single-finger swipe. +* TODO: on Windows, on Linux, on iOS + +# Known Problems + +* Tested with Apple VoiceOver: If a dropdown menu/combobox is opened by mouse click, then arrow keys don't work. + But if the dropdown is opened by keyboard Tab, then arrow keys work, and from then on, the keys almost work with mouse click too. + The clue: when the dropdown is only opened by mouse click, VoiceOver doesn't send 'keydown' events of arrow keys to the DOM, + VoiceOver expects to use arrow keys to navigate between some elements, but it couldn't. + Users could use Option+ArrowKeys to navigate between menu/combobox items or selection labels if the menu/combobox is opened by mouse click. + +# Checkbox + +## Accessibility-friendly Checkbox + +The ideal checkboxes should be: + +```html +<label><input type="checkbox"> ... </label> +``` + +However, the templates still have the Fomantic-style HTML layout: + +```html +<div class="ui checkbox"> + <input type="checkbox"> + <label>...</label> +</div> +``` + +We call `initAriaCheckboxPatch` to link the `input` and `label` which makes clicking the +label etc. work. There is still a problem: These checkboxes are not friendly to screen readers, +so we add IDs to all the Fomantic UI checkboxes automatically by JS. If the `label` part is empty, +then the checkbox needs to get the `aria-label` attribute manually. + +# Fomantic Dropdown + +Fomantic Dropdown is designed to be used for many purposes: + +* Menu (the profile menu in navbar, the language menu in footer) +* Popup (the branch/tag panel, the review box) +* Simple `<select>` , used in many forms +* Searchable option-list with static items (used in many forms) +* Searchable option-list with dynamic items (ajax) +* Searchable multiple selection option-list with dynamic items: the repo topic setting +* More complex usages, like the Issue Label selector + +Fomantic Dropdown requires that the focus must be on its primary element. +If the focus changes, it hides or panics. + +At the moment, the aria-related code only tries to partially resolve the a11y problems for dropdowns with items. + +There are different solutions: + +* combobox + listbox + option: + * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ + * A combobox is an input widget with an associated popup that enables users to select a value for the combobox from + a collection of possible values. In some implementations, the popup presents allowed values, while in other implementations, + the popup presents suggested values, and users may either select one of the suggestions or type a value. +* menu + menuitem: + * https://www.w3.org/WAI/ARIA/apg/patterns/menubar/ + * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. + +The current approach is: detect if the dropdown has an input, +if yes, it works like a combobox, otherwise it works like a menu. +Multiple selection dropdown is not well-supported yet, it needs more work. + +Some important pages for dropdown testing: + +* Home(dashboard) page, the "Create Repo" / "Profile" / "Language" menu. +* Create New Repo page, a lot of dropdowns as combobox. +* Collaborators page, the "permission" dropdown (the old behavior was not quite good, it just works). + +```html +<!-- read-only dropdown --> +<div class="ui dropdown"> <!-- focused here, then it's not perfect to use aria-activedescendant to point to the menu item --> + <input type="hidden" ...> + <div class="text">Default</div> + <div class="menu" tabindex="-1"> <!-- "transition hidden|visible" classes will be added by $.dropdown() and when the dropdown is working --> + <div class="item active selected">Default</div> + <div class="item">...</div> + </div> +</div> + +<!-- search input dropdown --> +<div class="ui dropdown"> + <input type="hidden" ...> + <input class="search" autocomplete="off" tabindex="0"> <!-- focused here --> + <div class="text"></div> + <div class="menu" tabindex="-1"> <!-- "transition hidden|visible" classes will be added by $.dropdown() and when the dropdown is working --> + <div class="item selected">...</div> + <div class="item">...</div> + </div> +</div> +``` diff --git a/web_src/js/modules/fomantic/base.js b/web_src/js/modules/fomantic/base.js new file mode 100644 index 0000000..7574fdd --- /dev/null +++ b/web_src/js/modules/fomantic/base.js @@ -0,0 +1,18 @@ +let ariaIdCounter = 0; + +export function generateAriaId() { + return `_aria_auto_id_${ariaIdCounter++}`; +} + +export function linkLabelAndInput(label, input) { + const labelFor = label.getAttribute('for'); + const inputId = input.getAttribute('id'); + + if (inputId && !labelFor) { // missing "for" + label.setAttribute('for', inputId); + } else if (!inputId && !labelFor) { // missing both "id" and "for" + const id = generateAriaId(); + input.setAttribute('id', id); + label.setAttribute('for', id); + } +} diff --git a/web_src/js/modules/fomantic/checkbox.js b/web_src/js/modules/fomantic/checkbox.js new file mode 100644 index 0000000..ed77406 --- /dev/null +++ b/web_src/js/modules/fomantic/checkbox.js @@ -0,0 +1,13 @@ +import {linkLabelAndInput} from './base.js'; + +export function initAriaCheckboxPatch() { + // link the label and the input element so it's clickable and accessible + for (const el of document.querySelectorAll('.ui.checkbox')) { + if (el.hasAttribute('data-checkbox-patched')) continue; + const label = el.querySelector('label'); + const input = el.querySelector('input'); + if (!label || !input) continue; + linkLabelAndInput(label, input); + el.setAttribute('data-checkbox-patched', 'true'); + } +} diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js new file mode 100644 index 0000000..82e7108 --- /dev/null +++ b/web_src/js/modules/fomantic/dropdown.js @@ -0,0 +1,256 @@ +import $ from 'jquery'; +import {generateAriaId} from './base.js'; + +const ariaPatchKey = '_giteaAriaPatchDropdown'; +const fomanticDropdownFn = $.fn.dropdown; + +// use our own `$().dropdown` function to patch Fomantic's dropdown module +export function initAriaDropdownPatch() { + if ($.fn.dropdown === ariaDropdownFn) throw new Error('initAriaDropdownPatch could only be called once'); + $.fn.dropdown = ariaDropdownFn; + ariaDropdownFn.settings = fomanticDropdownFn.settings; +} + +// the patched `$.fn.dropdown` function, it passes the arguments to Fomantic's `$.fn.dropdown` function, and: +// * it does the one-time attaching on the first call +// * it delegates the `onLabelCreate` to the patched `onLabelCreate` to add necessary aria attributes +function ariaDropdownFn(...args) { + const ret = fomanticDropdownFn.apply(this, args); + + // if the `$().dropdown()` call is without arguments, or it has non-string (object) argument, + // it means that this call will reset the dropdown internal settings, then we need to re-delegate the callbacks. + const needDelegate = (!args.length || typeof args[0] !== 'string'); + for (const el of this) { + if (!el[ariaPatchKey]) { + attachInit(el); + } + if (needDelegate) { + delegateOne($(el)); + } + } + return ret; +} + +// make the item has role=option/menuitem, add an id if there wasn't one yet, make items as non-focusable +// the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element. +function updateMenuItem(dropdown, item) { + if (!item.id) item.id = generateAriaId(); + item.setAttribute('role', dropdown[ariaPatchKey].listItemRole); + item.setAttribute('tabindex', '-1'); + for (const el of item.querySelectorAll('a, input, button')) el.setAttribute('tabindex', '-1'); +} +/** + * make the label item and its "delete icon" have correct aria attributes + * @param {HTMLElement} label + */ +function updateSelectionLabel(label) { + // the "label" is like this: "<a|div class="ui label" data-value="1">the-label-name <i|svg class="delete icon"/></a>" + if (!label.id) { + label.id = generateAriaId(); + } + label.tabIndex = -1; + + const deleteIcon = label.querySelector('.delete.icon'); + if (deleteIcon) { + deleteIcon.setAttribute('aria-hidden', 'false'); + deleteIcon.setAttribute('aria-label', window.config.i18n.remove_label_str.replace('%s', label.getAttribute('data-value'))); + deleteIcon.setAttribute('role', 'button'); + } +} + +// delegate the dropdown's template functions and callback functions to add aria attributes. +function delegateOne($dropdown) { + const dropdownCall = fomanticDropdownFn.bind($dropdown); + + // If there is a "search input" in the "menu", Fomantic will only "focus the input" but not "toggle the menu" when the "dropdown icon" is clicked. + // Actually, Fomantic UI doesn't support such layout/usage. It needs to patch the "focusSearch" / "blurSearch" functions to make sure it toggles the menu. + const oldFocusSearch = dropdownCall('internal', 'focusSearch'); + const oldBlurSearch = dropdownCall('internal', 'blurSearch'); + // * If the "dropdown icon" is clicked, Fomantic calls "focusSearch", so show the menu + dropdownCall('internal', 'focusSearch', function () { dropdownCall('show'); oldFocusSearch.call(this) }); + // * If the "dropdown icon" is clicked again when the menu is visible, Fomantic calls "blurSearch", so hide the menu + dropdownCall('internal', 'blurSearch', function () { oldBlurSearch.call(this); dropdownCall('hide') }); + + // the "template" functions are used for dynamic creation (eg: AJAX) + const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()}; + const dropdownTemplatesMenuOld = dropdownTemplates.menu; + dropdownTemplates.menu = function(response, fields, preserveHTML, className) { + // when the dropdown menu items are loaded from AJAX requests, the items are created dynamically + const menuItems = dropdownTemplatesMenuOld(response, fields, preserveHTML, className); + const div = document.createElement('div'); + div.innerHTML = menuItems; + const $wrapper = $(div); + const $items = $wrapper.find('> .item'); + $items.each((_, item) => updateMenuItem($dropdown[0], item)); + $dropdown[0][ariaPatchKey].deferredRefreshAriaActiveItem(); + return $wrapper.html(); + }; + dropdownCall('setting', 'templates', dropdownTemplates); + + // the `onLabelCreate` is used to add necessary aria attributes for dynamically created selection labels + const dropdownOnLabelCreateOld = dropdownCall('setting', 'onLabelCreate'); + dropdownCall('setting', 'onLabelCreate', function(value, text) { + const $label = dropdownOnLabelCreateOld.call(this, value, text); + updateSelectionLabel($label[0]); + return $label; + }); +} + +// for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes +function attachStaticElements(dropdown, focusable, menu) { + // prepare static dropdown menu list popup + if (!menu.id) { + menu.id = generateAriaId(); + } + + $(menu).find('> .item').each((_, item) => updateMenuItem(dropdown, item)); + + // this role could only be changed after its content is ready, otherwise some browsers+readers (like Chrome+AppleVoice) crash + menu.setAttribute('role', dropdown[ariaPatchKey].listPopupRole); + + // prepare selection label items + for (const label of dropdown.querySelectorAll('.ui.label')) { + updateSelectionLabel(label); + } + + // make the primary element (focusable) aria-friendly + focusable.setAttribute('role', focusable.getAttribute('role') ?? dropdown[ariaPatchKey].focusableRole); + focusable.setAttribute('aria-haspopup', dropdown[ariaPatchKey].listPopupRole); + focusable.setAttribute('aria-controls', menu.id); + focusable.setAttribute('aria-expanded', 'false'); + + // use tooltip's content as aria-label if there is no aria-label + const tooltipContent = dropdown.getAttribute('data-tooltip-content'); + if (tooltipContent && !dropdown.getAttribute('aria-label')) { + dropdown.setAttribute('aria-label', tooltipContent); + } +} + +function attachInit(dropdown) { + dropdown[ariaPatchKey] = {}; + if (dropdown.classList.contains('custom')) return; + + // Dropdown has 2 different focusing behaviors + // * with search input: the input is focused, and it works with aria-activedescendant pointing another sibling element. + // * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown + // Some desktop screen readers may change the focus, but dropdown requires that the focus must be on its primary element, then they don't work well. + + // Expected user interactions for dropdown with aria support: + // * user can use Tab to focus in the dropdown, then the dropdown menu (list) will be shown + // * user presses Tab on the focused dropdown to move focus to next sibling focusable element (but not the menu item) + // * user can use arrow key Up/Down to navigate between menu items + // * when user presses Enter: + // - if the menu item is clickable (eg: <a>), then trigger the click event + // - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu + + // TODO: multiple selection is only partially supported. Check and test them one by one in the future. + + const textSearch = dropdown.querySelector('input.search'); + const focusable = textSearch || dropdown; // the primary element for focus, see comment above + if (!focusable) return; + + // as a combobox, the input should not have autocomplete by default + if (textSearch && !textSearch.getAttribute('autocomplete')) { + textSearch.setAttribute('autocomplete', 'off'); + } + + let menu = $(dropdown).find('> .menu')[0]; + if (!menu) { + // some "multiple selection" dropdowns don't have a static menu element in HTML, we need to pre-create it to make it have correct aria attributes + menu = document.createElement('div'); + menu.classList.add('menu'); + dropdown.append(menu); + } + + // There are 2 possible solutions about the role: combobox or menu. + // The idea is that if there is an input, then it's a combobox, otherwise it's a menu. + // Since #19861 we have prepared the "combobox" solution, but didn't get enough time to put it into practice and test before. + const isComboBox = dropdown.querySelectorAll('input').length > 0; + + dropdown[ariaPatchKey].focusableRole = isComboBox ? 'combobox' : 'menu'; + dropdown[ariaPatchKey].listPopupRole = isComboBox ? 'listbox' : ''; + dropdown[ariaPatchKey].listItemRole = isComboBox ? 'option' : 'menuitem'; + + attachDomEvents(dropdown, focusable, menu); + attachStaticElements(dropdown, focusable, menu); +} + +function attachDomEvents(dropdown, focusable, menu) { + // when showing, it has class: ".animating.in" + // when hiding, it has class: ".visible.animating.out" + const isMenuVisible = () => (menu.classList.contains('visible') && !menu.classList.contains('out')) || menu.classList.contains('in'); + + // update aria attributes according to current active/selected item + const refreshAriaActiveItem = () => { + const menuVisible = isMenuVisible(); + focusable.setAttribute('aria-expanded', menuVisible ? 'true' : 'false'); + + // if there is an active item, use it (the user is navigating between items) + // otherwise use the "selected" for combobox (for the last selected item) + const active = $(menu).find('> .item.active, > .item.selected')[0]; + if (!active) return; + // if the popup is visible and has an active/selected item, use its id as aria-activedescendant + if (menuVisible) { + focusable.setAttribute('aria-activedescendant', active.id); + } else if (dropdown[ariaPatchKey].listPopupRole === 'menu') { + // for menu, when the popup is hidden, no need to keep the aria-activedescendant, and clear the active/selected item + focusable.removeAttribute('aria-activedescendant'); + active.classList.remove('active', 'selected'); + } + }; + + dropdown.addEventListener('keydown', (e) => { + // here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler + if (e.key === 'Enter') { + const dropdownCall = fomanticDropdownFn.bind($(dropdown)); + let $item = dropdownCall('get item', dropdownCall('get value')); + if (!$item) $item = $(menu).find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item + // if the selected item is clickable, then trigger the click event. + // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click. + if ($item?.[0]?.matches('a, .js-aria-clickable')) $item[0].click(); + } + }); + + // use setTimeout to run the refreshAria in next tick (to make sure the Fomantic UI code has finished its work) + // do not return any value, jQuery has return-value related behaviors. + // when the popup is hiding, it's better to have a small "delay", because there is a Fomantic UI animation + // without the delay for hiding, the UI will be somewhat laggy and sometimes may get stuck in the animation. + const deferredRefreshAriaActiveItem = (delay = 0) => { setTimeout(refreshAriaActiveItem, delay) }; + dropdown[ariaPatchKey].deferredRefreshAriaActiveItem = deferredRefreshAriaActiveItem; + dropdown.addEventListener('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAriaActiveItem(); }); + + // if the dropdown has been opened by focus, do not trigger the next click event again. + // otherwise the dropdown will be closed immediately, especially on Android with TalkBack + // * desktop event sequence: mousedown -> focus -> mouseup -> click + // * mobile event sequence: focus -> mousedown -> mouseup -> click + // Fomantic may stop propagation of blur event, use capture to make sure we can still get the event + let ignoreClickPreEvents = 0, ignoreClickPreVisible = 0; + dropdown.addEventListener('mousedown', () => { + ignoreClickPreVisible += isMenuVisible() ? 1 : 0; + ignoreClickPreEvents++; + }, true); + dropdown.addEventListener('focus', () => { + ignoreClickPreVisible += isMenuVisible() ? 1 : 0; + ignoreClickPreEvents++; + deferredRefreshAriaActiveItem(); + }, true); + dropdown.addEventListener('blur', () => { + ignoreClickPreVisible = ignoreClickPreEvents = 0; + deferredRefreshAriaActiveItem(100); + }, true); + dropdown.addEventListener('mouseup', () => { + setTimeout(() => { + ignoreClickPreVisible = ignoreClickPreEvents = 0; + deferredRefreshAriaActiveItem(100); + }, 0); + }, true); + dropdown.addEventListener('click', (e) => { + if (isMenuVisible() && + ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible + ignoreClickPreEvents === 2 // the click event is related to mousedown+focus + ) { + e.stopPropagation(); // if the dropdown menu has been opened by focus, do not trigger the next click event again + } + ignoreClickPreEvents = ignoreClickPreVisible = 0; + }, true); +} diff --git a/web_src/js/modules/fomantic/form.js b/web_src/js/modules/fomantic/form.js new file mode 100644 index 0000000..3bb0058 --- /dev/null +++ b/web_src/js/modules/fomantic/form.js @@ -0,0 +1,13 @@ +import {linkLabelAndInput} from './base.js'; + +export function initAriaFormFieldPatch() { + // link the label and the input element so it's clickable and accessible + for (const el of document.querySelectorAll('.ui.form .field')) { + if (el.hasAttribute('data-field-patched')) continue; + const label = el.querySelector(':scope > label'); + const input = el.querySelector(':scope > input'); + if (!label || !input) continue; + linkLabelAndInput(label, input); + el.setAttribute('data-field-patched', 'true'); + } +} diff --git a/web_src/js/modules/fomantic/modal.js b/web_src/js/modules/fomantic/modal.js new file mode 100644 index 0000000..8b455cf --- /dev/null +++ b/web_src/js/modules/fomantic/modal.js @@ -0,0 +1,28 @@ +import $ from 'jquery'; + +const fomanticModalFn = $.fn.modal; + +// use our own `$.fn.modal` to patch Fomantic's modal module +export function initAriaModalPatch() { + if ($.fn.modal === ariaModalFn) throw new Error('initAriaModalPatch could only be called once'); + $.fn.modal = ariaModalFn; + ariaModalFn.settings = fomanticModalFn.settings; +} + +// the patched `$.fn.modal` modal function +// * it does the one-time attaching on the first call +function ariaModalFn(...args) { + const ret = fomanticModalFn.apply(this, args); + if (args[0] === 'show' || args[0]?.autoShow) { + for (const el of this) { + // If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default). + // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed. + // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form. + // So, all "cancel" buttons without "[type]" must be marked as "type=button". + for (const button of el.querySelectorAll('form button.cancel:not([type])')) { + button.setAttribute('type', 'button'); + } + } + } + return ret; +} diff --git a/web_src/js/modules/fomantic/transition.js b/web_src/js/modules/fomantic/transition.js new file mode 100644 index 0000000..78aa053 --- /dev/null +++ b/web_src/js/modules/fomantic/transition.js @@ -0,0 +1,54 @@ +import $ from 'jquery'; + +export function initFomanticTransition() { + const transitionNopBehaviors = new Set([ + 'clear queue', 'stop', 'stop all', 'destroy', + 'force repaint', 'repaint', 'reset', + 'looping', 'remove looping', 'disable', 'enable', + 'set duration', 'save conditions', 'restore conditions', + ]); + // stand-in for removed transition module + $.fn.transition = function (arg0, arg1, arg2) { + if (arg0 === 'is supported') return true; + if (arg0 === 'is animating') return false; + if (arg0 === 'is inward') return false; + if (arg0 === 'is outward') return false; + + let argObj; + if (typeof arg0 === 'string') { + // many behaviors are no-op now. https://fomantic-ui.com/modules/transition.html#/usage + if (transitionNopBehaviors.has(arg0)) return this; + // now, the arg0 is an animation name, the syntax: (animation, duration, complete) + argObj = {animation: arg0, ...(arg1 && {duration: arg1}), ...(arg2 && {onComplete: arg2})}; + } else if (typeof arg0 === 'object') { + argObj = arg0; + } else { + throw new Error(`invalid argument: ${arg0}`); + } + + const isAnimationIn = argObj.animation?.startsWith('show') || argObj.animation?.endsWith(' in'); + const isAnimationOut = argObj.animation?.startsWith('hide') || argObj.animation?.endsWith(' out'); + this.each((_, el) => { + let toShow = isAnimationIn; + if (!isAnimationIn && !isAnimationOut) { + // If the animation is not in/out, then it must be a toggle animation. + // Fomantic uses computed styles to check "visibility", but to avoid unnecessary arguments, here it only checks the class. + toShow = this.hasClass('hidden'); // maybe it could also check "!this.hasClass('visible')", leave it to the future until there is a real problem. + } + argObj.onStart?.call(el); + if (toShow) { + el.classList.remove('hidden'); + el.classList.add('visible', 'transition'); + if (argObj.displayType) el.style.setProperty('display', argObj.displayType, 'important'); + argObj.onShow?.call(el); + } else { + el.classList.add('hidden'); + el.classList.remove('visible'); // don't remove the transition class because the Fomantic animation style is `.hidden.transition`. + el.style.removeProperty('display'); + argObj.onHidden?.call(el); + } + argObj.onComplete?.call(el); + }); + return this; + }; +} diff --git a/web_src/js/modules/sortable.js b/web_src/js/modules/sortable.js new file mode 100644 index 0000000..1c9adb6 --- /dev/null +++ b/web_src/js/modules/sortable.js @@ -0,0 +1,19 @@ +export async function createSortable(el, opts = {}) { + const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs'); + + return new Sortable(el, { + animation: 150, + ghostClass: 'card-ghost', + onChoose: (e) => { + const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item; + handle.classList.add('tw-cursor-grabbing'); + opts.onChoose?.(e); + }, + onUnchoose: (e) => { + const handle = opts.handle ? e.item.querySelector(opts.handle) : e.item; + handle.classList.remove('tw-cursor-grabbing'); + opts.onUnchoose?.(e); + }, + ...opts, + }); +} diff --git a/web_src/js/modules/stores.js b/web_src/js/modules/stores.js new file mode 100644 index 0000000..1a0ed7e --- /dev/null +++ b/web_src/js/modules/stores.js @@ -0,0 +1,10 @@ +import {reactive} from 'vue'; + +let diffTreeStoreReactive; +export function diffTreeStore() { + if (!diffTreeStoreReactive) { + diffTreeStoreReactive = reactive(window.config.pageData.diffFileInfo); + window.config.pageData.diffFileInfo = diffTreeStoreReactive; + } + return diffTreeStoreReactive; +} diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js new file mode 100644 index 0000000..83b28e5 --- /dev/null +++ b/web_src/js/modules/tippy.js @@ -0,0 +1,195 @@ +import tippy, {followCursor} from 'tippy.js'; +import {isDocumentFragmentOrElementNode} from '../utils/dom.js'; +import {formatDatetime} from '../utils/time.js'; + +const visibleInstances = new Set(); +const arrowSvg = `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`; + +export function createTippy(target, opts = {}) { + // the callback functions should be destructured from opts, + // because we should use our own wrapper functions to handle them, do not let the user override them + const {onHide, onShow, onDestroy, role, theme, arrow, ...other} = opts; + + const instance = tippy(target, { + appendTo: document.body, + animation: false, + allowHTML: false, + hideOnClick: false, + interactiveBorder: 20, + ignoreAttributes: true, + maxWidth: 500, // increase over default 350px + onHide: (instance) => { + visibleInstances.delete(instance); + return onHide?.(instance); + }, + onDestroy: (instance) => { + visibleInstances.delete(instance); + return onDestroy?.(instance); + }, + onShow: (instance) => { + // hide other tooltip instances so only one tooltip shows at a time + for (const visibleInstance of visibleInstances) { + if (visibleInstance.props.role === 'tooltip') { + visibleInstance.hide(); + } + } + visibleInstances.add(instance); + return onShow?.(instance); + }, + arrow: arrow || (theme === 'bare' ? false : arrowSvg), + role: role || 'menu', // HTML role attribute + theme: theme || role || 'menu', // CSS theme, either "tooltip", "menu", "box-with-header" or "bare" + plugins: [followCursor], + ...other, + }); + + if (role === 'menu') { + target.setAttribute('aria-haspopup', 'true'); + } + + return instance; +} + +/** + * Attach a tooltip tippy to the given target element. + * If the target element already has a tooltip tippy attached, the tooltip will be updated with the new content. + * If the target element has no content, then no tooltip will be attached, and it returns null. + * + * Note: "tooltip" doesn't equal to "tippy". "tooltip" means a auto-popup content, it just uses tippy as the implementation. + * + * @param target {HTMLElement} + * @param content {null|string} + * @returns {null|tippy} + */ +function attachTooltip(target, content = null) { + switchTitleToTooltip(target); + + content = content ?? target.getAttribute('data-tooltip-content'); + if (!content) return null; + + // when element has a clipboard target, we update the tooltip after copy + // in which case it is undesirable to automatically hide it on click as + // it would momentarily flash the tooltip out and in. + const hasClipboardTarget = target.hasAttribute('data-clipboard-target'); + const hideOnClick = !hasClipboardTarget; + + const props = { + content, + delay: 100, + role: 'tooltip', + theme: 'tooltip', + hideOnClick, + placement: target.getAttribute('data-tooltip-placement') || 'top-start', + followCursor: target.getAttribute('data-tooltip-follow-cursor') || false, + ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), + }; + + if (!target._tippy) { + createTippy(target, props); + } else { + target._tippy.setProps(props); + } + return target._tippy; +} + +function switchTitleToTooltip(target) { + let title = target.getAttribute('title'); + if (title) { + // apply custom formatting to relative-time's tooltips + if (target.tagName.toLowerCase() === 'relative-time') { + const datetime = target.getAttribute('datetime'); + if (datetime) { + title = formatDatetime(new Date(datetime)); + } + } + target.setAttribute('data-tooltip-content', title); + target.setAttribute('aria-label', title); + // keep the attribute, in case there are some other "[title]" selectors + // and to prevent infinite loop with <relative-time> which will re-add + // title if it is absent + target.setAttribute('title', ''); + } +} + +/** + * Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element + * According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event + * Some browsers like PaleMoon don't support "addEventListener('mouseenter', capture)" + * The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy + * @param e {Event} + */ +function lazyTooltipOnMouseHover(e) { + e.target.removeEventListener('mouseover', lazyTooltipOnMouseHover, true); + attachTooltip(this); +} + +// Activate the tooltip for current element. +// If the element has no aria-label, use the tooltip content as aria-label. +function attachLazyTooltip(el) { + el.addEventListener('mouseover', lazyTooltipOnMouseHover, {capture: true}); + + // meanwhile, if the element has no aria-label, use the tooltip content as aria-label + if (!el.hasAttribute('aria-label')) { + const content = el.getAttribute('data-tooltip-content'); + if (content) { + el.setAttribute('aria-label', content); + } + } +} + +// Activate the tooltip for all children elements. +function attachChildrenLazyTooltip(target) { + for (const el of target.querySelectorAll('[data-tooltip-content]')) { + attachLazyTooltip(el); + } +} + +export function initGlobalTooltips() { + // use MutationObserver to detect new "data-tooltip-content" elements added to the DOM, or attributes changed + const observerConnect = (observer) => observer.observe(document, { + subtree: true, + childList: true, + attributeFilter: ['data-tooltip-content', 'title'], + }); + const observer = new MutationObserver((mutationList, observer) => { + const pending = observer.takeRecords(); + observer.disconnect(); + for (const mutation of [...mutationList, ...pending]) { + if (mutation.type === 'childList') { + // mainly for Vue components and AJAX rendered elements + for (const el of mutation.addedNodes) { + if (!isDocumentFragmentOrElementNode(el)) continue; + attachChildrenLazyTooltip(el); + if (el.hasAttribute('data-tooltip-content')) { + attachLazyTooltip(el); + } + } + } else if (mutation.type === 'attributes') { + attachTooltip(mutation.target); + } + } + observerConnect(observer); + }); + observerConnect(observer); + + attachChildrenLazyTooltip(document.documentElement); +} + +export function showTemporaryTooltip(target, content) { + // if the target is inside a dropdown, don't show the tooltip because when the dropdown + // closes, the tippy would be pushed unsightly to the top-left of the screen like seen + // on the issue comment menu. + if (target.closest('.ui.dropdown > .menu')) return; + + const tippy = target._tippy ?? attachTooltip(target, content); + tippy.setContent(content); + if (!tippy.state.isShown) tippy.show(); + tippy.setProps({ + onHidden: (tippy) => { + // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed + if (!attachTooltip(target)) { + tippy.destroy(); + } + }, + }); +} diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js new file mode 100644 index 0000000..d12d203 --- /dev/null +++ b/web_src/js/modules/toast.js @@ -0,0 +1,55 @@ +import {htmlEscape} from 'escape-goat'; +import {svg} from '../svg.js'; +import Toastify from 'toastify-js'; // don't use "async import", because when network error occurs, the "async import" also fails and nothing is shown + +const levels = { + info: { + icon: 'octicon-check', + background: 'var(--color-green)', + duration: 2500, + }, + warning: { + icon: 'gitea-exclamation', + background: 'var(--color-orange)', + duration: -1, // requires dismissal to hide + }, + error: { + icon: 'gitea-exclamation', + background: 'var(--color-red)', + duration: -1, // requires dismissal to hide + }, +}; + +// See https://github.com/apvarun/toastify-js#api for options +function showToast(message, level, {gravity, position, duration, useHtmlBody, ...other} = {}) { + const {icon, background, duration: levelDuration} = levels[level ?? 'info']; + const toast = Toastify({ + text: ` + <div class='toast-icon'>${svg(icon)}</div> + <div class='toast-body'>${useHtmlBody ? message : htmlEscape(message)}</div> + <button class='toast-close'>${svg('octicon-x')}</button> + `, + escapeMarkup: false, + gravity: gravity ?? 'top', + position: position ?? 'center', + duration: duration ?? levelDuration, + style: {background}, + ...other, + }); + + toast.showToast(); + toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast()); + return toast; +} + +export function showInfoToast(message, opts) { + return showToast(message, 'info', opts); +} + +export function showWarningToast(message, opts) { + return showToast(message, 'warning', opts); +} + +export function showErrorToast(message, opts) { + return showToast(message, 'error', opts); +} diff --git a/web_src/js/modules/toast.test.js b/web_src/js/modules/toast.test.js new file mode 100644 index 0000000..357f18d --- /dev/null +++ b/web_src/js/modules/toast.test.js @@ -0,0 +1,16 @@ +import {showInfoToast, showErrorToast, showWarningToast} from './toast.js'; + +test('showInfoToast', async () => { + showInfoToast('success 😀', {duration: -1}); + expect(document.querySelector('.toastify')).toBeTruthy(); +}); + +test('showWarningToast', async () => { + showWarningToast('warning 😐', {duration: -1}); + expect(document.querySelector('.toastify')).toBeTruthy(); +}); + +test('showErrorToast', async () => { + showErrorToast('error 🙁', {duration: -1}); + expect(document.querySelector('.toastify')).toBeTruthy(); +}); diff --git a/web_src/js/render/ansi.js b/web_src/js/render/ansi.js new file mode 100644 index 0000000..bb622dd --- /dev/null +++ b/web_src/js/render/ansi.js @@ -0,0 +1,45 @@ +import {AnsiUp} from 'ansi_up'; + +const replacements = [ + [/\x1b\[\d+[A-H]/g, ''], // Move cursor, treat them as no-op + [/\x1b\[\d?[JK]/g, '\r'], // Erase display/line, treat them as a Carriage Return +]; + +// render ANSI to HTML +export function renderAnsi(line) { + // create a fresh ansi_up instance because otherwise previous renders can influence + // the output of future renders, because ansi_up is stateful and remembers things like + // unclosed opening tags for colors. + const ansi_up = new AnsiUp(); + ansi_up.use_classes = true; + + if (line.endsWith('\r\n')) { + line = line.substring(0, line.length - 2); + } else if (line.endsWith('\n')) { + line = line.substring(0, line.length - 1); + } + + if (line.includes('\x1b')) { + for (const [regex, replacement] of replacements) { + line = line.replace(regex, replacement); + } + } + + if (!line.includes('\r')) { + return ansi_up.ansi_to_html(line); + } + + // handle "\rReading...1%\rReading...5%\rReading...100%", + // convert it into a multiple-line string: "Reading...1%\nReading...5%\nReading...100%" + const lines = []; + for (const part of line.split('\r')) { + if (part === '') continue; + const partHtml = ansi_up.ansi_to_html(part); + if (partHtml !== '') { + lines.push(partHtml); + } + } + + // the log message element is with "white-space: break-spaces;", so use "\n" to break lines + return lines.join('\n'); +} diff --git a/web_src/js/render/ansi.test.js b/web_src/js/render/ansi.test.js new file mode 100644 index 0000000..5afff71 --- /dev/null +++ b/web_src/js/render/ansi.test.js @@ -0,0 +1,20 @@ +import {renderAnsi} from './ansi.js'; + +test('renderAnsi', () => { + expect(renderAnsi('abc')).toEqual('abc'); + expect(renderAnsi('abc\n')).toEqual('abc'); + expect(renderAnsi('abc\r\n')).toEqual('abc'); + expect(renderAnsi('\r')).toEqual(''); + expect(renderAnsi('\rx\rabc')).toEqual('x\nabc'); + expect(renderAnsi('\rabc\rx\r')).toEqual('abc\nx'); + expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span class="ansi-black-fg">black</span><span class="ansi-white-fg">white</span>'); // unclosed + expect(renderAnsi('<script>')).toEqual('<script>'); + expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); + expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); + expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); + expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); + + // treat "\033[0K" and "\033[0J" (Erase display/line) as "\r", then it will be covered to "\n" finally. + expect(renderAnsi('a\x1b[Kb\x1b[2Jc')).toEqual('a\nb\nc'); + expect(renderAnsi('\x1b[48;5;88ma\x1b[38;208;48;5;159mb\x1b[m')).toEqual(`<span style="background-color:rgb(135,0,0)">a</span><span style="background-color:rgb(175,255,255)">b</span>`); +}); diff --git a/web_src/js/render/pdf.js b/web_src/js/render/pdf.js new file mode 100644 index 0000000..f31f161 --- /dev/null +++ b/web_src/js/render/pdf.js @@ -0,0 +1,19 @@ +import {htmlEscape} from 'escape-goat'; + +export async function initPdfViewer() { + const els = document.querySelectorAll('.pdf-content'); + if (!els.length) return; + + const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject'); + + for (const el of els) { + const src = el.getAttribute('data-src'); + const fallbackText = el.getAttribute('data-fallback-button-text'); + pdfobject.embed(src, el, { + fallbackLink: htmlEscape` + <a role="button" class="ui basic button pdf-fallback-button" href="[url]">${fallbackText}</a> + `, + }); + el.classList.remove('is-loading'); + } +} diff --git a/web_src/js/standalone/devtest.js b/web_src/js/standalone/devtest.js new file mode 100644 index 0000000..d0ca511 --- /dev/null +++ b/web_src/js/standalone/devtest.js @@ -0,0 +1,11 @@ +import {showInfoToast, showWarningToast, showErrorToast} from '../modules/toast.js'; + +document.getElementById('info-toast').addEventListener('click', () => { + showInfoToast('success 😀'); +}); +document.getElementById('warning-toast').addEventListener('click', () => { + showWarningToast('warning 😐'); +}); +document.getElementById('error-toast').addEventListener('click', () => { + showErrorToast('error 🙁'); +}); diff --git a/web_src/js/standalone/forgejo-swagger.js b/web_src/js/standalone/forgejo-swagger.js new file mode 100644 index 0000000..b7550b8 --- /dev/null +++ b/web_src/js/standalone/forgejo-swagger.js @@ -0,0 +1,23 @@ +window.addEventListener('load', async () => { + const [{default: SwaggerUI}] = await Promise.all([ + import(/* webpackChunkName: "swagger-ui" */'swagger-ui-dist/swagger-ui-es-bundle.js'), + import(/* webpackChunkName: "swagger-ui" */'swagger-ui-dist/swagger-ui.css'), + ]); + const url = document.getElementById('swagger-ui').getAttribute('data-source'); + + const ui = SwaggerUI({ + url, + dom_id: '#swagger-ui', + deepLinking: true, + docExpansion: 'none', + defaultModelRendering: 'model', // don't show examples by default, because they may be incomplete + presets: [ + SwaggerUI.presets.apis, + ], + plugins: [ + SwaggerUI.plugins.DownloadUrl, + ], + }); + + window.ui = ui; +}); diff --git a/web_src/js/standalone/swagger.js b/web_src/js/standalone/swagger.js new file mode 100644 index 0000000..ec2115e --- /dev/null +++ b/web_src/js/standalone/swagger.js @@ -0,0 +1,34 @@ +window.addEventListener('load', async () => { + const [{default: SwaggerUI}] = await Promise.all([ + import(/* webpackChunkName: "swagger-ui" */'swagger-ui-dist/swagger-ui-es-bundle.js'), + import(/* webpackChunkName: "swagger-ui" */'swagger-ui-dist/swagger-ui.css'), + ]); + + const url = document.getElementById('swagger-ui').getAttribute('data-source'); + const res = await fetch(url); + const spec = await res.json(); + + // Make the page's protocol be at the top of the schemes list + const proto = window.location.protocol.slice(0, -1); + spec.schemes.sort((a, b) => { + if (a === proto) return -1; + if (b === proto) return 1; + return 0; + }); + + const ui = SwaggerUI({ + spec, + dom_id: '#swagger-ui', + deepLinking: true, + docExpansion: 'none', + defaultModelRendering: 'model', // don't show examples by default, because they may be incomplete + presets: [ + SwaggerUI.presets.apis, + ], + plugins: [ + SwaggerUI.plugins.DownloadUrl, + ], + }); + + window.ui = ui; +}); diff --git a/web_src/js/svg.js b/web_src/js/svg.js new file mode 100644 index 0000000..9ef5f28 --- /dev/null +++ b/web_src/js/svg.js @@ -0,0 +1,228 @@ +import {h} from 'vue'; +import {parseDom, serializeXml} from './utils.js'; +import giteaDoubleChevronLeft from '../../public/assets/img/svg/gitea-double-chevron-left.svg'; +import giteaDoubleChevronRight from '../../public/assets/img/svg/gitea-double-chevron-right.svg'; +import giteaEmptyCheckbox from '../../public/assets/img/svg/gitea-empty-checkbox.svg'; +import giteaExclamation from '../../public/assets/img/svg/gitea-exclamation.svg'; +import octiconArchive from '../../public/assets/img/svg/octicon-archive.svg'; +import octiconArrowSwitch from '../../public/assets/img/svg/octicon-arrow-switch.svg'; +import octiconBlocked from '../../public/assets/img/svg/octicon-blocked.svg'; +import octiconBold from '../../public/assets/img/svg/octicon-bold.svg'; +import octiconCheck from '../../public/assets/img/svg/octicon-check.svg'; +import octiconCheckbox from '../../public/assets/img/svg/octicon-checkbox.svg'; +import octiconCheckCircleFill from '../../public/assets/img/svg/octicon-check-circle-fill.svg'; +import octiconChevronDown from '../../public/assets/img/svg/octicon-chevron-down.svg'; +import octiconChevronLeft from '../../public/assets/img/svg/octicon-chevron-left.svg'; +import octiconChevronRight from '../../public/assets/img/svg/octicon-chevron-right.svg'; +import octiconClock from '../../public/assets/img/svg/octicon-clock.svg'; +import octiconCode from '../../public/assets/img/svg/octicon-code.svg'; +import octiconColumns from '../../public/assets/img/svg/octicon-columns.svg'; +import octiconCopy from '../../public/assets/img/svg/octicon-copy.svg'; +import octiconDiffAdded from '../../public/assets/img/svg/octicon-diff-added.svg'; +import octiconDiffModified from '../../public/assets/img/svg/octicon-diff-modified.svg'; +import octiconDiffRemoved from '../../public/assets/img/svg/octicon-diff-removed.svg'; +import octiconDiffRenamed from '../../public/assets/img/svg/octicon-diff-renamed.svg'; +import octiconDotFill from '../../public/assets/img/svg/octicon-dot-fill.svg'; +import octiconDownload from '../../public/assets/img/svg/octicon-download.svg'; +import octiconEye from '../../public/assets/img/svg/octicon-eye.svg'; +import octiconFile from '../../public/assets/img/svg/octicon-file.svg'; +import octiconFileDirectoryFill from '../../public/assets/img/svg/octicon-file-directory-fill.svg'; +import octiconFilter from '../../public/assets/img/svg/octicon-filter.svg'; +import octiconGear from '../../public/assets/img/svg/octicon-gear.svg'; +import octiconGitBranch from '../../public/assets/img/svg/octicon-git-branch.svg'; +import octiconGitCommit from '../../public/assets/img/svg/octicon-git-commit.svg'; +import octiconGitMerge from '../../public/assets/img/svg/octicon-git-merge.svg'; +import octiconGitPullRequest from '../../public/assets/img/svg/octicon-git-pull-request.svg'; +import octiconGitPullRequestClosed from '../../public/assets/img/svg/octicon-git-pull-request-closed.svg'; +import octiconGitPullRequestDraft from '../../public/assets/img/svg/octicon-git-pull-request-draft.svg'; +import octiconHeading from '../../public/assets/img/svg/octicon-heading.svg'; +import octiconHorizontalRule from '../../public/assets/img/svg/octicon-horizontal-rule.svg'; +import octiconImage from '../../public/assets/img/svg/octicon-image.svg'; +import octiconIssueClosed from '../../public/assets/img/svg/octicon-issue-closed.svg'; +import octiconIssueOpened from '../../public/assets/img/svg/octicon-issue-opened.svg'; +import octiconItalic from '../../public/assets/img/svg/octicon-italic.svg'; +import octiconKebabHorizontal from '../../public/assets/img/svg/octicon-kebab-horizontal.svg'; +import octiconLink from '../../public/assets/img/svg/octicon-link.svg'; +import octiconListOrdered from '../../public/assets/img/svg/octicon-list-ordered.svg'; +import octiconListUnordered from '../../public/assets/img/svg/octicon-list-unordered.svg'; +import octiconLock from '../../public/assets/img/svg/octicon-lock.svg'; +import octiconMeter from '../../public/assets/img/svg/octicon-meter.svg'; +import octiconMilestone from '../../public/assets/img/svg/octicon-milestone.svg'; +import octiconMirror from '../../public/assets/img/svg/octicon-mirror.svg'; +import octiconOrganization from '../../public/assets/img/svg/octicon-organization.svg'; +import octiconPlay from '../../public/assets/img/svg/octicon-play.svg'; +import octiconPlus from '../../public/assets/img/svg/octicon-plus.svg'; +import octiconProject from '../../public/assets/img/svg/octicon-project.svg'; +import octiconQuote from '../../public/assets/img/svg/octicon-quote.svg'; +import octiconRepo from '../../public/assets/img/svg/octicon-repo.svg'; +import octiconRepoForked from '../../public/assets/img/svg/octicon-repo-forked.svg'; +import octiconRepoTemplate from '../../public/assets/img/svg/octicon-repo-template.svg'; +import octiconRss from '../../public/assets/img/svg/octicon-rss.svg'; +import octiconScreenFull from '../../public/assets/img/svg/octicon-screen-full.svg'; +import octiconSearch from '../../public/assets/img/svg/octicon-search.svg'; +import octiconSidebarCollapse from '../../public/assets/img/svg/octicon-sidebar-collapse.svg'; +import octiconSidebarExpand from '../../public/assets/img/svg/octicon-sidebar-expand.svg'; +import octiconSkip from '../../public/assets/img/svg/octicon-skip.svg'; +import octiconStar from '../../public/assets/img/svg/octicon-star.svg'; +import octiconStrikethrough from '../../public/assets/img/svg/octicon-strikethrough.svg'; +import octiconSync from '../../public/assets/img/svg/octicon-sync.svg'; +import octiconTable from '../../public/assets/img/svg/octicon-table.svg'; +import octiconTag from '../../public/assets/img/svg/octicon-tag.svg'; +import octiconTrash from '../../public/assets/img/svg/octicon-trash.svg'; +import octiconTriangleDown from '../../public/assets/img/svg/octicon-triangle-down.svg'; +import octiconX from '../../public/assets/img/svg/octicon-x.svg'; +import octiconXCircleFill from '../../public/assets/img/svg/octicon-x-circle-fill.svg'; + +const svgs = { + 'gitea-double-chevron-left': giteaDoubleChevronLeft, + 'gitea-double-chevron-right': giteaDoubleChevronRight, + 'gitea-empty-checkbox': giteaEmptyCheckbox, + 'gitea-exclamation': giteaExclamation, + 'octicon-archive': octiconArchive, + 'octicon-arrow-switch': octiconArrowSwitch, + 'octicon-blocked': octiconBlocked, + 'octicon-bold': octiconBold, + 'octicon-check': octiconCheck, + 'octicon-check-circle-fill': octiconCheckCircleFill, + 'octicon-checkbox': octiconCheckbox, + 'octicon-chevron-down': octiconChevronDown, + 'octicon-chevron-left': octiconChevronLeft, + 'octicon-chevron-right': octiconChevronRight, + 'octicon-clock': octiconClock, + 'octicon-code': octiconCode, + 'octicon-columns': octiconColumns, + 'octicon-copy': octiconCopy, + 'octicon-diff-added': octiconDiffAdded, + 'octicon-diff-modified': octiconDiffModified, + 'octicon-diff-removed': octiconDiffRemoved, + 'octicon-diff-renamed': octiconDiffRenamed, + 'octicon-dot-fill': octiconDotFill, + 'octicon-download': octiconDownload, + 'octicon-eye': octiconEye, + 'octicon-file': octiconFile, + 'octicon-file-directory-fill': octiconFileDirectoryFill, + 'octicon-filter': octiconFilter, + 'octicon-gear': octiconGear, + 'octicon-git-branch': octiconGitBranch, + 'octicon-git-commit': octiconGitCommit, + 'octicon-git-merge': octiconGitMerge, + 'octicon-git-pull-request': octiconGitPullRequest, + 'octicon-git-pull-request-closed': octiconGitPullRequestClosed, + 'octicon-git-pull-request-draft': octiconGitPullRequestDraft, + 'octicon-heading': octiconHeading, + 'octicon-horizontal-rule': octiconHorizontalRule, + 'octicon-image': octiconImage, + 'octicon-issue-closed': octiconIssueClosed, + 'octicon-issue-opened': octiconIssueOpened, + 'octicon-italic': octiconItalic, + 'octicon-kebab-horizontal': octiconKebabHorizontal, + 'octicon-link': octiconLink, + 'octicon-list-ordered': octiconListOrdered, + 'octicon-list-unordered': octiconListUnordered, + 'octicon-lock': octiconLock, + 'octicon-meter': octiconMeter, + 'octicon-milestone': octiconMilestone, + 'octicon-mirror': octiconMirror, + 'octicon-organization': octiconOrganization, + 'octicon-play': octiconPlay, + 'octicon-plus': octiconPlus, + 'octicon-project': octiconProject, + 'octicon-quote': octiconQuote, + 'octicon-repo': octiconRepo, + 'octicon-repo-forked': octiconRepoForked, + 'octicon-repo-template': octiconRepoTemplate, + 'octicon-rss': octiconRss, + 'octicon-screen-full': octiconScreenFull, + 'octicon-search': octiconSearch, + 'octicon-sidebar-collapse': octiconSidebarCollapse, + 'octicon-sidebar-expand': octiconSidebarExpand, + 'octicon-skip': octiconSkip, + 'octicon-star': octiconStar, + 'octicon-strikethrough': octiconStrikethrough, + 'octicon-sync': octiconSync, + 'octicon-table': octiconTable, + 'octicon-tag': octiconTag, + 'octicon-trash': octiconTrash, + 'octicon-triangle-down': octiconTriangleDown, + 'octicon-x': octiconX, + 'octicon-x-circle-fill': octiconXCircleFill, +}; + +// TODO: use a more general approach to access SVG icons. +// At the moment, developers must check, pick and fill the names manually, +// most of the SVG icons in assets couldn't be used directly. + +// retrieve an HTML string for given SVG icon name, size and additional classes +export function svg(name, size = 16, className = '') { + if (!(name in svgs)) throw new Error(`Unknown SVG icon: ${name}`); + if (size === 16 && !className) return svgs[name]; + + const document = parseDom(svgs[name], 'image/svg+xml'); + const svgNode = document.firstChild; + if (size !== 16) { + svgNode.setAttribute('width', String(size)); + svgNode.setAttribute('height', String(size)); + } + if (className) svgNode.classList.add(...className.split(/\s+/).filter(Boolean)); + return serializeXml(svgNode); +} + +export function svgParseOuterInner(name) { + const svgStr = svgs[name]; + if (!svgStr) throw new Error(`Unknown SVG icon: ${name}`); + + // parse the SVG string to 2 parts + // * svgInnerHtml: the inner part of the SVG, will be used as the content of the <svg> VNode + // * svgOuter: the outer part of the SVG, including attributes + // the builtin SVG contents are clean, so it's safe to use `indexOf` to split the content: + // eg: <svg outer-attributes>${svgInnerHtml}</svg> + const p1 = svgStr.indexOf('>'), p2 = svgStr.lastIndexOf('<'); + if (p1 === -1 || p2 === -1) throw new Error(`Invalid SVG icon: ${name}`); + const svgInnerHtml = svgStr.slice(p1 + 1, p2); + const svgOuterHtml = svgStr.slice(0, p1 + 1) + svgStr.slice(p2); + const svgDoc = parseDom(svgOuterHtml, 'image/svg+xml'); + const svgOuter = svgDoc.firstChild; + return {svgOuter, svgInnerHtml}; +} + +export const SvgIcon = { + name: 'SvgIcon', + props: { + name: {type: String, required: true}, + size: {type: Number, default: 16}, + className: {type: String, default: ''}, + symbolId: {type: String}, + }, + render() { + let {svgOuter, svgInnerHtml} = svgParseOuterInner(this.name); + // https://vuejs.org/guide/extras/render-function.html#creating-vnodes + // the `^` is used for attr, set SVG attributes like 'width', `aria-hidden`, `viewBox`, etc + const attrs = {}; + for (const attr of svgOuter.attributes) { + if (attr.name === 'class') continue; + attrs[`^${attr.name}`] = attr.value; + } + attrs[`^width`] = this.size; + attrs[`^height`] = this.size; + + // make the <SvgIcon class="foo" class-name="bar"> classes work together + const classes = []; + for (const cls of svgOuter.classList) { + classes.push(cls); + } + // TODO: drop the `className/class-name` prop in the future, only use "class" prop + if (this.className) { + classes.push(...this.className.split(/\s+/).filter(Boolean)); + } + if (this.symbolId) { + classes.push('tw-hidden', 'svg-symbol-container'); + svgInnerHtml = `<symbol id="${this.symbolId}" viewBox="${attrs['^viewBox']}">${svgInnerHtml}</symbol>`; + } + // create VNode + return h('svg', { + ...attrs, + class: classes, + innerHTML: svgInnerHtml, + }); + }, +}; diff --git a/web_src/js/svg.test.js b/web_src/js/svg.test.js new file mode 100644 index 0000000..06b320c --- /dev/null +++ b/web_src/js/svg.test.js @@ -0,0 +1,27 @@ +import {svg, SvgIcon, svgParseOuterInner} from './svg.js'; +import {createApp, h} from 'vue'; + +test('svg', () => { + expect(svg('octicon-repo')).toMatch(/^<svg/); + expect(svg('octicon-repo', 16)).toContain('width="16"'); + expect(svg('octicon-repo', 32)).toContain('width="32"'); +}); + +test('svgParseOuterInner', () => { + const {svgOuter, svgInnerHtml} = svgParseOuterInner('octicon-repo'); + expect(svgOuter.nodeName).toMatch('svg'); + expect(svgOuter.classList.contains('octicon-repo')).toBeTruthy(); + expect(svgInnerHtml).toContain('<path'); +}); + +test('SvgIcon', () => { + const root = document.createElement('div'); + createApp({render: () => h(SvgIcon, {name: 'octicon-link', size: 24, class: 'base', className: 'extra'})}).mount(root); + const node = root.firstChild; + expect(node.nodeName).toEqual('svg'); + expect(node.getAttribute('width')).toEqual('24'); + expect(node.getAttribute('height')).toEqual('24'); + expect(node.classList.contains('octicon-link')).toBeTruthy(); + expect(node.classList.contains('base')).toBeTruthy(); + expect(node.classList.contains('extra')).toBeTruthy(); +}); diff --git a/web_src/js/utils.js b/web_src/js/utils.js new file mode 100644 index 0000000..ce0fb66 --- /dev/null +++ b/web_src/js/utils.js @@ -0,0 +1,144 @@ +import {encode, decode} from 'uint8-to-base64'; + +// transform /path/to/file.ext to file.ext +export function basename(path = '') { + const lastSlashIndex = path.lastIndexOf('/'); + return lastSlashIndex < 0 ? path : path.substring(lastSlashIndex + 1); +} + +// transform /path/to/file.ext to .ext +export function extname(path = '') { + const lastPointIndex = path.lastIndexOf('.'); + return lastPointIndex < 0 ? '' : path.substring(lastPointIndex); +} + +// test whether a variable is an object +export function isObject(obj) { + return Object.prototype.toString.call(obj) === '[object Object]'; +} + +// returns whether a dark theme is enabled +export function isDarkTheme() { + const style = window.getComputedStyle(document.documentElement); + return style.getPropertyValue('--is-dark-theme').trim().toLowerCase() === 'true'; +} + +// strip <tags> from a string +export function stripTags(text) { + return text.replace(/<[^>]*>?/g, ''); +} + +export function parseIssueHref(href) { + const path = (href || '').replace(/[#?].*$/, ''); + const [_, owner, repo, type, index] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || []; + return {owner, repo, type, index}; +} + +// parse a URL, either relative '/path' or absolute 'https://localhost/path' +export function parseUrl(str) { + return new URL(str, str.startsWith('http') ? undefined : window.location.origin); +} + +// return current locale chosen by user +export function getCurrentLocale() { + return document.documentElement.lang; +} + +// given a month (0-11), returns it in the documents language +export function translateMonth(month) { + return new Date(Date.UTC(2022, month, 12)).toLocaleString(getCurrentLocale(), {month: 'short', timeZone: 'UTC'}); +} + +// given a weekday (0-6, Sunday to Saturday), returns it in the documents language +export function translateDay(day) { + return new Date(Date.UTC(2022, 7, day)).toLocaleString(getCurrentLocale(), {weekday: 'short', timeZone: 'UTC'}); +} + +// convert a Blob to a DataURI +export function blobToDataURI(blob) { + return new Promise((resolve, reject) => { + try { + const reader = new FileReader(); + reader.addEventListener('load', (e) => { + resolve(e.target.result); + }); + reader.addEventListener('error', () => { + reject(new Error('FileReader failed')); + }); + reader.readAsDataURL(blob); + } catch (err) { + reject(err); + } + }); +} + +// convert image Blob to another mime-type format. +export function convertImage(blob, mime) { + return new Promise(async (resolve, reject) => { + try { + const img = new Image(); + const canvas = document.createElement('canvas'); + img.addEventListener('load', () => { + try { + canvas.width = img.naturalWidth; + canvas.height = img.naturalHeight; + const context = canvas.getContext('2d'); + context.drawImage(img, 0, 0); + canvas.toBlob((blob) => { + if (!(blob instanceof Blob)) return reject(new Error('imageBlobToPng failed')); + resolve(blob); + }, mime); + } catch (err) { + reject(err); + } + }); + img.addEventListener('error', () => { + reject(new Error('imageBlobToPng failed')); + }); + img.src = await blobToDataURI(blob); + } catch (err) { + reject(err); + } + }); +} + +export function toAbsoluteUrl(url) { + if (url.startsWith('http://') || url.startsWith('https://')) { + return url; + } + if (url.startsWith('//')) { + return `${window.location.protocol}${url}`; // it's also a somewhat absolute URL (with the current scheme) + } + if (url && !url.startsWith('/')) { + throw new Error('unsupported url, it should either start with / or http(s)://'); + } + return `${window.location.origin}${url}`; +} + +// Encode an ArrayBuffer into a URLEncoded base64 string. +export function encodeURLEncodedBase64(arrayBuffer) { + return encode(arrayBuffer) + .replace(/\+/g, '-') + .replace(/\//g, '_') + .replace(/=/g, ''); +} + +// Decode a URLEncoded base64 to an ArrayBuffer string. +export function decodeURLEncodedBase64(base64url) { + return decode(base64url + .replace(/_/g, '/') + .replace(/-/g, '+')); +} + +const domParser = new DOMParser(); +const xmlSerializer = new XMLSerializer(); + +export function parseDom(text, contentType) { + return domParser.parseFromString(text, contentType); +} + +export function serializeXml(node) { + return xmlSerializer.serializeToString(node); +} + +export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js new file mode 100644 index 0000000..c49bb2a --- /dev/null +++ b/web_src/js/utils.test.js @@ -0,0 +1,189 @@ +import { + basename, extname, isObject, stripTags, parseIssueHref, + parseUrl, translateMonth, translateDay, blobToDataURI, + toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64, + isDarkTheme, getCurrentLocale, parseDom, serializeXml, sleep, +} from './utils.js'; + +afterEach(() => { + // Reset head and body sections of the document + document.documentElement.innerHTML = '<head></head><body></body>'; + + // Remove 'lang' and 'style' attributes of html tag + document.documentElement.removeAttribute('lang'); + document.documentElement.removeAttribute('style'); +}); + +test('basename', () => { + expect(basename('/path/to/file.js')).toEqual('file.js'); + expect(basename('/path/to/file')).toEqual('file'); + expect(basename('file.js')).toEqual('file.js'); +}); + +test('extname', () => { + expect(extname('/path/to/file.js')).toEqual('.js'); + expect(extname('/path/')).toEqual(''); + expect(extname('/path')).toEqual(''); + expect(extname('file.js')).toEqual('.js'); +}); + +test('isObject', () => { + expect(isObject({})).toBeTruthy(); + expect(isObject([])).toBeFalsy(); +}); + +test('should return true if dark theme is enabled', () => { + // When --is-dark-theme var is defined with value true + document.documentElement.style.setProperty('--is-dark-theme', 'true'); + expect(isDarkTheme()).toBeTruthy(); + + // when --is-dark-theme var is defined with value TRUE + document.documentElement.style.setProperty('--is-dark-theme', 'TRUE'); + expect(isDarkTheme()).toBeTruthy(); +}); + +test('should return false if dark theme is disabled', () => { + // when --is-dark-theme var is defined with value false + document.documentElement.style.setProperty('--is-dark-theme', 'false'); + expect(isDarkTheme()).toBeFalsy(); + + // when --is-dark-theme var is defined with value FALSE + document.documentElement.style.setProperty('--is-dark-theme', 'FALSE'); + expect(isDarkTheme()).toBeFalsy(); +}); + +test('should return false if dark theme is not defined', () => { + // when --is-dark-theme var is not exist + expect(isDarkTheme()).toBeFalsy(); +}); + +test('stripTags', () => { + expect(stripTags('<a>test</a>')).toEqual('test'); +}); + +test('parseIssueHref', () => { + expect(parseIssueHref('/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('/owner/repo/pulls/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'}); + expect(parseIssueHref('/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('/sub/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('/sub/sub2/owner/repo/pulls/1')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'}); + expect(parseIssueHref('/sub/sub2/owner/repo/issues/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('https://example.com/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('https://example.com/owner/repo/pulls/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'}); + expect(parseIssueHref('https://example.com/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('https://example.com/sub/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/pulls/1')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'}); + expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'}); + expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined}); +}); + +test('parseUrl', () => { + expect(parseUrl('').pathname).toEqual('/'); + expect(parseUrl('/path').pathname).toEqual('/path'); + expect(parseUrl('/path?search').pathname).toEqual('/path'); + expect(parseUrl('/path?search').search).toEqual('?search'); + expect(parseUrl('/path?search#hash').hash).toEqual('#hash'); + expect(parseUrl('https://localhost/path').pathname).toEqual('/path'); + expect(parseUrl('https://localhost/path?search').pathname).toEqual('/path'); + expect(parseUrl('https://localhost/path?search').search).toEqual('?search'); + expect(parseUrl('https://localhost/path?search#hash').hash).toEqual('#hash'); +}); + +test('getCurrentLocale', () => { + // HTML document without explicit lang + expect(getCurrentLocale()).toEqual(''); + + // HTML document with explicit lang + document.documentElement.setAttribute('lang', 'en-US'); + expect(getCurrentLocale()).toEqual('en-US'); +}); + +test('translateMonth', () => { + const originalLang = document.documentElement.lang; + document.documentElement.lang = 'en-US'; + expect(translateMonth(0)).toEqual('Jan'); + expect(translateMonth(4)).toEqual('May'); + document.documentElement.lang = 'es-ES'; + expect(translateMonth(5)).toEqual('jun'); + expect(translateMonth(6)).toEqual('jul'); + document.documentElement.lang = originalLang; +}); + +test('translateDay', () => { + const originalLang = document.documentElement.lang; + document.documentElement.lang = 'fr-FR'; + expect(translateDay(1)).toEqual('lun.'); + expect(translateDay(5)).toEqual('ven.'); + document.documentElement.lang = 'pl-PL'; + expect(translateDay(1)).toEqual('pon.'); + expect(translateDay(5)).toEqual('pt.'); + document.documentElement.lang = originalLang; +}); + +test('blobToDataURI', async () => { + const blob = new Blob([JSON.stringify({test: true})], {type: 'application/json'}); + expect(await blobToDataURI(blob)).toEqual('data:application/json;base64,eyJ0ZXN0Ijp0cnVlfQ=='); +}); + +test('toAbsoluteUrl', () => { + expect(toAbsoluteUrl('//host/dir')).toEqual('http://host/dir'); + expect(toAbsoluteUrl('https://host/dir')).toEqual('https://host/dir'); + expect(toAbsoluteUrl('http://host/dir')).toEqual('http://host/dir'); + expect(toAbsoluteUrl('')).toEqual('http://localhost:3000'); + expect(toAbsoluteUrl('/user/repo')).toEqual('http://localhost:3000/user/repo'); + expect(() => toAbsoluteUrl('path')).toThrowError('unsupported'); +}); + +test('encodeURLEncodedBase64, decodeURLEncodedBase64', () => { + // TextEncoder is Node.js API while Uint8Array is jsdom API and their outputs are not + // structurally comparable, so we convert to array to compare. The conversion can be + // removed once https://github.com/jsdom/jsdom/issues/2524 is resolved. + const encoder = new TextEncoder(); + const uint8array = encoder.encode.bind(encoder); + + expect(encodeURLEncodedBase64(uint8array('AA?'))).toEqual('QUE_'); // standard base64: "QUE/" + expect(encodeURLEncodedBase64(uint8array('AA~'))).toEqual('QUF-'); // standard base64: "QUF+" + + expect(Array.from(decodeURLEncodedBase64('QUE/'))).toEqual(Array.from(uint8array('AA?'))); + expect(Array.from(decodeURLEncodedBase64('QUF+'))).toEqual(Array.from(uint8array('AA~'))); + expect(Array.from(decodeURLEncodedBase64('QUE_'))).toEqual(Array.from(uint8array('AA?'))); + expect(Array.from(decodeURLEncodedBase64('QUF-'))).toEqual(Array.from(uint8array('AA~'))); + + expect(encodeURLEncodedBase64(uint8array('a'))).toEqual('YQ'); // standard base64: "YQ==" + expect(Array.from(decodeURLEncodedBase64('YQ'))).toEqual(Array.from(uint8array('a'))); + expect(Array.from(decodeURLEncodedBase64('YQ=='))).toEqual(Array.from(uint8array('a'))); +}); + +test('parseDom', () => { + const paragraphStr = 'This is sample paragraph'; + const paragraphTagStr = `<p>${paragraphStr}</p>`; + const content = parseDom(paragraphTagStr, 'text/html'); + expect(content.body.innerHTML).toEqual(paragraphTagStr); + + // Content should have only one paragraph + const paragraphs = content.getElementsByTagName('p'); + expect(paragraphs.length).toEqual(1); + expect(paragraphs[0].textContent).toEqual(paragraphStr); +}); + +test('serializeXml', () => { + const textStr = 'This is a sample text'; + const tagName = 'item'; + const node = document.createElement(tagName); + node.textContent = textStr; + expect(serializeXml(node)).toEqual(`<${tagName}>${textStr}</${tagName}>`); +}); + +test('sleep', async () => { + await testSleep(2000); +}); + +async function testSleep(ms) { + const startTime = Date.now(); // Record the start time + await sleep(ms); + const endTime = Date.now(); // Record the end time + const actualSleepTime = endTime - startTime; + expect(actualSleepTime >= ms).toBeTruthy(); +} diff --git a/web_src/js/utils/color.js b/web_src/js/utils/color.js new file mode 100644 index 0000000..198f97c --- /dev/null +++ b/web_src/js/utils/color.js @@ -0,0 +1,33 @@ +import tinycolor from 'tinycolor2'; + +// Returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance +// Keep this in sync with modules/util/color.go +function getRelativeLuminance(color) { + const {r, g, b} = tinycolor(color).toRgb(); + return (0.2126729 * r + 0.7151522 * g + 0.072175 * b) / 255; +} + +function useLightText(backgroundColor) { + return getRelativeLuminance(backgroundColor) < 0.453; +} + +// Given a background color, returns a black or white foreground color that the highest +// contrast ratio. In the future, the APCA contrast function, or CSS `contrast-color` will be better. +// https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42 +export function contrastColor(backgroundColor) { + return useLightText(backgroundColor) ? '#fff' : '#000'; +} + +function resolveColors(obj) { + const styles = window.getComputedStyle(document.documentElement); + const getColor = (name) => styles.getPropertyValue(name).trim(); + return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, getColor(value)])); +} + +export const chartJsColors = resolveColors({ + text: '--color-text', + border: '--color-secondary-alpha-60', + commits: '--color-primary-alpha-60', + additions: '--color-green', + deletions: '--color-red', +}); diff --git a/web_src/js/utils/color.test.js b/web_src/js/utils/color.test.js new file mode 100644 index 0000000..fee9afc --- /dev/null +++ b/web_src/js/utils/color.test.js @@ -0,0 +1,22 @@ +import {contrastColor} from './color.js'; + +test('contrastColor', () => { + expect(contrastColor('#d73a4a')).toBe('#fff'); + expect(contrastColor('#0075ca')).toBe('#fff'); + expect(contrastColor('#cfd3d7')).toBe('#000'); + expect(contrastColor('#a2eeef')).toBe('#000'); + expect(contrastColor('#7057ff')).toBe('#fff'); + expect(contrastColor('#008672')).toBe('#fff'); + expect(contrastColor('#e4e669')).toBe('#000'); + expect(contrastColor('#d876e3')).toBe('#000'); + expect(contrastColor('#ffffff')).toBe('#000'); + expect(contrastColor('#2b8684')).toBe('#fff'); + expect(contrastColor('#2b8786')).toBe('#fff'); + expect(contrastColor('#2c8786')).toBe('#000'); + expect(contrastColor('#3bb6b3')).toBe('#000'); + expect(contrastColor('#7c7268')).toBe('#fff'); + expect(contrastColor('#7e716c')).toBe('#fff'); + expect(contrastColor('#81706d')).toBe('#fff'); + expect(contrastColor('#807070')).toBe('#fff'); + expect(contrastColor('#84b6eb')).toBe('#000'); +}); diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js new file mode 100644 index 0000000..44adc79 --- /dev/null +++ b/web_src/js/utils/dom.js @@ -0,0 +1,305 @@ +import {debounce} from 'throttle-debounce'; + +function elementsCall(el, func, ...args) { + if (typeof el === 'string' || el instanceof String) { + el = document.querySelectorAll(el); + } + if (el instanceof Node) { + func(el, ...args); + } else if (el.length !== undefined) { + // this works for: NodeList, HTMLCollection, Array, jQuery + for (const e of el) { + func(e, ...args); + } + } else { + throw new Error('invalid argument to be shown/hidden'); + } +} + +/** + * @param el string (selector), Node, NodeList, HTMLCollection, Array or jQuery + * @param force force=true to show or force=false to hide, undefined to toggle + */ +function toggleShown(el, force) { + if (force === true) { + el.classList.remove('tw-hidden'); + } else if (force === false) { + el.classList.add('tw-hidden'); + } else if (force === undefined) { + el.classList.toggle('tw-hidden'); + } else { + throw new Error('invalid force argument'); + } +} + +export function showElem(el) { + elementsCall(el, toggleShown, true); +} + +export function hideElem(el) { + elementsCall(el, toggleShown, false); +} + +export function toggleElem(el, force) { + elementsCall(el, toggleShown, force); +} + +export function isElemHidden(el) { + const res = []; + elementsCall(el, (e) => res.push(e.classList.contains('tw-hidden'))); + if (res.length > 1) throw new Error(`isElemHidden doesn't work for multiple elements`); + return res[0]; +} + +function applyElemsCallback(elems, fn) { + if (fn) { + for (const el of elems) { + fn(el); + } + } + return elems; +} + +export function queryElemSiblings(el, selector = '*', fn) { + return applyElemsCallback(Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector)), fn); +} + +// it works like jQuery.children: only the direct children are selected +export function queryElemChildren(parent, selector = '*', fn) { + return applyElemsCallback(parent.querySelectorAll(`:scope > ${selector}`), fn); +} + +export function queryElems(selector, fn) { + return applyElemsCallback(document.querySelectorAll(selector), fn); +} + +export function onDomReady(cb) { + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', cb); + } else { + cb(); + } +} + +// checks whether an element is owned by the current document, and whether it is a document fragment or element node +// if it is, it means it is a "normal" element managed by us, which can be modified safely. +export function isDocumentFragmentOrElementNode(el) { + try { + return el.ownerDocument === document && el.nodeType === Node.ELEMENT_NODE || el.nodeType === Node.DOCUMENT_FRAGMENT_NODE; + } catch { + // in case the el is not in the same origin, then the access to nodeType would fail + return false; + } +} + +// autosize a textarea to fit content. Based on +// https://github.com/github/textarea-autosize +// --------------------------------------------------------------------- +// Copyright (c) 2018 GitHub, Inc. +// +// Permission is hereby granted, free of charge, to any person obtaining +// a copy of this software and associated documentation files (the +// "Software"), to deal in the Software without restriction, including +// without limitation the rights to use, copy, modify, merge, publish, +// distribute, sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do so, subject to +// the following conditions: +// +// The above copyright notice and this permission notice shall be +// included in all copies or substantial portions of the Software. +// --------------------------------------------------------------------- +export function autosize(textarea, {viewportMarginBottom = 0} = {}) { + let isUserResized = false; + // lastStyleHeight and initialStyleHeight are CSS values like '100px' + let lastMouseX, lastMouseY, lastStyleHeight, initialStyleHeight; + + function onUserResize(event) { + if (isUserResized) return; + if (lastMouseX !== event.clientX || lastMouseY !== event.clientY) { + const newStyleHeight = textarea.style.height; + if (lastStyleHeight && lastStyleHeight !== newStyleHeight) { + isUserResized = true; + } + lastStyleHeight = newStyleHeight; + } + + lastMouseX = event.clientX; + lastMouseY = event.clientY; + } + + function overflowOffset() { + let offsetTop = 0; + let el = textarea; + + while (el !== document.body && el !== null) { + offsetTop += el.offsetTop || 0; + el = el.offsetParent; + } + + const top = offsetTop - document.defaultView.scrollY; + const bottom = document.documentElement.clientHeight - (top + textarea.offsetHeight); + return {top, bottom}; + } + + function resizeToFit() { + if (isUserResized) return; + if (textarea.offsetWidth <= 0 && textarea.offsetHeight <= 0) return; + + try { + const {top, bottom} = overflowOffset(); + const isOutOfViewport = top < 0 || bottom < 0; + + const computedStyle = getComputedStyle(textarea); + const topBorderWidth = parseFloat(computedStyle.borderTopWidth); + const bottomBorderWidth = parseFloat(computedStyle.borderBottomWidth); + const isBorderBox = computedStyle.boxSizing === 'border-box'; + const borderAddOn = isBorderBox ? topBorderWidth + bottomBorderWidth : 0; + + const adjustedViewportMarginBottom = bottom < viewportMarginBottom ? bottom : viewportMarginBottom; + const curHeight = parseFloat(computedStyle.height); + const maxHeight = curHeight + bottom - adjustedViewportMarginBottom; + + textarea.style.height = 'auto'; + let newHeight = textarea.scrollHeight + borderAddOn; + + if (isOutOfViewport) { + // it is already out of the viewport: + // * if the textarea is expanding: do not resize it + if (newHeight > curHeight) { + newHeight = curHeight; + } + // * if the textarea is shrinking, shrink line by line (just use the + // scrollHeight). do not apply max-height limit, otherwise the page + // flickers and the textarea jumps + } else { + // * if it is in the viewport, apply the max-height limit + newHeight = Math.min(maxHeight, newHeight); + } + + textarea.style.height = `${newHeight}px`; + lastStyleHeight = textarea.style.height; + } finally { + // ensure that the textarea is fully scrolled to the end, when the cursor + // is at the end during an input event + if (textarea.selectionStart === textarea.selectionEnd && + textarea.selectionStart === textarea.value.length) { + textarea.scrollTop = textarea.scrollHeight; + } + } + } + + function onFormReset() { + isUserResized = false; + if (initialStyleHeight !== undefined) { + textarea.style.height = initialStyleHeight; + } else { + textarea.style.removeProperty('height'); + } + } + + textarea.addEventListener('mousemove', onUserResize); + textarea.addEventListener('input', resizeToFit); + textarea.form?.addEventListener('reset', onFormReset); + initialStyleHeight = textarea.style.height ?? undefined; + if (textarea.value) resizeToFit(); + + return { + resizeToFit, + destroy() { + textarea.removeEventListener('mousemove', onUserResize); + textarea.removeEventListener('input', resizeToFit); + textarea.form?.removeEventListener('reset', onFormReset); + }, + }; +} + +export function onInputDebounce(fn) { + return debounce(300, fn); +} + +// Set the `src` attribute on an element and returns a promise that resolves once the element +// has loaded or errored. Suitable for all elements mention in: +// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event +export function loadElem(el, src) { + return new Promise((resolve) => { + el.addEventListener('load', () => resolve(true), {once: true}); + el.addEventListener('error', () => resolve(false), {once: true}); + el.src = src; + }); +} + +// some browsers like PaleMoon don't have "SubmitEvent" support, so polyfill it by a tricky method: use the last clicked button as submitter +// it can't use other transparent polyfill patches because PaleMoon also doesn't support "addEventListener(capture)" +const needSubmitEventPolyfill = typeof SubmitEvent === 'undefined'; + +export function submitEventSubmitter(e) { + return needSubmitEventPolyfill ? (e.target._submitter || null) : e.submitter; +} + +function submitEventPolyfillListener(e) { + const form = e.target.closest('form'); + if (!form) return; + form._submitter = e.target.closest('button:not([type]), button[type="submit"], input[type="submit"]'); +} + +export function initSubmitEventPolyfill() { + if (!needSubmitEventPolyfill) return; + console.warn(`This browser doesn't have "SubmitEvent" support, use a tricky method to polyfill`); + document.body.addEventListener('click', submitEventPolyfillListener); + document.body.addEventListener('focus', submitEventPolyfillListener); +} + +/** + * Check if an element is visible, equivalent to jQuery's `:visible` pseudo. + * Note: This function doesn't account for all possible visibility scenarios. + * @param {HTMLElement} element The element to check. + * @returns {boolean} True if the element is visible. + */ +export function isElemVisible(element) { + if (!element) return false; + + return Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length); +} + +// extract text and images from "paste" event +export function getPastedContent(e) { + const images = []; + for (const item of e.clipboardData?.items ?? []) { + if (item.type?.startsWith('image/')) { + images.push(item.getAsFile()); + } + } + const text = e.clipboardData?.getData?.('text') ?? ''; + return {text, images}; +} + +// replace selected text in a textarea while preserving editor history, e.g. CTRL-Z works after this +export function replaceTextareaSelection(textarea, text) { + const before = textarea.value.slice(0, textarea.selectionStart ?? undefined); + const after = textarea.value.slice(textarea.selectionEnd ?? undefined); + let success = true; + + textarea.contentEditable = 'true'; + try { + success = document.execCommand('insertText', false, text); + } catch { + success = false; + } + textarea.contentEditable = 'false'; + + if (success && !textarea.value.slice(0, textarea.selectionStart ?? undefined).endsWith(text)) { + success = false; + } + + if (!success) { + textarea.value = `${before}${text}${after}`; + textarea.dispatchEvent(new CustomEvent('change', {bubbles: true, cancelable: true})); + } +} + +// Warning: Do not enter any unsanitized variables here +export function createElementFromHTML(htmlString) { + const div = document.createElement('div'); + div.innerHTML = htmlString.trim(); + return div.firstChild; +} diff --git a/web_src/js/utils/dom.test.js b/web_src/js/utils/dom.test.js new file mode 100644 index 0000000..fd7d97c --- /dev/null +++ b/web_src/js/utils/dom.test.js @@ -0,0 +1,5 @@ +import {createElementFromHTML} from './dom.js'; + +test('createElementFromHTML', () => { + expect(createElementFromHTML('<a>foo<span>bar</span></a>').outerHTML).toEqual('<a>foo<span>bar</span></a>'); +}); diff --git a/web_src/js/utils/image.js b/web_src/js/utils/image.js new file mode 100644 index 0000000..ed5d98e --- /dev/null +++ b/web_src/js/utils/image.js @@ -0,0 +1,47 @@ +export async function pngChunks(blob) { + const uint8arr = new Uint8Array(await blob.arrayBuffer()); + const chunks = []; + if (uint8arr.length < 12) return chunks; + const view = new DataView(uint8arr.buffer); + if (view.getBigUint64(0) !== 9894494448401390090n) return chunks; + + const decoder = new TextDecoder(); + let index = 8; + while (index < uint8arr.length) { + const len = view.getUint32(index); + chunks.push({ + name: decoder.decode(uint8arr.slice(index + 4, index + 8)), + data: uint8arr.slice(index + 8, index + 8 + len), + }); + index += len + 12; + } + + return chunks; +} + +// decode a image and try to obtain width and dppx. If will never throw but instead +// return default values. +export async function imageInfo(blob) { + let width = 0; // 0 means no width could be determined + let dppx = 1; // 1 dot per pixel for non-HiDPI screens + + if (blob.type === 'image/png') { // only png is supported currently + try { + for (const {name, data} of await pngChunks(blob)) { + const view = new DataView(data.buffer); + if (name === 'IHDR' && data?.length) { + // extract width from mandatory IHDR chunk + width = view.getUint32(0); + } else if (name === 'pHYs' && data?.length) { + // extract dppx from optional pHYs chunk, assuming pixels are square + const unit = view.getUint8(8); + if (unit === 1) { + dppx = Math.round(view.getUint32(0) / 39.3701) / 72; // meter to inch to dppx + } + } + } + } catch {} + } + + return {width, dppx}; +} diff --git a/web_src/js/utils/image.test.js b/web_src/js/utils/image.test.js new file mode 100644 index 0000000..ba47582 --- /dev/null +++ b/web_src/js/utils/image.test.js @@ -0,0 +1,29 @@ +import {pngChunks, imageInfo} from './image.js'; + +const pngNoPhys = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAADUlEQVQIHQECAP3/AAAAAgABzePRKwAAAABJRU5ErkJggg=='; +const pngPhys = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAEElEQVQI12OQNZcAIgYIBQAL8gGxdzzM0A=='; +const pngEmpty = 'data:image/png;base64,'; + +async function dataUriToBlob(datauri) { + return await (await globalThis.fetch(datauri)).blob(); +} + +test('pngChunks', async () => { + expect(await pngChunks(await dataUriToBlob(pngNoPhys))).toEqual([ + {name: 'IHDR', data: new Uint8Array([0, 0, 0, 1, 0, 0, 0, 1, 8, 0, 0, 0, 0])}, + {name: 'IDAT', data: new Uint8Array([8, 29, 1, 2, 0, 253, 255, 0, 0, 0, 2, 0, 1])}, + {name: 'IEND', data: new Uint8Array([])}, + ]); + expect(await pngChunks(await dataUriToBlob(pngPhys))).toEqual([ + {name: 'IHDR', data: new Uint8Array([0, 0, 0, 2, 0, 0, 0, 2, 8, 2, 0, 0, 0])}, + {name: 'pHYs', data: new Uint8Array([0, 0, 22, 37, 0, 0, 22, 37, 1])}, + {name: 'IDAT', data: new Uint8Array([8, 215, 99, 144, 53, 151, 0, 34, 6, 8, 5, 0, 11, 242, 1, 177])}, + ]); + expect(await pngChunks(await dataUriToBlob(pngEmpty))).toEqual([]); +}); + +test('imageInfo', async () => { + expect(await imageInfo(await dataUriToBlob(pngNoPhys))).toEqual({width: 1, dppx: 1}); + expect(await imageInfo(await dataUriToBlob(pngPhys))).toEqual({width: 2, dppx: 2}); + expect(await imageInfo(await dataUriToBlob(pngEmpty))).toEqual({width: 0, dppx: 1}); +}); diff --git a/web_src/js/utils/match.js b/web_src/js/utils/match.js new file mode 100644 index 0000000..17fdfed --- /dev/null +++ b/web_src/js/utils/match.js @@ -0,0 +1,43 @@ +import emojis from '../../../assets/emoji.json'; + +const maxMatches = 6; + +function sortAndReduce(map) { + const sortedMap = new Map(Array.from(map.entries()).sort((a, b) => a[1] - b[1])); + return Array.from(sortedMap.keys()).slice(0, maxMatches); +} + +export function matchEmoji(queryText) { + const query = queryText.toLowerCase().replaceAll('_', ' '); + if (!query) return emojis.slice(0, maxMatches).map((e) => e.aliases[0]); + + // results is a map of weights, lower is better + const results = new Map(); + for (const {aliases} of emojis) { + const mainAlias = aliases[0]; + for (const [aliasIndex, alias] of aliases.entries()) { + const index = alias.replaceAll('_', ' ').indexOf(query); + if (index === -1) continue; + const existing = results.get(mainAlias); + const rankedIndex = index + aliasIndex; + results.set(mainAlias, existing ? existing - rankedIndex : rankedIndex); + } + } + + return sortAndReduce(results); +} + +export function matchMention(queryText) { + const query = queryText.toLowerCase(); + + // results is a map of weights, lower is better + const results = new Map(); + for (const obj of window.config.mentionValues ?? []) { + const index = obj.key.toLowerCase().indexOf(query); + if (index === -1) continue; + const existing = results.get(obj); + results.set(obj, existing ? existing - index : index); + } + + return sortAndReduce(results); +} diff --git a/web_src/js/utils/match.test.js b/web_src/js/utils/match.test.js new file mode 100644 index 0000000..1e30b45 --- /dev/null +++ b/web_src/js/utils/match.test.js @@ -0,0 +1,50 @@ +import {matchEmoji, matchMention} from './match.js'; + +test('matchEmoji', () => { + expect(matchEmoji('')).toEqual([ + '+1', + '-1', + '100', + '1234', + '1st_place_medal', + '2nd_place_medal', + ]); + + expect(matchEmoji('hea')).toEqual([ + 'headphones', + 'headstone', + 'health_worker', + 'hear_no_evil', + 'heard_mcdonald_islands', + 'heart', + ]); + + expect(matchEmoji('hear')).toEqual([ + 'hear_no_evil', + 'heard_mcdonald_islands', + 'heart', + 'heart_decoration', + 'heart_eyes', + 'heart_eyes_cat', + ]); + + expect(matchEmoji('poo')).toEqual([ + 'poodle', + 'hankey', + 'spoon', + 'bowl_with_spoon', + ]); + + expect(matchEmoji('1st_')).toEqual([ + '1st_place_medal', + ]); + + expect(matchEmoji('jellyfis')).toEqual([ + 'jellyfish', + ]); +}); + +test('matchMention', () => { + expect(matchMention('')).toEqual(window.config.mentionValues.slice(0, 6)); + expect(matchMention('user4')).toEqual([window.config.mentionValues[3]]); +}); diff --git a/web_src/js/utils/time.js b/web_src/js/utils/time.js new file mode 100644 index 0000000..7c7eabd --- /dev/null +++ b/web_src/js/utils/time.js @@ -0,0 +1,72 @@ +import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc.js'; +import {getCurrentLocale} from '../utils.js'; + +dayjs.extend(utc); + +/** + * Returns an array of millisecond-timestamps of start-of-week days (Sundays) + * + * @param startConfig The start date. Can take any type that `Date` accepts. + * @param endConfig The end date. Can take any type that `Date` accepts. + */ +export function startDaysBetween(startDate, endDate) { + const start = dayjs.utc(startDate); + const end = dayjs.utc(endDate); + + let current = start; + + // Ensure the start date is a Sunday + while (current.day() !== 0) { + current = current.add(1, 'day'); + } + + const startDays = []; + while (current.isBefore(end)) { + startDays.push(current.valueOf()); + current = current.add(1, 'week'); + } + + return startDays; +} + +export function firstStartDateAfterDate(inputDate) { + if (!(inputDate instanceof Date)) { + throw new Error('Invalid date'); + } + const dayOfWeek = inputDate.getUTCDay(); + const daysUntilSunday = 7 - dayOfWeek; + const resultDate = new Date(inputDate.getTime()); + resultDate.setUTCDate(resultDate.getUTCDate() + daysUntilSunday); + return resultDate.valueOf(); +} + +export function fillEmptyStartDaysWithZeroes(startDays, data) { + const result = {}; + + for (const startDay of startDays) { + result[startDay] = data[startDay] || {'week': startDay, 'additions': 0, 'deletions': 0, 'commits': 0}; + } + + return Object.values(result); +} + +let dateFormat; + +// format a Date object to document's locale, but with 24h format from user's current locale because this +// option is a personal preference of the user, not something that the document's locale should dictate. +export function formatDatetime(date) { + if (!dateFormat) { + // TODO: replace `hour12` with `Intl.Locale.prototype.getHourCycles` once there is broad browser support + dateFormat = new Intl.DateTimeFormat(getCurrentLocale(), { + day: 'numeric', + month: 'short', + year: 'numeric', + hour: 'numeric', + hour12: !Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())), + minute: '2-digit', + timeZoneName: 'short', + }); + } + return dateFormat.format(date); +} diff --git a/web_src/js/utils/time.test.js b/web_src/js/utils/time.test.js new file mode 100644 index 0000000..dbe5d7d --- /dev/null +++ b/web_src/js/utils/time.test.js @@ -0,0 +1,40 @@ +import {firstStartDateAfterDate, startDaysBetween, fillEmptyStartDaysWithZeroes} from './time.js'; + +test('startDaysBetween', () => { + expect(startDaysBetween(new Date('2024-02-15'), new Date('2024-04-18'))).toEqual([ + 1708214400000, + 1708819200000, + 1709424000000, + 1710028800000, + 1710633600000, + 1711238400000, + 1711843200000, + 1712448000000, + 1713052800000, + ]); +}); + +test('firstStartDateAfterDate', () => { + const expectedDate = new Date('2024-02-18').getTime(); + expect(firstStartDateAfterDate(new Date('2024-02-15'))).toEqual(expectedDate); + + expect(() => firstStartDateAfterDate('2024-02-15')).toThrowError('Invalid date'); +}); +test('fillEmptyStartDaysWithZeroes with data', () => { + expect(fillEmptyStartDaysWithZeroes([1708214400000, 1708819200000, 1708819300000], { + 1708214400000: {'week': 1708214400000, 'additions': 1, 'deletions': 2, 'commits': 3}, + 1708819200000: {'week': 1708819200000, 'additions': 4, 'deletions': 5, 'commits': 6}, + })).toEqual([ + {'week': 1708214400000, 'additions': 1, 'deletions': 2, 'commits': 3}, + {'week': 1708819200000, 'additions': 4, 'deletions': 5, 'commits': 6}, + { + 'additions': 0, + 'commits': 0, + 'deletions': 0, + 'week': 1708819300000, + }]); +}); + +test('fillEmptyStartDaysWithZeroes with empty array', () => { + expect(fillEmptyStartDaysWithZeroes([], {})).toEqual([]); +}); diff --git a/web_src/js/utils/url.js b/web_src/js/utils/url.js new file mode 100644 index 0000000..470ece3 --- /dev/null +++ b/web_src/js/utils/url.js @@ -0,0 +1,15 @@ +export function pathEscapeSegments(s) { + return s.split('/').map(encodeURIComponent).join('/'); +} + +function stripSlash(url) { + return url.endsWith('/') ? url.slice(0, -1) : url; +} + +export function isUrl(url) { + try { + return stripSlash((new URL(url).href)).trim() === stripSlash(url).trim(); + } catch { + return false; + } +} diff --git a/web_src/js/utils/url.test.js b/web_src/js/utils/url.test.js new file mode 100644 index 0000000..08c6373 --- /dev/null +++ b/web_src/js/utils/url.test.js @@ -0,0 +1,13 @@ +import {pathEscapeSegments, isUrl} from './url.js'; + +test('pathEscapeSegments', () => { + expect(pathEscapeSegments('a/b/c')).toEqual('a/b/c'); + expect(pathEscapeSegments('a/b/ c')).toEqual('a/b/%20c'); +}); + +test('isUrl', () => { + expect(isUrl('https://example.com')).toEqual(true); + expect(isUrl('https://example.com/')).toEqual(true); + expect(isUrl('https://example.com/index.html')).toEqual(true); + expect(isUrl('/index.html')).toEqual(false); +}); diff --git a/web_src/js/vendor/jquery.are-you-sure.js b/web_src/js/vendor/jquery.are-you-sure.js new file mode 100644 index 0000000..e06da39 --- /dev/null +++ b/web_src/js/vendor/jquery.are-you-sure.js @@ -0,0 +1,195 @@ +// Fork of the upstream module. The only changes are the addition of `const` on +// lines 93 and 161 to make it strict mode compatible. + +/*! + * jQuery Plugin: Are-You-Sure (Dirty Form Detection) + * https://github.com/codedance/jquery.AreYouSure/ + * + * Copyright (c) 2012-2014, Chris Dance and PaperCut Software http://www.papercut.com/ + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * Author: chris.dance@papercut.com + * Version: 1.9.0 + * Date: 13th August 2014 + */ +(function($) { + + $.fn.areYouSure = function(options) { + + var settings = $.extend( + { + 'message' : 'You have unsaved changes!', + 'dirtyClass' : 'dirty', + 'change' : null, + 'silent' : false, + 'addRemoveFieldsMarksDirty' : false, + 'fieldEvents' : 'change keyup propertychange input', + 'fieldSelector': ":input:not(input[type=submit]):not(input[type=button])" + }, options); + + var getValue = function($field) { + if ($field.hasClass('ays-ignore') + || $field.hasClass('aysIgnore') + || $field.attr('data-ays-ignore') + || $field.attr('name') === undefined) { + return null; + } + + if ($field.is(':disabled')) { + return 'ays-disabled'; + } + + var val; + var type = $field.attr('type'); + if ($field.is('select')) { + type = 'select'; + } + + switch (type) { + case 'checkbox': + case 'radio': + val = $field.is(':checked'); + break; + case 'select': + val = ''; + $field.find('option').each(function(o) { + var $option = $(this); + if ($option.is(':selected')) { + val += $option.val(); + } + }); + break; + default: + val = $field.val(); + } + + return val; + }; + + var storeOrigValue = function($field) { + $field.data('ays-orig', getValue($field)); + }; + + var checkForm = function(evt) { + + var isFieldDirty = function($field) { + var origValue = $field.data('ays-orig'); + if (undefined === origValue) { + return false; + } + return (getValue($field) != origValue); + }; + + var $form = ($(this).is('form')) + ? $(this) + : $(this).parents('form'); + + // Test on the target first as it's the most likely to be dirty + if (isFieldDirty($(evt.target))) { + setDirtyStatus($form, true); + return; + } + + const $fields = $form.find(settings.fieldSelector); + + if (settings.addRemoveFieldsMarksDirty) { + // Check if field count has changed + var origCount = $form.data("ays-orig-field-count"); + if (origCount != $fields.length) { + setDirtyStatus($form, true); + return; + } + } + + // Brute force - check each field + var isDirty = false; + $fields.each(function() { + var $field = $(this); + if (isFieldDirty($field)) { + isDirty = true; + return false; // break + } + }); + + setDirtyStatus($form, isDirty); + }; + + var initForm = function($form) { + var fields = $form.find(settings.fieldSelector); + $(fields).each(function() { storeOrigValue($(this)); }); + $(fields).unbind(settings.fieldEvents, checkForm); + $(fields).bind(settings.fieldEvents, checkForm); + $form.data("ays-orig-field-count", $(fields).length); + setDirtyStatus($form, false); + }; + + var setDirtyStatus = function($form, isDirty) { + var changed = isDirty != $form.hasClass(settings.dirtyClass); + $form.toggleClass(settings.dirtyClass, isDirty); + + // Fire change event if required + if (changed) { + if (settings.change) settings.change.call($form, $form); + + if (isDirty) $form.trigger('dirty.areYouSure', [$form]); + if (!isDirty) $form.trigger('clean.areYouSure', [$form]); + $form.trigger('change.areYouSure', [$form]); + } + }; + + var rescan = function() { + var $form = $(this); + var fields = $form.find(settings.fieldSelector); + $(fields).each(function() { + var $field = $(this); + if (!$field.data('ays-orig')) { + storeOrigValue($field); + $field.bind(settings.fieldEvents, checkForm); + } + }); + // Check for changes while we're here + $form.trigger('checkform.areYouSure'); + }; + + var reinitialize = function() { + initForm($(this)); + } + + if (!settings.silent && !window.aysUnloadSet) { + window.aysUnloadSet = true; + $(window).bind('beforeunload', function() { + const $dirtyForms = $("form").filter('.' + settings.dirtyClass); + if ($dirtyForms.length == 0) { + return; + } + // Prevent multiple prompts - seen on Chrome and IE + if (navigator.userAgent.toLowerCase().match(/msie|chrome/)) { + if (window.aysHasPrompted) { + return; + } + window.aysHasPrompted = true; + window.setTimeout(function() {window.aysHasPrompted = false;}, 900); + } + return settings.message; + }); + } + + return this.each(function(elem) { + if (!$(this).is('form')) { + return; + } + var $form = $(this); + + $form.submit(function() { + $form.removeClass(settings.dirtyClass); + }); + $form.bind('reset', function() { setDirtyStatus($form, false); }); + // Add a custom events + $form.bind('rescan.areYouSure', rescan); + $form.bind('reinitialize.areYouSure', reinitialize); + $form.bind('checkform.areYouSure', checkForm); + initForm($form); + }); + }; +})(jQuery); diff --git a/web_src/js/vitest.setup.js b/web_src/js/vitest.setup.js new file mode 100644 index 0000000..5366958 --- /dev/null +++ b/web_src/js/vitest.setup.js @@ -0,0 +1,18 @@ +window.__webpack_public_path__ = ''; + +window.config = { + csrfToken: 'test-csrf-token-123456', + pageData: {}, + i18n: {}, + customEmojis: {}, + appSubUrl: '', + mentionValues: [ + {key: 'user1 User 1', value: 'user1', name: 'user1', fullname: 'User 1', avatar: 'https://avatar1.com'}, + {key: 'user2 User 2', value: 'user2', name: 'user2', fullname: 'User 2', avatar: 'https://avatar2.com'}, + {key: 'org3 User 3', value: 'org3', name: 'org3', fullname: 'User 3', avatar: 'https://avatar3.com'}, + {key: 'user4 User 4', value: 'user4', name: 'user4', fullname: 'User 4', avatar: 'https://avatar4.com'}, + {key: 'user5 User 5', value: 'user5', name: 'user5', fullname: 'User 5', avatar: 'https://avatar5.com'}, + {key: 'org6 User 6', value: 'org6', name: 'org6', fullname: 'User 6', avatar: 'https://avatar6.com'}, + {key: 'org7 User 7', value: 'org7', name: 'org7', fullname: 'User 7', avatar: 'https://avatar7.com'}, + ], +}; diff --git a/web_src/js/webcomponents/README.md b/web_src/js/webcomponents/README.md new file mode 100644 index 0000000..45af58e --- /dev/null +++ b/web_src/js/webcomponents/README.md @@ -0,0 +1,11 @@ +# Web Components + +This `webcomponents` directory contains the source code for the web components used in the Gitea Web UI. + +https://developer.mozilla.org/en-US/docs/Web/Web_Components + +# Guidelines + +* These components are loaded in `<head>` (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much. +* Do not import `svg.js` into a web component because that file is currently not tree-shakeable, import svg files individually insteat. +* All our components must be added to `webpack.config.js` so they work correctly in Vue. diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js new file mode 100644 index 0000000..d2be455 --- /dev/null +++ b/web_src/js/webcomponents/absolute-date.js @@ -0,0 +1,40 @@ +import {Temporal} from 'temporal-polyfill'; + +export function toAbsoluteLocaleDate(dateStr, lang, opts) { + return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts); +} + +window.customElements.define('absolute-date', class extends HTMLElement { + static observedAttributes = ['date', 'year', 'month', 'weekday', 'day']; + + update = () => { + const year = this.getAttribute('year') ?? ''; + const month = this.getAttribute('month') ?? ''; + const weekday = this.getAttribute('weekday') ?? ''; + const day = this.getAttribute('day') ?? ''; + const lang = this.closest('[lang]')?.getAttribute('lang') || + this.ownerDocument.documentElement.getAttribute('lang') || ''; + + // only use the first 10 characters, e.g. the `yyyy-mm-dd` part + const dateStr = this.getAttribute('date').substring(0, 10); + + if (!this.shadowRoot) this.attachShadow({mode: 'open'}); + this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, { + ...(year && {year}), + ...(month && {month}), + ...(weekday && {weekday}), + ...(day && {day}), + }); + }; + + attributeChangedCallback(_name, oldValue, newValue) { + if (!this.initialized || oldValue === newValue) return; + this.update(); + } + + connectedCallback() { + this.initialized = false; + this.update(); + this.initialized = true; + } +}); diff --git a/web_src/js/webcomponents/absolute-date.test.js b/web_src/js/webcomponents/absolute-date.test.js new file mode 100644 index 0000000..ba04451 --- /dev/null +++ b/web_src/js/webcomponents/absolute-date.test.js @@ -0,0 +1,15 @@ +import {toAbsoluteLocaleDate} from './absolute-date.js'; + +test('toAbsoluteLocaleDate', () => { + expect(toAbsoluteLocaleDate('2024-03-15', 'en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + })).toEqual('March 15, 2024'); + + expect(toAbsoluteLocaleDate('2024-03-15', 'de-DE', { + year: 'numeric', + month: 'long', + day: 'numeric', + })).toEqual('15. März 2024'); +}); diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js new file mode 100644 index 0000000..7cec9da --- /dev/null +++ b/web_src/js/webcomponents/index.js @@ -0,0 +1,5 @@ +import './polyfills.js'; +import '@github/relative-time-element'; +import './origin-url.js'; +import './overflow-menu.js'; +import './absolute-date.js'; diff --git a/web_src/js/webcomponents/origin-url.js b/web_src/js/webcomponents/origin-url.js new file mode 100644 index 0000000..09aa77f --- /dev/null +++ b/web_src/js/webcomponents/origin-url.js @@ -0,0 +1,22 @@ +// Convert an absolute or relative URL to an absolute URL with the current origin. It only +// processes absolute HTTP/HTTPS URLs or relative URLs like '/xxx' or '//host/xxx'. +// NOTE: Keep this function in sync with clone_script.tmpl +export function toOriginUrl(urlStr) { + try { + if (urlStr.startsWith('http://') || urlStr.startsWith('https://') || urlStr.startsWith('/')) { + const {origin, protocol, hostname, port} = window.location; + const url = new URL(urlStr, origin); + url.protocol = protocol; + url.hostname = hostname; + url.port = port || (protocol === 'https:' ? '443' : '80'); + return url.toString(); + } + } catch {} + return urlStr; +} + +window.customElements.define('origin-url', class extends HTMLElement { + connectedCallback() { + this.textContent = toOriginUrl(this.getAttribute('data-url')); + } +}); diff --git a/web_src/js/webcomponents/origin-url.test.js b/web_src/js/webcomponents/origin-url.test.js new file mode 100644 index 0000000..3b2ab89 --- /dev/null +++ b/web_src/js/webcomponents/origin-url.test.js @@ -0,0 +1,17 @@ +import {toOriginUrl} from './origin-url.js'; + +test('toOriginUrl', () => { + const oldLocation = window.location; + for (const origin of ['https://example.com', 'https://example.com:3000']) { + window.location = new URL(`${origin}/`); + expect(toOriginUrl('/')).toEqual(`${origin}/`); + expect(toOriginUrl('/org/repo.git')).toEqual(`${origin}/org/repo.git`); + expect(toOriginUrl('https://another.com')).toEqual(`${origin}/`); + expect(toOriginUrl('https://another.com/')).toEqual(`${origin}/`); + expect(toOriginUrl('https://another.com/org/repo.git')).toEqual(`${origin}/org/repo.git`); + expect(toOriginUrl('https://another.com:4000')).toEqual(`${origin}/`); + expect(toOriginUrl('https://another.com:4000/')).toEqual(`${origin}/`); + expect(toOriginUrl('https://another.com:4000/org/repo.git')).toEqual(`${origin}/org/repo.git`); + } + window.location = oldLocation; +}); diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js new file mode 100644 index 0000000..a69ce16 --- /dev/null +++ b/web_src/js/webcomponents/overflow-menu.js @@ -0,0 +1,220 @@ +import {throttle} from 'throttle-debounce'; +import {createTippy} from '../modules/tippy.js'; +import {isDocumentFragmentOrElementNode} from '../utils/dom.js'; +import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg'; + +window.customElements.define('overflow-menu', class extends HTMLElement { + updateItems = throttle(100, () => { + if (!this.tippyContent) { + const div = document.createElement('div'); + div.classList.add('tippy-target'); + div.tabIndex = '-1'; // for initial focus, programmatic focus only + div.addEventListener('keydown', (e) => { + if (e.key === 'Tab') { + const items = this.tippyContent.querySelectorAll('[role="menuitem"]'); + if (e.shiftKey) { + if (document.activeElement === items[0]) { + e.preventDefault(); + items[items.length - 1].focus(); + } + } else { + if (document.activeElement === items[items.length - 1]) { + e.preventDefault(); + items[0].focus(); + } + } + } else if (e.key === 'Escape') { + e.preventDefault(); + e.stopPropagation(); + this.button._tippy.hide(); + this.button.focus(); + } else if (e.key === ' ' || e.code === 'Enter') { + if (document.activeElement?.matches('[role="menuitem"]')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.click(); + } + } else if (e.key === 'ArrowDown') { + if (document.activeElement?.matches('.tippy-target')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.querySelector('[role="menuitem"]:first-of-type').focus(); + } else if (document.activeElement?.matches('[role="menuitem"]')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.nextElementSibling?.focus(); + } + } else if (e.key === 'ArrowUp') { + if (document.activeElement?.matches('.tippy-target')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.querySelector('[role="menuitem"]:last-of-type').focus(); + } else if (document.activeElement?.matches('[role="menuitem"]')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.previousElementSibling?.focus(); + } + } + }); + this.append(div); + this.tippyContent = div; + } + + // move items in tippy back into the menu items for subsequent measurement + for (const item of this.tippyItems || []) { + this.menuItemsEl.append(item); + } + + // measure which items are partially outside the element and move them into the button menu + this.tippyItems = []; + const menuRight = this.offsetLeft + this.offsetWidth; + const menuItems = this.menuItemsEl.querySelectorAll('.item'); + const settingItem = this.menuItemsEl.querySelector('#settings-btn'); + for (const item of menuItems) { + const itemRight = item.offsetLeft + item.offsetWidth; + // Width of the settings button plus a small value to get the next item to the left if there is directly one + // If no setting button is in the menu the default threshold is 38 - roughly the width of .overflow-menu-button + const overflowBtnThreshold = 38; + const threshold = settingItem?.offsetWidth ?? overflowBtnThreshold; + // If we have a settings item on the right-hand side, we must also check if the first, + // possibly overflowing item would still fit on the left-hand side of the overflow menu + // If not, it must be added to the array (twice). The duplicate is removed with the shift. + if (settingItem && !this.tippyItems?.length && item !== settingItem && menuRight - itemRight < overflowBtnThreshold) { + this.tippyItems.push(settingItem); + } + if (menuRight - itemRight < threshold) { + this.tippyItems.push(item); + } + } + + // Special handling for settings button on right. Only done if a setting item is present + if (settingItem) { + // If less than 2 items overflow, remove all items (only settings "overflowed" - because it's on the right side) + if (this.tippyItems?.length < 2) { + this.tippyItems = []; + } else { + // Remove the first item of the list, because we have always one item more in the array due to the big threshold above + this.tippyItems.shift(); + } + } + + // if there are no overflown items, remove any previously created button + if (!this.tippyItems?.length) { + const btn = this.querySelector('.overflow-menu-button'); + btn?._tippy?.destroy(); + btn?.remove(); + return; + } + + // remove aria role from items that moved from tippy to menu + for (const item of menuItems) { + if (!this.tippyItems.includes(item)) { + item.removeAttribute('role'); + } + } + + // move all items that overflow into tippy + for (const item of this.tippyItems) { + item.setAttribute('role', 'menuitem'); + this.tippyContent.append(item); + } + + // update existing tippy + if (this.button?._tippy) { + this.button._tippy.setContent(this.tippyContent); + return; + } + + // create button initially + const btn = document.createElement('button'); + btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark'); + btn.setAttribute('aria-label', window.config.i18n.more_items); + btn.innerHTML = octiconKebabHorizontal; + this.append(btn); + this.button = btn; + + createTippy(btn, { + trigger: 'click', + hideOnClick: true, + interactive: true, + placement: 'bottom-end', + role: 'menu', + content: this.tippyContent, + onShow: () => { // FIXME: onShown doesn't work (never be called) + setTimeout(() => { + this.tippyContent.focus(); + }, 0); + }, + }); + }); + + init() { + // for horizontal menus where fomantic boldens active items, prevent this bold text from + // enlarging the menu's active item replacing the text node with a div that renders a + // invisible pseudo-element that enlarges the box. + if (this.matches('.ui.secondary.pointing.menu, .ui.tabular.menu')) { + for (const item of this.querySelectorAll('.item')) { + for (const child of item.childNodes) { + if (child.nodeType === Node.TEXT_NODE) { + const text = child.textContent.trim(); // whitespace is insignificant inside flexbox + if (!text) continue; + const span = document.createElement('span'); + span.classList.add('resize-for-semibold'); + span.setAttribute('data-text', text); + span.textContent = text; + child.replaceWith(span); + } + } + } + } + + // ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which + // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon. + this.resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + const newWidth = entry.contentBoxSize[0].inlineSize; + if (newWidth !== this.lastWidth) { + requestAnimationFrame(() => { + this.updateItems(); + }); + this.lastWidth = newWidth; + } + } + }); + this.resizeObserver.observe(this); + } + + connectedCallback() { + this.setAttribute('role', 'navigation'); + + // check whether the mandatory `.overflow-menu-items` element is present initially which happens + // with Vue which renders differently than browsers. If it's not there, like in the case of browser + // template rendering, wait for its addition. + // The eslint rule is not sophisticated enough or aware of this problem, see + // https://github.com/43081j/eslint-plugin-wc/pull/130 + const menuItemsEl = this.querySelector('.overflow-menu-items'); // eslint-disable-line wc/no-child-traversal-in-connectedcallback + if (menuItemsEl) { + this.menuItemsEl = menuItemsEl; + this.init(); + } else { + this.mutationObserver = new MutationObserver((mutations) => { + for (const mutation of mutations) { + for (const node of mutation.addedNodes) { + if (!isDocumentFragmentOrElementNode(node)) continue; + if (node.classList.contains('overflow-menu-items')) { + this.menuItemsEl = node; + this.mutationObserver?.disconnect(); + this.init(); + } + } + } + }); + this.mutationObserver.observe(this, {childList: true}); + } + } + + disconnectedCallback() { + this.mutationObserver?.disconnect(); + this.resizeObserver?.disconnect(); + } +}); diff --git a/web_src/js/webcomponents/polyfills.js b/web_src/js/webcomponents/polyfills.js new file mode 100644 index 0000000..38f50fa --- /dev/null +++ b/web_src/js/webcomponents/polyfills.js @@ -0,0 +1,17 @@ +try { + // some browsers like PaleMoon don't have full support for Intl.NumberFormat, so do the minimum polyfill to support "relative-time-element" + // https://repo.palemoon.org/MoonchildProductions/UXP/issues/2289 + new Intl.NumberFormat('en', {style: 'unit', unit: 'minute'}).format(1); +} catch { + const intlNumberFormat = Intl.NumberFormat; + Intl.NumberFormat = function(locales, options) { + if (options.style === 'unit') { + return { + format(value) { + return ` ${value} ${options.unit}`; + }, + }; + } + return intlNumberFormat(locales, options); + }; +} |