https://github.com/cenfun/popover-helper
popover-helper
https://github.com/cenfun/popover-helper
algorithm popover
Last synced: 9 months ago
JSON representation
popover-helper
- Host: GitHub
- URL: https://github.com/cenfun/popover-helper
- Owner: cenfun
- License: mit
- Created: 2020-07-21T05:43:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-30T07:12:22.000Z (over 2 years ago)
- Last Synced: 2024-10-18T08:39:23.607Z (about 1 year ago)
- Topics: algorithm, popover
- Language: JavaScript
- Homepage: https://cenfun.github.io/popover-helper
- Size: 83 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Popover Helper
## Preview
[https://cenfun.github.io/popover-helper](https://cenfun.github.io/popover-helper)
## Install
```sh
npm i popover-helper
```
## Usage
```js
import { getRect, getBestPosition, getPositionStyle } from "popover-helper";
const $popover = document.querySelector('.popover');
let positionInfo;
const update = () => {
//get 3 rect for calculation
const containerRect = getRect('.container');
const targetRect = getRect('.target');
const popoverRect = getRect('.popover');
const positions = [];
positionInfo = getBestPosition(
containerRect,
targetRect,
popoverRect,
//allowed positions
positions,
//previous position info
positionInfo
);
//console.log(positionInfo);
if (positionInfo.changed) {
$popover.style.left = `${positionInfo.left}px`;
$popover.style.top = `${positionInfo.top}px`;
}
const style = getPositionStyle(positionInfo, {
bgColor: "#fff",
borderColor: "#ccc",
arrowSize: 10
});
// performance optimized
if (style.changed) {
$popover.style.background = style.background;
}
};
update();
```
see [/public/index.html](/public/index.html)
## CHANGELOG
- 2.0.5
- added argument `fixed` for `getRect(target, fixed)`
- 2.0.4
- fixed arrow size (#1)
- 2.0.3
- fixed performance issue
- 2.0.0
- replaced css arrow with svg background
- 1.0.3
- added color to css
- fixed positions sort issue