@qooxdoo/framework
Version:
The JS Framework for Coders
214 lines (191 loc) • 6.57 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() {
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() {
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() {
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() {
return qx.bom.Style.getPropertyName("animation");
},
/**
* Checks for the event name of animation start.
* @internal
* @return {String} The name of the event.
*/
getAnimationStart() {
// 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() {
// 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() {
// 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() {
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() {
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(statics) {
qx.core.Environment.add("css.animation", statics.getSupport);
qx.core.Environment.add(
"css.animation.requestframe",
statics.getRequestAnimationFrame
);
}
});