import {
parse,
multiply,
rotateX,
rotateY,
rotateZ,
scale,
translateX,
translateY,
} from 'redpill'
import { getPrefixedStyleProperty } from '../../utils/browser'
export default function style (element) {
var computed = window.getComputedStyle(element.node)
var position = computed.position
var config = element.config
/**
* Generate inline styles
*/
var inlineRegex = /.+[^;]/g
var inlineStyle = element.node.getAttribute('style') || ''
var inlineMatch = inlineRegex.exec(inlineStyle)
var inline = (inlineMatch) ? ((inlineMatch[0]) + ";") : ''
if (inline.indexOf('visibility: visible') === -1) {
inline += (inline.length) ? ' ' : ''
inline += 'visibility: visible;'
}
/**
* Generate opacity styles
*/
var computedOpacity = parseFloat(computed.opacity)
var configOpacity = !isNaN(parseFloat(config.opacity))
? parseFloat(config.opacity)
: parseFloat(computed.opacity)
var opacity = {
computed: (computedOpacity !== configOpacity) ? ("opacity: " + computedOpacity + ";") : '',
generated: (computedOpacity !== configOpacity) ? ("opacity: " + configOpacity + ";") : '',
}
/**
* Generate transformation styles
*/
var transformations = []
if (parseFloat(config.distance)) {
var axis = (config.origin === 'top' || config.origin === 'bottom') ? 'Y' : 'X'
/**
* Let’s make sure our our pixel distances are negative for top and left.
* e.g. { origin: 'top', distance: '25px' } starts at `top: -25px` in CSS.
*/
var distance = config.distance
if (config.origin === 'top' || config.origin === 'left') {
distance = /^-/.test(distance)
? distance.substr(1)
: ("-" + distance)
}
var ref = distance.match(/(^-?\d+\.?\d?)|(em$|px$|\%$)/g);
var value = ref[0];
var unit = ref[1];
switch (unit) {
case 'em':
distance = parseInt(computed.fontSize) * value
break
case 'px':
distance = value
break
case '%':
distance = (axis === 'Y')
? element.node.getBoundingClientRect().height * value / 100
: element.node.getBoundingClientRect().width * value / 100
break
default:
throw new RangeError('Unrecognized or missing distance unit.')
}
(axis === 'Y')
? transformations.push(translateY(distance))
: transformations.push(translateX(distance))
}
if (config.rotate.x) { transformations.push(rotateX(config.rotate.x)) }
if (config.rotate.y) { transformations.push(rotateY(config.rotate.y)) }
if (config.rotate.z) { transformations.push(rotateZ(config.rotate.z)) }
if (config.scale !== 1) { transformations.push(scale(config.scale)) }
var transform = {}
if (transformations.length) {
transform.property = getPrefixedStyleProperty('transform')
/**
* The default computed transform value should be one of:
* undefined || 'none' || 'matrix()' || 'matrix3d()'
*/
transform.computed = {
raw: computed[transform.property],
matrix: parse(computed[transform.property]),
}
transformations.unshift(transform.computed.matrix)
var product = transformations.reduce(multiply)
transform.generated = {
initial: ((transform.property) + ": matrix3d(" + (product.join(', ')) + ");"),
final: ((transform.property) + ": matrix3d(" + (transform.computed.matrix.join(', ')) + ");"),
}
} else {
transform.generated = {
initial: '',
final: '',
}
}
/**
* Generate transition styles
*/
var transition = {}
if (opacity.generated || transform.generated.initial) {
transition.property = getPrefixedStyleProperty('transition')
transition.computed = computed[transition.property]
transition.fragments = []
var delay = config.delay;
var duration = config.duration;
var easing = config.easing;
if (opacity.generated) {
transition.fragments.push({
delayed: ("opacity " + (duration / 1000) + "s " + easing + " " + (delay / 1000) + "s"),
instant: ("opacity " + (duration / 1000) + "s " + easing + " 0s"),
})
}
if (transform.generated.initial) {
transition.fragments.push({
delayed: ((transform.property) + " " + (duration / 1000) + "s " + easing + " " + (delay / 1000) + "s"),
instant: ((transform.property) + " " + (duration / 1000) + "s " + easing + " 0s"),
})
}
/**
* The default computed transition property should be one of:
* undefined || '' || 'all 0s ease 0s' || 'all 0s 0s cubic-bezier()'
*/
if (transition.computed && !transition.computed.match(/all 0s/)) {
transition.fragments.unshift({
delayed: transition.computed,
instant: transition.computed,
})
}
var composed = transition.fragments.reduce(function (composition, fragment, i) {
composition.delayed += (i === 0) ? fragment.delayed : (", " + (fragment.delayed))
composition.instant += (i === 0) ? fragment.instant : (", " + (fragment.instant))
return composition
}, {
delayed: '',
instant: '',
})
transition.generated = {
delayed: ((transition.property) + ": " + (composed.delayed) + ";"),
instant: ((transition.property) + ": " + (composed.instant) + ";"),
}
}
return {
inline: inline,
opacity: opacity,
position: position,
transform: transform,
transition: transition,
}
}
|