Last active
September 24, 2015 21:17
-
-
Save jabes/970cb95d6e5962332d38 to your computer and use it in GitHub Desktop.
Get a vendor prefixed event name based on browser support
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// http://stackoverflow.com/a/1026087 | |
function capitalizeFirstLetter(string) { | |
return (typeof string === 'string' || string instanceof String) ? | |
string.charAt(0).toUpperCase() + string.slice(1) : | |
false; | |
} | |
/** | |
* Enum for css event group values. | |
* @readonly | |
* @enum {string} | |
*/ | |
var cssEventGroups = { | |
animation: 'animation', | |
transition: 'transition' | |
}; | |
/** | |
* Enum for css event type values. | |
* @readonly | |
* @enum {string} | |
*/ | |
var cssEventTypes = { | |
start: 'start', | |
end: 'end', | |
iteration: 'iteration' | |
}; | |
/** | |
* Get the vendor prefixed event name based on browser support. | |
* Note: cssEventTypes.start and cssEventTypes.iteration only work with cssEventGroups.animation | |
* @see {@link http://callmenick.com/post/listen-for-css-animation-events-with-javascript} for further information | |
* @example | |
* // returns one of the following "animationend" "mozAnimationEnd" "webkitAnimationEnd" "oAnimationEnd" "MSAnimationEnd" | |
* getSupportedCssEventName(cssEventGroups.animation, cssEventTypes.end); | |
* @enum {cssEventGroups} eventGroup - The group which the type belongs to | |
* @enum {cssEventTypes} eventType - The type of event | |
* @returns {string|boolean} The event name based on browser support or false if none found | |
*/ | |
function getSupportedCssEventName(eventGroup, eventType) { | |
var body = document.body || document.documentElement, | |
style = body.style, | |
domPrefixes = ['Moz', 'Webkit', 'O', 'ms'], | |
eventPrefixes = ['moz', 'webkit', 'o', 'MS'], | |
eventName = eventGroup + capitalizeFirstLetter(eventType); | |
if (typeof style[eventGroup] === 'string') { | |
return eventName.toLowerCase(); | |
} | |
eventGroup = capitalizeFirstLetter(eventGroup); | |
eventName = capitalizeFirstLetter(eventName); | |
for (var i=0; i<domPrefixes.length; i++) { | |
if (typeof style[domPrefixes[i]+eventGroup] === 'string') { | |
return eventPrefixes[i]+eventName; | |
} | |
} | |
return false; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment