svelte-ux
Version:
- Increment version in `package.json` and commit as `Version bump to x.y.z` - `npm run publish`
38 lines (37 loc) • 1.94 kB
JavaScript
/**
* Set `height` or `max-height` to viewport height excluding node's current viewport top
*/
export function remainingViewportHeight(node, options) {
function update(options) {
var _a;
const viewportClientTop = node.getBoundingClientRect().top;
const property = (options === null || options === void 0 ? void 0 : options.max) ? 'max-height' : 'height';
if ((options === null || options === void 0 ? void 0 : options.enabled) === false) {
node.style.removeProperty(property);
}
else {
node.style.setProperty(property, `calc(100vh - ${viewportClientTop}px - ${(_a = options === null || options === void 0 ? void 0 : options.offset) !== null && _a !== void 0 ? _a : 0}px)`);
}
}
update(options);
return { update };
}
/**
* Set `width` or `max-width` to viewport width excluding node's current viewport left
*/
export function remainingViewportWidth(node, options) {
function update(options) {
var _a;
// TODO: Find way to watch/update when viewport location changes (ex. closing side drawer). Resizer observer does not work for these cases. Using the absolute positioned sentinel element sounds promising: https://stackoverflow.com/questions/40251082/an-event-or-observer-for-changes-to-getboundingclientrect
const viewportClientLeft = node.getBoundingClientRect().left;
const property = (options === null || options === void 0 ? void 0 : options.max) ? 'max-width' : 'width';
if ((options === null || options === void 0 ? void 0 : options.enabled) === false) {
node.style.removeProperty(property);
}
else {
node.style.setProperty(property, `calc(100vw - ${viewportClientLeft}px - ${(_a = options === null || options === void 0 ? void 0 : options.offset) !== null && _a !== void 0 ? _a : 0}px)`);
}
}
update(options);
return { update };
}