Skip to content

Commit

Permalink
improve logic, explain why it can't use other polyfill patches
Browse files Browse the repository at this point in the history
  • Loading branch information
wxiaoguang committed Dec 13, 2023
1 parent 8d761ad commit 040a4fa
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 8 deletions.
2 changes: 1 addition & 1 deletion web_src/js/modules/tippy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
* 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 old browsers like PaleMoon doesn't support "mouseenter(capture)"
* The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
* @param e {Event}
*/
Expand Down
16 changes: 10 additions & 6 deletions web_src/js/utils/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -195,19 +195,23 @@ export function loadElem(el, src) {
});
}

// some browsers like PaleMoon don't have "SubmitEvent" support, so we need to polyfill it (a tricky method): use the last clicked button as submitter
// 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.addEventListener('click', (e) => {
if (!e.target.form) return;
const isSubmitButton = ((e.target.nodeName === 'INPUT' || e.target.nodeName === 'BUTTON') && e.target.type === 'submit');
e.target.form._submitter = isSubmitButton ? e.target : null;
});
document.body.addEventListener('click', submitEventPolyfillListener);
document.body.addEventListener('focus', submitEventPolyfillListener);
}
2 changes: 1 addition & 1 deletion web_src/js/webcomponents/webcomponents.js
Original file line number Diff line number Diff line change
@@ -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 '@github/relative-time-element';
Expand Down

0 comments on commit 040a4fa

Please sign in to comment.