aqueous
Version:
Proportional vertical layouts
83 lines (82 loc) • 2.35 kB
JavaScript
/**
* Aqueous 1.0.2
*/
(function (context) {
'use strict';
if (!window) {
throw "Aqueous requires a window!";
}
var aqueous = function (selector) {
var targets = [],
i;
if (typeof selector === "string") {
targets = document.querySelectorAll(selector);
if (targets.length === 0) {
if (typeof context.placebo === "function") {
targets = context.placebo(selector);
}
}
} else if (selector.placebo) {
targets = selector.elements;
} else {
if (selector.length === 0) {
targets = [selector];
} else {
targets = selector;
}
}
for (i = 0; i < targets.length; i += 1) {
aqueous.elements.push(targets[i]);
}
return {
"targets": targets,
"pour": function (amount) {
var elements = 0,
scale = window.innerHeight / aqueous.elements.length,
top = 0,
nAmount,
i;
for (i = 0; i < aqueous.elements.length; i += 1) {
if (aqueous.elements[i].getAttribute("data-aqueous-amount")) {
nAmount = Number(aqueous.elements[i].getAttribute("data-aqueous-amount"));
} else {
aqueous.elements[i].setAttribute("data-aqueous-amount", amount);
nAmount = amount;
}
elements += nAmount;
}
if (aqueous.breakpoints.height < window.innerHeight) {
scale = window.innerHeight / elements;
} else {
scale = aqueous.scale;
}
for (i = 0; i < aqueous.elements.length; i += 1) {
if (aqueous.elements[i].getAttribute("data-aqueous-amount")) {
nAmount = Number(aqueous.elements[i].getAttribute("data-aqueous-amount"));
} else {
aqueous.elements[i].setAttribute("data-aqueous-amount", amount);
nAmount = amount;
}
aqueous.elements[i].style.height = (nAmount * scale) + "px";
aqueous.elements[i].style.top = top + "px";
top += nAmount * scale;
}
}
};
};
aqueous.breakpoints = {
"height": window.innerHeight,
"width": window.innerWidth
};
aqueous['break'] = function (config) {
if (config.height) {
aqueous.breakpoints.height = config.height;
}
if (config.width) {
aqueous.breakpoints.width = config.width;
}
};
aqueous.scale = 45;
aqueous.elements = [];
context.aqueous = aqueous;
}(this));