UNPKG

@patternslib/patternslib

Version:

Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la

82 lines (73 loc) 2.93 kB
// Polyfills for modern browsers // SubmitEvent.submitter polyfill for Safari < 15.4 and jsDOM // Original code: https://stackoverflow.com/a/61110260/1337474 // Also see: https://caniuse.com/?search=submitter // NOTE: the `submitter` property is now widely available except for ancient browsers and jsDOM. !(function () { if (window.SubmitEvent && "submitter" in window.SubmitEvent.prototype) { // `submitter` attribute is already supported. return; } let last_btn = null; const submitable_buttons = `button, input[type="button"], input[type="submit"], input[type="image"]`; document.addEventListener( "click", function (e) { if (!e.target.closest) return; last_btn = e.target.closest(submitable_buttons); }, true ); document.addEventListener( "submit", function (e) { if ("submitter" in e) return; const canditates = [document.activeElement, last_btn]; last_btn = null; for (const candidate of canditates) { if (!candidate) continue; if (!candidate.form) continue; if (!candidate.matches(submitable_buttons)) continue; e.submitter = candidate; return; } e.submitter = e.target.querySelector(submitable_buttons); }, true ); })(); // Navigation polyfill for Firefox and Safari, as of 2024-01-04 // NOTE: this is a very basic polyfill, it only supports firing a `navigate` // event on location change and even that without interception support, etc. !(function () { if (window.navigation == undefined) { class NavigateEvent extends CustomEvent { constructor() { super("navigate"); this.destination = { url: undefined }; } } // Create a navigation object on the window // We create a DOM element for the navigation object so that we can // attach events on it. window.navigation = document.createElement("div"); const create_event = (args) => { const event = new NavigateEvent(); event.destination.url = args[2]; return event; }; // Patch pushState to trigger an `navigate` event on the navigation // object when the URL changes. const pushState = window.history.pushState; window.history.pushState = function () { pushState.apply(window.history, arguments); window.navigation.dispatchEvent(create_event(arguments)); }; // Same with replaceState const replaceState = window.history.replaceState; window.history.replaceState = function () { replaceState.apply(window.history, arguments); window.navigation.dispatchEvent(create_event(arguments)); }; } })();