Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cenfun/popover-helper
popover-helper
https://github.com/cenfun/popover-helper
algorithm popover
Last synced: 29 days 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 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-30T07:12:22.000Z (almost 2 years ago)
- Last Synced: 2024-10-18T08:39:23.607Z (4 months 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