source: imaps-frontend/node_modules/inline-style-prefixer/es/plugins/flexboxIE.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.6 KB
Line 
1var alternativeValues = {
2 'space-around': 'distribute',
3 'space-between': 'justify',
4 'flex-start': 'start',
5 'flex-end': 'end'
6};
7var 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};
25var isUnitlessNumber = /^\d+(\.\d+)?$/;
26var logTag = 'inline-style-prefixer.flexboxIE plugin';
27
28export 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}
Note: See TracBrowser for help on using the repository browser.