You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
consul/ui/packages/consul-ui/app/helpers/dom-position.js

41 lines
1.1 KiB

import Helper from '@ember/component/helper';
export default class DomPosition extends Helper {
compute([target], { from, offset = false }) {
return e => {
if (typeof target === 'function') {
let rect;
let $el;
if (offset) {
$el = e.currentTarget;
rect = {
width: $el.offsetWidth,
left: $el.offsetLeft,
height: $el.offsetHeight,
top: $el.offsetTop,
};
} else {
$el = e.target;
rect = $el.getBoundingClientRect();
if (typeof from !== 'undefined') {
const fromRect = from.getBoundingClientRect();
rect.x = rect.x - fromRect.x;
rect.y = rect.y - fromRect.y;
}
}
return target(rect);
} else {
// if we are using this as part of an on-resize
// provide and easy way to map coords to CSS props
const $el = e.target;
const rect = $el.getBoundingClientRect();
target.forEach(
([prop, value]) => {
$el.style[value] = `${rect[prop]}px`;
}
);
}
};
}
}