hinterland/hearth
2
2
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: vendor gitea 1.16.2

Browse Source
This commit is contained in:
yukkop
2026-06-02 08:36:01 +00:00
parent 247cd60f69
commit 54798b4615
2145 changed files with 162965 additions and 126447 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/gitea/source/web_src/js/features/admin/common.ts
+21 -20
View File
@@ -2,6 +2,7 @@ import {checkAppUrl} from '../common-page.ts';
import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
import {POST} from '../../modules/fetch.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import {pathEscape} from '../../utils/url.ts';
const {appSubUrl} = window.config;
@@ -63,7 +64,7 @@ function initAdminAuthentication() {
function onUsePagedSearchChange() {
const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size');
if (document.querySelector<HTMLInputElement>('#use_paged_search').checked) {
if (document.querySelector<HTMLInputElement>('#use_paged_search')!.checked) {
showElem('.search-page-size');
for (const el of searchPageSizeElements) {
el.querySelector('input')?.setAttribute('required', 'required');
@@ -82,10 +83,10 @@ function initAdminAuthentication() {
input.removeAttribute('required');
}
const provider = document.querySelector<HTMLInputElement>('#oauth2_provider').value;
const provider = document.querySelector<HTMLInputElement>('#oauth2_provider')!.value;
switch (provider) {
case 'openidConnect':
document.querySelector<HTMLInputElement>('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
document.querySelector<HTMLInputElement>('.open_id_connect_auto_discovery_url input')!.setAttribute('required', 'required');
showElem('.open_id_connect_auto_discovery_url');
break;
default: {
@@ -97,7 +98,7 @@ function initAdminAuthentication() {
showElem('.oauth2_use_custom_url'); // show the checkbox
}
if (mustProvideCustomURLs) {
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url').checked = true; // make the checkbox checked
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')!.checked = true; // make the checkbox checked
}
break;
}
@@ -109,20 +110,20 @@ function initAdminAuthentication() {
}
function onOAuth2UseCustomURLChange(applyDefaultValues: boolean) {
const provider = document.querySelector<HTMLInputElement>('#oauth2_provider').value;
const provider = document.querySelector<HTMLInputElement>('#oauth2_provider')!.value;
hideElem('.oauth2_use_custom_url_field');
for (const input of document.querySelectorAll<HTMLInputElement>('.oauth2_use_custom_url_field input[required]')) {
input.removeAttribute('required');
}
const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
if (elProviderCustomUrlSettings && document.querySelector<HTMLInputElement>('#oauth2_use_custom_url').checked) {
if (elProviderCustomUrlSettings && document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')!.checked) {
for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
if (applyDefaultValues) {
document.querySelector<HTMLInputElement>(`#oauth2_${custom}`).value = document.querySelector<HTMLInputElement>(`#${provider}_${custom}`).value;
document.querySelector<HTMLInputElement>(`#oauth2_${custom}`)!.value = document.querySelector<HTMLInputElement>(`#${provider}_${custom}`)!.value;
}
const customInput = document.querySelector(`#${provider}_${custom}`);
if (customInput && customInput.getAttribute('data-available') === 'true') {
if (customInput?.getAttribute('data-available') === 'true') {
for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
input.setAttribute('required', 'required');
}
@@ -134,10 +135,10 @@ function initAdminAuthentication() {
function onEnableLdapGroupsChange() {
const checked = document.querySelector<HTMLInputElement>('.js-ldap-group-toggle')?.checked;
toggleElem(document.querySelector('#ldap-group-options'), checked);
toggleElem(document.querySelector('#ldap-group-options')!, checked);
}
const elAuthType = document.querySelector<HTMLInputElement>('#auth_type');
const elAuthType = document.querySelector<HTMLInputElement>('#auth_type')!;
// New authentication
if (isNewPage) {
@@ -208,14 +209,14 @@ function initAdminAuthentication() {
document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
document.querySelector('.js-ldap-group-toggle')!.addEventListener('change', onEnableLdapGroupsChange);
}
// Edit authentication
if (isEditPage) {
const authType = elAuthType.value;
if (authType === '2' || authType === '5') {
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
document.querySelector('.js-ldap-group-toggle')!.addEventListener('change', onEnableLdapGroupsChange);
onEnableLdapGroupsChange();
if (authType === '2') {
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
@@ -227,10 +228,10 @@ function initAdminAuthentication() {
}
}
const elAuthName = document.querySelector<HTMLInputElement>('#auth_name');
const elAuthName = document.querySelector<HTMLInputElement>('#auth_name')!;
const onAuthNameChange = function () {
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(elAuthName.value)}/callback`;
document.querySelector('#oauth2-callback-url')!.textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${pathEscape(elAuthName.value)}/callback`;
};
elAuthName.addEventListener('input', onAuthNameChange);
onAuthNameChange();
@@ -240,13 +241,13 @@ function initAdminNotice() {
const pageContent = document.querySelector('.page-content.admin.notice');
if (!pageContent) return;
const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');
const detailModal = document.querySelector<HTMLDivElement>('#detail-modal')!;
// Attach view detail modals
queryElems(pageContent, '.view-detail', (el) => el.addEventListener('click', (e) => {
e.preventDefault();
const elNoticeDesc = el.closest('tr').querySelector('.notice-description');
const elModalDesc = detailModal.querySelector('.content pre');
const elNoticeDesc = el.closest('tr')!.querySelector('.notice-description')!;
const elModalDesc = detailModal.querySelector('.content pre')!;
elModalDesc.textContent = elNoticeDesc.textContent;
fomanticQuery(detailModal).modal('show');
}));
@@ -280,10 +281,10 @@ function initAdminNotice() {
const data = new FormData();
for (const checkbox of checkboxes) {
if (checkbox.checked) {
data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id'));
data.append('ids[]', checkbox.closest('.ui.checkbox')!.getAttribute('data-id')!);
}
}
await POST(this.getAttribute('data-link'), {data});
window.location.href = this.getAttribute('data-redirect');
await POST(this.getAttribute('data-link')!, {data});
window.location.href = this.getAttribute('data-redirect')!;
});
}
package/gitea/source/web_src/js/features/admin/config.test.ts
+48
View File
@@ -0,0 +1,48 @@
import {ConfigFormValueMapper} from './config.ts';
test('ConfigFormValueMapper', () => {
document.body.innerHTML = `
<form>
<input id="checkbox-unrelated" type="checkbox" value="v-unrelated" checked>
<!-- top-level key -->
<input name="k1" type="checkbox" value="v-key-only" data-config-dyn-key="k1" data-config-value-json="true" data-config-value-type="boolean">
<input type="hidden" data-config-dyn-key="k2" data-config-value-json='"k2-val"'>
<input name="k2">
<textarea name="repository.open-with.editor-apps"> a = b\n</textarea>
<input name="k-flipped-true" type="checkbox" data-config-value-type="flipped">
<input name="k-flipped-false" type="checkbox" checked data-config-value-type="flipped">
<!-- sub key -->
<input type="hidden" data-config-dyn-key="struct" data-config-value-json='{"SubBoolean": true, "SubTimestamp": 123456789, "OtherKey": "other-value"}'>
<input name="struct.SubBoolean" type="checkbox" data-config-value-type="boolean">
<input name="struct.SubTimestamp" type="datetime-local" data-config-value-type="timestamp">
<textarea name="struct.NewKey">new-value</textarea>
</form>
`;
const form = document.querySelector('form')!;
const mapper = new ConfigFormValueMapper(form);
mapper.fillFromSystemConfig();
const formData = mapper.collectToFormData();
const result: Record<string, string> = {};
const keys = [], values = [];
for (const [key, value] of formData.entries()) {
if (key === 'key') keys.push(value as string);
if (key === 'value') values.push(value as string);
}
for (let i = 0; i < keys.length; i++) {
result[keys[i]] = values[i];
}
expect(result).toEqual({
'k1': 'true',
'k2': '"k2-val"',
'k-flipped-false': 'false',
'k-flipped-true': 'true',
'repository.open-with.editor-apps': '[{"DisplayName":"a","OpenURL":"b"}]', // TODO: OPEN-WITH-EDITOR-APP-JSON: it must match backend
'struct': '{"SubBoolean":true,"SubTimestamp":123456780,"OtherKey":"other-value","NewKey":"new-value"}',
});
});
package/gitea/source/web_src/js/features/admin/config.ts
+211 -14
View File
@@ -1,24 +1,221 @@
import {showTemporaryTooltip} from '../../modules/tippy.ts';
import {POST} from '../../modules/fetch.ts';
import {registerGlobalInitFunc} from '../../modules/observer.ts';
import {queryElems} from '../../utils/dom.ts';
import {submitFormFetchAction} from '../common-fetch-action.ts';
const {appSubUrl} = window.config;
export function initAdminConfigs(): void {
const elAdminConfig = document.querySelector<HTMLDivElement>('.page-content.admin.config');
if (!elAdminConfig) return;
function collectCheckboxBooleanValue(el: HTMLInputElement): boolean {
const valType = el.getAttribute('data-config-value-type') as ConfigValueType;
if (valType === 'boolean') return el.checked;
if (valType === 'flipped') return !el.checked;
requireExplicitValueType(el);
}
for (const el of elAdminConfig.querySelectorAll<HTMLInputElement>('input[type="checkbox"][data-config-dyn-key]')) {
el.addEventListener('change', async () => {
function initSystemConfigAutoCheckbox(el: HTMLInputElement) {
el.addEventListener('change', async () => {
// if the checkbox is inside a form, we assume it's handled by the form submit and do not send an individual request
if (el.closest('form')) return;
try {
const data = new URLSearchParams({
key: el.getAttribute('data-config-dyn-key')!,
value: String(collectCheckboxBooleanValue(el)),
});
const resp = await POST(`${appSubUrl}/-/admin/config`, {data});
const json: Record<string, any> = await resp.json();
if (json.errorMessage) throw new Error(json.errorMessage);
} catch (ex) {
showTemporaryTooltip(el, ex.toString());
el.checked = !el.checked;
}
});
}
type GeneralFormFieldElement = HTMLInputElement;
function unsupportedElement(el: Element): never {
// HINT: for future developers: if you need to handle a config that cannot be directly mapped to a form element, you should either:
// * Add a "hidden" input to store the value (not configurable)
// * Design a new "component" to handle the config
throw new Error(`Unsupported config form value mapping for ${el.nodeName} (name=${(el as HTMLInputElement).name},type=${(el as HTMLInputElement).type}), please add more and design carefully`);
}
function requireExplicitValueType(el: Element): never {
throw new Error(`Unsupported config form value type for ${el.nodeName} (name=${(el as HTMLInputElement).name},type=${(el as HTMLInputElement).type}), please add explicit value type with "data-config-value-type" attribute`);
}
// try to extract the subKey for the config value from the element name
// * return '' if the element name exactly matches the config key, which means the value is directly stored in the element
// * return null if the config key not match
function extractElemConfigSubKey(el: GeneralFormFieldElement, dynKey: string): string | null {
if (el.name === dynKey) return '';
if (el.name.startsWith(`${dynKey}.`)) return el.name.slice(dynKey.length + 1); // +1 for the dot
return null;
}
// Due to the different design between HTML form elements and the JSON struct of the config values, we need to explicitly define some types.
// * checkbox can be used for boolean value, it can also be used for multiple values (array)
type ConfigValueType = 'boolean' | 'flipped' | 'string' | 'number' | 'timestamp'; // TODO: support more types like array, not used at the moment.
function toDatetimeLocalValue(unixSeconds: number) {
const d = new Date(unixSeconds * 1000);
return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
}
export class ConfigFormValueMapper {
form: HTMLFormElement;
presetJsonValues: Record<string, any> = {};
presetValueTypes: Record<string, ConfigValueType> = {};
constructor(form: HTMLFormElement) {
this.form = form;
for (const el of queryElems<HTMLInputElement>(form, '[data-config-value-json]')) {
const dynKey = el.getAttribute('data-config-dyn-key')!;
const jsonStr = el.getAttribute('data-config-value-json');
try {
const resp = await POST(`${appSubUrl}/-/admin/config`, {
data: new URLSearchParams({key: el.getAttribute('data-config-dyn-key'), value: String(el.checked)}),
});
const json: Record<string, any> = await resp.json();
if (json.errorMessage) throw new Error(json.errorMessage);
} catch (ex) {
showTemporaryTooltip(el, ex.toString());
el.checked = !el.checked;
this.presetJsonValues[dynKey] = JSON.parse(jsonStr || '{}'); // empty string also is valid, default to an empty object
} catch (error) {
this.presetJsonValues[dynKey] = {}; // in case the value in database is corrupted, don't break the whole form
console.error(`Error parsing JSON for config ${dynKey}:`, error);
}
});
}
for (const el of queryElems<HTMLInputElement>(form, '[data-config-value-type]')) {
const valKey = el.getAttribute('data-config-dyn-key') || el.name;
this.presetValueTypes[valKey] = el.getAttribute('data-config-value-type')! as ConfigValueType;
}
}
// try to assign the config value to the form element, return true if assigned successfully,
// otherwise return false (e.g. the element is not related to the config key)
assignConfigValueToFormElement(el: GeneralFormFieldElement, dynKey: string, cfgVal: any) {
const subKey = extractElemConfigSubKey(el, dynKey);
if (subKey === null) return false; // if not match, skip
const val = subKey ? cfgVal![subKey] : cfgVal;
if (val === null) return true; // if name matches, but no value to assign, also succeed because the form element does exist
const valType = this.presetValueTypes[el.name];
if (el.matches('[type="checkbox"]')) {
if (valType !== 'boolean') requireExplicitValueType(el);
el.checked = Boolean(val ?? el.checked);
} else if (el.matches('[type="datetime-local"]')) {
if (valType !== 'timestamp') requireExplicitValueType(el);
if (val) el.value = toDatetimeLocalValue(val);
} else if (el.matches('textarea')) {
el.value = String(val ?? el.value);
} else if (el.matches('input') && (el.getAttribute('type') ?? 'text') === 'text') {
el.value = String(val ?? el.value);
} else {
unsupportedElement(el);
}
return true;
}
collectConfigValueFromElement(el: GeneralFormFieldElement) {
let val: any;
const valType = this.presetValueTypes[el.name];
if (el.matches('[type="checkbox"]')) {
// TODO: if it needs to support array values in the future,
// it needs to iterate the "namedElems" to find all the checkboxes with the same name and collect values accordingly,
// and set the namedElems[matchedIdx] to null to avoid duplicate processing.
val = collectCheckboxBooleanValue(el);
} else if (el.matches('[type="datetime-local"]')) {
if (valType !== 'timestamp') requireExplicitValueType(el);
val = Math.floor(new Date(el.value).getTime() / 1000) ?? 0; // NaN is fine to JSON.stringify, it becomes null.
} else if (el.matches('textarea')) {
val = el.value;
} else if (el.matches('input') && (el.getAttribute('type') ?? 'text') === 'text') {
val = el.value;
} else {
unsupportedElement(el);
}
return val;
}
collectConfigSubValues(namedElems: Array<GeneralFormFieldElement | null>, dynKey: string, cfgVal: Record<string, any>) {
for (let idx = 0; idx < namedElems.length; idx++) {
const el = namedElems[idx];
if (!el) continue;
const subKey = extractElemConfigSubKey(el, dynKey);
if (!subKey) continue; // if not match, skip
cfgVal[subKey] = this.collectConfigValueFromElement(el);
namedElems[idx] = null;
}
}
fillFromSystemConfig() {
for (const [dynKey, cfgVal] of Object.entries(this.presetJsonValues)) {
const elems = this.form.querySelectorAll<GeneralFormFieldElement>(`[name^="${CSS.escape(dynKey)}"]`);
let assigned = false;
for (const el of elems) {
if (this.assignConfigValueToFormElement(el, dynKey, cfgVal)) {
assigned = true;
}
}
if (!assigned) throw new Error(`Could not find form element for config ${dynKey}, please check the form design and json struct`);
}
}
// TODO: OPEN-WITH-EDITOR-APP-JSON: need to use the same logic as backend
marshalConfigValueOpenWithEditorApps(cfgVal: string): string {
const apps: Array<{DisplayName: string, OpenURL: string}> = [];
const lines = cfgVal.split('\n');
for (const line of lines) {
let [displayName, openUrl] = line.split('=', 2);
displayName = displayName.trim();
openUrl = openUrl?.trim() ?? '';
if (!displayName || !openUrl) continue;
apps.push({DisplayName: displayName, OpenURL: openUrl});
}
return JSON.stringify(apps);
}
marshalConfigValue(dynKey: string, cfgVal: any): string {
if (dynKey === 'repository.open-with.editor-apps') return this.marshalConfigValueOpenWithEditorApps(cfgVal);
return JSON.stringify(cfgVal);
}
collectToFormData(): FormData {
const namedElems: Array<GeneralFormFieldElement | null> = [];
queryElems(this.form, '[name]', (el) => namedElems.push(el as GeneralFormFieldElement));
// first, process the config options with sub values, for example:
// merge "foo.bar.Enabled", "foo.bar.Message" to "foo.bar"
const formData = new FormData();
for (const [dynKey, cfgVal] of Object.entries(this.presetJsonValues)) {
this.collectConfigSubValues(namedElems, dynKey, cfgVal);
formData.append('key', dynKey);
formData.append('value', this.marshalConfigValue(dynKey, cfgVal));
}
// now, the namedElems should only contain the config options without sub values,
// directly store the value in formData with key as the element name, for example:
// "foo.enabled" => "true"
for (const el of namedElems) {
if (!el) continue;
const dynKey = el.name;
const newVal = this.collectConfigValueFromElement(el);
formData.append('key', dynKey);
formData.append('value', this.marshalConfigValue(dynKey, newVal));
}
return formData;
}
}
function initSystemConfigForm(form: HTMLFormElement) {
const formMapper = new ConfigFormValueMapper(form);
formMapper.fillFromSystemConfig();
form.addEventListener('submit', async (e) => {
if (!form.reportValidity()) return;
e.preventDefault();
const formData = formMapper.collectToFormData();
await submitFormFetchAction(form, {formData});
});
}
export function initAdminConfigs(): void {
registerGlobalInitFunc('initAdminConfigSettings', (el) => {
queryElems(el, 'input[type="checkbox"][data-config-dyn-key]', initSystemConfigAutoCheckbox);
queryElems(el, 'form.system-config-form', initSystemConfigForm);
});
}
package/gitea/source/web_src/js/features/admin/selfcheck.ts
+2 -2
View File
@@ -7,7 +7,7 @@ export async function initAdminSelfCheck() {
const elCheckByFrontend = document.querySelector('#self-check-by-frontend');
if (!elCheckByFrontend) return;
const elContent = document.querySelector<HTMLDivElement>('.page-content.admin .admin-setting-content');
const elContent = document.querySelector<HTMLDivElement>('.page-content.admin .admin-setting-content')!;
// send frontend self-check request
const resp = await POST(`${appSubUrl}/-/admin/self_check`, {
@@ -27,5 +27,5 @@ export async function initAdminSelfCheck() {
// only show the "no problem" if there is no visible "self-check-problem"
const hasProblem = Boolean(elContent.querySelectorAll('.self-check-problem:not(.tw-hidden)').length);
toggleElem(elContent.querySelector('.self-check-no-problem'), !hasProblem);
toggleElem(elContent.querySelector('.self-check-no-problem')!, !hasProblem);
}
package/gitea/source/web_src/js/features/captcha.ts
+5 -18
View File
@@ -4,7 +4,7 @@ export async function initCaptcha() {
const captchaEl = document.querySelector('#captcha');
if (!captchaEl) return;
const siteKey = captchaEl.getAttribute('data-sitekey');
const siteKey = captchaEl.getAttribute('data-sitekey')!;
const isDark = isDarkTheme();
const params = {
@@ -34,23 +34,10 @@ export async function initCaptcha() {
break;
}
case 'm-captcha': {
const mCaptcha = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@mcaptcha/vanilla-glue');
// FIXME: the mCaptcha code is not right, it's a miracle that the wrong code could run
// * the "vanilla-glue" has some problems with es6 module.
// * the INPUT_NAME is a "const", it should not be changed.
// * the "mCaptcha.default" is actually the "Widget".
// @ts-expect-error TS2540: Cannot assign to 'INPUT_NAME' because it is a read-only property.
mCaptcha.INPUT_NAME = 'm-captcha-response';
const instanceURL = captchaEl.getAttribute('data-instance-url');
new mCaptcha.default({
siteKey: {
instanceUrl: new URL(instanceURL),
key: siteKey,
},
});
// ref: https://github.com/mCaptcha/glue/blob/master/packages/vanilla/README.md
// sample: https://github.com/mCaptcha/glue/blob/master/packages/vanilla/static/embeded.html
// @mcaptcha/vanilla-glue 0.1.0-rc2 auto-runs on module load, use the existing elements to render.
await import('@mcaptcha/vanilla-glue');
break;
}
default:
package/gitea/source/web_src/js/features/citation.ts
+12 -15
View File
@@ -1,20 +1,17 @@
import {getCurrentLocale} from '../utils.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {localUserSettings} from '../modules/user-settings.ts';
const {pageData} = window.config;
async function initInputCitationValue(citationCopyApa: HTMLButtonElement, citationCopyBibtex: HTMLButtonElement) {
const [{Cite, plugins}] = await Promise.all([
// @ts-expect-error: module exports no types
import(/* webpackChunkName: "citation-js-core" */'@citation-js/core'),
// @ts-expect-error: module exports no types
import(/* webpackChunkName: "citation-js-formats" */'@citation-js/plugin-software-formats'),
// @ts-expect-error: module exports no types
import(/* webpackChunkName: "citation-js-bibtex" */'@citation-js/plugin-bibtex'),
// @ts-expect-error: module exports no types
import(/* webpackChunkName: "citation-js-csl" */'@citation-js/plugin-csl'),
import('@citation-js/core'),
import('@citation-js/plugin-software-formats'),
import('@citation-js/plugin-bibtex'),
import('@citation-js/plugin-csl'),
]);
const {citationFileContent} = pageData;
const citationFileContent = pageData.citationFileContent!;
const config = plugins.config.get('@bibtex');
config.constants.fieldTypes.doi = ['field', 'literal'];
config.constants.fieldTypes.version = ['field', 'literal'];
@@ -31,15 +28,15 @@ export async function initCitationFileCopyContent() {
if (!pageData.citationFileContent) return;
const citationCopyApa = document.querySelector<HTMLButtonElement>('#citation-copy-apa');
const citationCopyBibtex = document.querySelector<HTMLButtonElement>('#citation-copy-bibtex');
const citationCopyApa = document.querySelector<HTMLButtonElement>('#citation-copy-apa')!;
const citationCopyBibtex = document.querySelector<HTMLButtonElement>('#citation-copy-bibtex')!;
const inputContent = document.querySelector<HTMLInputElement>('#citation-copy-content');
if ((!citationCopyApa && !citationCopyBibtex) || !inputContent) return;
const updateUi = () => {
const isBibtex = (localStorage.getItem('citation-copy-format') || defaultCitationFormat) === 'bibtex';
const copyContent = (isBibtex ? citationCopyBibtex : citationCopyApa).getAttribute('data-text');
const isBibtex = localUserSettings.getString('citation-copy-format', defaultCitationFormat) === 'bibtex';
const copyContent = (isBibtex ? citationCopyBibtex : citationCopyApa).getAttribute('data-text')!;
inputContent.value = copyContent;
citationCopyBibtex.classList.toggle('primary', isBibtex);
citationCopyApa.classList.toggle('primary', !isBibtex);
@@ -55,12 +52,12 @@ export async function initCitationFileCopyContent() {
updateUi();
citationCopyApa.addEventListener('click', () => {
localStorage.setItem('citation-copy-format', 'apa');
localUserSettings.setString('citation-copy-format', 'apa');
updateUi();
});
citationCopyBibtex.addEventListener('click', () => {
localStorage.setItem('citation-copy-format', 'bibtex');
localUserSettings.setString('citation-copy-format', 'bibtex');
updateUi();
});
package/gitea/source/web_src/js/features/clipboard.ts
+13 -6
View File
@@ -1,24 +1,31 @@
import {showTemporaryTooltip} from '../modules/tippy.ts';
import {toAbsoluteUrl} from '../utils.ts';
import {clippie} from 'clippie';
import type {DOMEvent} from '../utils/dom.ts';
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-target: Holds a selector for an element. "value" of <input> or <textarea>, or "textContent" of <div> will be copied
// - data-clipboard-text-type: When set to 'url' will convert relative to absolute urls
export function initGlobalCopyToClipboardListener() {
document.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
const target = e.target.closest('[data-clipboard-text], [data-clipboard-target]');
document.addEventListener('click', async (e) => {
const target = (e.target as HTMLElement).closest('[data-clipboard-text], [data-clipboard-target]');
if (!target) return;
e.preventDefault();
let text = target.getAttribute('data-clipboard-text');
if (!text) {
text = document.querySelector<HTMLInputElement>(target.getAttribute('data-clipboard-target'))?.value;
if (text === null) {
const textSelector = target.getAttribute('data-clipboard-target')!;
const textTarget = document.querySelector(textSelector)!;
if (textTarget.nodeName === 'INPUT' || textTarget.nodeName === 'TEXTAREA') {
text = (textTarget as HTMLInputElement | HTMLTextAreaElement).value;
} else if (textTarget.nodeName === 'DIV') {
text = textTarget.textContent;
} else {
throw new Error(`Unsupported element for clipboard target: ${textSelector}`);
}
}
if (text && target.getAttribute('data-clipboard-text-type') === 'url') {
package/gitea/source/web_src/js/features/code-frequency.ts
+1 -1
View File
@@ -4,7 +4,7 @@ export async function initRepoCodeFrequency() {
const el = document.querySelector('#repo-code-frequency-chart');
if (!el) return;
const {default: RepoCodeFrequency} = await import(/* webpackChunkName: "code-frequency-graph" */'../components/RepoCodeFrequency.vue');
const {default: RepoCodeFrequency} = await import('../components/RepoCodeFrequency.vue');
try {
const View = createApp(RepoCodeFrequency, {
locale: {
package/gitea/source/web_src/js/features/codeeditor.ts
-242
View File
@@ -1,242 +0,0 @@
import tinycolor from 'tinycolor2';
import {basename, extname, isObject, isDarkTheme} from '../utils.ts';
import {onInputDebounce} from '../utils/dom.ts';
import type MonacoNamespace from 'monaco-editor';
type Monaco = typeof MonacoNamespace;
type IStandaloneCodeEditor = MonacoNamespace.editor.IStandaloneCodeEditor;
type IEditorOptions = MonacoNamespace.editor.IEditorOptions;
type IGlobalEditorOptions = MonacoNamespace.editor.IGlobalEditorOptions;
type ITextModelUpdateOptions = MonacoNamespace.editor.ITextModelUpdateOptions;
type MonacoOpts = IEditorOptions & IGlobalEditorOptions & ITextModelUpdateOptions;
type EditorConfig = {
indent_style?: 'tab' | 'space',
indent_size?: string | number, // backend emits this as string
tab_width?: string | number, // backend emits this as string
end_of_line?: 'lf' | 'cr' | 'crlf',
charset?: 'latin1' | 'utf-8' | 'utf-8-bom' | 'utf-16be' | 'utf-16le',
trim_trailing_whitespace?: boolean,
insert_final_newline?: boolean,
root?: boolean,
};
const languagesByFilename: Record<string, string> = {};
const languagesByExt: Record<string, string> = {};
const baseOptions: MonacoOpts = {
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: [],
scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
scrollBeyondLastLine: false,
automaticLayout: true,
};
function getEditorconfig(input: HTMLInputElement): EditorConfig | null {
const json = input.getAttribute('data-editorconfig');
if (!json) return null;
try {
return JSON.parse(json);
} catch {
return null;
}
}
function initLanguages(monaco: Monaco): void {
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;
}
if (id === 'typescript') {
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
// this is needed to suppress error annotations in tsx regarding missing --jsx flag.
jsx: monaco.languages.typescript.JsxEmit.Preserve,
});
}
}
}
function getLanguage(filename: string): string {
return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext';
}
function updateEditor(monaco: Monaco, editor: IStandaloneCodeEditor, filename: string, lineWrapExts: string[]): void {
editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
const model = editor.getModel();
if (!model) return;
const language = model.getLanguageId();
const newLanguage = getLanguage(filename);
if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
// TODO: Need to update the model uri with the new filename, but there is no easy way currently, see
// https://github.com/microsoft/monaco-editor/discussions/3751
}
// export editor for customization - https://github.com/go-gitea/gitea/issues/10409
function exportEditor(editor: IStandaloneCodeEditor): void {
if (!window.codeEditors) window.codeEditors = [];
if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
}
function updateTheme(monaco: Monaco): void {
// 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: string) => tinycolor(styles.getPropertyValue(name).trim()).toString('hex6');
monaco.editor.defineTheme('gitea', {
base: isDarkTheme() ? 'vs-dark' : 'vs',
inherit: true,
rules: [
{
background: getColor('--color-code-bg'),
token: '',
},
],
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-opaque'),
'progressBar.background': getColor('--color-primary'),
'focusBorder': '#0000', // prevent blue border
},
});
}
type CreateMonacoOpts = MonacoOpts & {language?: string};
export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, opts: CreateMonacoOpts): Promise<{monaco: Monaco, editor: IStandaloneCodeEditor}> {
const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
initLanguages(monaco);
let {language, ...other} = opts;
if (!language) language = getLanguage(filename);
const container = document.createElement('div');
container.className = 'monaco-editor-container';
if (!textarea.parentNode) throw new Error('Parent node absent');
textarea.parentNode.append(container);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
updateTheme(monaco);
});
updateTheme(monaco);
const model = monaco.editor.createModel(textarea.value, language, monaco.Uri.file(filename));
const editor = monaco.editor.create(container, {
model,
theme: 'gitea',
...other,
});
monaco.editor.addKeybindingRules([
{keybinding: monaco.KeyCode.Enter, command: null}, // disable enter from accepting code completion
]);
model.onDidChangeContent(() => {
textarea.value = editor.getValue({
preserveBOM: true,
lineEnding: '',
});
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: string, lineWrapExts: string[]): MonacoOpts {
return {
wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
};
}
function togglePreviewDisplay(previewable: boolean): void {
const previewTab = document.querySelector<HTMLElement>('a[data-tab="preview"]');
if (!previewTab) return;
if (previewable) {
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<HTMLElement>('a[data-tab="write"]');
writeTab?.click();
}
}
}
export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput: HTMLInputElement): Promise<IStandaloneCodeEditor> {
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 isPreviewable = previewableExts.has(extname(filename));
const editorConfig = getEditorconfig(filenameInput);
togglePreviewDisplay(isPreviewable);
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: EditorConfig | null): MonacoOpts {
if (!ec || !isObject(ec)) return {};
const opts: MonacoOpts = {};
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) || Number(ec.indent_size);
}
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;
}
package/gitea/source/web_src/js/features/colorpicker.ts
+9 -10
View File
@@ -1,5 +1,4 @@
import {createTippy} from '../modules/tippy.ts';
import type {DOMEvent} from '../utils/dom.ts';
import {registerGlobalInitFunc} from '../modules/observer.ts';
export async function initColorPickers() {
@@ -7,8 +6,8 @@ export async function initColorPickers() {
registerGlobalInitFunc('initColorPicker', async (el) => {
if (!imported) {
await Promise.all([
import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'),
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
import('vanilla-colorful/hex-color-picker.js'),
import('../../css/features/colorpicker.css'),
]);
imported = true;
}
@@ -25,7 +24,7 @@ function updatePicker(el: HTMLElement, newValue: string): void {
}
function initPicker(el: HTMLElement): void {
const input = el.querySelector('input');
const input = el.querySelector('input')!;
const square = document.createElement('div');
square.classList.add('preview-square');
@@ -39,9 +38,9 @@ function initPicker(el: HTMLElement): void {
updateSquare(square, e.detail.value);
});
input.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
updateSquare(square, e.target.value);
updatePicker(picker, e.target.value);
input.addEventListener('input', (e) => {
updateSquare(square, (e.target as HTMLInputElement).value);
updatePicker(picker, (e.target as HTMLInputElement).value);
});
createTippy(input, {
@@ -62,13 +61,13 @@ function initPicker(el: HTMLElement): void {
input.dispatchEvent(new Event('input', {bubbles: true}));
updateSquare(square, color);
};
el.querySelector('.generate-random-color').addEventListener('click', () => {
el.querySelector('.generate-random-color')!.addEventListener('click', () => {
const newValue = `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;
setSelectedColor(newValue);
});
for (const colorEl of el.querySelectorAll<HTMLElement>('.precolors .color')) {
colorEl.addEventListener('click', (e: DOMEvent<MouseEvent, HTMLAnchorElement>) => {
const newValue = e.target.getAttribute('data-color-hex');
colorEl.addEventListener('click', (e) => {
const newValue = (e.target as HTMLElement).getAttribute('data-color-hex')!;
setSelectedColor(newValue);
});
}
package/gitea/source/web_src/js/features/common-actions-permissions.ts
+34
View File
@@ -0,0 +1,34 @@
import {registerGlobalInitFunc} from '../modules/observer.ts';
import {toggleElem, toggleElemClass} from '../utils/dom.ts';
export function initActionsPermissionsForm(): void {
registerGlobalInitFunc('initRepoActionsPermissionsForm', initRepoActionsPermissionsForm);
registerGlobalInitFunc('initOwnerActionsPermissionsForm', initOwnerActionsPermissionsForm);
}
function initRepoActionsPermissionsForm(form: HTMLFormElement) {
initActionsOverrideOwnerConfig(form);
initActionsPermissionTable(form);
}
function initOwnerActionsPermissionsForm(form: HTMLFormElement) {
initActionsPermissionTable(form);
}
function initActionsPermissionTable(form: HTMLFormElement) {
// show or hide permissions table based on enable max permissions checkbox (aka: whether you use custom permissions or not)
const permTable = form.querySelector<HTMLTableElement>('.js-permissions-table')!;
const enableMaxCheckbox = form.querySelector<HTMLInputElement>('input[name=enable_max_permissions]')!;
const onEnableMaxCheckboxChange = () => toggleElem(permTable, enableMaxCheckbox.checked);
onEnableMaxCheckboxChange();
enableMaxCheckbox.addEventListener('change', onEnableMaxCheckboxChange);
}
function initActionsOverrideOwnerConfig(form: HTMLFormElement) {
// enable or disable repo token permissions config section based on override owner config checkbox
const overrideOwnerConfig = form.querySelector<HTMLInputElement>('input[name=override_owner_config]')!;
const repoTokenPermConfigSection = form.querySelector('.js-repo-token-permissions-config')!;
const onOverrideOwnerConfigChange = () => toggleElemClass(repoTokenPermConfigSection, 'container-disabled', !overrideOwnerConfig.checked);
onOverrideOwnerConfigChange();
overrideOwnerConfig.addEventListener('change', onOverrideOwnerConfigChange);
}
package/gitea/source/web_src/js/features/common-button.ts
+11 -10
View File
@@ -2,6 +2,7 @@ import {POST} from '../modules/fetch.ts';
import {addDelegatedEventListener, hideElem, isElemVisible, showElem, toggleElem} from '../utils/dom.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {camelize} from 'vue';
import {applyAutoFocus} from './common-page.ts';
export function initGlobalButtonClickOnEnter(): void {
addDelegatedEventListener(document, 'keypress', 'div.ui.button, span.ui.button', (el, e: KeyboardEvent) => {
@@ -27,7 +28,7 @@ export function initGlobalDeleteButton(): void {
const dataObj = btn.dataset;
const modalId = btn.getAttribute('data-modal-id');
const modal = document.querySelector(`.delete.modal${modalId ? `#${modalId}` : ''}`);
const modal = document.querySelector(`.delete.modal${modalId ? `#${modalId}` : ''}`)!;
// set the modal "display name" by `data-name`
const modalNameEl = modal.querySelector('.name');
@@ -37,7 +38,7 @@ export function initGlobalDeleteButton(): void {
for (const [key, value] of Object.entries(dataObj)) {
if (key.startsWith('data')) {
const textEl = modal.querySelector(`.${key}`);
if (textEl) textEl.textContent = value;
if (textEl) textEl.textContent = value ?? null;
}
}
@@ -46,7 +47,7 @@ export function initGlobalDeleteButton(): void {
onApprove: () => {
// if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
if (btn.getAttribute('data-type') === 'form') {
const formSelector = btn.getAttribute('data-form');
const formSelector = btn.getAttribute('data-form')!;
const form = document.querySelector<HTMLFormElement>(formSelector);
if (!form) throw new Error(`no form named ${formSelector} found`);
modal.classList.add('is-loading'); // the form is not in the modal, so also add loading indicator to the modal
@@ -59,14 +60,14 @@ export function initGlobalDeleteButton(): void {
const postData = new FormData();
for (const [key, value] of Object.entries(dataObj)) {
if (key.startsWith('data')) { // for data-data-xxx (HTML) -> dataXxx (form)
postData.append(key.slice(4), value);
postData.append(key.slice(4), String(value));
}
if (key === 'id') { // for data-id="..."
postData.append('id', value);
postData.append('id', String(value));
}
}
(async () => {
const response = await POST(btn.getAttribute('data-url'), {data: postData});
const response = await POST(btn.getAttribute('data-url')!, {data: postData});
if (response.ok) {
const data = await response.json();
window.location.href = data.redirect;
@@ -84,11 +85,11 @@ function onShowPanelClick(el: HTMLElement, e: MouseEvent) {
// a '.show-panel' element can show a panel, by `data-panel="selector"`
// if it has "toggle" class, it toggles the panel
e.preventDefault();
const sel = el.getAttribute('data-panel');
const sel = el.getAttribute('data-panel')!;
const elems = el.classList.contains('toggle') ? toggleElem(sel) : showElem(sel);
for (const elem of elems) {
if (isElemVisible(elem as HTMLElement)) {
elem.querySelector<HTMLElement>('[autofocus]')?.focus();
applyAutoFocus(elem);
}
}
}
@@ -103,7 +104,7 @@ function onHidePanelClick(el: HTMLElement, e: MouseEvent) {
}
sel = el.getAttribute('data-panel-closest');
if (sel) {
hideElem((el.parentNode as HTMLElement).closest(sel));
hideElem((el.parentNode as HTMLElement).closest(sel)!);
return;
}
throw new Error('no panel to hide'); // should never happen, otherwise there is a bug in code
@@ -141,7 +142,7 @@ function onShowModalClick(el: HTMLElement, e: MouseEvent) {
// * Then, try to query 'target' as HTML tag
// If there is a ".{prop-name}" part like "data-modal-form.action", the "form" element's "action" property will be set, the "prop-name" will be camel-cased to "propName".
e.preventDefault();
const modalSelector = el.getAttribute('data-modal');
const modalSelector = el.getAttribute('data-modal')!;
const elModal = document.querySelector(modalSelector);
if (!elModal) throw new Error('no modal for this action');
package/gitea/source/web_src/js/features/common-fetch-action.ts
+11 -6
View File
@@ -67,10 +67,15 @@ async function fetchActionDoRequest(actionElem: HTMLElement, url: string, opt: R
async function onFormFetchActionSubmit(formEl: HTMLFormElement, e: SubmitEvent) {
e.preventDefault();
await submitFormFetchAction(formEl, submitEventSubmitter(e));
await submitFormFetchAction(formEl, {formSubmitter: submitEventSubmitter(e)});
}
export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitter?: HTMLElement) {
type SubmitFormFetchActionOpts = {
formSubmitter?: HTMLElement;
formData?: FormData;
};
export async function submitFormFetchAction(formEl: HTMLFormElement, opts: SubmitFormFetchActionOpts = {}) {
if (formEl.classList.contains('is-loading')) return;
formEl.classList.add('is-loading');
@@ -80,8 +85,8 @@ export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitt
const formMethod = formEl.getAttribute('method') || 'get';
const formActionUrl = formEl.getAttribute('action') || window.location.href;
const formData = new FormData(formEl);
const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')];
const formData = opts.formData ?? new FormData(formEl);
const [submitterName, submitterValue] = [opts.formSubmitter?.getAttribute('name'), opts.formSubmitter?.getAttribute('value')];
if (submitterName) {
formData.append(submitterName, submitterValue || '');
}
@@ -94,7 +99,7 @@ export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitt
if (formMethod.toLowerCase() === 'get') {
const params = new URLSearchParams();
for (const [key, value] of formData) {
params.append(key, value.toString());
params.append(key, value as string);
}
const pos = reqUrl.indexOf('?');
if (pos !== -1) {
@@ -114,7 +119,7 @@ async function onLinkActionClick(el: HTMLElement, e: Event) {
// If the "link-action" has "data-modal-confirm" attribute, a "confirm modal dialog" will be shown before taking action.
// Attribute "data-modal-confirm" can be a modal element by "#the-modal-id", or a string content for the modal dialog.
e.preventDefault();
const url = el.getAttribute('data-url');
const url = el.getAttribute('data-url')!;
const doRequest = async () => {
if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but "A" doesn't have the "disabled" attribute
await fetchActionDoRequest(el, url, {method: el.getAttribute('data-link-action-method') || 'POST'});
package/gitea/source/web_src/js/features/common-form.ts
+5 -4
View File
@@ -1,6 +1,6 @@
import {applyAreYouSure, initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.ts';
import {queryElems, type DOMEvent} from '../utils/dom.ts';
import {queryElems} from '../utils/dom.ts';
import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
export function initGlobalFormDirtyLeaveConfirm() {
@@ -13,14 +13,15 @@ export function initGlobalFormDirtyLeaveConfirm() {
}
export function initGlobalEnterQuickSubmit() {
document.addEventListener('keydown', (e: DOMEvent<KeyboardEvent>) => {
document.addEventListener('keydown', (e) => {
if (e.isComposing) return;
if (e.key !== 'Enter') return;
const hasCtrlOrMeta = ((e.ctrlKey || e.metaKey) && !e.altKey);
if (hasCtrlOrMeta && e.target.matches('textarea')) {
if (hasCtrlOrMeta && (e.target as HTMLElement).matches('textarea')) {
if (handleGlobalEnterQuickSubmit(e.target as HTMLElement)) {
e.preventDefault();
}
} else if (e.target.matches('input') && !e.target.closest('form')) {
} else if ((e.target as HTMLElement).matches('input') && !(e.target as HTMLElement).closest('form')) {
// input in a normal form could handle Enter key by default, so we only handle the input outside a form
// eslint-disable-next-line unicorn/no-lonely-if
if (handleGlobalEnterQuickSubmit(e.target as HTMLElement)) {
package/gitea/source/web_src/js/features/common-issue-list.test.ts
+1 -1
View File
@@ -5,7 +5,7 @@ test('parseIssueListQuickGotoLink', () => {
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('/link', 'owner/repo#123')).toEqual('/owner/repo/issues/123');
expect(parseIssueListQuickGotoLink('', '')).toEqual('');
expect(parseIssueListQuickGotoLink('', 'abc')).toEqual('');
package/gitea/source/web_src/js/features/common-issue-list.ts
+15 -24
View File
@@ -1,4 +1,4 @@
import {isElemVisible, onInputDebounce, submitEventSubmitter, toggleElem} from '../utils/dom.ts';
import {onInputDebounce, toggleElem} from '../utils/dom.ts';
import {GET} from '../modules/fetch.ts';
const {appSubUrl} = window.config;
@@ -17,34 +17,25 @@ export function parseIssueListQuickGotoLink(repoLink: string, searchText: string
} else if (reIssueSharpIndex.test(searchText)) {
targetUrl = `${repoLink}/issues/${searchText.substring(1)}`;
}
} else {
// try to parse it for a global search (eg: "owner/repo#123")
const [_, owner, repo, index] = reIssueOwnerRepoIndex.exec(searchText) || [];
if (owner) {
targetUrl = `${appSubUrl}/${owner}/${repo}/issues/${index}`;
}
}
// try to parse it for a global search (eg: "owner/repo#123")
const [_, owner, repo, index] = reIssueOwnerRepoIndex.exec(searchText) || [];
if (owner) {
targetUrl = `${appSubUrl}/${owner}/${repo}/issues/${index}`;
}
return targetUrl;
}
export function initCommonIssueListQuickGoto() {
const goto = document.querySelector<HTMLElement>('#issue-list-quick-goto');
if (!goto) return;
const elGotoButton = document.querySelector<HTMLElement>('#issue-list-quick-goto');
if (!elGotoButton) return;
const form = goto.closest('form');
const input = form.querySelector<HTMLInputElement>('input[name=q]');
const repoLink = goto.getAttribute('data-repo-link');
const form = elGotoButton.closest('form')!;
const input = form.querySelector<HTMLInputElement>('input[name=q]')!;
const repoLink = elGotoButton.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 = isElemVisible(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');
elGotoButton.addEventListener('click', () => {
window.location.href = elGotoButton.getAttribute('data-issue-goto-link')!;
});
const onInput = async () => {
@@ -58,8 +49,8 @@ export function initCommonIssueListQuickGoto() {
// 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);
toggleElem(elGotoButton, Boolean(targetUrl));
elGotoButton.setAttribute('data-issue-goto-link', targetUrl);
};
input.addEventListener('input', onInputDebounce(onInput));
package/gitea/source/web_src/js/features/common-organization.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export function initCommonOrganization() {
}
document.querySelector<HTMLInputElement>('.organization.settings.options #org_name')?.addEventListener('input', function () {
const nameChanged = this.value.toLowerCase() !== this.getAttribute('data-org-name').toLowerCase();
const nameChanged = this.value.toLowerCase() !== this.getAttribute('data-org-name')!.toLowerCase();
toggleElem('#org-name-change-prompt', nameChanged);
});
package/gitea/source/web_src/js/features/common-page.ts
+52 -13
View File
@@ -1,14 +1,14 @@
import {GET} from '../modules/fetch.ts';
import {showGlobalErrorMessage} from '../bootstrap.ts';
import {GET, POST} from '../modules/fetch.ts';
import {showGlobalErrorMessage} from '../modules/errors.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {queryElems} from '../utils/dom.ts';
import {addDelegatedEventListener, queryElems} from '../utils/dom.ts';
import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
import {initCompSearchRepoBox} from './comp/SearchRepoBox.ts';
const {appUrl} = window.config;
const {appUrl, appSubUrl} = window.config;
export function initHeadNavbarContentToggle() {
function initHeadNavbarContentToggle() {
const navbar = document.querySelector('#navbar');
const btn = document.querySelector('#navbar-expand-toggle');
if (!navbar || !btn) return;
@@ -20,16 +20,37 @@ export function initHeadNavbarContentToggle() {
});
}
export function initFootLanguageMenu() {
function initFooterLanguageMenu() {
document.querySelector('.ui.dropdown .menu.language-menu')?.addEventListener('click', async (e) => {
const item = (e.target as HTMLElement).closest('.item');
if (!item) return;
e.preventDefault();
await GET(item.getAttribute('data-url'));
await GET(item.getAttribute('data-url')!);
window.location.reload();
});
}
function initFooterThemeSelector() {
const elDropdown = document.querySelector('#footer-theme-selector');
if (!elDropdown) return; // some pages don't have footer, for example: 500.tmpl
const $dropdown = fomanticQuery(elDropdown);
$dropdown.dropdown({
direction: 'upward',
apiSettings: {url: `${appSubUrl}/-/web-theme/list`, cache: false},
});
addDelegatedEventListener(elDropdown, 'click', '.menu > .item', async (el) => {
const themeName = el.getAttribute('data-value')!;
await POST(`${appSubUrl}/-/web-theme/apply?theme=${encodeURIComponent(themeName)}`);
window.location.reload();
});
}
export function initCommmPageComponents() {
initHeadNavbarContentToggle();
initFooterLanguageMenu();
initFooterThemeSelector();
}
export function initGlobalDropdown() {
// do not init "custom" dropdowns, "custom" dropdowns are managed by their own code.
registerGlobalSelectorFunc('.ui.dropdown:not(.custom)', (el) => {
@@ -95,12 +116,30 @@ function attachInputDirAuto(el: Partial<HTMLInputElement | HTMLTextAreaElement>)
}
}
function autoFocusEnd(el: HTMLInputElement | HTMLTextAreaElement) {
el.focus();
el.setSelectionRange(el.value.length, el.value.length);
}
export function applyAutoFocus(container: Element) {
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autofocus
// "autofocus" behavior is defined by the standard: when a container (e.g.: dialog) becomes visible, focus the element with "autofocus" attribute
// Fomantic UI already supports it for its modal dialog, we need to cover more cases (e.g.: ".show-panel" button)
// Here is just a simple support, we don't expect more than one element that need "autofocus" appearing in the same container
container.querySelector<HTMLElement>('[autofocus]')?.focus();
// Also, apply our autoFocusEnd behavior
// TODO: GLOBAL-INIT-MULTIPLE-FUNCTIONS: use "~=" operator in case we would extend the "data-global-init" to support more functions in the future.
const el = container.querySelector<HTMLInputElement>('[data-global-init~="autoFocusEnd"]');
if (el) autoFocusEnd(el);
}
export function initGlobalInput() {
registerGlobalSelectorFunc('input, textarea', attachInputDirAuto);
registerGlobalInitFunc('initInputAutoFocusEnd', (el: HTMLInputElement) => {
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);
});
// autoFocusEnd is used for autofocus an input/textarea and move the cursor to the end of the text.
// It is useful for "New Issue"/"New PR" pages when the title is pre-filled with prefix text (e.g.: from template or commit message)
// The native "autofocus" isn't used because there is a delay between "focused (DOM rendering)" and "move cursor to end (our JS)", it causes flickers.
registerGlobalInitFunc('autoFocusEnd', autoFocusEnd);
}
/**
@@ -117,8 +156,8 @@ export function checkAppUrl() {
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.`, 'warning');
showGlobalErrorMessage(`The detected web site URL is "${appUrl}", it's unlikely matching the site config.
Mismatched app.ini ROOT_URL or reverse proxy "Host/X-Forwarded-Proto" config might cause wrong URL links for web UI/mail content/webhook notification/OAuth2 sign-in.`, 'warning');
}
export function checkAppUrlScheme() {
package/gitea/source/web_src/js/features/comp/ComboMarkdownEditor.ts
+74 -42
View File
@@ -10,6 +10,7 @@ import {
} from './EditorUpload.ts';
import {handleGlobalEnterQuickSubmit} from './QuickSubmit.ts';
import {renderPreviewPanelContent} from '../repo-editor.ts';
import {toggleTasklistCheckbox} from '../../markup/tasklist.ts';
import {easyMDEToolbarActions} from './EasyMDEToolbarActions.ts';
import {initTextExpander} from './TextExpander.ts';
import {showErrorToast} from '../../modules/toast.ts';
@@ -17,13 +18,14 @@ import {POST} from '../../modules/fetch.ts';
import {
EventEditorContentChanged,
initTextareaMarkdown,
textareaInsertText,
replaceTextareaSelection,
triggerEditorContentChanged,
} from './EditorMarkdown.ts';
import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.ts';
import {createTippy} from '../../modules/tippy.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import type EasyMDE from 'easymde';
import {localUserSettings} from '../../modules/user-settings.ts';
/**
* validate if the given textarea is non-empty.
@@ -81,7 +83,9 @@ export class ComboMarkdownEditor {
textareaMarkdownToolbar: HTMLElement;
textareaAutosize: any;
dropzone: HTMLElement;
buttonMonospace: HTMLButtonElement;
dropzone: HTMLElement | null;
attachedDropzoneInst: any;
previewMode: string;
@@ -105,7 +109,7 @@ export class ComboMarkdownEditor {
await this.switchToUserPreference();
}
applyEditorHeights(el: HTMLElement, heights: Heights) {
applyEditorHeights(el: HTMLElement, heights: Heights | undefined) {
if (!heights) return;
if (heights.minHeight) el.style.minHeight = heights.minHeight;
if (heights.height) el.style.height = heights.height;
@@ -114,14 +118,14 @@ export class ComboMarkdownEditor {
setupContainer() {
this.supportEasyMDE = this.container.getAttribute('data-support-easy-mde') === 'true';
this.previewMode = this.container.getAttribute('data-content-mode');
this.previewUrl = this.container.getAttribute('data-preview-url');
this.previewContext = this.container.getAttribute('data-preview-context');
initTextExpander(this.container.querySelector('text-expander'));
this.previewMode = this.container.getAttribute('data-content-mode')!;
this.previewUrl = this.container.getAttribute('data-preview-url')!;
this.previewContext = this.container.getAttribute('data-preview-context')!;
initTextExpander(this.container.querySelector('text-expander')!);
}
setupTextarea() {
this.textarea = this.container.querySelector('.markdown-text-editor');
this.textarea = this.container.querySelector('.markdown-text-editor')!;
this.textarea._giteaComboMarkdownEditor = this;
this.textarea.id = generateElemId(`_combo_markdown_editor_`);
this.textarea.addEventListener('input', () => triggerEditorContentChanged(this.container));
@@ -131,7 +135,7 @@ export class ComboMarkdownEditor {
this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130});
}
this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
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
@@ -140,23 +144,17 @@ export class ComboMarkdownEditor {
if (el.nodeName === 'BUTTON' && !el.getAttribute('type')) el.setAttribute('type', 'button');
}
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) => {
this.buttonMonospace = this.container.querySelector('.markdown-switch-monospace')!;
this.applyMonospace();
this.buttonMonospace.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 enabled = !localUserSettings.getBoolean('markdown-editor-monospace');
localUserSettings.setBoolean('markdown-editor-monospace', enabled);
applyMonospaceToAllEditors();
});
if (this.supportEasyMDE) {
const easymdeButton = this.container.querySelector('.markdown-switch-easymde');
const easymdeButton = this.container.querySelector('.markdown-switch-easymde')!;
easymdeButton.addEventListener('click', async (e) => {
e.preventDefault();
this.userPreferredEditor = 'easymde';
@@ -173,7 +171,7 @@ export class ComboMarkdownEditor {
async setupDropzone() {
const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
if (!dropzoneParentContainer) return;
this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone');
this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container')!)?.querySelector('.dropzone') ?? null;
if (!this.dropzone) return;
this.attachedDropzoneInst = await initDropzone(this.dropzone);
@@ -212,13 +210,14 @@ export class ComboMarkdownEditor {
// 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 tabIdSuffix = generateElemId();
this.tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer');
this.tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
const tabsArr = Array.from(tabs);
this.tabEditor = tabsArr.find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer')!;
this.tabPreviewer = tabsArr.find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer')!;
this.tabEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]')!;
const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]')!;
panelEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
panelPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
@@ -238,6 +237,20 @@ export class ComboMarkdownEditor {
const response = await POST(this.previewUrl, {data: formData});
const data = await response.text();
renderPreviewPanelContent(panelPreviewer, data);
// enable task list checkboxes in preview and sync state back to the editor
for (const checkbox of panelPreviewer.querySelectorAll<HTMLInputElement>('.task-list-item input[type=checkbox]')) {
checkbox.disabled = false;
checkbox.addEventListener('input', () => {
const position = parseInt(checkbox.getAttribute('data-source-position')!) + 1;
const newContent = toggleTasklistCheckbox(this.value(), position, checkbox.checked);
if (newContent === null) {
checkbox.checked = !checkbox.checked;
return;
}
this.value(newContent);
triggerEditorContentChanged(this.container);
});
}
});
}
@@ -254,8 +267,8 @@ export class ComboMarkdownEditor {
}
initMarkdownButtonTableAdd() {
const addTableButton = this.container.querySelector('.markdown-button-table-add');
const addTablePanel = this.container.querySelector('.markdown-add-table-panel');
const addTableButton = this.container.querySelector('.markdown-button-table-add')!;
const addTablePanel = this.container.querySelector('.markdown-add-table-panel')!;
// here the tippy can't attach to the button because the button already owns a tippy for tooltip
const addTablePanelTippy = createTippy(addTablePanel, {
content: addTablePanel,
@@ -267,12 +280,12 @@ export class ComboMarkdownEditor {
});
addTableButton.addEventListener('click', () => addTablePanelTippy.show());
addTablePanel.querySelector('.ui.button.primary').addEventListener('click', () => {
let rows = parseInt(addTablePanel.querySelector<HTMLInputElement>('[name=rows]').value);
let cols = parseInt(addTablePanel.querySelector<HTMLInputElement>('[name=cols]').value);
addTablePanel.querySelector('.ui.button.primary')!.addEventListener('click', () => {
let rows = parseInt(addTablePanel.querySelector<HTMLInputElement>('.add-table-rows')!.value);
let cols = parseInt(addTablePanel.querySelector<HTMLInputElement>('.add-table-cols')!.value);
rows = Math.max(1, Math.min(100, rows));
cols = Math.max(1, Math.min(100, cols));
textareaInsertText(this.textarea, `\n${this.generateMarkdownTable(rows, cols)}\n\n`);
replaceTextareaSelection(this.textarea, `\n${this.generateMarkdownTable(rows, cols)}\n\n`);
addTablePanelTippy.hide();
});
}
@@ -320,8 +333,10 @@ export class ComboMarkdownEditor {
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 [{default: EasyMDE}] = await Promise.all([
import('easymde'),
import('../../../css/easymde.css'),
]);
const easyMDEOpt: EasyMDE.Options = {
autoDownloadFontAwesome: false,
element: this.textarea,
@@ -360,7 +375,7 @@ export class ComboMarkdownEditor {
}
},
});
this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll'), this.options.editorHeights);
this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll')!, this.options.editorHeights);
await attachTribute(this.easyMDE.codemirror.getInputField());
if (this.dropzone) {
initEasyMDEPaste(this.easyMDE, this.dropzone);
@@ -368,7 +383,7 @@ export class ComboMarkdownEditor {
hideElem(this.textareaMarkdownToolbar);
}
value(v: any = undefined) {
value(v?: any) {
if (v === undefined) {
if (this.easyMDE) {
return this.easyMDE.value();
@@ -401,15 +416,32 @@ export class ComboMarkdownEditor {
}
}
get userPreferredEditor() {
return window.localStorage.getItem(`markdown-editor-${this.previewMode ?? 'default'}`);
get userPreferredEditor(): string {
return localUserSettings.getString(`markdown-editor-${this.previewMode ?? 'default'}`);
}
set userPreferredEditor(s) {
window.localStorage.setItem(`markdown-editor-${this.previewMode ?? 'default'}`, s);
set userPreferredEditor(s: string) {
localUserSettings.setString(`markdown-editor-${this.previewMode ?? 'default'}`, s);
}
applyMonospace() {
const enabled = localUserSettings.getBoolean('markdown-editor-monospace');
const text = this.buttonMonospace.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text')!;
this.textarea.classList.toggle('tw-font-mono', enabled);
this.buttonMonospace.setAttribute('data-tooltip-content', text);
this.buttonMonospace.setAttribute('aria-checked', String(enabled));
}
}
export function getComboMarkdownEditor(el: any) {
function applyMonospaceToAllEditors() {
const editors = document.querySelectorAll<ComboMarkdownEditorContainer>('.combo-markdown-editor');
for (const editorContainer of editors) {
const editor = getComboMarkdownEditor(editorContainer);
if (editor) editor.applyMonospace();
}
}
export function getComboMarkdownEditor(el: any): ComboMarkdownEditor | null {
if (!el) return null;
if (el.length) el = el[0];
return el._giteaComboMarkdownEditor;
package/gitea/source/web_src/js/features/comp/ConfirmModal.ts
+4
View File
@@ -2,6 +2,7 @@ import {svg} from '../../svg.ts';
import {html, htmlRaw} from '../../utils/html.ts';
import {createElementFromHTML} from '../../utils/dom.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import {hideToastsAll} from '../../modules/toast.ts';
const {i18n} = window.config;
@@ -27,6 +28,9 @@ export function createConfirmModal({header = '', content = '', confirmButtonColo
export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<boolean> {
if (!(modal instanceof HTMLElement)) modal = createConfirmModal(modal);
// hide existing toasts when we need to show a new modal, otherwise the toasts only interfere the UI
// it's fine to do so because the modal is triggered by user's explicit action, so the user should already have read the toast messages
hideToastsAll();
return new Promise((resolve) => {
const $modal = fomanticQuery(modal);
$modal.modal({
package/gitea/source/web_src/js/features/comp/Cropper.ts
+7 -6
View File
@@ -1,4 +1,4 @@
import {showElem, type DOMEvent} from '../../utils/dom.ts';
import {showElem} from '../../utils/dom.ts';
type CropperOpts = {
container: HTMLElement,
@@ -7,7 +7,7 @@ type CropperOpts = {
};
async function initCompCropper({container, fileInput, imageSource}: CropperOpts) {
const {default: Cropper} = await import(/* webpackChunkName: "cropperjs" */'cropperjs');
const {default: Cropper} = await import('cropperjs');
let currentFileName = '';
let currentFileLastModified = 0;
const cropper = new Cropper(imageSource, {
@@ -17,6 +17,7 @@ async function initCompCropper({container, fileInput, imageSource}: CropperOpts)
crop() {
const canvas = cropper.getCroppedCanvas();
canvas.toBlob((blob) => {
if (!blob) return;
const croppedFileName = currentFileName.replace(/\.[^.]{3,4}$/, '.png');
const croppedFile = new File([blob], croppedFileName, {type: 'image/png', lastModified: currentFileLastModified});
const dataTransfer = new DataTransfer();
@@ -26,9 +27,9 @@ async function initCompCropper({container, fileInput, imageSource}: CropperOpts)
},
});
fileInput.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
const files = e.target.files;
if (files?.length > 0) {
fileInput.addEventListener('input', (e) => {
const files = (e.target as HTMLInputElement).files;
if (files?.length) {
currentFileName = files[0].name;
currentFileLastModified = files[0].lastModified;
const fileURL = URL.createObjectURL(files[0]);
@@ -42,6 +43,6 @@ async function initCompCropper({container, fileInput, imageSource}: CropperOpts)
export async function initAvatarUploaderWithCropper(fileInput: HTMLInputElement) {
const panel = fileInput.nextElementSibling as HTMLElement;
if (!panel?.matches('.cropper-panel')) throw new Error('Missing cropper panel for avatar uploader');
const imageSource = panel.querySelector<HTMLImageElement>('.cropper-source');
const imageSource = panel.querySelector<HTMLImageElement>('.cropper-source')!;
await initCompCropper({container: panel, fileInput, imageSource});
}
package/gitea/source/web_src/js/features/comp/EditorMarkdown.test.ts
+6 -6
View File
@@ -24,15 +24,15 @@ test('textareaSplitLines', () => {
});
test('markdownHandleIndention', () => {
const testInput = (input: string, expected?: string) => {
const testInput = (input: string, expected: string | null) => {
const inputPos = input.indexOf('|');
input = input.replace('|', '');
input = input.replaceAll('|', '');
const ret = markdownHandleIndention({value: input, selStart: inputPos, selEnd: inputPos});
if (expected === null) {
expect(ret).toEqual({handled: false});
} else {
const expectedPos = expected.indexOf('|');
expected = expected.replace('|', '');
expected = expected.replaceAll('|', '');
expect(ret).toEqual({
handled: true,
valueSelection: {value: expected, selStart: expectedPos, selEnd: expectedPos},
@@ -171,9 +171,9 @@ test('EditorMarkdown', () => {
pos: number;
};
const testInput = (input: ValueWithCursor, result: ValueWithCursor) => {
const intputValue = typeof input === 'string' ? input : input.value;
const inputPos = typeof input === 'string' ? intputValue.length : input.pos;
textarea.value = intputValue;
const inputValue = typeof input === 'string' ? input : input.value;
const inputPos = typeof input === 'string' ? inputValue.length : input.pos;
textarea.value = inputValue;
textarea.setSelectionRange(inputPos, inputPos);
const e = new KeyboardEvent('keydown', {key: 'Enter', cancelable: true});
package/gitea/source/web_src/js/features/comp/EditorMarkdown.ts
+47 -12
View File
@@ -4,14 +4,23 @@ export function triggerEditorContentChanged(target: HTMLElement) {
target.dispatchEvent(new CustomEvent(EventEditorContentChanged, {bubbles: true}));
}
export function textareaInsertText(textarea: HTMLTextAreaElement, value: string) {
const startPos = textarea.selectionStart;
const endPos = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, startPos) + value + textarea.value.substring(endPos);
textarea.selectionStart = startPos;
textarea.selectionEnd = startPos + value.length;
/** replace selected text or insert text by creating a new edit history entry,
* e.g. CTRL-Z works after this */
export function replaceTextareaSelection(textarea: HTMLTextAreaElement, text: string) {
const before = textarea.value.slice(0, textarea.selectionStart);
const after = textarea.value.slice(textarea.selectionEnd);
textarea.focus();
triggerEditorContentChanged(textarea);
let success = false;
try {
success = document.execCommand('insertText', false, text); // eslint-disable-line @typescript-eslint/no-deprecated
} catch {}
// fall back to regular replacement
if (!success) {
textarea.value = `${before}${text}${after}`;
triggerEditorContentChanged(textarea);
}
}
type TextareaValueSelection = {
@@ -45,7 +54,8 @@ function handleIndentSelection(textarea: HTMLTextAreaElement, e: KeyboardEvent)
}
// re-calculating the selection range
let newSelStart, newSelEnd;
let newSelStart: number | null = null;
let newSelEnd: number | null = null;
pos = 0;
for (let i = 0; i < lines.length; i++) {
if (i === selectedLines[0]) {
@@ -134,7 +144,7 @@ export function markdownHandleIndention(tvs: TextareaValueSelection): MarkdownHa
// parse the indention
let lineContent = line;
const indention = /^\s*/.exec(lineContent)[0];
const indention = (/^\s*/.exec(lineContent) || [''])[0];
lineContent = lineContent.slice(indention.length);
if (linesBuf.inlinePos <= indention.length) return unhandled; // if cursor is at the indention, do nothing, let the browser handle it
@@ -175,22 +185,45 @@ export function markdownHandleIndention(tvs: TextareaValueSelection): MarkdownHa
return {handled: true, valueSelection: {value: linesBuf.lines.join('\n'), selStart: newPos, selEnd: newPos}};
}
function handleNewline(textarea: HTMLTextAreaElement, e: Event) {
if ((e as KeyboardEvent).isComposing) return;
function handleNewline(textarea: HTMLTextAreaElement, e: KeyboardEvent) {
if (e.isComposing) return;
const ret = markdownHandleIndention({value: textarea.value, selStart: textarea.selectionStart, selEnd: textarea.selectionEnd});
if (!ret.handled) return;
if (!ret.handled || !ret.valueSelection) return; // FIXME: the "handled" seems redundant, only valueSelection is enough (null for unhandled)
e.preventDefault();
textarea.value = ret.valueSelection.value;
textarea.setSelectionRange(ret.valueSelection.selStart, ret.valueSelection.selEnd);
triggerEditorContentChanged(textarea);
}
// Keys that act as dead keys will not work because the spec dictates that such keys are
// emitted as `Dead` in e.key instead of the actual key.
const pairs = new Map<string, string>([
["'", "'"],
['"', '"'],
['`', '`'],
['(', ')'],
['[', ']'],
['{', '}'],
['<', '>'],
]);
function handlePairCharacter(textarea: HTMLTextAreaElement, e: KeyboardEvent): void {
const selStart = textarea.selectionStart;
const selEnd = textarea.selectionEnd;
if (selEnd === selStart) return; // do not process when no selection
e.preventDefault();
const inner = textarea.value.substring(selStart, selEnd);
replaceTextareaSelection(textarea, `${e.key}${inner}${pairs.get(e.key)}`);
textarea.setSelectionRange(selStart + 1, selEnd + 1);
}
function isTextExpanderShown(textarea: HTMLElement): boolean {
return Boolean(textarea.closest('text-expander')?.querySelector('.suggestions'));
}
export function initTextareaMarkdown(textarea: HTMLTextAreaElement) {
textarea.addEventListener('keydown', (e) => {
if (e.isComposing) return;
if (isTextExpanderShown(textarea)) return;
if (e.key === 'Tab' && !e.ctrlKey && !e.metaKey && !e.altKey) {
// use Tab/Shift-Tab to indent/unindent the selected lines
@@ -198,6 +231,8 @@ export function initTextareaMarkdown(textarea: HTMLTextAreaElement) {
} else if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey) {
// use Enter to insert a new line with the same indention and prefix
handleNewline(textarea, e);
} else if (pairs.has(e.key)) {
handlePairCharacter(textarea, e);
}
});
}
package/gitea/source/web_src/js/features/comp/EditorUpload.ts
+9 -6
View File
@@ -1,5 +1,5 @@
import {imageInfo} from '../../utils/image.ts';
import {textareaInsertText, triggerEditorContentChanged} from './EditorMarkdown.ts';
import {replaceTextareaSelection, triggerEditorContentChanged} from './EditorMarkdown.ts';
import {
DropzoneCustomEventRemovedFile,
DropzoneCustomEventUploadDone,
@@ -43,7 +43,7 @@ class TextareaEditor {
}
insertPlaceholder(value: string) {
textareaInsertText(this.editor, value);
replaceTextareaSelection(this.editor, value);
}
replacePlaceholder(oldVal: string, newVal: string) {
@@ -121,7 +121,10 @@ function getPastedImages(e: ClipboardEvent) {
const images: Array<File> = [];
for (const item of e.clipboardData?.items ?? []) {
if (item.type?.startsWith('image/')) {
images.push(item.getAsFile());
const file = item.getAsFile();
if (file) {
images.push(file);
}
}
}
return images;
@@ -135,7 +138,7 @@ export function initEasyMDEPaste(easyMDE: EasyMDE, dropzoneEl: HTMLElement) {
handleUploadFiles(editor, dropzoneEl, images, e);
});
easyMDE.codemirror.on('drop', (_, e) => {
if (!e.dataTransfer.files.length) return;
if (!e.dataTransfer?.files.length) return;
handleUploadFiles(editor, dropzoneEl, e.dataTransfer.files, e);
});
dropzoneEl.dropzone.on(DropzoneCustomEventRemovedFile, ({fileUuid}) => {
@@ -145,7 +148,7 @@ export function initEasyMDEPaste(easyMDE: EasyMDE, dropzoneEl: HTMLElement) {
});
}
export function initTextareaEvents(textarea: HTMLTextAreaElement, dropzoneEl: HTMLElement) {
export function initTextareaEvents(textarea: HTMLTextAreaElement, dropzoneEl: HTMLElement | null) {
subscribe(textarea); // enable paste features
textarea.addEventListener('paste', (e: ClipboardEvent) => {
const images = getPastedImages(e);
@@ -154,7 +157,7 @@ export function initTextareaEvents(textarea: HTMLTextAreaElement, dropzoneEl: HT
}
});
textarea.addEventListener('drop', (e: DragEvent) => {
if (!e.dataTransfer.files.length) return;
if (!e.dataTransfer?.files.length) return;
if (!dropzoneEl) return;
handleUploadFiles(new TextareaEditor(textarea), dropzoneEl, e.dataTransfer.files, e);
});
package/gitea/source/web_src/js/features/comp/LabelEdit.ts
+14 -14
View File
@@ -14,17 +14,17 @@ export function initCompLabelEdit(pageSelector: string) {
const elModal = pageContent.querySelector<HTMLElement>('#issue-label-edit-modal');
if (!elModal) return;
const elLabelId = elModal.querySelector<HTMLInputElement>('input[name="id"]');
const elNameInput = elModal.querySelector<HTMLInputElement>('.label-name-input');
const elExclusiveField = elModal.querySelector('.label-exclusive-input-field');
const elExclusiveInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-input');
const elExclusiveWarning = elModal.querySelector('.label-exclusive-warning');
const elExclusiveOrderField = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input-field');
const elExclusiveOrderInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input');
const elIsArchivedField = elModal.querySelector('.label-is-archived-input-field');
const elIsArchivedInput = elModal.querySelector<HTMLInputElement>('.label-is-archived-input');
const elDescInput = elModal.querySelector<HTMLInputElement>('.label-desc-input');
const elColorInput = elModal.querySelector<HTMLInputElement>('.color-picker-combo input');
const elLabelId = elModal.querySelector<HTMLInputElement>('input[name="id"]')!;
const elNameInput = elModal.querySelector<HTMLInputElement>('.label-name-input')!;
const elExclusiveField = elModal.querySelector('.label-exclusive-input-field')!;
const elExclusiveInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-input')!;
const elExclusiveWarning = elModal.querySelector('.label-exclusive-warning')!;
const elExclusiveOrderField = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input-field')!;
const elExclusiveOrderInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input')!;
const elIsArchivedField = elModal.querySelector('.label-is-archived-input-field')!;
const elIsArchivedInput = elModal.querySelector<HTMLInputElement>('.label-is-archived-input')!;
const elDescInput = elModal.querySelector<HTMLInputElement>('.label-desc-input')!;
const elColorInput = elModal.querySelector<HTMLInputElement>('.color-picker-combo input')!;
const syncModalUi = () => {
const hasScope = nameHasScope(elNameInput.value);
@@ -37,13 +37,13 @@ export function initCompLabelEdit(pageSelector: string) {
if (parseInt(elExclusiveOrderInput.value) <= 0) {
elExclusiveOrderInput.style.color = 'var(--color-placeholder-text) !important';
} else {
elExclusiveOrderInput.style.color = null;
elExclusiveOrderInput.style.removeProperty('color');
}
};
const showLabelEditModal = (btn:HTMLElement) => {
// the "btn" should contain the label's attributes by its `data-label-xxx` attributes
const form = elModal.querySelector<HTMLFormElement>('form');
const form = elModal.querySelector<HTMLFormElement>('form')!;
elLabelId.value = btn.getAttribute('data-label-id') || '';
elNameInput.value = btn.getAttribute('data-label-name') || '';
elExclusiveOrderInput.value = btn.getAttribute('data-label-exclusive-order') || '0';
@@ -59,7 +59,7 @@ export function initCompLabelEdit(pageSelector: string) {
// if a label was not exclusive but has issues, then it should warn user if it will become exclusive
const numIssues = parseInt(btn.getAttribute('data-label-num-issues') || '0');
elModal.toggleAttribute('data-need-warn-exclusive', !elExclusiveInput.checked && numIssues > 0);
elModal.querySelector('.header').textContent = isEdit ? elModal.getAttribute('data-text-edit-label') : elModal.getAttribute('data-text-new-label');
elModal.querySelector('.header')!.textContent = isEdit ? elModal.getAttribute('data-text-edit-label') : elModal.getAttribute('data-text-new-label');
const curPageLink = elModal.getAttribute('data-current-page-link');
form.action = isEdit ? `${curPageLink}/edit` : `${curPageLink}/new`;
package/gitea/source/web_src/js/features/comp/ReactionSelector.ts
+4 -5
View File
@@ -1,18 +1,17 @@
import {POST} from '../../modules/fetch.ts';
import type {DOMEvent} from '../../utils/dom.ts';
import {registerGlobalEventFunc} from '../../modules/observer.ts';
export function initCompReactionSelector() {
registerGlobalEventFunc('click', 'onCommentReactionButtonClick', async (target: HTMLElement, e: DOMEvent<MouseEvent>) => {
registerGlobalEventFunc('click', 'onCommentReactionButtonClick', async (target: HTMLElement, e: Event) => {
// there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
e.preventDefault();
if (target.classList.contains('disabled')) return;
const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
const reactionContent = target.getAttribute('data-reaction-content');
const actionUrl = target.closest('[data-action-url]')!.getAttribute('data-action-url');
const reactionContent = target.getAttribute('data-reaction-content')!;
const commentContainer = target.closest('.comment-container');
const commentContainer = target.closest('.comment-container')!;
const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
package/gitea/source/web_src/js/features/comp/SearchRepoBox.ts
+6 -1
View File
@@ -5,10 +5,15 @@ const {appSubUrl} = window.config;
export function initCompSearchRepoBox(el: HTMLElement) {
const uid = el.getAttribute('data-uid');
const exclusive = el.getAttribute('data-exclusive');
let url = `${appSubUrl}/repo/search?q={query}&uid=${uid}`;
if (exclusive === 'true') {
url += `&exclusive=true`;
}
fomanticQuery(el).search({
minCharacters: 2,
apiSettings: {
url: `${appSubUrl}/repo/search?q={query}&uid=${uid}`,
url,
onResponse(response: any) {
const items = [];
for (const item of response.data) {
package/gitea/source/web_src/js/features/comp/SearchUserBox.ts
+3 -2
View File
@@ -10,13 +10,14 @@ export function initCompSearchUserBox() {
const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
const includeOrgs = searchUserBox.getAttribute('data-include-orgs') === 'true';
fomanticQuery(searchUserBox).search({
minCharacters: 2,
apiSettings: {
url: `${appSubUrl}/user/search_candidates?q={query}`,
url: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
onResponse(response: any) {
const resultItems = [];
const searchQuery = searchUserBox.querySelector('input').value;
const searchQuery = searchUserBox.querySelector('input')!.value;
const searchQueryUppercase = searchQuery.toUpperCase();
for (const item of response.data) {
const resultItem = {
package/gitea/source/web_src/js/features/comp/TextExpander.ts
+32 -27
View File
@@ -3,7 +3,7 @@ import {emojiString} from '../emoji.ts';
import {svg} from '../../svg.ts';
import {parseIssueHref, parseRepoOwnerPathInfo} from '../../utils.ts';
import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
import {getIssueColor, getIssueIcon} from '../issue.ts';
import {getIssueColorClass, getIssueIcon} from '../issue.ts';
import {debounce} from 'perfect-debounce';
import type TextExpanderElement from '@github/text-expander-element';
import type {TextExpanderChangeEvent, TextExpanderResult} from '@github/text-expander-element';
@@ -25,7 +25,7 @@ async function fetchIssueSuggestions(key: string, text: string): Promise<TextExp
for (const issue of matches) {
const li = createElementFromAttrs(
'li', {role: 'option', class: 'tw-flex tw-gap-2', 'data-value': `${key}${issue.number}`},
createElementFromHTML(svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)])),
createElementFromHTML(svg(getIssueIcon(issue), 16, [getIssueColorClass(issue)])),
createElementFromAttrs('span', null, `#${issue.number}`),
createElementFromAttrs('span', null, issue.title),
);
@@ -37,7 +37,8 @@ async function fetchIssueSuggestions(key: string, text: string): Promise<TextExp
export function initTextExpander(expander: TextExpanderElement) {
if (!expander) return;
const textarea = expander.querySelector<HTMLTextAreaElement>('textarea');
const textarea = expander.querySelector<HTMLTextAreaElement>('textarea')!;
const mentionsUrl = expander.closest('[data-mentions-url]')?.getAttribute('data-mentions-url');
// help to fix the text-expander "multiword+promise" bug: do not show the popup when there is no "#" before current line
const shouldShowIssueSuggestions = () => {
@@ -64,6 +65,7 @@ export function initTextExpander(expander: TextExpanderElement) {
}, 300); // to match onInputDebounce delay
expander.addEventListener('text-expander-change', (e: TextExpanderChangeEvent) => {
if (!e.detail) return;
const {key, text, provide} = e.detail;
if (key === ':') {
const matches = matchEmoji(text);
@@ -82,36 +84,39 @@ export function initTextExpander(expander: TextExpanderElement) {
provide({matched: true, fragment: ul});
} else if (key === '@') {
const matches = matchMention(text);
if (!matches.length) return provide({matched: false});
provide((async (): Promise<TextExpanderResult> => {
if (!mentionsUrl) return {matched: false};
const matches = await matchMention(mentionsUrl, text);
if (!matches.length) return {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 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 img = document.createElement('img');
img.src = avatar;
li.append(img);
const nameSpan = document.createElement('span');
nameSpan.classList.add('name');
nameSpan.textContent = name;
li.append(nameSpan);
const nameSpan = document.createElement('span');
nameSpan.classList.add('name');
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);
if (fullname && fullname.toLowerCase() !== name) {
const fullnameSpan = document.createElement('span');
fullnameSpan.classList.add('fullname');
fullnameSpan.textContent = fullname;
li.append(fullnameSpan);
}
ul.append(li);
}
ul.append(li);
}
provide({matched: true, fragment: ul});
return {matched: true, fragment: ul};
})());
} else if (key === '#') {
provide(debouncedIssueSuggestions(key, text));
}
package/gitea/source/web_src/js/features/comp/WebHookEditor.ts
+6 -3
View File
@@ -27,7 +27,7 @@ export function initCompWebHookEditor() {
if (httpMethodInput) {
const updateContentType = function () {
const visible = httpMethodInput.value === 'POST';
toggleElem(document.querySelector('#content_type').closest('.field'), visible);
toggleElem(document.querySelector('#content_type')!.closest('.field')!, visible);
};
updateContentType();
httpMethodInput.addEventListener('change', updateContentType);
@@ -36,9 +36,12 @@ export function initCompWebHookEditor() {
// Test delivery
document.querySelector<HTMLButtonElement>('#test-delivery')?.addEventListener('click', async function () {
this.classList.add('is-loading', 'disabled');
await POST(this.getAttribute('data-link'));
await POST(this.getAttribute('data-link')!);
setTimeout(() => {
window.location.href = this.getAttribute('data-redirect');
const redirectUrl = this.getAttribute('data-redirect');
if (redirectUrl) {
window.location.href = redirectUrl;
}
}, 5000);
});
}
package/gitea/source/web_src/js/features/contributors.ts
+1 -1
View File
@@ -4,7 +4,7 @@ export async function initRepoContributors() {
const el = document.querySelector('#repo-contributors-chart');
if (!el) return;
const {default: RepoContributors} = await import(/* webpackChunkName: "contributors-graph" */'../components/RepoContributors.vue');
const {default: RepoContributors} = await import('../components/RepoContributors.vue');
try {
const View = createApp(RepoContributors, {
repoLink: el.getAttribute('data-repo-link'),
package/gitea/source/web_src/js/features/copycontent.ts
+1 -1
View File
@@ -20,7 +20,7 @@ export function initCopyContent() {
btn.classList.add('is-loading', 'loading-icon-2px');
try {
const res = await GET(rawFileLink, {credentials: 'include', redirect: 'follow'});
const contentType = res.headers.get('content-type');
const contentType = res.headers.get('content-type')!;
if (contentType.startsWith('image/') && !contentType.startsWith('image/svg')) {
isRasterImage = true;
package/gitea/source/web_src/js/features/dropzone.ts
+12 -13
View File
@@ -8,7 +8,7 @@ import {createElementFromHTML, createElementFromAttrs} from '../utils/dom.ts';
import {isImageFile, isVideoFile} from '../utils.ts';
import type {DropzoneFile, DropzoneOptions} from 'dropzone/index.js';
const {csrfToken, i18n} = window.config;
const {i18n} = window.config;
type CustomDropzoneFile = DropzoneFile & {uuid: string};
@@ -19,8 +19,8 @@ export const DropzoneCustomEventUploadDone = 'dropzone-custom-upload-done';
async function createDropzone(el: HTMLElement, opts: DropzoneOptions) {
const [{default: Dropzone}] = await Promise.all([
import(/* webpackChunkName: "dropzone" */'dropzone'),
import(/* webpackChunkName: "dropzone" */'dropzone/dist/dropzone.css'),
import('dropzone'),
import('dropzone/dist/dropzone.css'),
]);
return new Dropzone(el, opts);
}
@@ -28,8 +28,7 @@ async function createDropzone(el: HTMLElement, opts: DropzoneOptions) {
export function generateMarkdownLinkForAttachment(file: Partial<CustomDropzoneFile>, {width, dppx}: {width?: number, dppx?: number} = {}) {
let fileMarkdown = `[${file.name}](/attachments/${file.uuid})`;
if (isImageFile(file)) {
fileMarkdown = `!${fileMarkdown}`;
if (width > 0 && dppx > 1) {
if (width && width > 0 && dppx && dppx > 1) {
// Scale down images from HiDPI monitors. This uses the <img> tag because it's the only
// method to change image size in Markdown that is supported by all implementations.
// Make the image link relative to the repo path, then the final URL is "/sub-path/owner/repo/attachments/{uuid}"
@@ -57,7 +56,7 @@ function addCopyLink(file: Partial<CustomDropzoneFile>) {
const success = await clippie(generateMarkdownLinkForAttachment(file));
showTemporaryTooltip(e.target as Element, success ? i18n.copy_success : i18n.copy_error);
});
file.previewTemplate.append(copyLinkEl);
file.previewTemplate!.append(copyLinkEl);
}
type FileUuidDict = Record<string, {submitted: boolean}>;
@@ -67,15 +66,14 @@ type FileUuidDict = Record<string, {submitted: boolean}>;
*/
export async function initDropzone(dropzoneEl: HTMLElement) {
const listAttachmentsUrl = dropzoneEl.closest('[data-attachment-url]')?.getAttribute('data-attachment-url');
const removeAttachmentUrl = dropzoneEl.getAttribute('data-remove-url');
const attachmentBaseLinkUrl = dropzoneEl.getAttribute('data-link-url');
const removeAttachmentUrl = dropzoneEl.getAttribute('data-remove-url')!;
const attachmentBaseLinkUrl = dropzoneEl.getAttribute('data-link-url')!;
let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
let fileUuidDict: 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 opts: Record<string, any> = {
url: dropzoneEl.getAttribute('data-upload-url'),
headers: {'X-Csrf-Token': csrfToken},
acceptedFiles: ['*/*', ''].includes(dropzoneEl.getAttribute('data-accepts')) ? null : dropzoneEl.getAttribute('data-accepts'),
acceptedFiles: ['*/*', ''].includes(dropzoneEl.getAttribute('data-accepts')!) ? null : dropzoneEl.getAttribute('data-accepts'),
addRemoveLinks: true,
dictDefaultMessage: dropzoneEl.getAttribute('data-default-message'),
dictInvalidFileType: dropzoneEl.getAttribute('data-invalid-input-type'),
@@ -97,7 +95,7 @@ export async function initDropzone(dropzoneEl: HTMLElement) {
file.uuid = resp.uuid;
fileUuidDict[file.uuid] = {submitted: false};
const input = createElementFromAttrs('input', {name: 'files', type: 'hidden', id: `dropzone-file-${resp.uuid}`, value: resp.uuid});
dropzoneEl.querySelector('.files').append(input);
dropzoneEl.querySelector('.files')!.append(input);
addCopyLink(file);
dzInst.emit(DropzoneCustomEventUploadDone, {file});
});
@@ -121,6 +119,7 @@ export async function initDropzone(dropzoneEl: HTMLElement) {
dzInst.on(DropzoneCustomEventReloadFiles, async () => {
try {
if (!listAttachmentsUrl) return;
const resp = await GET(listAttachmentsUrl);
const respData = await resp.json();
// do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
@@ -128,7 +127,7 @@ export async function initDropzone(dropzoneEl: HTMLElement) {
dzInst.removeAllFiles(true);
disableRemovedfileEvent = false;
dropzoneEl.querySelector('.files').innerHTML = '';
dropzoneEl.querySelector('.files')!.innerHTML = '';
for (const el of dropzoneEl.querySelectorAll('.dz-preview')) el.remove();
fileUuidDict = {};
for (const attachment of respData) {
@@ -142,7 +141,7 @@ export async function initDropzone(dropzoneEl: HTMLElement) {
addCopyLink(file); // it is from server response, so no "type"
fileUuidDict[file.uuid] = {submitted: true};
const input = createElementFromAttrs('input', {name: 'files', type: 'hidden', id: `dropzone-file-${file.uuid}`, value: file.uuid});
dropzoneEl.querySelector('.files').append(input);
dropzoneEl.querySelector('.files')!.append(input);
}
if (!dropzoneEl.querySelector('.dz-preview')) {
dropzoneEl.classList.remove('dz-started');
package/gitea/source/web_src/js/features/eventsource.sharedworker.ts
-147
View File
@@ -1,147 +0,0 @@
class Source {
url: string;
eventSource: EventSource;
listening: Record<string, boolean>;
clients: Array<MessagePort>;
constructor(url: string) {
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: MessagePort) {
if (this.clients.includes(port)) return;
this.clients.push(port);
port.postMessage({
type: 'status',
message: `registered to ${this.url}`,
});
}
deregister(port: MessagePort) {
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: string) {
if (this.listening[eventType]) return;
this.listening[eventType] = true;
this.eventSource.addEventListener(eventType, (event) => {
this.notifyClients({
type: eventType,
data: event.data,
});
});
}
notifyClients(event: {type: string, data: any}) {
for (const client of this.clients) {
client.postMessage(event);
}
}
status(port: MessagePort) {
port.postMessage({
type: 'status',
message: `url: ${this.url} readyState: ${this.eventSource.readyState}`,
});
}
}
const sourcesByUrl: Map<string, Source | null> = new Map();
const sourcesByPort: Map<MessagePort, Source | null> = new Map();
// @ts-expect-error: typescript bug?
self.addEventListener('connect', (e: MessageEvent) => {
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.get(url)) {
// we have a Source registered to this url
const source = sourcesByUrl.get(url);
source.register(port);
sourcesByPort.set(port, source);
return;
}
let source = sourcesByPort.get(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.set(source.url, null);
}
}
// Create a new Source
source = new Source(url);
source.register(port);
sourcesByUrl.set(url, source);
sourcesByPort.set(port, source);
} else if (event.data.type === 'listen') {
const source = sourcesByPort.get(port);
source.listen(event.data.eventType);
} else if (event.data.type === 'close') {
const source = sourcesByPort.get(port);
if (!source) return;
const count = source.deregister(port);
if (count === 0) {
source.close();
sourcesByUrl.set(source.url, null);
sourcesByPort.set(port, null);
}
} else if (event.data.type === 'status') {
const source = sourcesByPort.get(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();
}
});
package/gitea/source/web_src/js/features/file-view.ts
+13 -26
View File
@@ -1,29 +1,19 @@
import type {FileRenderPlugin} from '../render/plugin.ts';
import {newRenderPlugin3DViewer} from '../render/plugins/3d-viewer.ts';
import {newRenderPluginPdfViewer} from '../render/plugins/pdf-viewer.ts';
import type {InplaceRenderPlugin} from '../render/plugin.ts';
import {newInplacePluginPdfViewer} from '../render/plugins/inplace-pdf-viewer.ts';
import {registerGlobalInitFunc} from '../modules/observer.ts';
import {createElementFromHTML, showElem, toggleElemClass} from '../utils/dom.ts';
import {createElementFromHTML} from '../utils/dom.ts';
import {html} from '../utils/html.ts';
import {basename} from '../utils.ts';
const plugins: FileRenderPlugin[] = [];
const inplacePlugins: InplaceRenderPlugin[] = [];
function initPluginsOnce(): void {
if (plugins.length) return;
plugins.push(newRenderPlugin3DViewer(), newRenderPluginPdfViewer());
function initInplacePluginsOnce(): void {
if (inplacePlugins.length) return;
inplacePlugins.push(newInplacePluginPdfViewer());
}
function findFileRenderPlugin(filename: string, mimeType: string): FileRenderPlugin | null {
return plugins.find((plugin) => plugin.canHandle(filename, mimeType)) || null;
}
function showRenderRawFileButton(elFileView: HTMLElement, renderContainer: HTMLElement | null): void {
const toggleButtons = elFileView.querySelector('.file-view-toggle-buttons');
showElem(toggleButtons);
const displayingRendered = Boolean(renderContainer);
toggleElemClass(toggleButtons.querySelectorAll('.file-view-toggle-source'), 'active', !displayingRendered); // it may not exist
toggleElemClass(toggleButtons.querySelector('.file-view-toggle-rendered'), 'active', displayingRendered);
// TODO: if there is only one button, hide it?
function findInplaceRenderPlugin(filename: string, mimeType: string): InplaceRenderPlugin | null {
return inplacePlugins.find((plugin) => plugin.canHandle(filename, mimeType)) || null;
}
async function renderRawFileToContainer(container: HTMLElement, rawFileLink: string, mimeType: string) {
@@ -32,7 +22,7 @@ async function renderRawFileToContainer(container: HTMLElement, rawFileLink: str
let rendered = false, errorMsg = '';
try {
const plugin = findFileRenderPlugin(basename(rawFileLink), mimeType);
const plugin = findInplaceRenderPlugin(basename(rawFileLink), mimeType);
if (plugin) {
container.classList.add('is-loading');
container.setAttribute('data-render-name', plugin.name); // not used yet
@@ -61,16 +51,13 @@ async function renderRawFileToContainer(container: HTMLElement, rawFileLink: str
export function initRepoFileView(): void {
registerGlobalInitFunc('initRepoFileView', async (elFileView: HTMLElement) => {
initPluginsOnce();
const rawFileLink = elFileView.getAttribute('data-raw-file-link');
initInplacePluginsOnce();
const rawFileLink = elFileView.getAttribute('data-raw-file-link')!;
const mimeType = elFileView.getAttribute('data-mime-type') || ''; // not used yet
// TODO: we should also provide the prefetched file head bytes to let the plugin decide whether to render or not
const plugin = findFileRenderPlugin(basename(rawFileLink), mimeType);
const plugin = findInplaceRenderPlugin(basename(rawFileLink), mimeType);
if (!plugin) return;
const renderContainer = elFileView.querySelector<HTMLElement>('.file-view-render-container');
showRenderRawFileButton(elFileView, renderContainer);
// maybe in the future multiple plugins can render the same file, so we should not assume only one plugin will render it
if (renderContainer) await renderRawFileToContainer(renderContainer, rawFileLink, mimeType);
});
}
package/gitea/source/web_src/js/features/heatmap.ts
+19 -5
View File
@@ -1,14 +1,24 @@
import {createApp} from 'vue';
import ActivityHeatmap from '../components/ActivityHeatmap.vue';
import {translateMonth, translateDay} from '../utils.ts';
import {GET} from '../modules/fetch.ts';
export function initHeatmap() {
const el = document.querySelector('#user-heatmap');
type HeatmapResponse = {
heatmapData: Array<[number, number]>; // [[1617235200, 2]] = [unix timestamp, count]
totalContributions: number;
};
export async function initHeatmap() {
const el = document.querySelector<HTMLElement>('#user-heatmap');
if (!el) return;
try {
const url = el.getAttribute('data-heatmap-url')!;
const resp = await GET(url);
if (!resp.ok) throw new Error(`Failed to load heatmap data: ${resp.status} ${resp.statusText}`);
const {heatmapData, totalContributions} = await resp.json() as HeatmapResponse;
const heatmap: Record<string, number> = {};
for (const {contributions, timestamp} of JSON.parse(el.getAttribute('data-heatmap-data'))) {
for (const [timestamp, contributions] of heatmapData) {
// Convert to user timezone and sum contributions by date
const dateStr = new Date(timestamp * 1000).toDateString();
heatmap[dateStr] = (heatmap[dateStr] || 0) + contributions;
@@ -18,6 +28,9 @@ export function initHeatmap() {
return {date: new Date(v), count: heatmap[v]};
});
const totalFormatted = totalContributions.toLocaleString();
const textTotalContributions = el.getAttribute('data-locale-total-contributions')!.replace('%s', totalFormatted);
// last heatmap tooltip localization attempt https://github.com/go-gitea/gitea/pull/24131/commits/a83761cbbae3c2e3b4bced71e680f44432073ac8
const locale = {
heatMapLocale: {
@@ -28,10 +41,11 @@ export function initHeatmap() {
less: el.getAttribute('data-locale-less'),
},
tooltipUnit: 'contributions',
textTotalContributions: el.getAttribute('data-locale-total-contributions'),
textTotalContributions,
noDataText: el.getAttribute('data-locale-no-contributions'),
};
const {default: ActivityHeatmap} = await import('../components/ActivityHeatmap.vue');
const View = createApp(ActivityHeatmap, {values, locale});
View.mount(el);
el.classList.remove('is-loading');
package/gitea/source/web_src/js/features/imagediff.ts
+112 -86
View File
@@ -3,7 +3,33 @@ import {hideElem, loadElem, queryElemChildren, queryElems} from '../utils/dom.ts
import {parseDom} from '../utils.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
function getDefaultSvgBoundsIfUndefined(text: string, src: string) {
type ImageContext = {
imageBefore: HTMLImageElement | undefined,
imageAfter: HTMLImageElement | undefined,
sizeBefore: {width: number, height: number},
sizeAfter: {width: number, height: number},
maxSize: {width: number, height: number},
ratio: [number, number, number, number],
};
type ImageInfo = {
path: string | null,
mime: string | null,
images: NodeListOf<HTMLImageElement>,
boundsInfo: HTMLElement | null,
};
type Bounds = {
width: number,
height: number,
} | null;
type SvgBoundsInfo = {
before: Bounds,
after: Bounds,
};
function getDefaultSvgBoundsIfUndefined(text: string, src: string): Bounds | null {
const defaultSize = 300;
const maxSize = 99999;
@@ -27,7 +53,7 @@ function getDefaultSvgBoundsIfUndefined(text: string, src: string) {
const viewBox = svg.viewBox.baseVal;
return {
width: defaultSize,
height: defaultSize * viewBox.width / viewBox.height,
height: defaultSize * viewBox.height / viewBox.width,
};
}
return {
@@ -38,7 +64,7 @@ function getDefaultSvgBoundsIfUndefined(text: string, src: string) {
return null;
}
function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement, svgBoundsInfo: any) {
function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement, svgBoundsInfo: SvgBoundsInfo): ImageContext {
const sizeAfter = {
width: svgBoundsInfo.after?.width || imageAfter?.width || 0,
height: svgBoundsInfo.after?.height || imageAfter?.height || 0,
@@ -78,9 +104,9 @@ class ImageDiff {
fomanticQuery(containerEl).find('.ui.menu.tabular .item').tab();
// the container may be hidden by "viewed" checkbox, so use the parent's width for reference
this.diffContainerWidth = Math.max(containerEl.closest('.diff-file-box').clientWidth - 300, 100);
this.diffContainerWidth = Math.max(containerEl.closest('.diff-file-box')!.clientWidth - 300, 100);
const imageInfos = [{
const imagePair: [ImageInfo, ImageInfo] = [{
path: containerEl.getAttribute('data-path-after'),
mime: containerEl.getAttribute('data-mime-after'),
images: containerEl.querySelectorAll<HTMLImageElement>('img.image-after'), // matches 3 <img>
@@ -92,26 +118,26 @@ class ImageDiff {
boundsInfo: containerEl.querySelector('.bounds-info-before'),
}];
const svgBoundsInfo: any = {before: null, after: null};
await Promise.all(imageInfos.map(async (info, index) => {
const svgBoundsInfo: SvgBoundsInfo = {before: null, after: null};
await Promise.all(imagePair.map(async (info, index) => {
const [success] = await Promise.all(Array.from(info.images, (img) => {
return loadElem(img, info.path);
return loadElem(img, info.path!);
}));
// only the first images is associated with boundsInfo
if (!success && info.boundsInfo) info.boundsInfo.textContent = '(image error)';
if (info.mime === 'image/svg+xml') {
const resp = await GET(info.path);
const resp = await GET(info.path!);
const text = await resp.text();
const bounds = getDefaultSvgBoundsIfUndefined(text, info.path);
const bounds = getDefaultSvgBoundsIfUndefined(text, info.path!);
svgBoundsInfo[index === 0 ? 'after' : 'before'] = bounds;
if (bounds) {
hideElem(info.boundsInfo);
hideElem(info.boundsInfo!);
}
}
}));
const imagesAfter = imageInfos[0].images;
const imagesBefore = imageInfos[1].images;
const imagesAfter = imagePair[0].images;
const imagesBefore = imagePair[1].images;
this.initSideBySide(createContext(imagesAfter[0], imagesBefore[0], svgBoundsInfo));
if (imagesAfter.length > 0 && imagesBefore.length > 0) {
@@ -121,97 +147,97 @@ class ImageDiff {
queryElemChildren(containerEl, '.image-diff-tabs', (el) => el.classList.remove('is-loading'));
}
initSideBySide(sizes: Record<string, any>) {
initSideBySide(ctx: ImageContext) {
let factor = 1;
if (sizes.maxSize.width > (this.diffContainerWidth - 24) / 2) {
factor = (this.diffContainerWidth - 24) / 2 / sizes.maxSize.width;
if (ctx.maxSize.width > (this.diffContainerWidth - 24) / 2) {
factor = (this.diffContainerWidth - 24) / 2 / ctx.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 widthChanged = ctx.imageAfter && ctx.imageBefore && ctx.imageAfter.naturalWidth !== ctx.imageBefore.naturalWidth;
const heightChanged = ctx.imageAfter && ctx.imageBefore && ctx.imageAfter.naturalHeight !== ctx.imageBefore.naturalHeight;
if (ctx.imageAfter) {
const boundsInfoAfterWidth = this.containerEl.querySelector('.bounds-info-after .bounds-info-width');
if (boundsInfoAfterWidth) {
boundsInfoAfterWidth.textContent = `${sizes.imageAfter.naturalWidth}px`;
boundsInfoAfterWidth.textContent = `${ctx.imageAfter.naturalWidth}px`;
boundsInfoAfterWidth.classList.toggle('green', widthChanged);
}
const boundsInfoAfterHeight = this.containerEl.querySelector('.bounds-info-after .bounds-info-height');
if (boundsInfoAfterHeight) {
boundsInfoAfterHeight.textContent = `${sizes.imageAfter.naturalHeight}px`;
boundsInfoAfterHeight.textContent = `${ctx.imageAfter.naturalHeight}px`;
boundsInfoAfterHeight.classList.toggle('green', heightChanged);
}
}
if (sizes.imageBefore) {
if (ctx.imageBefore) {
const boundsInfoBeforeWidth = this.containerEl.querySelector('.bounds-info-before .bounds-info-width');
if (boundsInfoBeforeWidth) {
boundsInfoBeforeWidth.textContent = `${sizes.imageBefore.naturalWidth}px`;
boundsInfoBeforeWidth.textContent = `${ctx.imageBefore.naturalWidth}px`;
boundsInfoBeforeWidth.classList.toggle('red', widthChanged);
}
const boundsInfoBeforeHeight = this.containerEl.querySelector('.bounds-info-before .bounds-info-height');
if (boundsInfoBeforeHeight) {
boundsInfoBeforeHeight.textContent = `${sizes.imageBefore.naturalHeight}px`;
boundsInfoBeforeHeight.textContent = `${ctx.imageBefore.naturalHeight}px`;
boundsInfoBeforeHeight.classList.toggle('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`;
if (ctx.imageAfter) {
const container = ctx.imageAfter.parentNode as HTMLElement;
ctx.imageAfter.style.width = `${ctx.sizeAfter.width * factor}px`;
ctx.imageAfter.style.height = `${ctx.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`;
container.style.width = `${ctx.sizeAfter.width * factor + 2}px`;
container.style.height = `${ctx.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`;
if (ctx.imageBefore) {
const container = ctx.imageBefore.parentNode as HTMLElement;
ctx.imageBefore.style.width = `${ctx.sizeBefore.width * factor}px`;
ctx.imageBefore.style.height = `${ctx.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`;
container.style.width = `${ctx.sizeBefore.width * factor + 2}px`;
container.style.height = `${ctx.sizeBefore.height * factor + 2}px`;
}
}
initSwipe(sizes: Record<string, any>) {
initSwipe(ctx: ImageContext) {
let factor = 1;
if (sizes.maxSize.width > this.diffContainerWidth - 12) {
factor = (this.diffContainerWidth - 12) / sizes.maxSize.width;
if (ctx.maxSize.width > this.diffContainerWidth - 12) {
factor = (this.diffContainerWidth - 12) / ctx.maxSize.width;
}
if (sizes.imageAfter) {
const imgParent = sizes.imageAfter.parentNode;
const swipeFrame = imgParent.parentNode;
sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`;
sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`;
imgParent.style.margin = `0px ${sizes.ratio[0] * factor}px`;
imgParent.style.width = `${sizes.sizeAfter.width * factor + 2}px`;
imgParent.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 (ctx.imageAfter) {
const imgParent = ctx.imageAfter.parentNode as HTMLElement;
const swipeFrame = imgParent.parentNode as HTMLElement;
ctx.imageAfter.style.width = `${ctx.sizeAfter.width * factor}px`;
ctx.imageAfter.style.height = `${ctx.sizeAfter.height * factor}px`;
imgParent.style.margin = `0px ${ctx.ratio[0] * factor}px`;
imgParent.style.width = `${ctx.sizeAfter.width * factor + 2}px`;
imgParent.style.height = `${ctx.sizeAfter.height * factor + 2}px`;
swipeFrame.style.padding = `${ctx.ratio[1] * factor}px 0 0 0`;
swipeFrame.style.width = `${ctx.maxSize.width * factor + 2}px`;
}
if (sizes.imageBefore) {
const imgParent = sizes.imageBefore.parentNode;
const swipeFrame = imgParent.parentNode;
sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`;
sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`;
imgParent.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`;
imgParent.style.width = `${sizes.sizeBefore.width * factor + 2}px`;
imgParent.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`;
if (ctx.imageBefore) {
const imgParent = ctx.imageBefore.parentNode as HTMLElement;
const swipeFrame = imgParent.parentNode as HTMLElement;
ctx.imageBefore.style.width = `${ctx.sizeBefore.width * factor}px`;
ctx.imageBefore.style.height = `${ctx.sizeBefore.height * factor}px`;
imgParent.style.margin = `${ctx.ratio[3] * factor}px ${ctx.ratio[2] * factor}px`;
imgParent.style.width = `${ctx.sizeBefore.width * factor + 2}px`;
imgParent.style.height = `${ctx.sizeBefore.height * factor + 2}px`;
swipeFrame.style.width = `${ctx.maxSize.width * factor + 2}px`;
swipeFrame.style.height = `${ctx.maxSize.height * factor + 2}px`;
}
// extra height for inner "position: absolute" elements
const swipe = this.containerEl.querySelector<HTMLElement>('.diff-swipe');
if (swipe) {
swipe.style.width = `${sizes.maxSize.width * factor + 2}px`;
swipe.style.height = `${sizes.maxSize.height * factor + 30}px`;
swipe.style.width = `${ctx.maxSize.width * factor + 2}px`;
swipe.style.height = `${ctx.maxSize.height * factor + 30}px`;
}
this.containerEl.querySelector('.swipe-bar').addEventListener('mousedown', (e) => {
this.containerEl.querySelector('.swipe-bar')!.addEventListener('mousedown', (e) => {
e.preventDefault();
this.initSwipeEventListeners(e.currentTarget as HTMLElement);
});
@@ -225,7 +251,7 @@ class ImageDiff {
const rect = swipeFrame.getBoundingClientRect();
const value = Math.max(0, Math.min(e.clientX - rect.left, width));
swipeBar.style.left = `${value}px`;
this.containerEl.querySelector<HTMLElement>('.swipe-container').style.width = `${swipeFrame.clientWidth - value}px`;
this.containerEl.querySelector<HTMLElement>('.swipe-container')!.style.width = `${swipeFrame.clientWidth - value}px`;
};
const removeEventListeners = () => {
document.removeEventListener('mousemove', onSwipeMouseMove);
@@ -235,40 +261,40 @@ class ImageDiff {
document.addEventListener('mouseup', removeEventListeners);
}
initOverlay(sizes: Record<string, any>) {
initOverlay(ctx: ImageContext) {
let factor = 1;
if (sizes.maxSize.width > this.diffContainerWidth - 12) {
factor = (this.diffContainerWidth - 12) / sizes.maxSize.width;
if (ctx.maxSize.width > this.diffContainerWidth - 12) {
factor = (this.diffContainerWidth - 12) / ctx.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 (ctx.imageAfter) {
const container = ctx.imageAfter.parentNode as HTMLElement;
ctx.imageAfter.style.width = `${ctx.sizeAfter.width * factor}px`;
ctx.imageAfter.style.height = `${ctx.sizeAfter.height * factor}px`;
container.style.margin = `${ctx.ratio[1] * factor}px ${ctx.ratio[0] * factor}px`;
container.style.width = `${ctx.sizeAfter.width * factor + 2}px`;
container.style.height = `${ctx.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`;
if (ctx.imageBefore) {
const container = ctx.imageBefore.parentNode as HTMLElement;
const overlayFrame = container.parentNode as HTMLElement;
ctx.imageBefore.style.width = `${ctx.sizeBefore.width * factor}px`;
ctx.imageBefore.style.height = `${ctx.sizeBefore.height * factor}px`;
container.style.margin = `${ctx.ratio[3] * factor}px ${ctx.ratio[2] * factor}px`;
container.style.width = `${ctx.sizeBefore.width * factor + 2}px`;
container.style.height = `${ctx.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`;
overlayFrame.style.width = `${ctx.maxSize.width * factor + 2}px`;
overlayFrame.style.height = `${ctx.maxSize.height * factor + 2}px`;
}
const rangeInput = this.containerEl.querySelector<HTMLInputElement>('input[type="range"]');
const rangeInput = this.containerEl.querySelector<HTMLInputElement>('input[type="range"]')!;
function updateOpacity() {
if (sizes.imageAfter) {
sizes.imageAfter.parentNode.style.opacity = `${Number(rangeInput.value) / 100}`;
if (ctx.imageAfter) {
(ctx.imageAfter.parentNode as HTMLElement).style.opacity = `${Number(rangeInput.value) / 100}`;
}
}
package/gitea/source/web_src/js/features/install.ts
+19 -38
View File
@@ -23,12 +23,12 @@ function initPreInstall() {
mssql: '127.0.0.1:1433',
};
const dbHost = document.querySelector<HTMLInputElement>('#db_host');
const dbUser = document.querySelector<HTMLInputElement>('#db_user');
const dbName = document.querySelector<HTMLInputElement>('#db_name');
const dbHost = document.querySelector<HTMLInputElement>('#db_host')!;
const dbUser = document.querySelector<HTMLInputElement>('#db_user')!;
const dbName = document.querySelector<HTMLInputElement>('#db_name')!;
// Database type change detection.
document.querySelector<HTMLInputElement>('#db_type').addEventListener('change', function () {
document.querySelector<HTMLInputElement>('#db_type')!.addEventListener('change', function () {
const dbType = this.value;
hideElem('div[data-db-setting-for]');
showElem(`div[data-db-setting-for=${dbType}]`);
@@ -47,58 +47,39 @@ function initPreInstall() {
}
} // else: for SQLite3, the default path is always prepared by backend code (setting)
});
document.querySelector('#db_type').dispatchEvent(new Event('change'));
document.querySelector('#db_type')!.dispatchEvent(new Event('change'));
const appUrl = document.querySelector<HTMLInputElement>('#app_url');
const appUrl = document.querySelector<HTMLInputElement>('#app_url')!;
if (appUrl.value.includes('://localhost')) {
appUrl.value = window.location.href;
}
const domain = document.querySelector<HTMLInputElement>('#domain');
const domain = document.querySelector<HTMLInputElement>('#domain')!;
if (domain.value.trim() === 'localhost') {
domain.value = window.location.hostname;
}
// TODO: better handling of exclusive relations.
document.querySelector<HTMLInputElement>('#offline-mode input').addEventListener('change', function () {
document.querySelector<HTMLInputElement>('#enable-openid-signin input')!.addEventListener('change', function () {
if (this.checked) {
document.querySelector<HTMLInputElement>('#disable-gravatar input').checked = true;
document.querySelector<HTMLInputElement>('#federated-avatar-lookup input').checked = false;
}
});
document.querySelector<HTMLInputElement>('#disable-gravatar input').addEventListener('change', function () {
if (this.checked) {
document.querySelector<HTMLInputElement>('#federated-avatar-lookup input').checked = false;
} else {
document.querySelector<HTMLInputElement>('#offline-mode input').checked = false;
}
});
document.querySelector<HTMLInputElement>('#federated-avatar-lookup input').addEventListener('change', function () {
if (this.checked) {
document.querySelector<HTMLInputElement>('#disable-gravatar input').checked = false;
document.querySelector<HTMLInputElement>('#offline-mode input').checked = false;
}
});
document.querySelector<HTMLInputElement>('#enable-openid-signin input').addEventListener('change', function () {
if (this.checked) {
if (!document.querySelector<HTMLInputElement>('#disable-registration input').checked) {
document.querySelector<HTMLInputElement>('#enable-openid-signup input').checked = true;
if (!document.querySelector<HTMLInputElement>('#disable-registration input')!.checked) {
document.querySelector<HTMLInputElement>('#enable-openid-signup input')!.checked = true;
}
} else {
document.querySelector<HTMLInputElement>('#enable-openid-signup input').checked = false;
document.querySelector<HTMLInputElement>('#enable-openid-signup input')!.checked = false;
}
});
document.querySelector<HTMLInputElement>('#disable-registration input').addEventListener('change', function () {
document.querySelector<HTMLInputElement>('#disable-registration input')!.addEventListener('change', function () {
if (this.checked) {
document.querySelector<HTMLInputElement>('#enable-captcha input').checked = false;
document.querySelector<HTMLInputElement>('#enable-openid-signup input').checked = false;
document.querySelector<HTMLInputElement>('#enable-captcha input')!.checked = false;
document.querySelector<HTMLInputElement>('#enable-openid-signup input')!.checked = false;
} else {
document.querySelector<HTMLInputElement>('#enable-openid-signup input').checked = true;
document.querySelector<HTMLInputElement>('#enable-openid-signup input')!.checked = true;
}
});
document.querySelector<HTMLInputElement>('#enable-captcha input').addEventListener('change', function () {
document.querySelector<HTMLInputElement>('#enable-captcha input')!.addEventListener('change', function () {
if (this.checked) {
document.querySelector<HTMLInputElement>('#disable-registration input').checked = false;
document.querySelector<HTMLInputElement>('#disable-registration input')!.checked = false;
}
});
}
@@ -107,8 +88,8 @@ function initPostInstall() {
const el = document.querySelector('#goto-after-install');
if (!el) return;
const targetUrl = el.getAttribute('href');
let tid = setInterval(async () => {
const targetUrl = el.getAttribute('href')!;
let tid: ReturnType<typeof setInterval> | null = setInterval(async () => {
try {
const resp = await GET(targetUrl);
if (tid && resp.status === 200) {
package/gitea/source/web_src/js/features/issue.ts
+8 -8
View File
@@ -1,6 +1,6 @@
import type {Issue} from '../types.ts';
// the getIssueIcon/getIssueColor logic should be kept the same as "templates/shared/issueicon.tmpl"
// the getIssueIcon/getIssueColorClass logic should be kept the same as "templates/shared/issueicon.tmpl"
export function getIssueIcon(issue: Issue) {
if (issue.pull_request) {
@@ -21,21 +21,21 @@ export function getIssueIcon(issue: Issue) {
return 'octicon-issue-closed'; // Closed Issue
}
export function getIssueColor(issue: Issue) {
export function getIssueColorClass(issue: Issue) {
if (issue.pull_request) {
if (issue.state === 'open') {
if (issue.pull_request.draft) {
return 'grey'; // WIP PR
return 'tw-text-text-light'; // WIP PR
}
return 'green'; // Open PR
return 'tw-text-green'; // Open PR
} else if (issue.pull_request.merged) {
return 'purple'; // Merged PR
return 'tw-text-purple'; // Merged PR
}
return 'red'; // Closed PR
return 'tw-text-red'; // Closed PR
}
if (issue.state === 'open') {
return 'green'; // Open Issue
return 'tw-text-green'; // Open Issue
}
return 'red'; // Closed Issue
return 'tw-text-red'; // Closed Issue
}
package/gitea/source/web_src/js/features/notification.ts
+11 -52
View File
@@ -1,8 +1,8 @@
import {GET} from '../modules/fetch.ts';
import {toggleElem, createElementFromHTML} from '../utils/dom.ts';
import {logoutFromWorker} from '../modules/worker.ts';
import {UserEventsSharedWorker} from '../modules/worker.ts';
const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
const {appSubUrl, notificationSettings} = window.config;
let notificationSequenceNumber = 0;
async function receiveUpdateCount(event: MessageEvent<{type: string, data: string}>) {
@@ -33,56 +33,15 @@ export function initNotificationCount() {
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: MessageEvent<{type: string, data: string}>) => {
if (!event.data || !event.data.type) {
console.error('unknown worker message event', event);
return;
}
if (event.data.type === 'notification-count') {
receiveUpdateCount(event); // no await
} else if (event.data.type === 'no-event-source') {
// browser doesn't support EventSource, falling back to periodic poller
const worker = new UserEventsSharedWorker('notification-worker');
worker.addMessageEventListener((event: MessageEvent) => {
if (event.data.type === 'no-event-source') {
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();
logoutFromWorker();
} else if (event.data.type === 'close') {
worker.port.postMessage({
type: 'close',
});
worker.port.close();
} else if (event.data.type === 'notification-count') {
receiveUpdateCount(event); // no await
}
});
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();
});
worker.startPort();
return;
}
@@ -90,7 +49,7 @@ export function initNotificationCount() {
}
function getCurrentCount() {
return Number(document.querySelector('.notification_count').textContent ?? '0');
return Number(document.querySelector('.notification_count')!.textContent ?? '0');
}
async function updateNotificationCountWithCallback(callback: (timeout: number, newCount: number) => void, timeout: number, lastCount: number) {
@@ -131,9 +90,9 @@ async function updateNotificationTable() {
const data = await response.text();
const el = createElementFromHTML(data);
if (parseInt(el.getAttribute('data-sequence-number')) === notificationSequenceNumber) {
if (parseInt(el.getAttribute('data-sequence-number')!) === notificationSequenceNumber) {
notificationDiv.outerHTML = data;
notificationDiv = document.querySelector('#notification_div');
notificationDiv = document.querySelector('#notification_div')!;
window.htmx.process(notificationDiv); // when using htmx, we must always remember to process the new content changed by us
}
} catch (error) {
package/gitea/source/web_src/js/features/oauth2-settings.ts
+4 -4
View File
@@ -1,9 +1,9 @@
import type {DOMEvent} from '../utils/dom.ts';
export function initOAuth2SettingsDisableCheckbox() {
for (const el of document.querySelectorAll<HTMLInputElement>('.disable-setting')) {
el.addEventListener('change', (e: DOMEvent<Event, HTMLInputElement>) => {
document.querySelector(e.target.getAttribute('data-target')).classList.toggle('disabled', e.target.checked);
el.addEventListener('change', (e) => {
const target = e.target as HTMLInputElement;
const dataTarget = target.getAttribute('data-target')!;
document.querySelector(dataTarget)!.classList.toggle('disabled', target.checked);
});
}
}
package/gitea/source/web_src/js/features/pull-view-file.ts
+18 -17
View File
@@ -3,21 +3,22 @@ import {setFileFolding} from './file-fold.ts';
import {POST} from '../modules/fetch.ts';
const {pageData} = window.config;
const prReview = pageData.prReview || {};
// it is undefined on most pages, fortunately, when it is accessed by the related functions, it exists
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
// Refreshes the summary of viewed files
// The data used will be window.config.pageData.prReview.numberOf{Viewed}Files
function refreshViewedFilesSummary() {
const viewedFilesProgress = document.querySelector('#viewed-files-summary');
viewedFilesProgress?.setAttribute('value', prReview.numberOfViewedFiles);
const summaryLabel = document.querySelector('#viewed-files-summary-label');
if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template')
.replace('%[1]d', prReview.numberOfViewedFiles)
.replace('%[2]d', prReview.numberOfFiles);
const viewedFilesProgress = document.querySelector('#viewed-files-summary')!;
viewedFilesProgress.setAttribute('value', String(prReview.numberOfViewedFiles));
const summaryLabel = document.querySelector<HTMLElement>('#viewed-files-summary-label')!;
summaryLabel.textContent = summaryLabel.getAttribute('data-text-changed-template')!
.replace('%[1]d', String(prReview.numberOfViewedFiles))
.replace('%[2]d', String(prReview.numberOfFiles));
}
// Initializes a listener for all children of the given html element
@@ -28,9 +29,9 @@ export function initViewedCheckboxListenerFor() {
// To prevent double addition of listeners
form.setAttribute('data-has-viewed-checkbox-listener', String(true));
// The checkbox consists of a div containing the real checkbox with its label and the CSRF token,
// The checkbox consists of a div containing the real checkbox with its label,
// hence the actual checkbox first has to be found
const checkbox = form.querySelector<HTMLInputElement>('input[type=checkbox]');
const checkbox = form.querySelector<HTMLInputElement>('input[type=checkbox]')!;
checkbox.addEventListener('input', function() {
// Mark the file as viewed visually - will especially change the background
if (this.checked) {
@@ -45,10 +46,10 @@ export function initViewedCheckboxListenerFor() {
// Update viewed-files summary and remove "has changed" label if present
refreshViewedFilesSummary();
const hasChangedLabel = form.parentNode.querySelector('.changed-since-last-review');
const hasChangedLabel = form.parentNode!.querySelector('.changed-since-last-review');
hasChangedLabel?.remove();
const fileName = checkbox.getAttribute('name');
const fileName = checkbox.getAttribute('name')!;
// check if the file is in our diffTreeStore and if we find it -> change the IsViewed status
diffTreeStoreSetViewed(diffTreeStore(), fileName, this.checked);
@@ -59,11 +60,11 @@ export function initViewedCheckboxListenerFor() {
const data: Record<string, any> = {files};
const headCommitSHA = form.getAttribute('data-headcommit');
if (headCommitSHA) data.headCommitSHA = headCommitSHA;
POST(form.getAttribute('data-link'), {data});
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);
const parentBox = form.closest('.diff-file-header')!;
setFileFolding(parentBox.closest('.file-content')!, parentBox.querySelector('.fold-file')!, this.checked);
});
}
}
@@ -72,14 +73,14 @@ export function initExpandAndCollapseFilesButton() {
// expand btn
document.querySelector(expandFilesBtnSelector)?.addEventListener('click', () => {
for (const box of document.querySelectorAll<HTMLElement>('.file-content[data-folded="true"]')) {
setFileFolding(box, box.querySelector('.fold-file'), false);
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<HTMLElement>('.file-content:not([data-folded="true"])')) {
if (box.getAttribute('id') === 'diff-incomplete') continue;
setFileFolding(box, box.querySelector('.fold-file'), true);
setFileFolding(box, box.querySelector('.fold-file')!, true);
}
});
}
package/gitea/source/web_src/js/features/recent-commits.ts
+1 -1
View File
@@ -4,7 +4,7 @@ export async function initRepoRecentCommits() {
const el = document.querySelector('#repo-recent-commits-chart');
if (!el) return;
const {default: RepoRecentCommits} = await import(/* webpackChunkName: "recent-commits-graph" */'../components/RepoRecentCommits.vue');
const {default: RepoRecentCommits} = await import('../components/RepoRecentCommits.vue');
try {
const View = createApp(RepoRecentCommits, {
locale: {
package/gitea/source/web_src/js/features/repo-actions.ts
+14 -4
View File
@@ -4,24 +4,32 @@ import RepoActionView from '../components/RepoActionView.vue';
export function initRepositoryActionView() {
const el = document.querySelector('#repo-action-view');
if (!el) return;
const runId = parseInt(el.getAttribute('data-run-id')!);
const jobId = parseInt(el.getAttribute('data-job-id')!);
// 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<HTMLElement>('body > div.full.height');
if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
if (parentFullHeight) parentFullHeight.classList.add('tw-pb-0');
const view = createApp(RepoActionView, {
runIndex: el.getAttribute('data-run-index'),
jobIndex: el.getAttribute('data-job-index'),
actionsURL: el.getAttribute('data-actions-url'),
runId,
jobId,
actionsUrl: el.getAttribute('data-actions-url'),
locale: {
approve: el.getAttribute('data-locale-approve'),
cancel: el.getAttribute('data-locale-cancel'),
rerun: el.getAttribute('data-locale-rerun'),
rerun_all: el.getAttribute('data-locale-rerun-all'),
rerun_failed: el.getAttribute('data-locale-rerun-failed'),
scheduled: el.getAttribute('data-locale-runs-scheduled'),
commit: el.getAttribute('data-locale-runs-commit'),
pushedBy: el.getAttribute('data-locale-runs-pushed-by'),
workflowGraph: el.getAttribute('data-locale-runs-workflow-graph'),
summary: el.getAttribute('data-locale-summary'),
allJobs: el.getAttribute('data-locale-all-jobs'),
triggeredVia: el.getAttribute('data-locale-triggered-via'),
totalDuration: el.getAttribute('data-locale-total-duration'),
artifactsTitle: el.getAttribute('data-locale-artifacts-title'),
areYouSure: el.getAttribute('data-locale-are-you-sure'),
artifactExpired: el.getAttribute('data-locale-artifact-expired'),
@@ -42,6 +50,8 @@ export function initRepositoryActionView() {
},
logsAlwaysAutoScroll: el.getAttribute('data-locale-logs-always-auto-scroll'),
logsAlwaysExpandRunning: el.getAttribute('data-locale-logs-always-expand-running'),
workflowFile: el.getAttribute('data-locale-workflow-file'),
runDetails: el.getAttribute('data-locale-run-details'),
},
});
view.mount(el);
package/gitea/source/web_src/js/features/repo-branch.ts
+9 -9
View File
@@ -16,9 +16,9 @@ function initRepoCreateBranchButton() {
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');
document.querySelector(fromSpanName)!.textContent = el.getAttribute('data-branch-from');
fomanticQuery(el.getAttribute('data-modal')).modal('show');
fomanticQuery(el.getAttribute('data-modal')!).modal('show');
});
}
}
@@ -26,17 +26,17 @@ function initRepoCreateBranchButton() {
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<HTMLInputElement>('input[name=from]').value = oldBranchName;
const target = el.getAttribute('data-modal')!;
const modal = document.querySelector(target)!;
const oldBranchName = el.getAttribute('data-old-branch-name')!;
modal.querySelector<HTMLInputElement>('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');
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);
const text = modal.querySelector('[data-rename-branch-to]')!;
text.textContent = text.getAttribute('data-rename-branch-to')!.replace('%s', oldBranchName);
});
}
}
package/gitea/source/web_src/js/features/repo-code.ts
+11 -11
View File
@@ -5,14 +5,14 @@ import {addDelegatedEventListener} from '../utils/dom.ts';
function changeHash(hash: string) {
if (window.history.pushState) {
window.history.pushState(null, null, hash);
window.history.pushState(null, '', hash);
} else {
window.location.hash = hash;
}
}
// it selects the code lines defined by range: `L1-L3` (3 lines) or `L2` (singe line)
function selectRange(range: string): Element {
function selectRange(range: string): Element | null {
for (const el of document.querySelectorAll('.code-view tr.active')) el.classList.remove('active');
const elLineNums = document.querySelectorAll(`.code-view td.lines-num span[data-line-number]`);
@@ -23,14 +23,14 @@ function selectRange(range: string): Element {
const updateIssueHref = function (anchor: string) {
if (!refInNewIssue) return;
const urlIssueNew = refInNewIssue.getAttribute('data-url-issue-new');
const urlParamBodyLink = refInNewIssue.getAttribute('data-url-param-body-link');
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: string) {
if (!viewGitBlame) return;
let href = viewGitBlame.getAttribute('href');
let href = viewGitBlame.getAttribute('href')!;
href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`;
if (anchor.length !== 0) {
href = `${href}#${anchor}`;
@@ -40,7 +40,7 @@ function selectRange(range: string): Element {
const updateCopyPermalinkUrl = function (anchor: string) {
if (!copyPermalink) return;
let link = copyPermalink.getAttribute('data-url');
let link = copyPermalink.getAttribute('data-url')!;
link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
copyPermalink.setAttribute('data-clipboard-text', link);
copyPermalink.setAttribute('data-clipboard-text-type', 'url');
@@ -63,7 +63,7 @@ function selectRange(range: string): Element {
const first = elLineNums[startLineNum - 1] ?? null;
for (let i = startLineNum - 1; i <= stopLineNum - 1 && i < elLineNums.length; i++) {
elLineNums[i].closest('tr').classList.add('active');
elLineNums[i].closest('tr')!.classList.add('active');
}
changeHash(`#${range}`);
updateIssueHref(range);
@@ -85,14 +85,14 @@ function showLineButton() {
const tr = document.querySelector('.code-view tr.active');
if (!tr) return;
const td = tr.querySelector('td.lines-num');
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));
btn.closest('.code-view')!.append(menu.cloneNode(true));
createTippy(btn, {
theme: 'menu',
@@ -117,16 +117,16 @@ export function initRepoCodeView() {
if (!document.querySelector('.repo-view-container .file-view')) return;
// "file code view" and "blame" pages need this "line number button" feature
let selRangeStart: string;
let selRangeStart: string | undefined;
addDelegatedEventListener(document, 'click', '.code-view .lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
if (!selRangeStart || !e.shiftKey) {
selRangeStart = el.getAttribute('id');
selRangeStart = el.getAttribute('id')!;
selectRange(selRangeStart);
} else {
const selRangeStop = el.getAttribute('id');
selectRange(`${selRangeStart}-${selRangeStop}`);
}
window.getSelection().removeAllRanges();
window.getSelection()!.removeAllRanges();
showLineButton();
});
package/gitea/source/web_src/js/features/repo-commit.ts
+2 -2
View File
@@ -6,14 +6,14 @@ export function initRepoEllipsisButton() {
registerGlobalEventFunc('click', 'onRepoEllipsisButtonClick', async (el: HTMLInputElement, e: Event) => {
e.preventDefault();
const expanded = el.getAttribute('aria-expanded') === 'true';
toggleElem(el.parentElement.querySelector('.commit-body'));
toggleElem(el.parentElement!.querySelector('.commit-body')!);
el.setAttribute('aria-expanded', String(!expanded));
});
}
export function initCommitStatuses() {
registerGlobalInitFunc('initCommitStatuses', (el: HTMLElement) => {
const nextEl = el.nextElementSibling;
const nextEl = el.nextElementSibling!;
if (!nextEl.matches('.tippy-target')) throw new Error('Expected next element to be a tippy target');
createTippy(el, {
content: nextEl,
package/gitea/source/web_src/js/features/repo-common.ts
+15 -14
View File
@@ -1,16 +1,16 @@
import {queryElems, type DOMEvent} from '../utils/dom.ts';
import {queryElems} from '../utils/dom.ts';
import {POST} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts';
import {sleep} from '../utils.ts';
import RepoActivityTopAuthors from '../components/RepoActivityTopAuthors.vue';
import {createApp} from 'vue';
import {toOriginUrl} from '../utils/url.ts';
import {createTippy} from '../modules/tippy.ts';
import {localUserSettings} from '../modules/user-settings.ts';
async function onDownloadArchive(e: DOMEvent<MouseEvent>) {
async function onDownloadArchive(e: Event) {
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<HTMLAnchorElement>('a.archive-link[href]');
const el = (e.target as HTMLElement).closest<HTMLAnchorElement>('a.archive-link[href]')!;
const targetLoading = el.closest('.ui.dropdown') ?? el;
targetLoading.classList.add('is-loading', 'loading-icon-2px');
try {
@@ -51,13 +51,13 @@ export function substituteRepoOpenWithUrl(tmpl: string, url: string): string {
}
function initCloneSchemeUrlSelection(parent: Element) {
const elCloneUrlInput = parent.querySelector<HTMLInputElement>('.repo-clone-url');
const elCloneUrlInput = parent.querySelector<HTMLInputElement>('.repo-clone-url')!;
const tabHttps = parent.querySelector('.repo-clone-https');
const tabSsh = parent.querySelector('.repo-clone-ssh');
const tabTea = parent.querySelector('.repo-clone-tea');
const updateClonePanelUi = function() {
let scheme = localStorage.getItem('repo-clone-protocol');
let scheme = localUserSettings.getString('repo-clone-protocol');
if (!['https', 'ssh', 'tea'].includes(scheme)) {
scheme = 'https';
}
@@ -77,7 +77,8 @@ function initCloneSchemeUrlSelection(parent: Element) {
const isTea = scheme === 'tea';
if (tabHttps) {
tabHttps.textContent = window.origin.split(':')[0].toUpperCase(); // show "HTTP" or "HTTPS"
const link = tabHttps.getAttribute('data-link')!;
tabHttps.textContent = link.split(':')[0].toUpperCase(); // show "HTTP" or "HTTPS"
tabHttps.classList.toggle('active', isHttps);
}
if (tabSsh) {
@@ -87,7 +88,7 @@ function initCloneSchemeUrlSelection(parent: Element) {
tabTea.classList.toggle('active', isTea);
}
let tab: Element;
let tab: Element | null = null;
if (isHttps) {
tab = tabHttps;
} else if (isSsh) {
@@ -97,7 +98,7 @@ function initCloneSchemeUrlSelection(parent: Element) {
}
if (!tab) return;
const link = toOriginUrl(tab.getAttribute('data-link'));
const link = tab.getAttribute('data-link')!;
for (const el of document.querySelectorAll('.js-clone-url')) {
if (el.nodeName === 'INPUT') {
@@ -107,22 +108,22 @@ function initCloneSchemeUrlSelection(parent: Element) {
}
}
for (const el of parent.querySelectorAll<HTMLAnchorElement>('.js-clone-url-editor')) {
el.href = substituteRepoOpenWithUrl(el.getAttribute('data-href-template'), link);
el.href = substituteRepoOpenWithUrl(el.getAttribute('data-href-template')!, link);
}
};
updateClonePanelUi();
// tabSsh or tabHttps might not both exist, eg: guest view, or one is disabled by the server
tabHttps?.addEventListener('click', () => {
localStorage.setItem('repo-clone-protocol', 'https');
localUserSettings.setString('repo-clone-protocol', 'https');
updateClonePanelUi();
});
tabSsh?.addEventListener('click', () => {
localStorage.setItem('repo-clone-protocol', 'ssh');
localUserSettings.setString('repo-clone-protocol', 'ssh');
updateClonePanelUi();
});
tabTea?.addEventListener('click', () => {
localStorage.setItem('repo-clone-protocol', 'tea');
localUserSettings.setString('repo-clone-protocol', 'tea');
updateClonePanelUi();
});
elCloneUrlInput.addEventListener('focus', () => {
@@ -131,7 +132,7 @@ function initCloneSchemeUrlSelection(parent: Element) {
}
function initClonePanelButton(btn: HTMLButtonElement) {
const elPanel = btn.nextElementSibling;
const elPanel = btn.nextElementSibling!;
// "init" must be before the "createTippy" otherwise the "tippy-target" will be removed from the document
initCloneSchemeUrlSelection(elPanel);
createTippy(btn, {
package/gitea/source/web_src/js/features/repo-diff-commit.ts
+7 -7
View File
@@ -4,7 +4,7 @@ import {GET} from '../modules/fetch.ts';
async function loadBranchesAndTags(area: Element, loadingButton: Element) {
loadingButton.classList.add('disabled');
try {
const res = await GET(loadingButton.getAttribute('data-fetch-url'));
const res = await GET(loadingButton.getAttribute('data-fetch-url')!);
const data = await res.json();
hideElem(loadingButton);
addTags(area, data.tags);
@@ -16,8 +16,8 @@ async function loadBranchesAndTags(area: Element, loadingButton: Element) {
}
function addTags(area: Element, tags: Array<Record<string, any>>) {
const tagArea = area.querySelector('.tag-area');
toggleElem(tagArea.parentElement, tags.length > 0);
const tagArea = area.querySelector('.tag-area')!;
toggleElem(tagArea.parentElement!, tags.length > 0);
for (const tag of tags) {
addLink(tagArea, tag.web_link, tag.name);
}
@@ -25,15 +25,15 @@ function addTags(area: Element, tags: Array<Record<string, any>>) {
function addBranches(area: Element, branches: Array<Record<string, any>>, defaultBranch: string) {
const defaultBranchTooltip = area.getAttribute('data-text-default-branch-tooltip');
const branchArea = area.querySelector('.branch-area');
toggleElem(branchArea.parentElement, branches.length > 0);
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: Element, href: string, text: string, tooltip?: string) {
function addLink(parent: Element, href: string, text: string, tooltip: string | null = null) {
const link = document.createElement('a');
link.classList.add('muted', 'tw-px-1');
link.href = href;
@@ -47,7 +47,7 @@ function addLink(parent: Element, href: string, text: string, tooltip?: string)
export function initRepoDiffCommitBranchesAndTags() {
for (const area of document.querySelectorAll('.branch-and-tag-area')) {
const btn = area.querySelector('.load-branches-and-tags');
const btn = area.querySelector('.load-branches-and-tags')!;
btn.addEventListener('click', () => loadBranchesAndTags(area, btn));
}
}
package/gitea/source/web_src/js/features/repo-diff.ts
+58 -31
View File
@@ -9,7 +9,7 @@ import {submitEventSubmitter, queryElemSiblings, hideElem, showElem, animateOnce
import {POST, GET} from '../modules/fetch.ts';
import {createTippy} from '../modules/tippy.ts';
import {invertFileFolding} from './file-fold.ts';
import {parseDom} from '../utils.ts';
import {parseDom, sleep} from '../utils.ts';
import {registerGlobalSelectorFunc} from '../modules/observer.ts';
function initRepoDiffFileBox(el: HTMLElement) {
@@ -18,7 +18,7 @@ function initRepoDiffFileBox(el: HTMLElement) {
queryElemSiblings(btn, '.file-view-toggle', (el) => el.classList.remove('active'));
btn.classList.add('active');
const target = document.querySelector(btn.getAttribute('data-toggle-selector'));
const target = document.querySelector(btn.getAttribute('data-toggle-selector')!);
if (!target) throw new Error('Target element not found');
hideElem(queryElemSiblings(target));
@@ -31,7 +31,7 @@ function initRepoDiffConversationForm() {
// This listener is for "reply form" only, it should clearly distinguish different forms in the future.
addDelegatedEventListener<HTMLFormElement, SubmitEvent>(document, 'submit', '.conversation-holder form', async (form, e) => {
e.preventDefault();
const textArea = form.querySelector<HTMLTextAreaElement>('textarea');
const textArea = form.querySelector<HTMLTextAreaElement>('textarea')!;
if (!validateTextareaNonEmpty(textArea)) return;
if (form.classList.contains('is-loading')) return;
@@ -49,14 +49,14 @@ function initRepoDiffConversationForm() {
// on the diff page, the form is inside a "tr" and need to get the line-type ahead
// but on the conversation page, there is no parent "tr"
const trLineType = form.closest('tr')?.getAttribute('data-line-type');
const response = await POST(form.getAttribute('action'), {data: formData});
const response = await POST(form.getAttribute('action')!, {data: formData});
const newConversationHolder = createElementFromHTML(await response.text());
const path = newConversationHolder.getAttribute('data-path');
const side = newConversationHolder.getAttribute('data-side');
const idx = newConversationHolder.getAttribute('data-idx');
form.closest('.conversation-holder').replaceWith(newConversationHolder);
form = null; // prevent further usage of the form because it should have been replaced
form.closest('.conversation-holder')!.replaceWith(newConversationHolder);
(form as any) = null; // prevent further usage of the form because it should have been replaced
if (trLineType) {
// if there is a line-type for the "tr", it means the form is on the diff page
@@ -74,10 +74,10 @@ function initRepoDiffConversationForm() {
// the default behavior is to add a pending review, so if no submitter, it also means "pending_review"
if (!submitter || submitter?.matches('button[name="pending_review"]')) {
const reviewBox = document.querySelector('#review-box');
const reviewBox = document.querySelector('#review-box')!;
const counter = reviewBox?.querySelector('.review-comments-counter');
if (!counter) return;
const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1;
const num = parseInt(counter.getAttribute('data-pending-comment-number')!) + 1 || 1;
counter.setAttribute('data-pending-comment-number', String(num));
counter.textContent = String(num);
animateOnce(reviewBox, 'pulse-1p5-200');
@@ -92,10 +92,10 @@ function initRepoDiffConversationForm() {
addDelegatedEventListener(document, 'click', '.resolve-conversation', async (el, e) => {
e.preventDefault();
const comment_id = el.getAttribute('data-comment-id');
const origin = el.getAttribute('data-origin');
const action = el.getAttribute('data-action');
const url = el.getAttribute('data-update-url');
const comment_id = el.getAttribute('data-comment-id')!;
const origin = el.getAttribute('data-origin')!;
const action = el.getAttribute('data-action')!;
const url = el.getAttribute('data-update-url')!;
try {
const response = await POST(url, {data: new URLSearchParams({origin, action, comment_id})});
@@ -119,14 +119,14 @@ function initRepoDiffConversationNav() {
addDelegatedEventListener(document, 'click', '.previous-conversation, .next-conversation', (el, e) => {
e.preventDefault();
const isPrevious = el.matches('.previous-conversation');
const elCurConversation = el.closest('.comment-code-cloud');
const elCurConversation = el.closest('.comment-code-cloud')!;
const elAllConversations = document.querySelectorAll('.comment-code-cloud:not(.tw-hidden)');
const index = Array.from(elAllConversations).indexOf(elCurConversation);
const previousIndex = index > 0 ? index - 1 : elAllConversations.length - 1;
const nextIndex = index < elAllConversations.length - 1 ? index + 1 : 0;
const navIndex = isPrevious ? previousIndex : nextIndex;
const elNavConversation = elAllConversations[navIndex];
const anchor = elNavConversation.querySelector('.comment').id;
const anchor = elNavConversation.querySelector('.comment')!.id;
window.location.href = `#${anchor}`;
});
}
@@ -162,15 +162,17 @@ async function loadMoreFiles(btn: Element): Promise<boolean> {
}
btn.classList.add('disabled');
const url = btn.getAttribute('data-href');
const url = btn.getAttribute('data-href')!;
try {
const response = await GET(url);
const resp = await response.text();
const respDoc = parseDom(resp, 'text/html');
const respFileBoxes = respDoc.querySelector('#diff-file-boxes');
const respFileBoxes = respDoc.querySelector('#diff-file-boxes')!;
// the response is a full HTML page, we need to extract the relevant contents:
// * append the newly loaded file list items to the existing list
document.querySelector('#diff-incomplete').replaceWith(...Array.from(respFileBoxes.children));
const respFileBoxesChildren = Array.from(respFileBoxes.children); // "children:HTMLCollection" will be empty after replaceWith
document.querySelector('#diff-incomplete')!.replaceWith(...respFileBoxesChildren);
for (const el of respFileBoxesChildren) window.htmx.process(el);
onShowMoreFiles();
return true;
} catch (error) {
@@ -193,15 +195,15 @@ function initRepoDiffShowMore() {
if (el.classList.contains('disabled')) return;
el.classList.add('disabled');
const url = el.getAttribute('data-href');
const url = el.getAttribute('data-href')!;
try {
const response = await GET(url);
const resp = await response.text();
const respDoc = parseDom(resp, 'text/html');
const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body');
const respFileBodyChildren = Array.from(respFileBody.children); // respFileBody.children will be empty after replaceWith
el.parentElement.replaceWith(...respFileBodyChildren);
const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body')!;
const respFileBodyChildren = Array.from(respFileBody.children); // "children:HTMLCollection" will be empty after replaceWith
el.parentElement!.replaceWith(...respFileBodyChildren);
for (const el of respFileBodyChildren) window.htmx.process(el);
// FIXME: calling onShowMoreFiles is not quite right here.
// But since onShowMoreFiles mixes "init diff box" and "init diff body" together,
@@ -215,21 +217,46 @@ function initRepoDiffShowMore() {
});
}
async function loadUntilFound() {
const hashTargetSelector = window.location.hash;
if (!hashTargetSelector.startsWith('#diff-') && !hashTargetSelector.startsWith('#issuecomment-')) {
return;
}
async function onLocationHashChange() {
// try to scroll to the target element by the current hash
const currentHash = window.location.hash;
if (!currentHash.startsWith('#diff-') && !currentHash.startsWith('#issuecomment-')) return;
while (true) {
// avoid reentrance when we are changing the hash to scroll and trigger ":target" selection
const attrAutoScrollRunning = 'data-auto-scroll-running';
if (document.body.hasAttribute(attrAutoScrollRunning)) return;
const targetElementId = currentHash.substring(1);
while (currentHash === window.location.hash) {
// use getElementById to avoid querySelector throws an error when the hash is invalid
// eslint-disable-next-line unicorn/prefer-query-selector
const targetElement = document.getElementById(hashTargetSelector.substring(1));
const targetElement = document.getElementById(targetElementId);
if (targetElement) {
// need to change hash to re-trigger ":target" CSS selector, let's manually scroll to it
targetElement.scrollIntoView();
document.body.setAttribute(attrAutoScrollRunning, 'true');
window.location.hash = '';
window.location.hash = currentHash;
setTimeout(() => document.body.removeAttribute(attrAutoScrollRunning), 0);
return;
}
// If looking for a hidden comment, try to expand the section that contains it
const issueCommentPrefix = '#issuecomment-';
if (currentHash.startsWith(issueCommentPrefix)) {
const commentId = currentHash.substring(issueCommentPrefix.length);
const expandButton = document.querySelector<HTMLElement>(`.code-expander-button[data-hidden-comment-ids*=",${commentId},"]`);
if (expandButton) {
// avoid infinite loop, do not re-click the button if already clicked
const attrAutoLoadClicked = 'data-auto-load-clicked';
if (expandButton.hasAttribute(attrAutoLoadClicked)) return;
expandButton.setAttribute(attrAutoLoadClicked, 'true');
expandButton.click();
await sleep(500); // Wait for HTMX to load the content. FIXME: need to drop htmx in the future
continue; // Try again to find the element
}
}
// the button will be refreshed after each "load more", so query it every time
const showMoreButton = document.querySelector('#diff-show-more-files');
if (!showMoreButton) {
@@ -243,8 +270,8 @@ async function loadUntilFound() {
}
function initRepoDiffHashChangeListener() {
window.addEventListener('hashchange', loadUntilFound);
loadUntilFound();
window.addEventListener('hashchange', onLocationHashChange);
onLocationHashChange();
}
export function initRepoDiffView() {
@@ -262,6 +289,6 @@ export function initRepoDiffView() {
registerGlobalSelectorFunc('#diff-file-boxes .diff-file-box', initRepoDiffFileBox);
addDelegatedEventListener(document, 'click', '.fold-file', (el) => {
invertFileFolding(el.closest('.file-content'), el);
invertFileFolding(el.closest('.file-content')!, el);
});
}
package/gitea/source/web_src/js/features/repo-editor.ts
+37 -25
View File
@@ -1,6 +1,7 @@
import {html, htmlRaw} from '../utils/html.ts';
import {createCodeEditor} from './codeeditor.ts';
import {hideElem, queryElems, showElem, createElementFromHTML} from '../utils/dom.ts';
import {createCodeEditor} from '../modules/codeeditor/main.ts';
import {trimTrailingWhitespaceFromView} from '../modules/codeeditor/utils.ts';
import {hideElem, queryElems, showElem, createElementFromHTML, onInputDebounce} from '../utils/dom.ts';
import {POST} from '../modules/fetch.ts';
import {initDropzone} from './dropzone.ts';
import {confirmModal} from './comp/ConfirmModal.ts';
@@ -9,7 +10,7 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
import {submitFormFetchAction} from './common-fetch-action.ts';
function initEditPreviewTab(elForm: HTMLFormElement) {
const elTabMenu = elForm.querySelector('.repo-editor-menu');
const elTabMenu = elForm.querySelector('.repo-editor-menu')!;
fomanticQuery(elTabMenu.querySelectorAll('.item')).tab();
const elPreviewTab = elTabMenu.querySelector('a[data-tab="preview"]');
@@ -17,15 +18,15 @@ function initEditPreviewTab(elForm: HTMLFormElement) {
if (!elPreviewTab || !elPreviewPanel) return;
elPreviewTab.addEventListener('click', async () => {
const elTreePath = elForm.querySelector<HTMLInputElement>('input#tree_path');
const previewUrl = elPreviewTab.getAttribute('data-preview-url');
const elTreePath = elForm.querySelector<HTMLInputElement>('input#tree_path')!;
const previewUrl = elPreviewTab.getAttribute('data-preview-url')!;
const previewContextRef = elPreviewTab.getAttribute('data-preview-context-ref');
let previewContext = `${previewContextRef}/${elTreePath.value}`;
previewContext = previewContext.substring(0, previewContext.lastIndexOf('/'));
const formData = new FormData();
formData.append('mode', 'file');
formData.append('context', previewContext);
formData.append('text', elForm.querySelector<HTMLTextAreaElement>('.tab[data-tab="write"] textarea').value);
formData.append('text', elForm.querySelector<HTMLTextAreaElement>('.tab[data-tab="write"] textarea')!.value);
formData.append('file_path', elTreePath.value);
const response = await POST(previewUrl, {data: formData});
const data = await response.text();
@@ -41,17 +42,21 @@ export function initRepoEditor() {
el.addEventListener('input', () => {
if (el.value === 'commit-to-new-branch') {
showElem('.quick-pull-branch-name');
document.querySelector<HTMLInputElement>('.quick-pull-branch-name input').required = true;
document.querySelector<HTMLInputElement>('.quick-pull-branch-name input')!.required = true;
} else {
hideElem('.quick-pull-branch-name');
document.querySelector<HTMLInputElement>('.quick-pull-branch-name input').required = false;
document.querySelector<HTMLInputElement>('.quick-pull-branch-name input')!.required = false;
}
document.querySelector('#commit-button').textContent = el.getAttribute('data-button-text');
document.querySelector('#commit-button')!.textContent = el.getAttribute('data-button-text');
});
}
const filenameInput = document.querySelector<HTMLInputElement>('#file-name');
// ATTENTION: two pages have this filename input
// * new/edit file page: there is a code editor
// * upload page: there is no code editor, but a uploader
const filenameInput = document.querySelector<HTMLInputElement>('#file-name')!;
if (!filenameInput) return;
filenameInput.value = filenameInput.defaultValue; // prevent browser from restoring form values on refresh
function joinTreePath() {
const parts = [];
for (const el of document.querySelectorAll('.breadcrumb span.section')) {
@@ -61,7 +66,7 @@ export function initRepoEditor() {
if (filenameInput.value) {
parts.push(filenameInput.value);
}
document.querySelector<HTMLInputElement>('#tree_path').value = parts.join('/');
document.querySelector<HTMLInputElement>('#tree_path')!.value = parts.join('/');
}
filenameInput.addEventListener('input', function () {
const parts = filenameInput.value.split('/');
@@ -76,8 +81,8 @@ export function initRepoEditor() {
if (trimValue === '..') {
// remove previous tree path
if (links.length > 0) {
const link = links.pop();
const divider = dividers.pop();
const link = links.pop()!;
const divider = dividers.pop()!;
link.remove();
divider.remove();
}
@@ -104,7 +109,7 @@ export function initRepoEditor() {
}
}
containSpace = containSpace || Array.from(links).some((link) => {
const value = link.querySelector('a').textContent;
const value = link.querySelector('a')!.textContent;
return value.trim() !== value;
});
containSpace = containSpace || parts[parts.length - 1].trim() !== parts[parts.length - 1];
@@ -113,9 +118,9 @@ export function initRepoEditor() {
warningDiv = document.createElement('div');
warningDiv.classList.add('ui', 'warning', 'message', 'flash-message', 'flash-warning', 'space-related');
warningDiv.innerHTML = html`<p>File path contains leading or trailing whitespace.</p>`;
// Add display 'block' because display is set to 'none' in formantic\build\semantic.css
warningDiv.style.display = 'block';
const inputContainer = document.querySelector('.repo-editor-header');
// Change to `block` display because it is set to 'none' in fomantic/build/semantic.css
warningDiv.classList.add('tw-block');
const inputContainer = document.querySelector('.repo-editor-header')!;
inputContainer.insertAdjacentElement('beforebegin', warningDiv);
}
showElem(warningDiv);
@@ -132,7 +137,7 @@ export function initRepoEditor() {
e.preventDefault();
const lastSection = sections[sections.length - 1];
const lastDivider = dividers.length ? dividers[dividers.length - 1] : null;
const value = lastSection.querySelector('a').textContent;
const value = lastSection.querySelector('a')!.textContent;
filenameInput.value = value + filenameInput.value;
this.setSelectionRange(value.length, value.length);
lastDivider?.remove();
@@ -141,15 +146,16 @@ export function initRepoEditor() {
}
});
const elForm = document.querySelector<HTMLFormElement>('.repository.editor .edit.form');
const elForm = document.querySelector<HTMLFormElement>('.repository.editor .edit.form')!;
// on the upload page, there is no editor(textarea)
// see the ATTENTION above, on the upload page, there is no editor(textarea)
// so only the filename input above is initialized, the code below (for the code editor) will be skipped
const editArea = document.querySelector<HTMLTextAreaElement>('.page-content.repository.editor textarea#edit_area');
if (!editArea) return;
// Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
// to enable or disable the commit button
const commitButton = document.querySelector<HTMLButtonElement>('#commit-button');
const commitButton = document.querySelector<HTMLButtonElement>('#commit-button')!;
const dirtyFileClass = 'dirty-file';
const syncCommitButtonState = () => {
@@ -170,22 +176,28 @@ export function initRepoEditor() {
(async () => {
const editor = await createCodeEditor(editArea, filenameInput);
filenameInput.addEventListener('input', onInputDebounce(() => editor.updateFilename(filenameInput.value)));
// 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);
editor.view.dispatch({
changes: {from: 0, to: editor.view.state.doc.length, insert: value},
});
}
commitButton.addEventListener('click', async (e) => {
if (editor.trimTrailingWhitespace) {
trimTrailingWhitespaceFromView(editor.view);
}
// A modal which asks if an empty file should be committed
if (!editArea.value) {
e.preventDefault();
if (await confirmModal({
header: elForm.getAttribute('data-text-empty-confirm-header'),
content: elForm.getAttribute('data-text-empty-confirm-content'),
header: elForm.getAttribute('data-text-empty-confirm-header')!,
content: elForm.getAttribute('data-text-empty-confirm-content')!,
})) {
ignoreAreYouSure(elForm);
submitFormFetchAction(elForm);
@@ -197,5 +209,5 @@ export function initRepoEditor() {
export function renderPreviewPanelContent(previewPanel: Element, htmlContent: string) {
// the content is from the server, so it is safe to use innerHTML
previewPanel.innerHTML = html`<div class="render-content markup">${htmlRaw(htmlContent)}</div>`;
previewPanel.innerHTML = html`<div class="render-content render-preview markup">${htmlRaw(htmlContent)}</div>`;
}
package/gitea/source/web_src/js/features/repo-findfile.ts
+13 -52
View File
@@ -1,13 +1,7 @@
import {svg} from '../svg.ts';
import {toggleElem} from '../utils/dom.ts';
import {pathEscapeSegments} from '../utils/url.ts';
import {GET} from '../modules/fetch.ts';
import {createApp} from 'vue';
import {registerGlobalInitFunc} from '../modules/observer.ts';
const threshold = 50;
let files: Array<string> = [];
let repoFindFileInput: HTMLInputElement;
let repoFindFileTableBody: HTMLElement;
let repoFindFileNoResult: HTMLElement;
// 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
@@ -73,48 +67,15 @@ export function filterRepoFilesWeighted(files: Array<string>, filter: string) {
return filterResult;
}
function filterRepoFiles(filter: string) {
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;
span.title = span.textContent;
// 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.querySelector('#repo-file-find-input');
if (!repoFindFileInput) return;
repoFindFileTableBody = document.querySelector('#repo-find-file-table tbody');
repoFindFileNoResult = document.querySelector('#repo-find-file-no-result');
repoFindFileInput.addEventListener('input', () => filterRepoFiles(repoFindFileInput.value));
loadRepoFiles();
export function initRepoFileSearch() {
registerGlobalInitFunc('initRepoFileSearch', async (el) => {
const {default: RepoFileSearch} = await import('../components/RepoFileSearch.vue');
createApp(RepoFileSearch, {
repoLink: el.getAttribute('data-repo-link'),
currentRefNameSubURL: el.getAttribute('data-current-ref-name-sub-url'),
treeListUrl: el.getAttribute('data-tree-list-url'),
noResultsText: el.getAttribute('data-no-results-text'),
placeholder: el.getAttribute('data-placeholder'),
}).mount(el);
});
}
package/gitea/source/web_src/js/features/repo-graph.ts
+3 -3
View File
@@ -6,8 +6,8 @@ export function initRepoGraphGit() {
const graphContainer = document.querySelector<HTMLElement>('#git-graph-container');
if (!graphContainer) return;
const elColorMonochrome = document.querySelector<HTMLElement>('#flow-color-monochrome');
const elColorColored = document.querySelector<HTMLElement>('#flow-color-colored');
const elColorMonochrome = document.querySelector<HTMLElement>('#flow-color-monochrome')!;
const elColorColored = document.querySelector<HTMLElement>('#flow-color-colored')!;
const toggleColorMode = (mode: 'monochrome' | 'colored') => {
toggleElemClass(graphContainer, 'monochrome', mode === 'monochrome');
toggleElemClass(graphContainer, 'colored', mode === 'colored');
@@ -31,7 +31,7 @@ export function initRepoGraphGit() {
elColorMonochrome.addEventListener('click', () => toggleColorMode('monochrome'));
elColorColored.addEventListener('click', () => toggleColorMode('colored'));
const elGraphBody = document.querySelector<HTMLElement>('#git-graph-body');
const elGraphBody = document.querySelector<HTMLElement>('#git-graph-body')!;
const url = new URL(window.location.href);
const params = url.searchParams;
const loadGitGraph = async () => {
package/gitea/source/web_src/js/features/repo-home.ts
+10 -10
View File
@@ -1,5 +1,5 @@
import {stripTags} from '../utils.ts';
import {hideElem, queryElemChildren, showElem, type DOMEvent} from '../utils/dom.ts';
import {hideElem, queryElemChildren, showElem} from '../utils/dom.ts';
import {POST} from '../modules/fetch.ts';
import {showErrorToast, type Toast} from '../modules/toast.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
@@ -10,32 +10,32 @@ export function initRepoTopicBar() {
const mgrBtn = document.querySelector<HTMLButtonElement>('#manage_topic');
if (!mgrBtn) return;
const editDiv = document.querySelector('#topic_edit');
const viewDiv = document.querySelector('#repo-topics');
const topicDropdown = editDiv.querySelector('.ui.dropdown');
let lastErrorToast: Toast;
const editDiv = document.querySelector('#topic_edit')!;
const viewDiv = document.querySelector('#repo-topics')!;
const topicDropdown = editDiv.querySelector('.ui.dropdown')!;
let lastErrorToast: Toast | null = null;
mgrBtn.addEventListener('click', () => {
hideElem([viewDiv, mgrBtn]);
showElem(editDiv);
topicDropdown.querySelector<HTMLInputElement>('input.search').focus();
topicDropdown.querySelector<HTMLInputElement>('input.search')!.focus();
});
document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
document.querySelector('#cancel_topic_edit')!.addEventListener('click', () => {
lastErrorToast?.hideToast();
hideElem(editDiv);
showElem([viewDiv, mgrBtn]);
mgrBtn.focus();
});
document.querySelector<HTMLButtonElement>('#save_topic').addEventListener('click', async (e: DOMEvent<MouseEvent, HTMLButtonElement>) => {
document.querySelector<HTMLButtonElement>('#save_topic')!.addEventListener('click', async (e) => {
lastErrorToast?.hideToast();
const topics = editDiv.querySelector<HTMLInputElement>('input[name=topics]').value;
const topics = editDiv.querySelector<HTMLInputElement>('input[name=topics]')!.value;
const data = new FormData();
data.append('topics', topics);
const response = await POST(e.target.getAttribute('data-link'), {data});
const response = await POST((e.target as HTMLElement).getAttribute('data-link')!, {data});
if (response.ok) {
const responseData = await response.json();
package/gitea/source/web_src/js/features/repo-issue-content.ts
+5 -5
View File
@@ -20,14 +20,14 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
${i18nTextOptions}
${svg('octicon-triangle-down', 14, 'dropdown icon')}
<div class="menu">
<div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
<div class="item tw-text-red" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
</div>
</div>
</div>
<div class="comment-diff-data is-loading"></div>
</div>`);
document.body.append(elDetailDialog);
const elOptionsDropdown = elDetailDialog.querySelector('.ui.dropdown.dialog-header-options');
const elOptionsDropdown = elDetailDialog.querySelector('.ui.dropdown.dialog-header-options')!;
const $fomanticDialog = fomanticQuery(elDetailDialog);
const $fomanticDropdownOptions = fomanticQuery(elOptionsDropdown);
$fomanticDropdownOptions.dropdown({
@@ -74,7 +74,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
const response = await GET(url);
const resp = await response.json();
const commentDiffData = elDetailDialog.querySelector('.comment-diff-data');
const commentDiffData = elDetailDialog.querySelector('.comment-diff-data')!;
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.
@@ -92,7 +92,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
}
function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {
const elHeaderLeft = elCommentItem.querySelector('.comment-header-left');
const elHeaderLeft = elCommentItem.querySelector('.comment-header-left')!;
const menuHtml = `
<div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
&bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
@@ -103,7 +103,7 @@ function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, co
elHeaderLeft.querySelector(`.ui.dropdown.content-history-menu`)?.remove(); // remove the old one if exists
elHeaderLeft.append(createElementFromHTML(menuHtml));
const elDropdown = elHeaderLeft.querySelector('.ui.dropdown.content-history-menu');
const elDropdown = elHeaderLeft.querySelector('.ui.dropdown.content-history-menu')!;
const $fomanticDropdown = fomanticQuery(elDropdown);
$fomanticDropdown.dropdown({
action: 'hide',
package/gitea/source/web_src/js/features/repo-issue-edit.ts
+26 -28
View File
@@ -2,20 +2,20 @@ import {handleReply} from './repo-issue.ts';
import {getComboMarkdownEditor, initComboMarkdownEditor, ComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
import {POST} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts';
import {hideElem, querySingleVisibleElem, showElem, type DOMEvent} from '../utils/dom.ts';
import {hideElem, querySingleVisibleElem, showElem} from '../utils/dom.ts';
import {triggerUploadStateChanged} from './comp/EditorUpload.ts';
import {convertHtmlToMarkdown} from '../markup/html2markdown.ts';
import {applyAreYouSure, reinitializeAreYouSure} from '../vendor/jquery.are-you-sure.ts';
async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
const clickTarget = e.target.closest('.edit-content');
async function tryOnEditContent(e: Event) {
const clickTarget = (e.target as HTMLElement).closest('.edit-content');
if (!clickTarget) return;
e.preventDefault();
const commentContent = clickTarget.closest('.comment-header').nextElementSibling;
const editContentZone = commentContent.querySelector('.edit-content-zone');
let renderContent = commentContent.querySelector('.render-content');
const rawContent = commentContent.querySelector('.raw-content');
const commentContent = clickTarget.closest('.comment-header')!.nextElementSibling!;
const editContentZone = commentContent.querySelector('.edit-content-zone')!;
let renderContent = commentContent.querySelector('.render-content')!;
const rawContent = commentContent.querySelector('.raw-content')!;
let comboMarkdownEditor : ComboMarkdownEditor;
@@ -37,14 +37,14 @@ async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
try {
const params = new URLSearchParams({
content: comboMarkdownEditor.value(),
context: editContentZone.getAttribute('data-context'),
content_version: editContentZone.getAttribute('data-content-version'),
context: String(editContentZone.getAttribute('data-context')),
content_version: String(editContentZone.getAttribute('data-content-version')),
});
for (const file of comboMarkdownEditor.dropzoneGetFiles() ?? []) {
params.append('files[]', file);
}
const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params});
const response = await POST(editContentZone.getAttribute('data-update-url')!, {data: params});
const data = await response.json();
if (!response.ok) {
showErrorToast(data?.errorMessage ?? window.config.i18n.error_occurred);
@@ -67,9 +67,9 @@ async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
commentContent.insertAdjacentHTML('beforeend', data.attachments);
}
} else if (data.attachments === '') {
commentContent.querySelector('.dropzone-attachments').remove();
commentContent.querySelector('.dropzone-attachments')!.remove();
} else {
commentContent.querySelector('.dropzone-attachments').outerHTML = data.attachments;
commentContent.querySelector('.dropzone-attachments')!.outerHTML = data.attachments;
}
comboMarkdownEditor.dropzoneSubmitReload();
} catch (error) {
@@ -84,24 +84,22 @@ async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
showElem(editContentZone);
hideElem(renderContent);
comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'))!;
if (!comboMarkdownEditor) {
editContentZone.innerHTML = document.querySelector('#issue-comment-editor-template').innerHTML;
const form = editContentZone.querySelector('form');
editContentZone.innerHTML = document.querySelector('#issue-comment-editor-template')!.innerHTML;
const form = editContentZone.querySelector('form')!;
applyAreYouSure(form);
const saveButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.primary.button');
const cancelButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.cancel.button');
comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
const saveButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.primary.button')!;
const cancelButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.cancel.button')!;
comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor')!);
const syncUiState = () => saveButton.disabled = comboMarkdownEditor.isUploading();
comboMarkdownEditor.container.addEventListener(ComboMarkdownEditor.EventUploadStateChanged, syncUiState);
cancelButton.addEventListener('click', cancelAndReset);
form.addEventListener('submit', saveAndRefresh);
}
// FIXME: ideally here should reload content and attachment list from backend for existing editor, to avoid losing data
if (!comboMarkdownEditor.value()) {
comboMarkdownEditor.value(rawContent.textContent);
}
// when the content has changed on server side, there is no sync, and this page doesn't have the latest content,
// the editor still shows the old content, server will reject end user's submit by "data-content-version" check
comboMarkdownEditor.value(rawContent.textContent);
comboMarkdownEditor.switchTabToEditor();
comboMarkdownEditor.focus();
triggerUploadStateChanged(comboMarkdownEditor.container);
@@ -109,7 +107,7 @@ async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
function extractSelectedMarkdown(container: HTMLElement) {
const selection = window.getSelection();
if (!selection.rangeCount) return '';
if (!selection?.rangeCount) return '';
const range = selection.getRangeAt(0);
if (!container.contains(range.commonAncestorContainer)) return '';
@@ -127,19 +125,19 @@ async function tryOnQuoteReply(e: Event) {
e.preventDefault();
const contentToQuoteId = clickTarget.getAttribute('data-target');
const targetRawToQuote = document.querySelector<HTMLElement>(`#${contentToQuoteId}.raw-content`);
const targetMarkupToQuote = targetRawToQuote.parentElement.querySelector<HTMLElement>('.render-content.markup');
const targetRawToQuote = document.querySelector<HTMLElement>(`#${contentToQuoteId}.raw-content`)!;
const targetMarkupToQuote = targetRawToQuote.parentElement!.querySelector<HTMLElement>('.render-content.markup')!;
let contentToQuote = extractSelectedMarkdown(targetMarkupToQuote);
if (!contentToQuote) contentToQuote = targetRawToQuote.textContent;
const quotedContent = `${contentToQuote.replace(/^/mg, '> ')}\n\n`;
let editor;
if (clickTarget.classList.contains('quote-reply-diff')) {
const replyBtn = clickTarget.closest('.comment-code-cloud').querySelector<HTMLElement>('button.comment-form-reply');
const replyBtn = clickTarget.closest('.comment-code-cloud')!.querySelector<HTMLElement>('button.comment-form-reply')!;
editor = await handleReply(replyBtn);
} else {
// for normal issue/comment page
editor = getComboMarkdownEditor(document.querySelector('#comment-form .combo-markdown-editor'));
editor = getComboMarkdownEditor(document.querySelector('#comment-form .combo-markdown-editor'))!;
}
if (editor.value()) {
package/gitea/source/web_src/js/features/repo-issue-list.ts
+21 -20
View File
@@ -1,6 +1,6 @@
import {updateIssuesMeta} from './repo-common.ts';
import {toggleElem, queryElems, isElemVisible} from '../utils/dom.ts';
import {html} from '../utils/html.ts';
import {html, htmlRaw} from '../utils/html.ts';
import {confirmModal} from './comp/ConfirmModal.ts';
import {showErrorToast} from '../modules/toast.ts';
import {createSortable} from '../modules/sortable.ts';
@@ -34,8 +34,8 @@ function initRepoIssueListCheckboxes() {
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<HTMLElement>('#issue-filters, #issue-actions');
const visiblePanel = Array.from(panels).find((el) => isElemVisible(el));
const toolbarLeft = visiblePanel.querySelector('.issue-list-toolbar-left');
const visiblePanel = Array.from(panels).find((el) => isElemVisible(el))!;
const toolbarLeft = visiblePanel.querySelector('.issue-list-toolbar-left')!;
toolbarLeft.prepend(issueSelectAll);
};
@@ -54,12 +54,12 @@ function initRepoIssueListCheckboxes() {
async (e: MouseEvent) => {
e.preventDefault();
const url = el.getAttribute('data-url');
let action = el.getAttribute('data-action');
let elementId = el.getAttribute('data-element-id');
const url = el.getAttribute('data-url')!;
let action = el.getAttribute('data-action')!;
let elementId = el.getAttribute('data-element-id')!;
const issueIDList: string[] = [];
for (const el of document.querySelectorAll('.issue-checkbox:checked')) {
issueIDList.push(el.getAttribute('data-issue-id'));
issueIDList.push(el.getAttribute('data-issue-id')!);
}
const issueIDs = issueIDList.join(',');
if (!issueIDs) return;
@@ -77,7 +77,7 @@ function initRepoIssueListCheckboxes() {
// for delete
if (action === 'delete') {
const confirmText = el.getAttribute('data-action-delete-confirm');
const confirmText = el.getAttribute('data-action-delete-confirm')!;
if (!await confirmModal({content: confirmText, confirmButtonColor: 'red'})) {
return;
}
@@ -95,12 +95,12 @@ function initRepoIssueListCheckboxes() {
function initDropdownUserRemoteSearch(el: Element) {
let searchUrl = el.getAttribute('data-search-url');
const actionJumpUrl = el.getAttribute('data-action-jump-url');
const actionJumpUrl = el.getAttribute('data-action-jump-url')!;
let selectedUsername = el.getAttribute('data-selected-username') || '';
const $searchDropdown = fomanticQuery(el);
const elMenu = el.querySelector('.menu');
const elSearchInput = el.querySelector<HTMLInputElement>('.ui.search input');
const elItemFromInput = el.querySelector('.menu > .item-from-input');
const elMenu = el.querySelector('.menu')!;
const elSearchInput = el.querySelector<HTMLInputElement>('.ui.search input')!;
const elItemFromInput = el.querySelector('.menu > .item-from-input')!;
$searchDropdown.dropdown('setting', {
fullTextSearch: true,
@@ -138,10 +138,11 @@ function initDropdownUserRemoteSearch(el: Element) {
// the content is provided by backend IssuePosters handler
processedResults.length = 0;
for (const item of resp.results) {
let nameHtml = html`<img class="ui avatar tw-align-middle" src="${item.avatar_link}" aria-hidden="true" alt width="20" height="20"><span class="gt-ellipsis">${item.username}</span>`;
if (item.full_name) nameHtml += html`<span class="search-fullname tw-ml-2">${item.full_name}</span>`;
const htmlAvatar = html`<img class="ui avatar tw-align-middle" src="${item.avatar_link}" aria-hidden="true" alt width="20" height="20">`;
const htmlFullName = item.full_name ? html`<span class="username-fullname gt-ellipsis">(${item.full_name})</span>` : '';
const htmlItem = html`<span class="username-display">${htmlRaw(htmlAvatar)}<span>${item.username}</span>${htmlRaw(htmlFullName)}</span>`;
if (selectedUsername.toLowerCase() === item.username.toLowerCase()) selectedUsername = item.username;
processedResults.push({value: item.username, name: nameHtml});
processedResults.push({value: item.username, name: htmlItem});
}
resp.results = processedResults;
return resp;
@@ -183,25 +184,25 @@ function initPinRemoveButton() {
const id = Number(el.getAttribute('data-issue-id'));
// Send the unpin request
const response = await DELETE(el.getAttribute('data-unpin-url'));
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();
el.closest(`div.issue-card[data-issue-id="${id}"]`)!.remove();
}
});
}
}
async function pinMoveEnd(e: SortableEvent) {
const url = e.item.getAttribute('data-move-url');
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}});
await POST(url, {data: {id, position: e.newIndex! + 1}});
}
async function initIssuePinSort() {
const pinDiv = document.querySelector('#issue-pins');
const pinDiv = document.querySelector<HTMLElement>('#issue-pins');
if (pinDiv === null) return;
package/gitea/source/web_src/js/features/repo-issue-pull.ts
+11 -11
View File
@@ -1,5 +1,4 @@
import {createApp} from 'vue';
import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
import {GET, POST} from '../modules/fetch.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {createElementFromHTML} from '../utils/dom.ts';
@@ -8,21 +7,21 @@ function initRepoPullRequestUpdate(el: HTMLElement) {
const prUpdateButtonContainer = el.querySelector('#update-pr-branch-with-base');
if (!prUpdateButtonContainer) return;
const prUpdateButton = prUpdateButtonContainer.querySelector<HTMLButtonElement>(':scope > button');
const prUpdateDropdown = prUpdateButtonContainer.querySelector(':scope > .ui.dropdown');
const prUpdateButton = prUpdateButtonContainer.querySelector<HTMLButtonElement>(':scope > button')!;
const prUpdateDropdown = prUpdateButtonContainer.querySelector(':scope > .ui.dropdown')!;
prUpdateButton.addEventListener('click', async function (e) {
e.preventDefault();
const redirect = this.getAttribute('data-redirect');
this.classList.add('is-loading');
let response: Response;
let response: Response | undefined;
try {
response = await POST(this.getAttribute('data-do'));
response = await POST(this.getAttribute('data-do')!);
} catch (error) {
console.error(error);
} finally {
this.classList.remove('is-loading');
}
let data: Record<string, any>;
let data: Record<string, any> | undefined;
try {
data = await response?.json(); // the response is probably not a JSON
} catch (error) {
@@ -54,8 +53,8 @@ function initRepoPullRequestUpdate(el: HTMLElement) {
function initRepoPullRequestCommitStatus(el: HTMLElement) {
for (const btn of el.querySelectorAll('.commit-status-hide-checks')) {
const panel = btn.closest('.commit-status-panel');
const list = panel.querySelector<HTMLElement>('.commit-status-list');
const panel = btn.closest('.commit-status-panel')!;
const list = panel.querySelector<HTMLElement>('.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');
@@ -63,15 +62,16 @@ function initRepoPullRequestCommitStatus(el: HTMLElement) {
}
}
function initRepoPullRequestMergeForm(box: HTMLElement) {
async function initRepoPullRequestMergeForm(box: HTMLElement) {
const el = box.querySelector('#pull-request-merge-form');
if (!el) return;
const {default: PullRequestMergeForm} = await import('../components/PullRequestMergeForm.vue');
const view = createApp(PullRequestMergeForm);
view.mount(el);
}
function executeScripts(elem: HTMLElement) {
function executeScripts(elem: Element) {
for (const oldScript of elem.querySelectorAll('script')) {
// TODO: that's the only way to load the data for the merge form. In the future
// we need to completely decouple the page data and embedded script
@@ -96,7 +96,7 @@ export function initRepoPullMergeBox(el: HTMLElement) {
const reloadingInterval = parseInt(reloadingIntervalValue);
const pullLink = el.getAttribute('data-pull-link');
let timerId: number;
let timerId: number | null;
let reloadMergeBox: () => Promise<void>;
const stopReloading = () => {
package/gitea/source/web_src/js/features/repo-issue-sidebar-combolist.test.ts
+61
View File
@@ -0,0 +1,61 @@
import {syncIssueMainContentTimelineItems} from './repo-issue-sidebar-combolist.ts';
import {createElementFromHTML} from '../utils/dom.ts';
describe('syncIssueMainContentTimelineItems', () => {
test('InsertNew', () => {
const oldContent = createElementFromHTML(`
<div>
<div class="timeline-item">First</div>
<div class="timeline-item" id="timeline-comments-end"></div>
</div>
`);
const newContent = createElementFromHTML(`
<div>
<div class="timeline-item" id="a">New</div>
</div>
`);
syncIssueMainContentTimelineItems(oldContent, newContent);
expect(oldContent.innerHTML.replace(/>\s+</g, '><').trim()).toBe(
`<div class="timeline-item">First</div>` +
`<div class="timeline-item" id="a">New</div>` +
`<div class="timeline-item" id="timeline-comments-end"></div>`,
);
});
test('Sync', () => {
const oldContent = createElementFromHTML(`
<div>
<div class="timeline-item">First</div>
<div class="timeline-item" id="it-1">Item 1</div>
<div class="timeline-item event" id="it-2">Item 2</div>
<div class="timeline-item" id="it-3">Item 3</div>
<div class="timeline-item event" id="it-4">Item 4</div>
<div class="timeline-item" id="timeline-comments-end"></div>
<div class="timeline-item">Other</div>
</div>
`);
const newContent = createElementFromHTML(`
<div>
<div class="timeline-item" id="it-1">New 1</div>
<div class="timeline-item event" id="it-2">New 2</div>
<div class="timeline-item" id="it-x">New X</div>
</div>
`);
syncIssueMainContentTimelineItems(oldContent, newContent);
// Item 1 won't be replaced because it's not an event
// Item 2 will be replaced with New 2
// Item 3 will be kept because it's not in new content
// Item 4 will be removed because it's not in new content, and it's an event
// New X will be inserted at the end of timeline items (before timeline-comments-end)
expect(oldContent.innerHTML.replace(/>\s+</g, '><').trim()).toBe(
`<div class="timeline-item">First</div>` +
`<div class="timeline-item" id="it-1">Item 1</div>` +
`<div class="timeline-item event" id="it-2">New 2</div>` +
`<div class="timeline-item" id="it-3">Item 3</div>` +
`<div class="timeline-item" id="it-x">New X</div>` +
`<div class="timeline-item" id="timeline-comments-end"></div>` +
`<div class="timeline-item">Other</div>`,
);
});
});
package/gitea/source/web_src/js/features/repo-issue-sidebar-combolist.ts
+88 -30
View File
@@ -1,25 +1,40 @@
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {POST} from '../modules/fetch.ts';
import {GET, POST} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts';
import {addDelegatedEventListener, queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
import {parseDom} from '../utils.ts';
// if there are draft comments, confirm before reloading, to avoid losing comments
function issueSidebarReloadConfirmDraftComment() {
const commentTextareas = [
document.querySelector<HTMLTextAreaElement>('.edit-content-zone:not(.tw-hidden) textarea'),
document.querySelector<HTMLTextAreaElement>('#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;
export function syncIssueMainContentTimelineItems(oldMainContent: Element, newMainContent: Element) {
// find the end of comments timeline by "id=timeline-comments-end" in current main content, and insert new items before it
const timelineEnd = oldMainContent.querySelector('.timeline-item[id="timeline-comments-end"]');
if (!timelineEnd) return;
const oldTimelineItems = oldMainContent.querySelectorAll(`.timeline-item[id]`);
for (const oldItem of oldTimelineItems) {
const oldItemId = oldItem.getAttribute('id')!;
const newItem = newMainContent.querySelector(`.timeline-item[id="${CSS.escape(oldItemId)}"]`);
if (oldItem.classList.contains('event') && !newItem) {
// if the item is not in new content, we want to remove it from old content only if it's an event item, otherwise we keep it
oldItem.remove();
}
}
window.location.reload();
const newTimelineItems = newMainContent.querySelectorAll(`.timeline-item[id]`);
for (const newItem of newTimelineItems) {
const newItemId = newItem.getAttribute('id')!;
const oldItem = oldMainContent.querySelector(`.timeline-item[id="${CSS.escape(newItemId)}"]`);
if (oldItem) {
if (oldItem.classList.contains('event')) {
// for event item (e.g.: "add & remove labels"), we want to replace the existing one if exists
// because the label operations can be merged into one event item, so the new item might be different from the old one
oldItem.replaceWith(newItem);
window.htmx.process(newItem);
}
continue;
}
timelineEnd.insertAdjacentElement('beforebegin', newItem);
window.htmx.process(newItem);
}
}
export class IssueSidebarComboList {
@@ -27,29 +42,36 @@ export class IssueSidebarComboList {
updateAlgo: string;
selectionMode: string;
elDropdown: HTMLElement;
elList: HTMLElement;
elList: HTMLElement | null;
elComboValue: HTMLInputElement;
initialValues: string[];
container: HTMLElement;
elIssueMainContent: HTMLElement;
elIssueSidebar: HTMLElement;
constructor(container: HTMLElement) {
this.container = container;
this.updateUrl = container.getAttribute('data-update-url');
this.updateAlgo = container.getAttribute('data-update-algo');
this.selectionMode = container.getAttribute('data-selection-mode');
this.updateUrl = container.getAttribute('data-update-url')!;
this.updateAlgo = container.getAttribute('data-update-algo')!;
this.selectionMode = container.getAttribute('data-selection-mode')!;
if (!['single', 'multiple'].includes(this.selectionMode)) throw new Error(`Invalid data-update-on: ${this.selectionMode}`);
if (!['diff', 'all'].includes(this.updateAlgo)) throw new Error(`Invalid data-update-algo: ${this.updateAlgo}`);
this.elDropdown = container.querySelector<HTMLElement>(':scope > .ui.dropdown');
this.elDropdown = container.querySelector<HTMLElement>(':scope > .ui.dropdown')!;
this.elList = container.querySelector<HTMLElement>(':scope > .ui.list');
this.elComboValue = container.querySelector<HTMLInputElement>(':scope > .combo-value');
this.elComboValue = container.querySelector<HTMLInputElement>(':scope > .combo-value')!;
this.elIssueMainContent = document.querySelector('.issue-content-left')!;
this.elIssueSidebar = document.querySelector('.issue-content-right')!;
}
collectCheckedValues() {
return Array.from(this.elDropdown.querySelectorAll('.menu > .item.checked'), (el) => el.getAttribute('data-value'));
return Array.from(this.elDropdown.querySelectorAll('.menu > .item.checked'), (el) => el.getAttribute('data-value')!);
}
updateUiList(changedValues: Array<string>) {
const elEmptyTip = this.elList.querySelector('.item.empty-list');
if (!this.elList) return;
const elEmptyTip = this.elList.querySelector('.item.empty-list')!;
queryElemChildren(this.elList, '.item:not(.empty-list)', (el) => el.remove());
for (const value of changedValues) {
const el = this.elDropdown.querySelector<HTMLElement>(`.menu > .item[data-value="${CSS.escape(value)}"]`);
@@ -62,22 +84,58 @@ export class IssueSidebarComboList {
toggleElem(elEmptyTip, !hasItems);
}
async updateToBackend(changedValues: Array<string>) {
async reloadPagePartially() {
const resp = await GET(window.location.href);
if (!resp.ok) throw new Error(`Failed to reload page: ${resp.statusText}`);
const doc = parseDom(await resp.text(), 'text/html');
// we can safely replace the whole right part (sidebar) because there are only some dropdowns and lists
const newSidebar = doc.querySelector('.issue-content-right')!;
this.elIssueSidebar.replaceWith(newSidebar);
window.htmx.process(newSidebar);
// for the main content (left side), at the moment we only support handling known timeline items
const newMainContent = doc.querySelector('.issue-content-left')!;
syncIssueMainContentTimelineItems(this.elIssueMainContent, newMainContent);
}
async sendRequestToBackend(changedValues: Array<string>): Promise<Response | null> {
let lastResp: Response | null = null;
if (this.updateAlgo === 'diff') {
for (const value of this.initialValues) {
if (!changedValues.includes(value)) {
await POST(this.updateUrl, {data: new URLSearchParams({action: 'detach', id: value})});
lastResp = await POST(this.updateUrl, {data: new URLSearchParams({action: 'detach', id: value})});
if (!lastResp.ok) return lastResp;
}
}
for (const value of changedValues) {
if (!this.initialValues.includes(value)) {
await POST(this.updateUrl, {data: new URLSearchParams({action: 'attach', id: value})});
lastResp = await POST(this.updateUrl, {data: new URLSearchParams({action: 'attach', id: value})});
if (!lastResp.ok) return lastResp;
}
}
} else {
await POST(this.updateUrl, {data: new URLSearchParams({id: changedValues.join(',')})});
lastResp = await POST(this.updateUrl, {data: new URLSearchParams({id: changedValues.join(',')})});
}
return lastResp;
}
async updateToBackend(changedValues: Array<string>) {
this.elIssueSidebar.classList.add('is-loading');
try {
const resp = await this.sendRequestToBackend(changedValues);
if (!resp) return; // no request sent, no need to reload
if (!resp.ok) {
showErrorToast(`Failed to update to backend: ${resp.statusText}`);
return;
}
await this.reloadPagePartially();
} catch (e) {
console.error('Failed to update to backend', e);
showErrorToast(`Failed to update to backend: ${e}`);
} finally {
this.elIssueSidebar.classList.remove('is-loading');
}
issueSidebarReloadConfirmDraftComment();
}
async doUpdate() {
package/gitea/source/web_src/js/features/repo-issue-sidebar.md
+13
View File
@@ -23,6 +23,19 @@ When the selected items change, the `combo-value` input will be updated.
If there is `data-update-url`, it also calls backend to attach/detach the changed items.
Also, the changed items will be synchronized to the `ui list` items.
The menu items must have correct `href`, otherwise the links of synchronized (cloned) items would be wrong.
The `ui list` is optional, so a single dropdown can also work, to select items and update them to backend.
Synchronization logic:
* On page load:
* If the dropdown menu contains checked items, there will be no synchronization.
In this case, it's assumed that the dropdown menu is already in sync with the list.
* If the dropdown menu doesn't contain checked items, it will use dropdown's value to mark the selected items as checked.
And the selected (checked) items will be synchronized to the list.
Dropdown's value should be empty if the there is no dropdown item but a pre-defined list item need to be displayed.
* On dropdown selection change:
* The selected items will be synchronized to the list after the dropdown is hidden
The items with the same data-scope only allow one selected at a time.
package/gitea/source/web_src/js/features/repo-issue-sidebar.ts
+85 -18
View File
@@ -1,17 +1,23 @@
import {POST} from '../modules/fetch.ts';
import {queryElems, toggleElem} from '../utils/dom.ts';
import {IssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
import {registerGlobalInitFunc} from '../modules/observer.ts';
import {parseIssuePageInfo} from '../utils.ts';
import {html} from '../utils/html.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {showTemporaryTooltip} from '../modules/tippy.ts';
function initBranchSelector() {
const {appSubUrl} = window.config;
function initRepoIssueBranchSelector(elSidebar: HTMLElement) {
// TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl"
const elSelectBranch = document.querySelector('.ui.dropdown.select-branch.branch-selector-dropdown');
const elSelectBranch = elSidebar.querySelector('.ui.dropdown.select-branch.branch-selector-dropdown');
if (!elSelectBranch) return;
const urlUpdateIssueRef = elSelectBranch.getAttribute('data-url-update-issueref');
const elBranchMenu = elSelectBranch.querySelector('.reference-list-menu');
const elBranchMenu = elSelectBranch.querySelector('.reference-list-menu')!;
queryElems(elBranchMenu, '.item:not(.no-select)', (el) => el.addEventListener('click', async function (e) {
e.preventDefault();
const selectedValue = this.getAttribute('data-id'); // eg: "refs/heads/my-branch"
const selectedValue = this.getAttribute('data-id')!; // eg: "refs/heads/my-branch"
const selectedText = this.getAttribute('data-name'); // eg: "my-branch"
if (urlUpdateIssueRef) {
// for existing issue, send request to update issue ref, and reload page
@@ -23,30 +29,91 @@ function initBranchSelector() {
}
} else {
// for new issue, only update UI&form, do not send request/reload
const selectedHiddenSelector = this.getAttribute('data-id-selector');
document.querySelector<HTMLInputElement>(selectedHiddenSelector).value = selectedValue;
elSelectBranch.querySelector('.text-branch-name').textContent = selectedText;
const selectedHiddenSelector = this.getAttribute('data-id-selector')!;
document.querySelector<HTMLInputElement>(selectedHiddenSelector)!.value = selectedValue;
elSelectBranch.querySelector('.text-branch-name')!.textContent = selectedText;
}
}));
}
function initRepoIssueDue() {
const form = document.querySelector<HTMLFormElement>('.issue-due-form');
function initRepoIssueDue(elSidebar: HTMLElement) {
const form = elSidebar.querySelector<HTMLFormElement>('.issue-due-form');
if (!form) return;
const deadline = form.querySelector<HTMLInputElement>('input[name=deadline]');
document.querySelector('.issue-due-edit')?.addEventListener('click', () => {
const deadline = form.querySelector<HTMLInputElement>('input[name=deadline]')!;
elSidebar.querySelector('.issue-due-edit')?.addEventListener('click', () => {
toggleElem(form);
});
document.querySelector('.issue-due-remove')?.addEventListener('click', () => {
elSidebar.querySelector('.issue-due-remove')?.addEventListener('click', () => {
deadline.value = '';
form.dispatchEvent(new Event('submit', {cancelable: true, bubbles: true}));
});
}
export function initRepoIssueSidebar() {
initBranchSelector();
initRepoIssueDue();
export function initRepoIssueSidebarDependency(elSidebar: HTMLElement) {
const elDropdown = elSidebar.querySelector('#new-dependency-drop-list');
if (!elDropdown) return;
// init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions
queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
const issuePageInfo = parseIssuePageInfo();
const crossRepoSearch = elDropdown.getAttribute('data-issue-cross-repo-search');
let issueSearchUrl = `${issuePageInfo.repoLink}/issues/search?q={query}&type=${issuePageInfo.issueDependencySearchType}`;
if (crossRepoSearch === 'true') {
issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${issuePageInfo.repoId}&type=${issuePageInfo.issueDependencySearchType}`;
}
fomanticQuery(elDropdown).dropdown({
fullTextSearch: true,
apiSettings: {
cache: false,
rawResponse: true,
url: issueSearchUrl,
onResponse(response: any) {
const filteredResponse = {success: true, results: [] as Array<Record<string, any>>};
const currIssueId = elDropdown.getAttribute('data-issue-id');
// Parse the response from the api to work with our dropdown
for (const issue of response) {
// Don't list current issue in the dependency list.
if (String(issue.id) === currIssueId) continue;
filteredResponse.results.push({
value: issue.id,
name: html`<div class="gt-ellipsis">#${issue.number} ${issue.title}</div><div class="text small tw-break-anywhere">${issue.repository.full_name}</div>`,
});
}
return filteredResponse;
},
},
});
}
export function initRepoPullRequestAllowMaintainerEdit(elSidebar: HTMLElement) {
const wrapper = elSidebar.querySelector('#allow-edits-from-maintainers')!;
if (!wrapper) return;
const checkbox = wrapper.querySelector<HTMLInputElement>('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: String(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 initRepoIssueSidebar() {
registerGlobalInitFunc('initRepoIssueSidebar', (elSidebar) => {
initRepoIssueBranchSelector(elSidebar);
initRepoIssueDue(elSidebar);
initRepoIssueSidebarDependency(elSidebar);
initRepoPullRequestAllowMaintainerEdit(elSidebar);
// init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions
queryElems(elSidebar, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
});
}
package/gitea/source/web_src/js/features/repo-issue.ts
+73 -132
View File
@@ -1,5 +1,5 @@
import {html, htmlEscape} from '../utils/html.ts';
import {createTippy, showTemporaryTooltip} from '../modules/tippy.ts';
import {htmlEscape} from '../utils/html.ts';
import {createTippy} from '../modules/tippy.ts';
import {
addDelegatedEventListener,
createElementFromHTML,
@@ -7,11 +7,10 @@ import {
queryElems,
showElem,
toggleElem,
type DOMEvent,
} from '../utils/dom.ts';
import {setFileFolding} from './file-fold.ts';
import {ComboMarkdownEditor, getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
import {parseIssuePageInfo, toAbsoluteUrl} from '../utils.ts';
import {toAbsoluteUrl} from '../utils.ts';
import {GET, POST} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts';
import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
@@ -21,40 +20,6 @@ import {registerGlobalInitFunc} from '../modules/observer.ts';
const {appSubUrl} = window.config;
export function initRepoIssueSidebarDependency() {
const elDropdown = document.querySelector('#new-dependency-drop-list');
if (!elDropdown) return;
const issuePageInfo = parseIssuePageInfo();
const crossRepoSearch = elDropdown.getAttribute('data-issue-cross-repo-search');
let issueSearchUrl = `${issuePageInfo.repoLink}/issues/search?q={query}&type=${issuePageInfo.issueDependencySearchType}`;
if (crossRepoSearch === 'true') {
issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${issuePageInfo.repoId}&type=${issuePageInfo.issueDependencySearchType}`;
}
fomanticQuery(elDropdown).dropdown({
fullTextSearch: true,
apiSettings: {
cache: false,
rawResponse: true,
url: issueSearchUrl,
onResponse(response: any) {
const filteredResponse = {success: true, results: [] as Array<Record<string, any>>};
const currIssueId = elDropdown.getAttribute('data-issue-id');
// Parse the response from the api to work with our dropdown
for (const issue of response) {
// Don't list current issue in the dependency list.
if (String(issue.id) === currIssueId) continue;
filteredResponse.results.push({
value: issue.id,
name: html`<div class="gt-ellipsis">#${issue.number} ${issue.title}</div><div class="text small tw-break-anywhere">${issue.repository.full_name}</div>`,
});
}
return filteredResponse;
},
},
});
}
function initRepoIssueLabelFilter(elDropdown: HTMLElement) {
const url = new URL(window.location.href);
const showArchivedLabels = url.searchParams.get('archived_labels') === 'true';
@@ -67,7 +32,7 @@ function initRepoIssueLabelFilter(elDropdown: HTMLElement) {
const excludeLabel = (e: MouseEvent | KeyboardEvent, item: Element) => {
e.preventDefault();
e.stopPropagation();
const labelId = item.getAttribute('data-label-id');
const labelId = item.getAttribute('data-label-id')!;
let labelIds: string[] = queryLabels ? queryLabels.split(',') : [];
labelIds = labelIds.filter((id) => Math.abs(parseInt(id)) !== Math.abs(parseInt(labelId)));
labelIds.push(`-${labelId}`);
@@ -83,20 +48,21 @@ function initRepoIssueLabelFilter(elDropdown: HTMLElement) {
});
// alt(or option) + enter to exclude selected label
elDropdown.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.isComposing) return;
if (e.altKey && e.key === 'Enter') {
const selectedItem = elDropdown.querySelector('.label-filter-query-item.selected');
if (selectedItem) excludeLabel(e, selectedItem);
}
});
// no "labels" query parameter means "all issues"
elDropdown.querySelector('.label-filter-query-default').classList.toggle('selected', queryLabels === '');
elDropdown.querySelector('.label-filter-query-default')!.classList.toggle('selected', queryLabels === '');
// "labels=0" query parameter means "issues without label"
elDropdown.querySelector('.label-filter-query-not-set').classList.toggle('selected', queryLabels === '0');
elDropdown.querySelector('.label-filter-query-not-set')!.classList.toggle('selected', queryLabels === '0');
// prepare to process "archived" labels
const elShowArchivedLabel = elDropdown.querySelector('.label-filter-archived-toggle');
if (!elShowArchivedLabel) return;
const elShowArchivedInput = elShowArchivedLabel.querySelector<HTMLInputElement>('input');
const elShowArchivedInput = elShowArchivedLabel.querySelector<HTMLInputElement>('input')!;
elShowArchivedInput.checked = showArchivedLabels;
const archivedLabels = elDropdown.querySelectorAll('.item[data-is-archived]');
// if no archived labels, hide the toggle and return
@@ -107,7 +73,7 @@ function initRepoIssueLabelFilter(elDropdown: HTMLElement) {
// show the archived labels if the toggle is checked or the label is selected
for (const label of archivedLabels) {
toggleElem(label, showArchivedLabels || selectedLabelIds.has(label.getAttribute('data-label-id')));
toggleElem(label, showArchivedLabels || selectedLabelIds.has(label.getAttribute('data-label-id')!));
}
// update the url when the toggle is changed and reload
elShowArchivedInput.addEventListener('input', () => {
@@ -127,14 +93,14 @@ export function initRepoIssueFilterItemLabel() {
export function initRepoIssueCommentDelete() {
// Delete comment
document.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
if (!e.target.matches('.delete-comment')) return;
document.addEventListener('click', async (e) => {
if (!(e.target as HTMLElement).matches('.delete-comment')) return;
e.preventDefault();
const deleteButton = e.target;
if (window.confirm(deleteButton.getAttribute('data-locale'))) {
const deleteButton = e.target as HTMLElement;
if (window.confirm(deleteButton.getAttribute('data-locale')!)) {
try {
const response = await POST(deleteButton.getAttribute('data-url'));
const response = await POST(deleteButton.getAttribute('data-url')!);
if (!response.ok) throw new Error('Failed to delete comment');
const conversationHolder = deleteButton.closest('.conversation-holder');
@@ -143,8 +109,8 @@ export function initRepoIssueCommentDelete() {
// 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;
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', String(num));
counter.textContent = String(num);
@@ -162,9 +128,9 @@ export function initRepoIssueCommentDelete() {
// on the Conversation page, there is no parent "tr", so no need to do anything for "add-code-comment"
if (lineType) {
if (lineType === 'same') {
document.querySelector(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).classList.remove('tw-invisible');
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');
document.querySelector(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`)!.classList.remove('tw-invisible');
}
}
conversationHolder.remove();
@@ -184,49 +150,23 @@ export function initRepoIssueCommentDelete() {
export function initRepoIssueCodeCommentCancel() {
// Cancel inline code comment
document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
if (!e.target.matches('.cancel-code-comment')) return;
document.addEventListener('click', (e) => {
if (!(e.target as HTMLElement).matches('.cancel-code-comment')) return;
const form = e.target.closest('form');
const form = (e.target as HTMLElement).closest('form')!;
if (form?.classList.contains('comment-form')) {
hideElem(form);
showElem(form.closest('.comment-code-cloud')?.querySelectorAll('button.comment-form-reply'));
showElem(form.closest('.comment-code-cloud')!.querySelectorAll('button.comment-form-reply'));
} else {
form.closest('.comment-code-cloud')?.remove();
}
});
}
export function initRepoPullRequestAllowMaintainerEdit() {
const wrapper = document.querySelector('#allow-edits-from-maintainers');
if (!wrapper) return;
const checkbox = wrapper.querySelector<HTMLInputElement>('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: String(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 initRepoIssueComments() {
if (!document.querySelector('.repository.view.issue .timeline')) return;
document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
document.addEventListener('click', (e: Event) => {
const urlTarget = document.querySelector(':target');
if (!urlTarget) return;
@@ -235,22 +175,22 @@ export function initRepoIssueComments() {
if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return;
if (!e.target.closest(`#${urlTargetId}`)) {
if (!(e.target as HTMLElement).closest(`#${urlTargetId}`)) {
// if the user clicks outside the comment, remove the hash from the url
// use empty hash and state to avoid scrolling
window.location.hash = ' ';
window.history.pushState(null, null, ' ');
window.history.pushState(null, '', ' ');
}
});
}
export async function handleReply(el: HTMLElement) {
const form = el.closest('.comment-code-cloud').querySelector('.comment-form');
const form = el.closest('.comment-code-cloud')!.querySelector('.comment-form')!;
const textarea = form.querySelector('textarea');
hideElem(el);
showElem(form);
const editor = getComboMarkdownEditor(textarea) ?? await initComboMarkdownEditor(form.querySelector('.combo-markdown-editor'));
const editor = getComboMarkdownEditor(textarea) ?? await initComboMarkdownEditor(form.querySelector('.combo-markdown-editor')!);
editor.focus();
return editor;
}
@@ -261,7 +201,7 @@ export function initRepoPullRequestReview() {
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-')) {
if (groupID?.startsWith('code-comments-')) {
const id = groupID.slice(14);
const ancestorDiffBox = commentDiv.closest<HTMLElement>('.diff-file-box');
@@ -269,7 +209,7 @@ export function initRepoPullRequestReview() {
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);
setFileFolding(ancestorDiffBox, ancestorDiffBox.querySelector('.fold-file')!, false);
}
}
// set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing
@@ -317,23 +257,23 @@ export function initRepoPullRequestReview() {
interactive: true,
hideOnClick: true,
});
elReviewPanel.querySelector('.close').addEventListener('click', () => tippy.hide());
elReviewPanel.querySelector('.close')!.addEventListener('click', () => tippy.hide());
}
addDelegatedEventListener(document, 'click', '.add-code-comment', async (el, e) => {
e.preventDefault();
const isSplit = el.closest('.code-diff')?.classList.contains('code-diff-split');
const side = el.getAttribute('data-side');
const idx = el.getAttribute('data-idx');
const side = el.getAttribute('data-side')!;
const idx = el.getAttribute('data-idx')!;
const path = el.closest('[data-path]')?.getAttribute('data-path');
const tr = el.closest('tr');
const lineType = tr.getAttribute('data-line-type');
const tr = el.closest('tr')!;
const lineType = tr.getAttribute('data-line-type')!;
let ntr = tr.nextElementSibling;
if (!ntr?.classList.contains('add-comment')) {
ntr = createElementFromHTML(`
<tr class="add-comment" data-line-type="${lineType}">
<tr class="add-comment" data-line-type="${htmlEscape(lineType)}">
${isSplit ? `
<td class="add-comment-left" colspan="4"></td>
<td class="add-comment-right" colspan="4"></td>
@@ -343,15 +283,15 @@ export function initRepoPullRequestReview() {
</tr>`);
tr.after(ntr);
}
const td = ntr.querySelector(`.add-comment-${side}`);
const td = ntr.querySelector(`.add-comment-${side}`)!;
const commentCloud = td.querySelector('.comment-code-cloud');
if (!commentCloud && !ntr.querySelector('button[name="pending_review"]')) {
const response = await GET(el.closest('[data-new-comment-url]')?.getAttribute('data-new-comment-url'));
const response = await GET(el.closest('[data-new-comment-url]')?.getAttribute('data-new-comment-url') ?? '');
td.innerHTML = await response.text();
td.querySelector<HTMLInputElement>("input[name='line']").value = idx;
td.querySelector<HTMLInputElement>("input[name='side']").value = (side === 'left' ? 'previous' : 'proposed');
td.querySelector<HTMLInputElement>("input[name='path']").value = path;
const editor = await initComboMarkdownEditor(td.querySelector<HTMLElement>('.combo-markdown-editor'));
td.querySelector<HTMLInputElement>("input[name='line']")!.value = idx;
td.querySelector<HTMLInputElement>("input[name='side']")!.value = (side === 'left' ? 'previous' : 'proposed');
td.querySelector<HTMLInputElement>("input[name='path']")!.value = String(path);
const editor = await initComboMarkdownEditor(td.querySelector<HTMLElement>('.combo-markdown-editor')!);
editor.focus();
}
});
@@ -360,7 +300,7 @@ export function initRepoPullRequestReview() {
export function initRepoIssueReferenceIssue() {
const elDropdown = document.querySelector('.issue_reference_repository_search');
if (!elDropdown) return;
const form = elDropdown.closest('form');
const form = elDropdown.closest('form')!;
fomanticQuery(elDropdown).dropdown({
fullTextSearch: true,
apiSettings: {
@@ -389,10 +329,10 @@ export function initRepoIssueReferenceIssue() {
const target = el.getAttribute('data-target');
const content = document.querySelector(`#${target}`)?.textContent ?? '';
const poster = el.getAttribute('data-poster-username');
const reference = toAbsoluteUrl(el.getAttribute('data-reference'));
const modalSelector = el.getAttribute('data-modal');
const modal = document.querySelector(modalSelector);
const textarea = modal.querySelector<HTMLTextAreaElement>('textarea[name="content"]');
const reference = toAbsoluteUrl(el.getAttribute('data-reference')!);
const modalSelector = el.getAttribute('data-modal')!;
const modal = document.querySelector(modalSelector)!;
const textarea = modal.querySelector<HTMLTextAreaElement>('textarea[name="content"]')!;
textarea.value = `${content}\n\n_Originally posted by @${poster} in ${reference}_`;
fomanticQuery(modal).modal('show');
});
@@ -402,8 +342,8 @@ export function initRepoIssueWipNewTitle() {
// Toggle WIP for new PR
queryElems(document, '.title_wip_desc > a', (el) => el.addEventListener('click', (e) => {
e.preventDefault();
const wipPrefixes = JSON.parse(el.closest('.title_wip_desc').getAttribute('data-wip-prefixes'));
const titleInput = document.querySelector<HTMLInputElement>('#issue_title');
const wipPrefixes = JSON.parse(el.closest('.title_wip_desc')!.getAttribute('data-wip-prefixes')!);
const titleInput = document.querySelector<HTMLInputElement>('#issue_title')!;
const titleValue = titleInput.value;
for (const prefix of wipPrefixes) {
if (titleValue.startsWith(prefix.toUpperCase())) {
@@ -419,8 +359,8 @@ export function initRepoIssueWipToggle() {
registerGlobalInitFunc('initPullRequestWipToggle', (toggleWip) => toggleWip.addEventListener('click', async (e) => {
e.preventDefault();
const title = toggleWip.getAttribute('data-title');
const wipPrefix = toggleWip.getAttribute('data-wip-prefix');
const updateUrl = toggleWip.getAttribute('data-update-url');
const wipPrefix = toggleWip.getAttribute('data-wip-prefix')!;
const updateUrl = toggleWip.getAttribute('data-update-url')!;
const params = new URLSearchParams();
params.append('title', title?.startsWith(wipPrefix) ? title.slice(wipPrefix.length).trim() : `${wipPrefix.trim()} ${title}`);
@@ -434,13 +374,13 @@ export function initRepoIssueWipToggle() {
}
export function initRepoIssueTitleEdit() {
const issueTitleDisplay = document.querySelector('#issue-title-display');
const issueTitleDisplay = document.querySelector('#issue-title-display')!;
const issueTitleEditor = document.querySelector<HTMLFormElement>('#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', () => {
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);
@@ -450,7 +390,7 @@ export function initRepoIssueTitleEdit() {
}
issueTitleInput.focus();
});
issueTitleEditor.querySelector('.ui.cancel.button').addEventListener('click', () => {
issueTitleEditor.querySelector('.ui.cancel.button')!.addEventListener('click', () => {
hideElem(issueTitleEditor);
hideElem('#pull-desc-editor');
showElem(issueTitleDisplay);
@@ -460,22 +400,22 @@ export function initRepoIssueTitleEdit() {
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 editSaveButton = issueTitleEditor.querySelector('.ui.primary.button')!;
issueTitleEditor.addEventListener('submit', async (e) => {
e.preventDefault();
const newTitle = issueTitleInput.value.trim();
try {
if (newTitle && newTitle !== oldTitle) {
const resp = await POST(editSaveButton.getAttribute('data-update-url'), {data: new URLSearchParams({title: newTitle})});
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;
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})});
const resp = await POST(prTargetUpdateUrl, {data: new URLSearchParams({target_branch: String(newTargetBranch)})});
if (!resp.ok) {
throw new Error(`Failed to update PR target branch: ${resp.statusText}`);
}
@@ -491,12 +431,12 @@ export function initRepoIssueTitleEdit() {
}
export function initRepoIssueBranchSelect() {
document.querySelector<HTMLElement>('#branch-select')?.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
const el = e.target.closest('.item[data-branch]');
document.querySelector<HTMLElement>('#branch-select')?.addEventListener('click', (e: Event) => {
const el = (e.target as HTMLElement).closest('.item[data-branch]');
if (!el) return;
const pullTargetBranch = document.querySelector('#pull-target-branch');
const pullTargetBranch = document.querySelector('#pull-target-branch')!;
const baseName = pullTargetBranch.getAttribute('data-basename');
const branchNameNew = el.getAttribute('data-branch');
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);
@@ -507,13 +447,14 @@ async function initSingleCommentEditor(commentForm: HTMLFormElement) {
// pages:
// * normal new issue/pr page: no status-button, no comment-button (there is only a normal submit button which can submit empty content)
// * issue/pr view page: with comment form, has status-button and comment-button
const editor = await initComboMarkdownEditor(commentForm.querySelector('.combo-markdown-editor'));
const editor = await initComboMarkdownEditor(commentForm.querySelector('.combo-markdown-editor')!);
const statusButton = document.querySelector<HTMLButtonElement>('#status-button');
const commentButton = document.querySelector<HTMLButtonElement>('#comment-button');
const syncUiState = () => {
const editorText = editor.value().trim(), isUploading = editor.isUploading();
if (statusButton) {
statusButton.textContent = statusButton.getAttribute(editorText ? 'data-status-and-comment' : 'data-status');
const statusText = statusButton.getAttribute(editorText ? 'data-status-and-comment' : 'data-status');
statusButton.querySelector<HTMLElement>('.status-button-text')!.textContent = statusText;
statusButton.disabled = isUploading;
}
if (commentButton) {
@@ -531,9 +472,9 @@ function initIssueTemplateCommentEditors(commentForm: HTMLFormElement) {
const comboFields = commentForm.querySelectorAll<HTMLElement>('.combo-editor-dropzone');
const initCombo = async (elCombo: HTMLElement) => {
const fieldTextarea = elCombo.querySelector<HTMLTextAreaElement>('.form-field-real');
const dropzoneContainer = elCombo.querySelector<HTMLElement>('.form-field-dropzone');
const markdownEditor = elCombo.querySelector<HTMLElement>('.combo-markdown-editor');
const fieldTextarea = elCombo.querySelector<HTMLTextAreaElement>('.form-field-real')!;
const dropzoneContainer = elCombo.querySelector<HTMLElement>('.form-field-dropzone')!;
const markdownEditor = elCombo.querySelector<HTMLElement>('.combo-markdown-editor')!;
const editor = await initComboMarkdownEditor(markdownEditor);
editor.container.addEventListener(ComboMarkdownEditor.EventEditorContentChanged, () => fieldTextarea.value = editor.value());
@@ -544,7 +485,7 @@ function initIssueTemplateCommentEditors(commentForm: HTMLFormElement) {
hideElem(commentForm.querySelectorAll('.combo-editor-dropzone .combo-markdown-editor'));
queryElems(commentForm, '.combo-editor-dropzone .form-field-dropzone', (dropzoneContainer) => {
// if "form-field-dropzone" exists, then "dropzone" must also exist
const dropzone = dropzoneContainer.querySelector<HTMLElement>('.dropzone').dropzone;
const dropzone = dropzoneContainer.querySelector<HTMLElement>('.dropzone')!.dropzone;
const hasUploadedFiles = dropzone.files.length !== 0;
toggleElem(dropzoneContainer, hasUploadedFiles);
});
@@ -565,6 +506,8 @@ function initIssueTemplateCommentEditors(commentForm: HTMLFormElement) {
}
export function initRepoCommentFormAndSidebar() {
initRepoIssueSidebar();
const commentForm = document.querySelector<HTMLFormElement>('.comment.form');
if (!commentForm) return;
@@ -575,6 +518,4 @@ export function initRepoCommentFormAndSidebar() {
// 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);
}
initRepoIssueSidebar();
}
package/gitea/source/web_src/js/features/repo-legacy.ts
+2 -2
View File
@@ -30,8 +30,8 @@ export function initBranchSelectorTabs() {
for (const elSelectBranch of elSelectBranches) {
queryElems(elSelectBranch, '.reference.column', (el) => el.addEventListener('click', () => {
hideElem(elSelectBranch.querySelectorAll('.scrolling.reference-list-menu'));
showElem(el.getAttribute('data-target'));
queryElemChildren(el.parentNode, '.branch-tag-item', (el) => el.classList.remove('active'));
showElem(el.getAttribute('data-target')!);
queryElemChildren(el.parentNode!, '.branch-tag-item', (el) => el.classList.remove('active'));
el.classList.add('active');
}));
}
package/gitea/source/web_src/js/features/repo-migrate.ts
+5 -5
View File
@@ -1,4 +1,4 @@
import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts';
import {hideElem, showElem} from '../utils/dom.ts';
import {GET, POST} from '../modules/fetch.ts';
export function initRepoMigrationStatusChecker() {
@@ -18,7 +18,7 @@ export function initRepoMigrationStatusChecker() {
// for all status
if (data.message) {
document.querySelector('#repo_migrating_progress_message').textContent = data.message;
document.querySelector('#repo_migrating_progress_message')!.textContent = data.message;
}
// TaskStatusFinished
@@ -34,7 +34,7 @@ export function initRepoMigrationStatusChecker() {
showElem('#repo_migrating_retry');
showElem('#repo_migrating_failed');
showElem('#repo_migrating_failed_image');
document.querySelector('#repo_migrating_failed_error').textContent = data.message;
document.querySelector('#repo_migrating_failed_error')!.textContent = data.message;
return false;
}
@@ -55,7 +55,7 @@ export function initRepoMigrationStatusChecker() {
syncTaskStatus(); // no await
}
async function doMigrationRetry(e: DOMEvent<MouseEvent>) {
await POST(e.target.getAttribute('data-migrating-task-retry-url'));
async function doMigrationRetry(e: Event) {
await POST((e.target as HTMLElement).getAttribute('data-migrating-task-retry-url')!);
window.location.reload();
}
package/gitea/source/web_src/js/features/repo-migration.ts
+3 -3
View File
@@ -7,8 +7,8 @@ const pass = document.querySelector<HTMLInputElement>('#auth_password');
const token = document.querySelector<HTMLInputElement>('#auth_token');
const mirror = document.querySelector<HTMLInputElement>('#mirror');
const lfs = document.querySelector<HTMLInputElement>('#lfs');
const lfsSettings = document.querySelector<HTMLElement>('#lfs_settings');
const lfsEndpoint = document.querySelector<HTMLElement>('#lfs_endpoint');
const lfsSettings = document.querySelector<HTMLElement>('#lfs_settings')!;
const lfsEndpoint = document.querySelector<HTMLElement>('#lfs_endpoint')!;
const items = document.querySelectorAll<HTMLInputElement>('#migrate_items input[type=checkbox]');
export function initRepoMigration() {
@@ -53,7 +53,7 @@ function checkAuth() {
}
function checkItems(tokenAuth: boolean) {
let enableItems = false;
let enableItems: boolean;
if (tokenAuth) {
enableItems = token?.value !== '';
} else {
package/gitea/source/web_src/js/features/repo-milestone.ts
+2 -2
View File
@@ -2,8 +2,8 @@ export function initRepoMilestone() {
const page = document.querySelector('.repository.new.milestone');
if (!page) return;
const deadline = page.querySelector<HTMLInputElement>('form input[name=deadline]');
document.querySelector('#milestone-clear-deadline').addEventListener('click', () => {
const deadline = page.querySelector<HTMLInputElement>('form input[name=deadline]')!;
document.querySelector('#milestone-clear-deadline')!.addEventListener('click', () => {
deadline.value = '';
});
}
package/gitea/source/web_src/js/features/repo-new.ts
+14 -14
View File
@@ -6,13 +6,13 @@ import {sanitizeRepoName} from './repo-common.ts';
const {appSubUrl} = window.config;
function initRepoNewTemplateSearch(form: HTMLFormElement) {
const elSubmitButton = querySingleVisibleElem<HTMLInputElement>(form, '.ui.primary.button');
const elCreateRepoErrorMessage = form.querySelector('#create-repo-error-message');
const elRepoOwnerDropdown = form.querySelector('#repo_owner_dropdown');
const elRepoTemplateDropdown = form.querySelector<HTMLInputElement>('#repo_template_search');
const inputRepoTemplate = form.querySelector<HTMLInputElement>('#repo_template');
const elTemplateUnits = form.querySelector('#template_units');
const elNonTemplate = form.querySelector('#non_template');
const elSubmitButton = querySingleVisibleElem<HTMLInputElement>(form, '.ui.primary.button')!;
const elCreateRepoErrorMessage = form.querySelector('#create-repo-error-message')!;
const elRepoOwnerDropdown = form.querySelector('#repo_owner_dropdown')!;
const elRepoTemplateDropdown = form.querySelector<HTMLInputElement>('#repo_template_search')!;
const inputRepoTemplate = form.querySelector<HTMLInputElement>('#repo_template')!;
const elTemplateUnits = form.querySelector('#template_units')!;
const elNonTemplate = form.querySelector('#non_template')!;
const checkTemplate = function () {
const hasSelectedTemplate = inputRepoTemplate.value !== '' && inputRepoTemplate.value !== '0';
toggleElem(elTemplateUnits, hasSelectedTemplate);
@@ -62,10 +62,10 @@ export function initRepoNew() {
const pageContent = document.querySelector('.page-content.repository.new-repo');
if (!pageContent) return;
const form = document.querySelector<HTMLFormElement>('.new-repo-form');
const inputGitIgnores = form.querySelector<HTMLInputElement>('input[name="gitignores"]');
const inputLicense = form.querySelector<HTMLInputElement>('input[name="license"]');
const inputAutoInit = form.querySelector<HTMLInputElement>('input[name="auto_init"]');
const form = document.querySelector<HTMLFormElement>('.new-repo-form')!;
const inputGitIgnores = form.querySelector<HTMLInputElement>('input[name="gitignores"]')!;
const inputLicense = form.querySelector<HTMLInputElement>('input[name="license"]')!;
const inputAutoInit = form.querySelector<HTMLInputElement>('input[name="auto_init"]')!;
const updateUiAutoInit = () => {
inputAutoInit.checked = Boolean(inputGitIgnores.value || inputLicense.value);
};
@@ -73,13 +73,13 @@ export function initRepoNew() {
inputLicense.addEventListener('change', updateUiAutoInit);
updateUiAutoInit();
const inputRepoName = form.querySelector<HTMLInputElement>('input[name="repo_name"]');
const inputPrivate = form.querySelector<HTMLInputElement>('input[name="private"]');
const inputRepoName = form.querySelector<HTMLInputElement>('input[name="repo_name"]')!;
const inputPrivate = form.querySelector<HTMLInputElement>('input[name="private"]')!;
const updateUiRepoName = () => {
const helps = form.querySelectorAll(`.help[data-help-for-repo-name]`);
hideElem(helps);
let help = form.querySelector(`.help[data-help-for-repo-name="${CSS.escape(inputRepoName.value)}"]`);
if (!help) help = form.querySelector(`.help[data-help-for-repo-name=""]`);
if (!help) help = form.querySelector(`.help[data-help-for-repo-name=""]`)!;
showElem(help);
const repoNamePreferPrivate: Record<string, boolean> = {'.profile': false, '.profile-private': true};
const preferPrivate = repoNamePreferPrivate[inputRepoName.value];
package/gitea/source/web_src/js/features/repo-projects.ts
+48 -29
View File
@@ -5,11 +5,13 @@ import {fomanticQuery} from '../modules/fomantic/base.ts';
import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
import type {SortableEvent} from 'sortablejs';
import {toggleFullScreen} from '../utils.ts';
import {registerGlobalInitFunc} from '../modules/observer.ts';
import {localUserSettings} from '../modules/user-settings.ts';
function updateIssueCount(card: HTMLElement): void {
const parent = card.parentElement;
const parent = card.parentElement!;
const count = parent.querySelectorAll('.issue-card').length;
parent.querySelector('.project-column-issue-count').textContent = String(count);
parent.querySelector('.project-column-issue-count')!.textContent = String(count);
}
async function moveIssue({item, from, to, oldIndex}: SortableEvent): Promise<void> {
@@ -19,7 +21,7 @@ async function moveIssue({item, from, to, oldIndex}: SortableEvent): Promise<voi
const columnSorting = {
issues: Array.from(columnCards, (card, i) => ({
issueID: parseInt(card.getAttribute('data-issue')),
issueID: parseInt(card.getAttribute('data-issue')!),
sorting: i,
})),
};
@@ -30,13 +32,15 @@ async function moveIssue({item, from, to, oldIndex}: SortableEvent): Promise<voi
});
} catch (error) {
console.error(error);
from.insertBefore(item, from.children[oldIndex]);
if (oldIndex !== undefined) {
from.insertBefore(item, from.children[oldIndex]);
}
}
}
async function initRepoProjectSortable(): Promise<void> {
// the HTML layout is: #project-board.board > .project-column .cards > .issue-card
const mainBoard = document.querySelector('#project-board');
const mainBoard = document.querySelector<HTMLElement>('#project-board')!;
let boardColumns = mainBoard.querySelectorAll<HTMLElement>('.project-column');
createSortable(mainBoard, {
group: 'project-column',
@@ -49,13 +53,13 @@ async function initRepoProjectSortable(): Promise<void> {
const columnSorting = {
columns: Array.from(boardColumns, (column, i) => ({
columnID: parseInt(column.getAttribute('data-id')),
columnID: parseInt(column.getAttribute('data-id')!),
sorting: i,
})),
};
try {
await POST(mainBoard.getAttribute('data-url'), {
await POST(mainBoard.getAttribute('data-url')!, {
data: columnSorting,
});
} catch (error) {
@@ -65,7 +69,7 @@ async function initRepoProjectSortable(): Promise<void> {
});
for (const boardColumn of boardColumns) {
const boardCardList = boardColumn.querySelector('.cards');
const boardCardList = boardColumn.querySelector<HTMLElement>('.cards')!;
createSortable(boardCardList, {
group: 'shared',
onAdd: moveIssue, // eslint-disable-line @typescript-eslint/no-misused-promises
@@ -77,12 +81,12 @@ async function initRepoProjectSortable(): Promise<void> {
}
function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
const elModal = document.querySelector<HTMLElement>('.ui.modal#project-column-modal-edit');
const elForm = elModal.querySelector<HTMLFormElement>('form');
const elModal = document.querySelector<HTMLElement>('.ui.modal#project-column-modal-edit')!;
const elForm = elModal.querySelector<HTMLFormElement>('form')!;
const elColumnId = elForm.querySelector<HTMLInputElement>('input[name="id"]');
const elColumnTitle = elForm.querySelector<HTMLInputElement>('input[name="title"]');
const elColumnColor = elForm.querySelector<HTMLInputElement>('input[name="color"]');
const elColumnId = elForm.querySelector<HTMLInputElement>('input[name="id"]')!;
const elColumnTitle = elForm.querySelector<HTMLInputElement>('input[name="title"]')!;
const elColumnColor = elForm.querySelector<HTMLInputElement>('input[name="color"]')!;
const attrDataColumnId = 'data-modal-project-column-id';
const attrDataColumnTitle = 'data-modal-project-column-title-input';
@@ -91,9 +95,9 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
// the "new" button is not in project board, so need to query from document
queryElems(document, '.show-project-column-modal-edit', (el) => {
el.addEventListener('click', () => {
elColumnId.value = el.getAttribute(attrDataColumnId);
elColumnTitle.value = el.getAttribute(attrDataColumnTitle);
elColumnColor.value = el.getAttribute(attrDataColumnColor);
elColumnId.value = el.getAttribute(attrDataColumnId)!;
elColumnTitle.value = el.getAttribute(attrDataColumnTitle)!;
elColumnColor.value = el.getAttribute(attrDataColumnColor)!;
elColumnColor.dispatchEvent(new Event('input', {bubbles: true})); // trigger the color picker
});
});
@@ -116,22 +120,22 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
}
// update the newly saved column title and color in the project board (to avoid reload)
const elEditButton = writableProjectBoard.querySelector<HTMLButtonElement>(`.show-project-column-modal-edit[${attrDataColumnId}="${columnId}"]`);
const elEditButton = writableProjectBoard.querySelector<HTMLButtonElement>(`.show-project-column-modal-edit[${attrDataColumnId}="${columnId}"]`)!;
elEditButton.setAttribute(attrDataColumnTitle, elColumnTitle.value);
elEditButton.setAttribute(attrDataColumnColor, elColumnColor.value);
const elBoardColumn = writableProjectBoard.querySelector<HTMLElement>(`.project-column[data-id="${columnId}"]`);
const elBoardColumnTitle = elBoardColumn.querySelector<HTMLElement>(`.project-column-title-text`);
const elBoardColumn = writableProjectBoard.querySelector<HTMLElement>(`.project-column[data-id="${columnId}"]`)!;
const elBoardColumnTitle = elBoardColumn.querySelector<HTMLElement>(`.project-column-title-text`)!;
elBoardColumnTitle.textContent = elColumnTitle.value;
if (elColumnColor.value) {
const textColor = contrastColor(elColumnColor.value);
elBoardColumn.style.setProperty('background', elColumnColor.value, 'important');
elBoardColumn.style.setProperty('color', textColor, 'important');
queryElemChildren<HTMLElement>(elBoardColumn, '.divider', (divider) => divider.style.color = textColor);
queryElemChildren(elBoardColumn, '.divider', (divider: HTMLElement) => divider.style.color = textColor);
} else {
elBoardColumn.style.removeProperty('background');
elBoardColumn.style.removeProperty('color');
queryElemChildren<HTMLElement>(elBoardColumn, '.divider', (divider) => divider.style.removeProperty('color'));
queryElemChildren(elBoardColumn, '.divider', (divider: HTMLElement) => divider.style.removeProperty('color'));
}
fomanticQuery(elModal).modal('hide');
@@ -141,27 +145,42 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
});
}
function initRepoProjectToggleFullScreen(): void {
function initRepoProjectToggleFullScreen(elProjectsView: HTMLElement): void {
const enterFullscreenBtn = document.querySelector('.screen-full');
const exitFullscreenBtn = document.querySelector('.screen-normal');
if (!enterFullscreenBtn || !exitFullscreenBtn) return;
const settingKey = 'projects-view-options';
type ProjectsViewOptions = {
fullScreen: boolean;
};
const opts = localUserSettings.getJsonObject<ProjectsViewOptions>(settingKey, {fullScreen: false});
const toggleFullscreenState = (isFullScreen: boolean) => {
toggleFullScreen('.projects-view', isFullScreen);
toggleFullScreen(elProjectsView, isFullScreen);
toggleElem(enterFullscreenBtn, !isFullScreen);
toggleElem(exitFullscreenBtn, isFullScreen);
opts.fullScreen = isFullScreen;
localUserSettings.setJsonObject(settingKey, opts);
};
enterFullscreenBtn.addEventListener('click', () => toggleFullscreenState(true));
exitFullscreenBtn.addEventListener('click', () => toggleFullscreenState(false));
if (opts.fullScreen) {
// a temporary solution to remember the full screen state, not perfect,
// just make UX better than before, especially for users who need to change the label filter frequently and want to keep full screen mode.
toggleFullscreenState(true);
}
}
export function initRepoProject(): void {
initRepoProjectToggleFullScreen();
export function initRepoProjectsView(): void {
registerGlobalInitFunc('initRepoProjectsView', (elProjectsView) => {
initRepoProjectToggleFullScreen(elProjectsView);
const writableProjectBoard = document.querySelector('#project-board[data-project-borad-writable="true"]');
if (!writableProjectBoard) return;
const writableProjectBoard = document.querySelector('#project-board[data-project-board-writable="true"]');
if (!writableProjectBoard) return;
initRepoProjectSortable(); // no await
initRepoProjectColumnEdit(writableProjectBoard);
initRepoProjectSortable(); // no await
initRepoProjectColumnEdit(writableProjectBoard);
});
}
package/gitea/source/web_src/js/features/repo-release.test.ts
+9
View File
@@ -0,0 +1,9 @@
import {guessPreviousReleaseTag} from './repo-release.ts';
test('guessPreviousReleaseTag', async () => {
expect(guessPreviousReleaseTag('v0.9', ['v1.0', 'v1.2', 'v1.4', 'v1.6'])).toBe('');
expect(guessPreviousReleaseTag('1.3', ['v1.0', 'v1.2', 'v1.4', 'v1.6'])).toBe('v1.2');
expect(guessPreviousReleaseTag('rel/1.3', ['v1.0', 'v1.2', 'v1.4', 'v1.6'])).toBe('v1.2');
expect(guessPreviousReleaseTag('v1.3', ['rel/1.0', 'rel/1.2', 'rel/1.4', 'rel/1.6'])).toBe('rel/1.2');
expect(guessPreviousReleaseTag('v2.0', ['v1.0', 'v1.2', 'v1.4', 'v1.6'])).toBe('v1.6');
});
package/gitea/source/web_src/js/features/repo-release.ts
+130 -27
View File
@@ -1,43 +1,47 @@
import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts';
import {POST} from '../modules/fetch.ts';
import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
import {getComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
import {hideElem} from '../utils/dom.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {registerGlobalEventFunc, registerGlobalInitFunc} from '../modules/observer.ts';
import {htmlEscape} from '../utils/html.ts';
import {compareVersions} from 'compare-versions';
export function initRepoRelease() {
document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
if (e.target.matches('.remove-rel-attach')) {
const uuid = e.target.getAttribute('data-uuid');
const id = e.target.getAttribute('data-id');
document.querySelector<HTMLInputElement>(`input[name='attachment-del-${uuid}']`).value = 'true';
hideElem(`#attachment-${id}`);
}
export function initRepoReleaseNew() {
registerGlobalEventFunc('click', 'onReleaseEditAttachmentDelete', (el) => {
const uuid = el.getAttribute('data-uuid')!;
const id = el.getAttribute('data-id')!;
document.querySelector<HTMLInputElement>(`input[name='attachment-del-${uuid}']`)!.value = 'true';
hideElem(`#attachment-${id}`);
});
registerGlobalInitFunc('initReleaseEditForm', (elForm: HTMLFormElement) => {
initTagNameEditor(elForm);
initGenerateReleaseNotes(elForm);
});
}
export function initRepoReleaseNew() {
if (!document.querySelector('.repository.new.release')) return;
initTagNameEditor();
function getReleaseFormExistingTags(elForm: HTMLFormElement): Array<string> {
return JSON.parse(elForm.getAttribute('data-existing-tags')!);
}
function initTagNameEditor() {
const el = document.querySelector('#tag-name-editor');
if (!el) return;
function initTagNameEditor(elForm: HTMLFormElement) {
const tagNameInput = elForm.querySelector<HTMLInputElement>('input[type=text][name=tag_name]');
if (!tagNameInput) return; // only init if tag name input exists (the tag name is editable)
const existingTags = JSON.parse(el.getAttribute('data-existing-tags'));
if (!Array.isArray(existingTags)) return;
const existingTags = getReleaseFormExistingTags(elForm);
const defaultTagHelperText = elForm.getAttribute('data-tag-helper');
const newTagHelperText = elForm.getAttribute('data-tag-helper-new');
const existingTagHelperText = elForm.getAttribute('data-tag-helper-existing');
const defaultTagHelperText = el.getAttribute('data-tag-helper');
const newTagHelperText = el.getAttribute('data-tag-helper-new');
const existingTagHelperText = el.getAttribute('data-tag-helper-existing');
const tagNameInput = document.querySelector<HTMLInputElement>('#tag-name');
const hideTargetInput = function(tagNameInput: HTMLInputElement) {
const value = tagNameInput.value;
const tagHelper = document.querySelector('#tag-helper');
const tagHelper = elForm.querySelector('.tag-name-helper')!;
// Old behavior: if the tag already exists, hide the target branch selector and show a helper text to indicate the tag already exists.
// However, it is not right: when creating from an existing tag (not a draft or release yet), it still needs the "target branch"
// So the new logic here: don't hide the target branch selector.
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;
}
};
@@ -46,3 +50,102 @@ function initTagNameEditor() {
hideTargetInput(e.target as HTMLInputElement);
});
}
export function guessPreviousReleaseTag(tagName: string, existingTags: Array<string>): string {
let guessedPreviousTag = '', guessedPreviousVer = '';
const cleanup = (s: string) => {
const pos = s.lastIndexOf('/');
if (pos >= 0) s = s.substring(pos + 1);
if (s.substring(0, 1).toLowerCase() === 'v') s = s.substring(1);
return s;
};
const newVer = cleanup(tagName);
for (const s of existingTags) {
const existingVer = cleanup(s);
try {
if (compareVersions(existingVer, newVer) >= 0) continue;
if (!guessedPreviousTag || compareVersions(existingVer, guessedPreviousVer) > 0) {
guessedPreviousTag = s;
guessedPreviousVer = existingVer;
}
} catch {}
}
return guessedPreviousTag;
}
function initGenerateReleaseNotes(elForm: HTMLFormElement) {
const buttonShowModal = elForm.querySelector<HTMLButtonElement>('.button.generate-release-notes')!;
const tagNameInput = elForm.querySelector<HTMLInputElement>('input[name=tag_name]')!;
const targetInput = elForm.querySelector<HTMLInputElement>('input[name=tag_target]')!;
const textMissingTag = buttonShowModal.getAttribute('data-text-missing-tag')!;
const generateUrl = buttonShowModal.getAttribute('data-generate-url')!;
const elModal = document.querySelector('#generate-release-notes-modal')!;
const doSubmit = async (tagName: string) => {
const elPreviousTag = elModal.querySelector<HTMLSelectElement>('[name=previous_tag]')!;
const comboEditor = getComboMarkdownEditor(elForm.querySelector<HTMLElement>('.combo-markdown-editor'))!;
const form = new URLSearchParams();
form.set('tag_name', tagName);
form.set('tag_target', targetInput.value);
form.set('previous_tag', elPreviousTag.value);
elModal.classList.add('loading', 'disabled');
try {
const resp = await POST(generateUrl, {data: form});
const data = await resp.json();
if (!resp.ok) {
showErrorToast(data.errorMessage || resp.statusText);
return;
}
const oldValue = comboEditor.value().trim();
if (oldValue) {
// Don't overwrite existing content. Maybe in the future we can let users decide: overwrite or append or copy-to-clipboard
// GitHub just disables the button if the content is not empty
comboEditor.value(`${oldValue}\n\n${data.content}`);
} else {
comboEditor.value(data.content);
}
} finally {
elModal.classList.remove('loading', 'disabled');
fomanticQuery(elModal).modal('hide');
comboEditor.focus();
}
};
let inited = false;
const doShowModal = () => {
hideToastsAll();
const tagName = tagNameInput.value.trim();
if (!tagName) {
showErrorToast(textMissingTag, {duration: 3000});
tagNameInput.focus();
return;
}
const existingTags = getReleaseFormExistingTags(elForm);
const $dropdown = fomanticQuery(elModal.querySelector('[name=previous_tag]')!);
if (!inited) {
inited = true;
const values = [];
for (const tagName of existingTags) {
values.push({name: htmlEscape(tagName), value: tagName}); // ATTENTION: dropdown takes the "name" input as raw HTML
}
$dropdown.dropdown('change values', values);
}
$dropdown.dropdown('set selected', guessPreviousReleaseTag(tagName, existingTags));
fomanticQuery(elModal).modal({
onApprove: () => {
doSubmit(tagName); // don't await, need to return false to keep the modal
return false;
},
}).modal('show');
};
buttonShowModal.addEventListener('click', doShowModal);
}
package/gitea/source/web_src/js/features/repo-search.ts
+3 -5
View File
@@ -1,17 +1,15 @@
import type {DOMEvent} from '../utils/dom.ts';
export function initRepositorySearch() {
const repositorySearchForm = document.querySelector<HTMLFormElement>('#repo-search-form');
if (!repositorySearchForm) return;
repositorySearchForm.addEventListener('change', (e: DOMEvent<Event, HTMLInputElement>) => {
repositorySearchForm.addEventListener('change', (e: Event) => {
e.preventDefault();
const params = new URLSearchParams();
for (const [key, value] of new FormData(repositorySearchForm).entries()) {
params.set(key, value.toString());
params.set(key, value as string);
}
if (e.target.name === 'clear-filter') {
if ((e.target as HTMLInputElement).name === 'clear-filter') {
params.delete('archived');
params.delete('fork');
params.delete('mirror');
package/gitea/source/web_src/js/features/repo-settings-branches.test.ts
+30 -46
View File
@@ -1,9 +1,7 @@
import {beforeEach, describe, expect, test, vi} from 'vitest';
import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
import {POST} from '../modules/fetch.ts';
import {createSortable} from '../modules/sortable.ts';
import type {SortableEvent, SortableOptions} from 'sortablejs';
import type Sortable from 'sortablejs';
import type {SortableEvent} from 'sortablejs';
vi.mock('../modules/fetch.ts', () => ({
POST: vi.fn(),
@@ -13,62 +11,48 @@ vi.mock('../modules/sortable.ts', () => ({
createSortable: vi.fn(),
}));
const branchesHTML = `
<div id="protected-branches-list" data-update-priority-url="some/repo/branches/priority">
<div class="flex-item tw-items-center item" data-id="1">
<div class="drag-handle"></div>
</div>
<div class="flex-item tw-items-center item" data-id="2">
<div class="drag-handle"></div>
</div>
<div class="flex-item tw-items-center item" data-id="3">
<div class="drag-handle"></div>
</div>
</div>
`;
describe('Repository Branch Settings', () => {
beforeEach(() => {
document.body.innerHTML = `
<div id="protected-branches-list" data-update-priority-url="some/repo/branches/priority">
<div class="flex-item tw-items-center item" data-id="1" >
<div class="drag-handle"></div>
</div>
<div class="flex-item tw-items-center item" data-id="2" >
<div class="drag-handle"></div>
</div>
<div class="flex-item tw-items-center item" data-id="3" >
<div class="drag-handle"></div>
</div>
</div>
`;
vi.clearAllMocks();
});
test('should initialize sortable for protected branches list', () => {
document.body.innerHTML = branchesHTML;
const callsBefore = vi.mocked(createSortable).mock.calls.length;
initRepoSettingsBranchesDrag();
expect(createSortable).toHaveBeenCalledWith(
document.querySelector('#protected-branches-list'),
expect.objectContaining({
handle: '.drag-handle',
animation: 150,
}),
);
const newCalls = vi.mocked(createSortable).mock.calls.slice(callsBefore);
expect(newCalls).toHaveLength(1);
expect(newCalls[0][0]).toBe(document.querySelector('#protected-branches-list'));
expect(newCalls[0][1]).toMatchObject({handle: '.drag-handle', animation: 150});
});
test('should not initialize if protected branches list is not present', () => {
document.body.innerHTML = '';
document.querySelector('#protected-branches-list')?.remove();
const callsBefore = vi.mocked(createSortable).mock.calls.length;
initRepoSettingsBranchesDrag();
expect(createSortable).not.toHaveBeenCalled();
expect(vi.mocked(createSortable).mock.calls.length).toBe(callsBefore);
});
test('should post new order after sorting', async () => {
test('should post new order after sorting', () => {
document.body.innerHTML = branchesHTML;
vi.mocked(POST).mockResolvedValue({ok: true} as Response);
// Mock createSortable to capture and execute the onEnd callback
vi.mocked(createSortable).mockImplementation(async (_el: Element, options: SortableOptions) => {
options.onEnd(new Event('SortableEvent') as SortableEvent);
// @ts-expect-error: mock is incomplete
return {destroy: vi.fn()} as Sortable;
});
const callsBefore = vi.mocked(createSortable).mock.calls.length;
initRepoSettingsBranchesDrag();
const onEnd = vi.mocked(createSortable).mock.calls[callsBefore][1]!.onEnd!;
onEnd(new Event('SortableEvent') as SortableEvent);
expect(POST).toHaveBeenCalledWith(
'some/repo/branches/priority',
expect.objectContaining({
data: {ids: [1, 2, 3]},
}),
expect.objectContaining({data: {ids: [1, 2, 3]}}),
);
});
});
package/gitea/source/web_src/js/features/repo-settings-branches.ts
+3 -3
View File
@@ -4,7 +4,7 @@ import {showErrorToast} from '../modules/toast.ts';
import {queryElemChildren} from '../utils/dom.ts';
export function initRepoSettingsBranchesDrag() {
const protectedBranchesList = document.querySelector('#protected-branches-list');
const protectedBranchesList = document.querySelector<HTMLElement>('#protected-branches-list');
if (!protectedBranchesList) return;
createSortable(protectedBranchesList, {
@@ -14,10 +14,10 @@ export function initRepoSettingsBranchesDrag() {
onEnd: () => {
(async () => {
const itemElems = queryElemChildren(protectedBranchesList, '.item[data-id]');
const itemIds = Array.from(itemElems, (el) => parseInt(el.getAttribute('data-id')));
const itemIds = Array.from(itemElems, (el) => parseInt(el.getAttribute('data-id')!));
try {
await POST(protectedBranchesList.getAttribute('data-update-priority-url'), {
await POST(protectedBranchesList.getAttribute('data-update-priority-url')!, {
data: {
ids: itemIds,
},
package/gitea/source/web_src/js/features/repo-settings.ts
+18 -20
View File
@@ -1,25 +1,25 @@
import {createMonaco} from './codeeditor.ts';
import {createCodeEditor} from '../modules/codeeditor/main.ts';
import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
import {POST} from '../modules/fetch.ts';
import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {globMatch} from '../utils/glob.ts';
const {appSubUrl, csrfToken} = window.config;
const {appSubUrl} = window.config;
function initRepoSettingsCollaboration() {
// Change collaborator access mode
for (const dropdownEl of queryElems(document, '.page-content.repository .ui.dropdown.access-mode')) {
const textEl = dropdownEl.querySelector(':scope > .text');
const textEl = dropdownEl.querySelector(':scope > .text')!;
const $dropdown = fomanticQuery(dropdownEl);
$dropdown.dropdown({
async action(text: string, value: string) {
dropdownEl.classList.add('is-loading', 'loading-icon-2px');
const lastValue = dropdownEl.getAttribute('data-last-value');
const lastValue = dropdownEl.getAttribute('data-last-value')!;
$dropdown.dropdown('hide');
try {
const uid = dropdownEl.getAttribute('data-uid');
await POST(dropdownEl.getAttribute('data-url'), {data: new URLSearchParams({uid, 'mode': value})});
const uid = dropdownEl.getAttribute('data-uid')!;
await POST(dropdownEl.getAttribute('data-url')!, {data: new URLSearchParams({uid, 'mode': value})});
textEl.textContent = text;
dropdownEl.setAttribute('data-last-value', value);
} catch {
@@ -56,7 +56,6 @@ function initRepoSettingsSearchTeamBox() {
rawResponse: true,
apiSettings: {
url: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
headers: {'X-Csrf-Token': csrfToken},
onResponse(response: any) {
const items: Array<Record<string, any>> = [];
for (const item of response.data) {
@@ -73,8 +72,7 @@ function initRepoSettingsSearchTeamBox() {
function initRepoSettingsGitHook() {
if (!document.querySelector('.page-content.repository.settings.edit.githook')) return;
const filename = document.querySelector('.hook-filename').textContent;
createMonaco(document.querySelector<HTMLTextAreaElement>('#content'), filename, {language: 'shell'});
createCodeEditor(document.querySelector<HTMLTextAreaElement>('#content')!);
}
function initRepoSettingsBranches() {
@@ -82,14 +80,14 @@ function initRepoSettingsBranches() {
for (const el of document.querySelectorAll<HTMLInputElement>('.toggle-target-enabled')) {
el.addEventListener('change', function () {
const target = document.querySelector(this.getAttribute('data-target'));
const target = document.querySelector(this.getAttribute('data-target')!);
target?.classList.toggle('disabled', !this.checked);
});
}
for (const el of document.querySelectorAll<HTMLInputElement>('.toggle-target-disabled')) {
el.addEventListener('change', function () {
const target = document.querySelector(this.getAttribute('data-target'));
const target = document.querySelector(this.getAttribute('data-target')!);
if (this.checked) target?.classList.add('disabled'); // only disable, do not auto enable
});
}
@@ -100,13 +98,13 @@ function initRepoSettingsBranches() {
// show the `Matched` mark for the status checks that match the pattern
const markMatchedStatusChecks = () => {
const patterns = (document.querySelector<HTMLTextAreaElement>('#status_check_contexts').value || '').split(/[\r\n]+/);
const validPatterns = patterns.map((item) => item.trim()).filter(Boolean);
const patterns = (document.querySelector<HTMLTextAreaElement>('#status_check_contexts')!.value || '').split(/[\r\n]+/);
const validPatterns = patterns.map((item) => item.trim()).filter(Boolean as unknown as <T>(x: T | boolean) => x is T);
const marks = document.querySelectorAll('.status-check-matched-mark');
for (const el of marks) {
let matched = false;
const statusCheck = el.getAttribute('data-status-check');
const statusCheck = el.getAttribute('data-status-check')!;
for (const pattern of validPatterns) {
if (globMatch(statusCheck, pattern, '/')) {
matched = true;
@@ -117,7 +115,7 @@ function initRepoSettingsBranches() {
}
};
markMatchedStatusChecks();
document.querySelector('#status_check_contexts').addEventListener('input', onInputDebounce(markMatchedStatusChecks));
document.querySelector('#status_check_contexts')!.addEventListener('input', onInputDebounce(markMatchedStatusChecks));
}
function initRepoSettingsOptions() {
@@ -130,17 +128,17 @@ function initRepoSettingsOptions() {
queryElems(document, selector, (el) => el.classList.toggle('disabled', !enabled));
};
queryElems<HTMLInputElement>(pageContent, '.enable-system', (el) => el.addEventListener('change', () => {
toggleTargetContextPanel(el.getAttribute('data-target'), el.checked);
toggleTargetContextPanel(el.getAttribute('data-context'), !el.checked);
toggleTargetContextPanel(el.getAttribute('data-target')!, el.checked);
toggleTargetContextPanel(el.getAttribute('data-context')!, !el.checked);
}));
queryElems<HTMLInputElement>(pageContent, '.enable-system-radio', (el) => el.addEventListener('change', () => {
toggleTargetContextPanel(el.getAttribute('data-target'), el.value === 'true');
toggleTargetContextPanel(el.getAttribute('data-context'), el.value === 'false');
toggleTargetContextPanel(el.getAttribute('data-target')!, el.value === 'true');
toggleTargetContextPanel(el.getAttribute('data-context')!, el.value === 'false');
}));
queryElems<HTMLInputElement>(pageContent, '.js-tracker-issue-style', (el) => el.addEventListener('change', () => {
const checkedVal = el.value;
pageContent.querySelector('#tracker-issue-style-regex-box').classList.toggle('disabled', checkedVal !== 'regexp');
pageContent.querySelector('#tracker-issue-style-regex-box')!.classList.toggle('disabled', checkedVal !== 'regexp');
}));
}
package/gitea/source/web_src/js/features/repo-unicode-escape.ts
+2 -2
View File
@@ -7,8 +7,8 @@ export function initUnicodeEscapeButton() {
const unicodeContentSelector = btn.getAttribute('data-unicode-content-selector');
const container = unicodeContentSelector ?
document.querySelector(unicodeContentSelector) :
btn.closest('.file-content, .non-diff-file-content');
document.querySelector(unicodeContentSelector)! :
btn.closest('.file-content, .non-diff-file-content')!;
const fileView = container.querySelector('.file-code, .file-view') ?? container;
if (btn.matches('.escape-button')) {
fileView.classList.add('unicode-escaped');
package/gitea/source/web_src/js/features/repo-view-file-tree.ts
+8 -4
View File
@@ -6,16 +6,20 @@ import {registerGlobalEventFunc} from '../modules/observer.ts';
const {appSubUrl} = window.config;
function isUserSignedIn() {
return Boolean(document.querySelector('#navbar .user-menu'));
}
async function toggleSidebar(btn: HTMLElement) {
const elToggleShow = document.querySelector('.repo-view-file-tree-toggle-show');
const elFileTreeContainer = document.querySelector('.repo-view-file-tree-container');
const elToggleShow = document.querySelector('.repo-view-file-tree-toggle[data-toggle-action="show"]')!;
const elFileTreeContainer = document.querySelector('.repo-view-file-tree-container')!;
const shouldShow = btn.getAttribute('data-toggle-action') === 'show';
toggleElem(elFileTreeContainer, shouldShow);
toggleElem(elToggleShow, !shouldShow);
// FIXME: need to remove "full height" style from parent element
if (!elFileTreeContainer.hasAttribute('data-user-is-signed-in')) return;
if (!isUserSignedIn()) return;
await POST(`${appSubUrl}/user/settings/update_preferences`, {
data: {codeViewShowFileTree: shouldShow},
});
@@ -28,7 +32,7 @@ export async function initRepoViewFileTree() {
registerGlobalEventFunc('click', 'onRepoViewFileTreeToggle', toggleSidebar);
const fileTree = sidebar.querySelector('#view-file-tree');
const fileTree = sidebar.querySelector('#view-file-tree')!;
createApp(ViewFileTree, {
repoLink: fileTree.getAttribute('data-repo-link'),
treePath: fileTree.getAttribute('data-tree-path'),
package/gitea/source/web_src/js/features/repo-wiki.ts
+2 -2
View File
@@ -8,8 +8,8 @@ async function initRepoWikiFormEditor() {
const editArea = document.querySelector<HTMLTextAreaElement>('.repository.wiki .combo-markdown-editor textarea');
if (!editArea) return;
const form = document.querySelector('.repository.wiki.new .ui.form');
const editorContainer = form.querySelector<HTMLElement>('.combo-markdown-editor');
const form = document.querySelector('.repository.wiki.new .ui.form')!;
const editorContainer = form.querySelector<HTMLElement>('.combo-markdown-editor')!;
let editor: ComboMarkdownEditor;
let renderRequesting = false;
package/gitea/source/web_src/js/features/sshkey-helper.ts
+1 -1
View File
@@ -2,7 +2,7 @@ export function initSshKeyFormParser() {
// Parse SSH Key
document.querySelector<HTMLTextAreaElement>('#ssh-key-content')?.addEventListener('input', function () {
const arrays = this.value.split(' ');
const title = document.querySelector<HTMLInputElement>('#ssh-key-title');
const title = document.querySelector<HTMLInputElement>('#ssh-key-title')!;
if (!title.value && arrays.length === 3 && arrays[2] !== '') {
title.value = arrays[2];
}
package/gitea/source/web_src/js/features/stopwatch.ts
+8 -48
View File
@@ -1,9 +1,9 @@
import {createTippy} from '../modules/tippy.ts';
import {GET} from '../modules/fetch.ts';
import {hideElem, queryElems, showElem} from '../utils/dom.ts';
import {logoutFromWorker} from '../modules/worker.ts';
import {UserEventsSharedWorker} from '../modules/worker.ts';
const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
const {appSubUrl, notificationSettings, enableTimeTracking} = window.config;
export function initStopwatch() {
if (!enableTimeTracking) {
@@ -47,56 +47,16 @@ export function initStopwatch() {
// 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') {
const worker = new UserEventsSharedWorker('stopwatch-worker');
worker.addMessageEventListener((event) => {
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();
logoutFromWorker();
} else if (event.data.type === 'close') {
worker.port.postMessage({
type: 'close',
});
worker.port.close();
} else if (event.data.type === 'stopwatches') {
updateStopwatchData(JSON.parse(event.data.data));
}
});
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();
});
worker.startPort();
return;
}
package/gitea/source/web_src/js/features/tablesort.ts
+4 -4
View File
@@ -1,8 +1,8 @@
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');
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);
});
@@ -10,7 +10,7 @@ export function initTableSort() {
}
function tableSort(normSort: string, revSort: string, isDefault: string) {
if (!normSort) return false;
if (!normSort) return;
if (!revSort) revSort = '';
const url = new URL(window.location.href);
package/gitea/source/web_src/js/features/tribute.ts
+49 -40
View File
@@ -1,51 +1,60 @@
import {emojiKeys, emojiHTML, emojiString} from './emoji.ts';
import {html, htmlRaw} from '../utils/html.ts';
type TributeItem = Record<string, any>;
import {fetchMentions} from '../utils/match.ts';
import type {TributeCollection} from 'tributejs';
import type {Mention} from '../types.ts';
export async function attachTribute(element: HTMLElement) {
const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs');
const {default: Tribute} = await import('tributejs');
const mentionsUrl = element.closest('[data-mentions-url]')?.getAttribute('data-mentions-url');
const collections = [
{ // emojis
trigger: ':',
requireLeadingSpace: true,
values: (query: string, cb: (matches: Array<string>) => void) => {
const matches = [];
for (const name of emojiKeys) {
if (name.includes(query)) {
matches.push(name);
if (matches.length > 5) break;
}
const emojiCollection: TributeCollection<string> = { // emojis
trigger: ':',
requireLeadingSpace: true,
values: (query: string, cb: (matches: Array<string>) => void) => {
const matches = [];
for (const name of emojiKeys) {
if (name.includes(query)) {
matches.push(name);
if (matches.length > 5) break;
}
cb(matches);
},
lookup: (item: TributeItem) => item,
selectTemplate: (item: TributeItem) => {
if (item === undefined) return null;
return emojiString(item.original);
},
menuItemTemplate: (item: TributeItem) => {
return html`<div class="tribute-item">${htmlRaw(emojiHTML(item.original))}<span>${item.original}</span></div>`;
},
}, { // mentions
values: window.config.mentionValues ?? [],
requireLeadingSpace: true,
menuItemTemplate: (item: TributeItem) => {
const fullNameHtml = item.original.fullname && item.original.fullname !== '' ? html`<span class="fullname">${item.original.fullname}</span>` : '';
return html`
<div class="tribute-item">
<img alt src="${item.original.avatar}" width="21" height="21"/>
<span class="name">${item.original.name}</span>
${htmlRaw(fullNameHtml)}
</div>
`;
},
}
cb(matches);
},
];
lookup: (item) => item,
selectTemplate: (item) => {
if (item === undefined) return '';
return emojiString(item.original) ?? '';
},
menuItemTemplate: (item) => {
return html`<div class="tribute-item">${htmlRaw(emojiHTML(item.original))}<span>${item.original}</span></div>`;
},
};
// @ts-expect-error TS2351: This expression is not constructable (strange, why)
const tribute = new Tribute({collection: collections, noMatchTemplate: ''});
const mentionCollection: TributeCollection<Mention> = {
values: async (_query: string, cb: (matches: Mention[]) => void) => { // eslint-disable-line @typescript-eslint/no-misused-promises
cb(mentionsUrl ? await fetchMentions(mentionsUrl) : []);
},
requireLeadingSpace: true,
menuItemTemplate: (item) => {
const fullNameHtml = item.original.fullname && item.original.fullname !== '' ? html`<span class="fullname">${item.original.fullname}</span>` : '';
return html`
<div class="tribute-item">
<img alt src="${item.original.avatar}" width="21" height="21"/>
<span class="name">${item.original.name}</span>
${htmlRaw(fullNameHtml)}
</div>
`;
},
};
const tribute = new Tribute({
collection: [
emojiCollection as TributeCollection<any>,
mentionCollection as TributeCollection<any>,
],
noMatchTemplate: () => '',
});
tribute.attach(element);
return tribute;
}
package/gitea/source/web_src/js/features/user-auth-webauthn.ts
+4 -4
View File
@@ -53,7 +53,7 @@ async function loginPasskey() {
const clientDataJSON = new Uint8Array(credResp.clientDataJSON);
const rawId = new Uint8Array(credential.rawId);
const sig = new Uint8Array(credResp.signature);
const userHandle = new Uint8Array(credResp.userHandle);
const userHandle = new Uint8Array(credResp.userHandle ?? []);
const res = await POST(`${appSubUrl}/user/webauthn/passkey/login`, {
data: {
@@ -182,7 +182,7 @@ async function webauthnRegistered(newCredential: any) { // TODO: Credential type
}
function webAuthnError(errorType: ErrorType, message:string = '') {
const elErrorMsg = document.querySelector(`#webauthn-error-msg`);
const elErrorMsg = document.querySelector(`#webauthn-error-msg`)!;
if (errorType === 'general') {
elErrorMsg.textContent = message || 'unknown error';
@@ -228,7 +228,7 @@ export function initUserAuthWebAuthnRegister() {
}
async function webAuthnRegisterRequest() {
const elNickname = document.querySelector<HTMLInputElement>('#nickname');
const elNickname = document.querySelector<HTMLInputElement>('#nickname')!;
const formData = new FormData();
formData.append('name', elNickname.value);
@@ -246,7 +246,7 @@ async function webAuthnRegisterRequest() {
}
const options = await res.json();
elNickname.closest('div.field').classList.remove('error');
elNickname.closest('div.field')!.classList.remove('error');
options.publicKey.challenge = decodeURLEncodedBase64(options.publicKey.challenge);
options.publicKey.user.id = decodeURLEncodedBase64(options.publicKey.user.id);
package/gitea/source/web_src/js/features/user-auth.ts
+13 -13
View File
@@ -5,23 +5,23 @@ export function initUserCheckAppUrl() {
checkAppUrlScheme();
}
export function initUserAuthOauth2() {
const outer = document.querySelector('#oauth2-login-navigator');
if (!outer) return;
const inner = document.querySelector('#oauth2-login-navigator-inner');
export function initUserExternalLogins() {
const container = document.querySelector('#external-login-navigator');
if (!container) return;
checkAppUrl();
for (const link of outer.querySelectorAll('.oauth-login-link')) {
// whether the auth method requires app url check (need consistent ROOT_URL with visited URL)
let needCheckAppUrl = false;
for (const link of container.querySelectorAll('.external-login-link')) {
needCheckAppUrl = needCheckAppUrl || link.getAttribute('data-require-appurl-check') === 'true';
link.addEventListener('click', () => {
inner.classList.add('tw-invisible');
outer.classList.add('is-loading');
container.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');
// recover previous content to let user try again, usually redirection will be performed before this action
container.classList.remove('is-loading');
}, 5000);
});
}
if (needCheckAppUrl) {
checkAppUrl();
}
}
package/gitea/source/web_src/js/features/user-settings.ts
+3 -3
View File
@@ -6,9 +6,9 @@ export function initUserSettings() {
const usernameInput = document.querySelector<HTMLInputElement>('#username');
if (!usernameInput) return;
usernameInput.addEventListener('input', function () {
const prompt = document.querySelector('#name-change-prompt');
const promptRedirect = document.querySelector('#name-change-redirect-prompt');
if (this.value.toLowerCase() !== this.getAttribute('data-name').toLowerCase()) {
const prompt = document.querySelector('#name-change-prompt')!;
const promptRedirect = document.querySelector('#name-change-redirect-prompt')!;
if (this.value.toLowerCase() !== this.getAttribute('data-name')!.toLowerCase()) {
showElem(prompt);
showElem(promptRedirect);
} else {