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>tags/v1.21.3
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'; | ||||
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 || ''); | ||||
} | } | ||||
$('.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); | ||||
} | } |
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; | ||||
$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; | ||||
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; | ||||
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); |
/** | /** | ||||
* 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} | ||||
*/ | */ |
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); | |||||
} |
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'; |