2019-04-03 13:47:41 +02:00
|
|
|
var layout = (function() {
|
|
|
|
|
2019-06-13 16:47:00 +02:00
|
|
|
var render = {
|
|
|
|
width: function() {
|
|
|
|
_renderWidth();
|
|
|
|
},
|
|
|
|
padding: function() {
|
|
|
|
_renderPadding();
|
|
|
|
},
|
|
|
|
gutter: function() {
|
|
|
|
_renderGutter();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
var _renderWidth = function() {
|
|
|
|
var html = helper.e("html");
|
|
|
|
html.style.setProperty("--layout-width", state.get().layout.width + "%");
|
|
|
|
};
|
|
|
|
|
|
|
|
var _renderPadding = function() {
|
|
|
|
var html = helper.e("html");
|
|
|
|
html.style.setProperty("--layout-padding-multiplier", state.get().layout.padding);
|
|
|
|
};
|
|
|
|
|
|
|
|
var _renderGutter = function() {
|
2019-04-03 13:47:41 +02:00
|
|
|
var html = helper.e("html");
|
2019-06-13 16:47:00 +02:00
|
|
|
html.style.setProperty("--layout-gutter-multiplier", state.get().layout.gutter);
|
2019-04-03 13:47:41 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
var init = function() {
|
2019-06-13 16:47:00 +02:00
|
|
|
render.width();
|
|
|
|
render.padding();
|
|
|
|
render.gutter();
|
2019-04-03 13:47:41 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
// exposed methods
|
|
|
|
return {
|
|
|
|
render: render,
|
|
|
|
init: init
|
|
|
|
};
|
|
|
|
|
|
|
|
})();
|