90 lines
2.8 KiB
JavaScript
90 lines
2.8 KiB
JavaScript
|
/**
|
||
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the MIT license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { canUseDOM } from 'shared/ExecutionEnvironment';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Generate a mapping of standard vendor prefixes using the defined style property and event name.
|
||
|
|
*
|
||
|
|
* @param {string} styleProp
|
||
|
|
* @param {string} eventName
|
||
|
|
* @returns {object}
|
||
|
|
*/
|
||
|
|
function makePrefixMap(styleProp, eventName) {
|
||
|
|
const prefixes = {};
|
||
|
|
prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
|
||
|
|
prefixes['Webkit' + styleProp] = 'webkit' + eventName;
|
||
|
|
prefixes['Moz' + styleProp] = 'moz' + eventName;
|
||
|
|
return prefixes;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A list of event names to a configurable list of vendor prefixes.
|
||
|
|
*/
|
||
|
|
const vendorPrefixes = {
|
||
|
|
animationend: 'Animation' |> makePrefixMap(%, 'AnimationEnd'),
|
||
|
|
animationiteration: 'Animation' |> makePrefixMap(%, 'AnimationIteration'),
|
||
|
|
animationstart: 'Animation' |> makePrefixMap(%, 'AnimationStart'),
|
||
|
|
transitionrun: 'Transition' |> makePrefixMap(%, 'TransitionRun'),
|
||
|
|
transitionstart: 'Transition' |> makePrefixMap(%, 'TransitionStart'),
|
||
|
|
transitioncancel: 'Transition' |> makePrefixMap(%, 'TransitionCancel'),
|
||
|
|
transitionend: 'Transition' |> makePrefixMap(%, 'TransitionEnd')
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Event names that have already been detected and prefixed (if applicable).
|
||
|
|
*/
|
||
|
|
const prefixedEventNames = {};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Element to check for prefixes on.
|
||
|
|
*/
|
||
|
|
let style = {};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Bootstrap if a DOM exists.
|
||
|
|
*/
|
||
|
|
if (canUseDOM) {
|
||
|
|
style = ('div' |> document.createElement(%)).style;
|
||
|
|
|
||
|
|
// On some platforms, in particular some releases of Android 4.x,
|
||
|
|
// the un-prefixed "animation" and "transition" properties are defined on the
|
||
|
|
// style object but the events that fire will still be prefixed, so we need
|
||
|
|
// to check if the un-prefixed events are usable, and if not remove them from the map.
|
||
|
|
if (!('AnimationEvent' in window)) {
|
||
|
|
delete vendorPrefixes.animationend.animation;
|
||
|
|
delete vendorPrefixes.animationiteration.animation;
|
||
|
|
delete vendorPrefixes.animationstart.animation;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Same as above
|
||
|
|
if (!('TransitionEvent' in window)) {
|
||
|
|
delete vendorPrefixes.transitionend.transition;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Attempts to determine the correct vendor prefixed event name.
|
||
|
|
*
|
||
|
|
* @param {string} eventName
|
||
|
|
* @returns {string}
|
||
|
|
*/
|
||
|
|
function getVendorPrefixedEventName(eventName) {
|
||
|
|
if (prefixedEventNames[eventName]) {
|
||
|
|
return prefixedEventNames[eventName];
|
||
|
|
} else if (!vendorPrefixes[eventName]) {
|
||
|
|
return eventName;
|
||
|
|
}
|
||
|
|
const prefixMap = vendorPrefixes[eventName];
|
||
|
|
for (const styleProp in prefixMap) {
|
||
|
|
if ((styleProp |> prefixMap.hasOwnProperty(%)) && styleProp in style) {
|
||
|
|
return prefixedEventNames[eventName] = prefixMap[styleProp];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return eventName;
|
||
|
|
}
|
||
|
|
export default getVendorPrefixedEventName;
|