[d565449] | 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 | } |
---|