@qooxdoo/framework
Version:
The JS Framework for Coders
222 lines (189 loc) • 6.73 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2011 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Martin Wittemann (wittemann)
************************************************************************ */
/**
* Responsible for checking all relevant animation properties.
*
* Spec: http://www.w3.org/TR/css3-animations/
*
* @require(qx.bom.Stylesheet)
* @internal
*/
qx.Bootstrap.define("qx.bom.client.CssAnimation",
{
statics : {
/**
* Main check method which returns an object if CSS animations are
* supported. This object contains all necessary keys to work with CSS
* animations.
* <ul>
* <li><code>name</code> The name of the css animation style</li>
* <li><code>play-state</code> The name of the play-state style</li>
* <li><code>start-event</code> The name of the start event</li>
* <li><code>iteration-event</code> The name of the iteration event</li>
* <li><code>end-event</code> The name of the end event</li>
* <li><code>fill-mode</code> The fill-mode style</li>
* <li><code>keyframes</code> The name of the keyframes selector.</li>
* </ul>
*
* @internal
* @return {Object|null} The described object or null, if animations are
* not supported.
*/
getSupport : function() {
var name = qx.bom.client.CssAnimation.getName();
if (name != null) {
return {
"name" : name,
"play-state" : qx.bom.client.CssAnimation.getPlayState(),
"start-event" : qx.bom.client.CssAnimation.getAnimationStart(),
"iteration-event" : qx.bom.client.CssAnimation.getAnimationIteration(),
"end-event" : qx.bom.client.CssAnimation.getAnimationEnd(),
"fill-mode" : qx.bom.client.CssAnimation.getFillMode(),
"keyframes" : qx.bom.client.CssAnimation.getKeyFrames()
};
}
return null;
},
/**
* Checks for the 'animation-fill-mode' CSS style.
* @internal
* @return {String|null} The name of the style or null, if the style is
* not supported.
*/
getFillMode : function() {
return qx.bom.Style.getPropertyName("AnimationFillMode");
},
/**
* Checks for the 'animation-play-state' CSS style.
* @internal
* @return {String|null} The name of the style or null, if the style is
* not supported.
*/
getPlayState : function() {
return qx.bom.Style.getPropertyName("AnimationPlayState");
},
/**
* Checks for the style name used for animations.
* @internal
* @return {String|null} The name of the style or null, if the style is
* not supported.
*/
getName : function() {
return qx.bom.Style.getPropertyName("animation");
},
/**
* Checks for the event name of animation start.
* @internal
* @return {String} The name of the event.
*/
getAnimationStart : function() {
// special handling for mixed prefixed / unprefixed implementations
if (qx.bom.Event.supportsEvent(window, "webkitanimationstart")) {
return "webkitAnimationStart";
}
var mapping = {
"msAnimation" : "MSAnimationStart",
"WebkitAnimation" : "webkitAnimationStart",
"MozAnimation" : "animationstart",
"OAnimation" : "oAnimationStart",
"animation" : "animationstart"
};
return mapping[this.getName()];
},
/**
* Checks for the event name of animation end.
* @internal
* @return {String} The name of the event.
*/
getAnimationIteration : function() {
// special handling for mixed prefixed / unprefixed implementations
if (qx.bom.Event.supportsEvent(window, "webkitanimationiteration")) {
return "webkitAnimationIteration";
}
var mapping = {
"msAnimation" : "MSAnimationIteration",
"WebkitAnimation" : "webkitAnimationIteration",
"MozAnimation" : "animationiteration",
"OAnimation" : "oAnimationIteration",
"animation" : "animationiteration"
};
return mapping[this.getName()];
},
/**
* Checks for the event name of animation end.
* @internal
* @return {String} The name of the event.
*/
getAnimationEnd : function() {
// special handling for mixed prefixed / unprefixed implementations
if (qx.bom.Event.supportsEvent(window, "webkitanimationend")) {
return "webkitAnimationEnd";
}
var mapping = {
"msAnimation" : "MSAnimationEnd",
"WebkitAnimation" : "webkitAnimationEnd",
"MozAnimation" : "animationend",
"OAnimation" : "oAnimationEnd",
"animation" : "animationend"
};
return mapping[this.getName()];
},
/**
* Checks what selector should be used to add keyframes to stylesheets.
* @internal
* @return {String|null} The name of the selector or null, if the selector
* is not supported.
*/
getKeyFrames : function() {
var prefixes = qx.bom.Style.VENDOR_PREFIXES;
var keyFrames = [];
for (var i=0; i < prefixes.length; i++) {
var key = "@" + qx.bom.Style.getCssName(prefixes[i]) + "-keyframes";
keyFrames.push(key);
};
keyFrames.unshift("@keyframes");
var sheet = qx.bom.Stylesheet.createElement();
for (var i=0; i < keyFrames.length; i++) {
try {
qx.bom.Stylesheet.addRule(sheet, keyFrames[i] + " name", "");
return keyFrames[i];
} catch (e) {}
};
return null;
},
/**
* Checks for the requestAnimationFrame method and return the prefixed name.
* @internal
* @return {String|null} A string the method name or null, if the method
* is not supported.
*/
getRequestAnimationFrame : function() {
var choices = [
"requestAnimationFrame",
"msRequestAnimationFrame",
"webkitRequestAnimationFrame",
"mozRequestAnimationFrame",
"oRequestAnimationFrame" // currently unspecified, so we guess the name!
];
for (var i=0; i < choices.length; i++) {
if (window[choices[i]] != undefined) {
return choices[i];
}
};
return null;
}
},
defer : function(statics) {
qx.core.Environment.add("css.animation", statics.getSupport);
qx.core.Environment.add("css.animation.requestframe", statics.getRequestAnimationFrame);
}
});