-
Notifications
You must be signed in to change notification settings - Fork 5
/
fluid-grids.js
93 lines (73 loc) · 1.8 KB
/
fluid-grids.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/**
* FluidGrids Generator
* @copyright 2013 James Hall and Harry Roberts
* @license Apache License
*/
var FluidGrids = function() {
/**
* Private functions
*/
/**
* Rounding function
* @param {float} value The value to be rounded
* @param {int} precision Precision
* @return {float} Returns rounded number
*/
var round = function(value, precision) {
// Multiply number by amount we want our round precision to be
var power = Math.pow(10, precision);
var number = power * value;
return Math.round(number) / power;
};
/**
* Grabs the value from the UI
* @param {string} selector jQuery selector
* @return {int} Integer value
*/
var getVal = function(selector) {
return parseInt($(selector).val(), 10);
};
/**
* Calculate the grid and render it into the page
*/
var calculate = function() {
var data = {
totalCols: getVal('#total-cols'),
colWidth: getVal('#col-width'),
gutterWidth: getVal('#gutter-width')
};
data.totalWidth = data.totalCols * (data.colWidth + data.gutterWidth);
data.fluidGutterWidth = round((data.gutterWidth / data.totalWidth) * 100, 3);
var template = swig.compile($('#css-template').html());
var cols = [];
for (i = 1; i <= data.totalCols; i++) {
var cssWidth = round(
((((i * data.colWidth) + (i * data.gutterWidth)) - data.gutterWidth) / data.totalWidth) * 100, 3
);
cols.push(cssWidth);
}
data.cols = cols;
var output = template(data);
$('textarea').val(output);
};
/**
* Public functions
*/
return {
/**
* Init
*/
init: function() {
// Attach event handlers
$('#total-cols, #col-width, #gutter-width').change(function() {
calculate();
}).keyup(function() {
calculate();
});
calculate();
}
};
}();
$(document).ready(function() {
FluidGrids.init();
});