source: imaps-frontend/node_modules/inline-style-prefixer/es/plugins/transition.js

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 2.3 KB
Line 
1import hyphenateProperty from 'css-in-js-utils/lib/hyphenateProperty';
2import isPrefixedValue from 'css-in-js-utils/lib/isPrefixedValue';
3
4import capitalizeString from '../utils/capitalizeString';
5
6var properties = {
7 transition: true,
8 transitionProperty: true,
9 WebkitTransition: true,
10 WebkitTransitionProperty: true,
11 MozTransition: true,
12 MozTransitionProperty: true
13};
14
15var prefixMapping = {
16 Webkit: '-webkit-',
17 Moz: '-moz-',
18 ms: '-ms-'
19};
20
21function prefixValue(value, propertyPrefixMap) {
22 if (isPrefixedValue(value)) {
23 return value;
24 }
25
26 // only split multi values, not cubic beziers
27 var multipleValues = value.split(/,(?![^()]*(?:\([^()]*\))?\))/g);
28
29 for (var i = 0, len = multipleValues.length; i < len; ++i) {
30 var singleValue = multipleValues[i];
31 var values = [singleValue];
32 for (var property in propertyPrefixMap) {
33 var dashCaseProperty = hyphenateProperty(property);
34
35 if (singleValue.indexOf(dashCaseProperty) > -1 && dashCaseProperty !== 'order') {
36 var prefixes = propertyPrefixMap[property];
37 for (var j = 0, pLen = prefixes.length; j < pLen; ++j) {
38 // join all prefixes and create a new value
39 values.unshift(singleValue.replace(dashCaseProperty, prefixMapping[prefixes[j]] + dashCaseProperty));
40 }
41 }
42 }
43
44 multipleValues[i] = values.join(',');
45 }
46
47 return multipleValues.join(',');
48}
49
50export default function transition(property, value, style, propertyPrefixMap) {
51 // also check for already prefixed transitions
52 if (typeof value === 'string' && properties.hasOwnProperty(property)) {
53 var outputValue = prefixValue(value, propertyPrefixMap);
54 // if the property is already prefixed
55 var webkitOutput = outputValue.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function (val) {
56 return !/-moz-|-ms-/.test(val);
57 }).join(',');
58
59 if (property.indexOf('Webkit') > -1) {
60 return webkitOutput;
61 }
62
63 var mozOutput = outputValue.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function (val) {
64 return !/-webkit-|-ms-/.test(val);
65 }).join(',');
66
67 if (property.indexOf('Moz') > -1) {
68 return mozOutput;
69 }
70
71 style['Webkit' + capitalizeString(property)] = webkitOutput;
72 style['Moz' + capitalizeString(property)] = mozOutput;
73 return outputValue;
74 }
75}
Note: See TracBrowser for help on using the repository browser.