source: imaps-frontend/node_modules/inline-style-prefixer/lib/plugins/flexboxIE.js@ d565449

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

Update repo after prototype presentation

  • Property mode set to 100644
File size: 2.7 KB
Line 
1'use strict';
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.default = flexboxIE;
7var alternativeValues = {
8 'space-around': 'distribute',
9 'space-between': 'justify',
10 'flex-start': 'start',
11 'flex-end': 'end'
12};
13var 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};
31var isUnitlessNumber = /^\d+(\.\d+)?$/;
32var logTag = 'inline-style-prefixer.flexboxIE plugin';
33
34function 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}
Note: See TracBrowser for help on using the repository browser.