mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-10-31 22:38:58 +00:00
Backport #28441 by wxiaoguang
Fix #28319
It only polyfills if there is no "SubmitEvent" class, so it has no side
effect for most users.
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 6af698fb81
)
This commit is contained in:
parent
3c6edfa5e2
commit
2b991b32eb
6 changed files with 31 additions and 7 deletions
|
@ -6,7 +6,7 @@ import {initCompColorPicker} from './comp/ColorPicker.js';
|
||||||
import {showGlobalErrorMessage} from '../bootstrap.js';
|
import {showGlobalErrorMessage} from '../bootstrap.js';
|
||||||
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
|
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
|
||||||
import {svg} from '../svg.js';
|
import {svg} from '../svg.js';
|
||||||
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
|
import {hideElem, showElem, toggleElem, initSubmitEventPolyfill, submitEventSubmitter} from '../utils/dom.js';
|
||||||
import {htmlEscape} from 'escape-goat';
|
import {htmlEscape} from 'escape-goat';
|
||||||
import {showTemporaryTooltip} from '../modules/tippy.js';
|
import {showTemporaryTooltip} from '../modules/tippy.js';
|
||||||
import {confirmModal} from './comp/ConfirmModal.js';
|
import {confirmModal} from './comp/ConfirmModal.js';
|
||||||
|
@ -122,7 +122,8 @@ async function formFetchAction(e) {
|
||||||
const formMethod = formEl.getAttribute('method') || 'get';
|
const formMethod = formEl.getAttribute('method') || 'get';
|
||||||
const formActionUrl = formEl.getAttribute('action');
|
const formActionUrl = formEl.getAttribute('action');
|
||||||
const formData = new FormData(formEl);
|
const formData = new FormData(formEl);
|
||||||
const [submitterName, submitterValue] = [e.submitter?.getAttribute('name'), e.submitter?.getAttribute('value')];
|
const formSubmitter = submitEventSubmitter(e);
|
||||||
|
const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')];
|
||||||
if (submitterName) {
|
if (submitterName) {
|
||||||
formData.append(submitterName, submitterValue || '');
|
formData.append(submitterName, submitterValue || '');
|
||||||
}
|
}
|
||||||
|
@ -193,6 +194,7 @@ export function initGlobalCommon() {
|
||||||
|
|
||||||
$('.tabular.menu .item').tab();
|
$('.tabular.menu .item').tab();
|
||||||
|
|
||||||
|
initSubmitEventPolyfill();
|
||||||
document.addEventListener('submit', formFetchAction);
|
document.addEventListener('submit', formFetchAction);
|
||||||
document.addEventListener('click', linkAction);
|
document.addEventListener('click', linkAction);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {isElemHidden, onInputDebounce, toggleElem} from '../utils/dom.js';
|
import {isElemHidden, onInputDebounce, submitEventSubmitter, toggleElem} from '../utils/dom.js';
|
||||||
import {GET} from '../modules/fetch.js';
|
import {GET} from '../modules/fetch.js';
|
||||||
|
|
||||||
const {appSubUrl} = window.config;
|
const {appSubUrl} = window.config;
|
||||||
|
@ -40,7 +40,7 @@ export function initCommonIssueListQuickGoto() {
|
||||||
$form.on('submit', (e) => {
|
$form.on('submit', (e) => {
|
||||||
// if there is no goto button, or the form is submitted by non-quick-goto elements, submit the form directly
|
// if there is no goto button, or the form is submitted by non-quick-goto elements, submit the form directly
|
||||||
let doQuickGoto = !isElemHidden($goto);
|
let doQuickGoto = !isElemHidden($goto);
|
||||||
const submitter = e.originalEvent.submitter;
|
const submitter = submitEventSubmitter(e.originalEvent);
|
||||||
if (submitter !== $form[0] && submitter !== $input[0] && submitter !== $goto[0]) doQuickGoto = false;
|
if (submitter !== $form[0] && submitter !== $input[0] && submitter !== $goto[0]) doQuickGoto = false;
|
||||||
if (!doQuickGoto) return;
|
if (!doQuickGoto) return;
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,7 @@ import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
|
||||||
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
|
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
|
||||||
import {initImageDiff} from './imagediff.js';
|
import {initImageDiff} from './imagediff.js';
|
||||||
import {showErrorToast} from '../modules/toast.js';
|
import {showErrorToast} from '../modules/toast.js';
|
||||||
|
import {submitEventSubmitter} from '../utils/dom.js';
|
||||||
|
|
||||||
const {csrfToken, pageData, i18n} = window.config;
|
const {csrfToken, pageData, i18n} = window.config;
|
||||||
|
|
||||||
|
@ -57,7 +58,7 @@ function initRepoDiffConversationForm() {
|
||||||
const formData = new FormData($form[0]);
|
const formData = new FormData($form[0]);
|
||||||
|
|
||||||
// if the form is submitted by a button, append the button's name and value to the form data
|
// if the form is submitted by a button, append the button's name and value to the form data
|
||||||
const submitter = e.originalEvent?.submitter;
|
const submitter = submitEventSubmitter(e.originalEvent);
|
||||||
const isSubmittedByButton = (submitter?.nodeName === 'BUTTON') || (submitter?.nodeName === 'INPUT' && submitter.type === 'submit');
|
const isSubmittedByButton = (submitter?.nodeName === 'BUTTON') || (submitter?.nodeName === 'INPUT' && submitter.type === 'submit');
|
||||||
if (isSubmittedByButton && submitter.name) {
|
if (isSubmittedByButton && submitter.name) {
|
||||||
formData.append(submitter.name, submitter.value);
|
formData.append(submitter.name, submitter.value);
|
||||||
|
|
|
@ -106,7 +106,7 @@ function switchTitleToTooltip(target) {
|
||||||
/**
|
/**
|
||||||
* Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
|
* Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
|
||||||
* According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event
|
* According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event
|
||||||
* Some old browsers like Pale Moon doesn't support "mouseenter(capture)"
|
* Some browsers like PaleMoon don't support "addEventListener('mouseenter', capture)"
|
||||||
* The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
|
* The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
|
||||||
* @param e {Event}
|
* @param e {Event}
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -194,3 +194,24 @@ export function loadElem(el, src) {
|
||||||
el.src = src;
|
el.src = src;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// some browsers like PaleMoon don't have "SubmitEvent" support, so polyfill it by a tricky method: use the last clicked button as submitter
|
||||||
|
// it can't use other transparent polyfill patches because PaleMoon also doesn't support "addEventListener(capture)"
|
||||||
|
const needSubmitEventPolyfill = typeof SubmitEvent === 'undefined';
|
||||||
|
|
||||||
|
export function submitEventSubmitter(e) {
|
||||||
|
return needSubmitEventPolyfill ? (e.target._submitter || null) : e.submitter;
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitEventPolyfillListener(e) {
|
||||||
|
const form = e.target.closest('form');
|
||||||
|
if (!form) return;
|
||||||
|
form._submitter = e.target.closest('button:not([type]), button[type="submit"], input[type="submit"]');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initSubmitEventPolyfill() {
|
||||||
|
if (!needSubmitEventPolyfill) return;
|
||||||
|
console.warn(`This browser doesn't have "SubmitEvent" support, use a tricky method to polyfill`);
|
||||||
|
document.body.addEventListener('click', submitEventPolyfillListener);
|
||||||
|
document.body.addEventListener('focus', submitEventPolyfillListener);
|
||||||
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import '@webcomponents/custom-elements'; // polyfill for some browsers like Pale Moon
|
import '@webcomponents/custom-elements'; // polyfill for some browsers like PaleMoon
|
||||||
import './polyfill.js';
|
import './polyfill.js';
|
||||||
|
|
||||||
import '@github/relative-time-element';
|
import '@github/relative-time-element';
|
||||||
|
|
Loading…
Reference in a new issue