1 | var alternativeValues = {
|
---|
2 | 'space-around': 'distribute',
|
---|
3 | 'space-between': 'justify',
|
---|
4 | 'flex-start': 'start',
|
---|
5 | 'flex-end': 'end'
|
---|
6 | };
|
---|
7 | var alternativeProps = {
|
---|
8 | alignContent: 'msFlexLinePack',
|
---|
9 | alignSelf: 'msFlexItemAlign',
|
---|
10 | alignItems: 'msFlexAlign',
|
---|
11 | justifyContent: 'msFlexPack',
|
---|
12 | order: 'msFlexOrder',
|
---|
13 | flexGrow: 'msFlexPositive',
|
---|
14 | flexShrink: 'msFlexNegative',
|
---|
15 | flexBasis: 'msFlexPreferredSize'
|
---|
16 |
|
---|
17 | // Full expanded syntax is flex-grow | flex-shrink | flex-basis.
|
---|
18 | };var flexShorthandMappings = {
|
---|
19 | auto: '1 1 auto',
|
---|
20 | inherit: 'inherit',
|
---|
21 | initial: '0 1 auto',
|
---|
22 | none: '0 0 auto',
|
---|
23 | unset: 'unset'
|
---|
24 | };
|
---|
25 | var isUnitlessNumber = /^\d+(\.\d+)?$/;
|
---|
26 | var logTag = 'inline-style-prefixer.flexboxIE plugin';
|
---|
27 |
|
---|
28 | export default function flexboxIE(property, value, style) {
|
---|
29 | if (alternativeProps.hasOwnProperty(property)) {
|
---|
30 | style[alternativeProps[property]] = alternativeValues[value] || value;
|
---|
31 | }
|
---|
32 |
|
---|
33 | if (property === 'flex') {
|
---|
34 | // For certain values we can do straight mappings based on the spec
|
---|
35 | // for the expansions.
|
---|
36 | if (Object.prototype.hasOwnProperty.call(flexShorthandMappings, value)) {
|
---|
37 | style.msFlex = flexShorthandMappings[value];
|
---|
38 | return;
|
---|
39 | }
|
---|
40 | // Here we have no direct mapping, so we favor looking for a
|
---|
41 | // unitless positive number as that will be the most common use-case.
|
---|
42 | if (isUnitlessNumber.test(value)) {
|
---|
43 | style.msFlex = value + ' 1 0%';
|
---|
44 | return;
|
---|
45 | }
|
---|
46 |
|
---|
47 | if (typeof value === 'number' && value < 0) {
|
---|
48 | // ignore negative values;
|
---|
49 | console.warn(logTag + ': "flex: ' + value + '", negative values are not valid and will be ignored.');
|
---|
50 | return;
|
---|
51 | }
|
---|
52 |
|
---|
53 | if (!value.split) {
|
---|
54 | console.warn(logTag + ': "flex: ' + value + '", value format are not detected, it will be remain as is');
|
---|
55 | style.msFlex = value;
|
---|
56 | return;
|
---|
57 | }
|
---|
58 |
|
---|
59 | // The next thing we can look for is if there are multiple values.
|
---|
60 | var flexValues = value.split(/\s/);
|
---|
61 | // If we only have a single value that wasn't a positive unitless
|
---|
62 | // or a pre-mapped value, then we can assume it is a unit value.
|
---|
63 | switch (flexValues.length) {
|
---|
64 | case 1:
|
---|
65 | style.msFlex = '1 1 ' + value;
|
---|
66 | return;
|
---|
67 | case 2:
|
---|
68 | // If we have 2 units, then we expect that the first will
|
---|
69 | // always be a unitless number and represents flex-grow.
|
---|
70 | // The second unit will represent flex-shrink for a unitless
|
---|
71 | // value, or flex-basis otherwise.
|
---|
72 | if (isUnitlessNumber.test(flexValues[1])) {
|
---|
73 | style.msFlex = flexValues[0] + ' ' + flexValues[1] + ' 0%';
|
---|
74 | } else {
|
---|
75 | style.msFlex = flexValues[0] + ' 1 ' + flexValues[1];
|
---|
76 | }
|
---|
77 | return;
|
---|
78 | default:
|
---|
79 | style.msFlex = value;
|
---|
80 | }
|
---|
81 | }
|
---|
82 | } |
---|