react-responsive-grid
Version:
Power tools for responsive layouts with React
64 lines (61 loc) • 1.69 kB
JavaScript
// Generated by CoffeeScript 1.10.0
var objectAssign;
objectAssign = require('object-assign');
module.exports = function(options) {
var calcSpacing, calcSpanWidth, defaults, float, gutterWidth, marginLeft, marginRight, n, ops, width;
defaults = {
columns: 3,
at: 0,
pre: 0,
post: 0,
squish: 0,
contextColumns: 12,
gutterRatio: 1 / 4,
first: false,
last: false
};
ops = objectAssign(defaults, options);
n = 100 / (ops.contextColumns + ((ops.contextColumns - 1) * ops.gutterRatio));
gutterWidth = ops.gutterRatio * n;
calcSpanWidth = function(numColumns) {
return n * numColumns + gutterWidth * (numColumns - 1);
};
calcSpacing = function(numColumns) {
if (numColumns === 0) {
return 0;
} else {
return calcSpanWidth(numColumns) + gutterWidth;
}
};
width = calcSpanWidth(ops.columns);
if (ops.at === 0 && ops.pre === 0 && ops.squish === 0) {
marginLeft = 0;
} else {
marginLeft = calcSpacing(ops.at) + calcSpacing(ops.pre) + calcSpacing(ops.squish);
}
if (ops.last && ops.post === 0 && ops.squish === 0) {
marginRight = 0;
} else if (ops.post !== 0 || ops.squish !== 0) {
marginRight = calcSpacing(ops.post) + calcSpacing(ops.squish);
if (!ops.last) {
marginRight = marginRight + gutterWidth;
}
} else {
marginRight = gutterWidth;
}
if (ops.last) {
float = "right";
} else {
float = "left";
}
width = width + "%";
marginLeft = marginLeft + "%";
marginRight = marginRight + "%";
return {
float: float,
marginLeft: marginLeft,
marginRight: marginRight,
width: width,
clear: ops["break"] ? 'both' : 'none'
};
};