95 lines
2.1 KiB
JavaScript
95 lines
2.1 KiB
JavaScript
import Ember from 'ember';
|
|
|
|
// TODO - remove this!
|
|
var el = document.body || document.createElement('div');
|
|
var style = el.style;
|
|
var set = Ember.set;
|
|
|
|
function getElementStyle (prop) {
|
|
var uppercaseProp = prop.charAt(0).toUpperCase() + prop.slice(1);
|
|
|
|
var props = [
|
|
prop,
|
|
'webkit' + prop,
|
|
'webkit' + uppercaseProp,
|
|
'Moz' + uppercaseProp,
|
|
'moz' + uppercaseProp,
|
|
'ms' + uppercaseProp,
|
|
'ms' + prop
|
|
];
|
|
|
|
for (var i=0; i < props.length; i++) {
|
|
var property = props[i];
|
|
|
|
if (property in style) {
|
|
return property;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function getCSSStyle (attr) {
|
|
var styleName = getElementStyle(attr);
|
|
var prefix = styleName.toLowerCase().replace(attr, '');
|
|
|
|
var dic = {
|
|
webkit: '-webkit-' + attr,
|
|
moz: '-moz-' + attr,
|
|
ms: '-ms-' + attr
|
|
};
|
|
|
|
if (prefix && dic[prefix]) {
|
|
return dic[prefix];
|
|
}
|
|
|
|
return styleName;
|
|
}
|
|
|
|
var styleAttributeName = getElementStyle('transform');
|
|
var transformProp = getCSSStyle('transform');
|
|
var perspectiveProp = getElementStyle('perspective');
|
|
var supports2D = !!transformProp;
|
|
var supports3D = !!perspectiveProp;
|
|
|
|
function setStyle (optionalStyleString) {
|
|
return function (obj, x, y) {
|
|
var isElement = obj instanceof Element;
|
|
|
|
if (optionalStyleString && (supports2D || supports3D)) {
|
|
var style = Ember.String.fmt(optionalStyleString, x, y);
|
|
|
|
if (isElement) {
|
|
obj.style[styleAttributeName] = Ember.String.htmlSafe(style);
|
|
} else {
|
|
set(obj, 'style', Ember.String.htmlSafe(transformProp + ': ' + style));
|
|
}
|
|
} else {
|
|
if (isElement) {
|
|
obj.style.top = y;
|
|
obj.style.left = x;
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
export default {
|
|
transformProp: transformProp,
|
|
applyTransform: (function () {
|
|
if (supports2D) {
|
|
return setStyle('translate(%@px, %@px)');
|
|
}
|
|
|
|
return setStyle();
|
|
})(),
|
|
apply3DTransform: (function () {
|
|
if (supports3D) {
|
|
return setStyle('translate3d(%@px, %@px, 0)');
|
|
} else if (supports2D) {
|
|
return setStyle('translate(%@px, %@px)');
|
|
}
|
|
|
|
return setStyle();
|
|
})()
|
|
};
|