import * as matrix 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.')
}
transformations.push(matrix[("translate" + axis)](distance))
}
if (config.rotate.x) { transformations.push(matrix.rotateX(config.rotate.x)) }
if (config.rotate.y) { transformations.push(matrix.rotateY(config.rotate.y)) }
if (config.rotate.z) { transformations.push(matrix.rotateZ(config.rotate.z)) }
if (config.scale !== 1) { transformations.push(matrix.scale(config.scale)) }
var transform = {}
if (transformations.length) {
var transformProperty = getPrefixedStyleProperty('transform')
transform.property = transformProperty
transform.computed = {
raw: computed[transformProperty],
}
/**
* The default computed transform value should be one of:
* undefined || 'none' || 'matrix()' || 'matrix3d()'
*/
if (transform.computed.raw === 'none') {
transform.computed.matrix = matrix.identity()
} else {
var match = transform.computed.raw.match(/\(([^)]+)\)/)
if (match) {
var values = match[1].split(', ').map(function (value) { return parseFloat(value); })
transform.computed.matrix = matrix.format(values)
} else {
throw new RangeError('Unrecognized computed transform property value.')
}
}
transformations.unshift(transform.computed.matrix)
var product = transformations.reduce(function (m, x) { return matrix.multiply(m, x); })
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) {
var transitionProperty = getPrefixedStyleProperty('transition')
transition = {
computed: computed[transitionProperty],
fragments: [],
property: transitionProperty,
}
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,
}
}
|