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