https://github.com/taskworld/positioning-strategy
https://github.com/taskworld/positioning-strategy
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/taskworld/positioning-strategy
- Owner: taskworld
- Created: 2016-06-01T09:43:48.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2025-05-06T04:21:39.000Z (9 months ago)
- Last Synced: 2025-05-06T05:26:04.672Z (9 months ago)
- Language: TypeScript
- Size: 264 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
The [`positioning-strategy`](https://www.npmjs.com/package/positioning-strategy) module implements a function to calculate where to position an element relative to another element.
## Usage
This module exports a single function,
```ts
function calculateChildPosition(
strategy,
parentRect,
childDimension,
viewportDimension,
options
): { left: number, top: number }
```
### Parameters
- `strategy` The wanted position of the child relative to the parent represented by the combination of two axes: (top, bottom) and (left, center, right)
Possible values are:
`"top left"`, `"top center"`, `"top right"`,
`"bottom left"`, `"bottom center"`, `"bottom right"`,
`"left top"`, `"left center"`, `"left bottom"`,
`"right top"`, `"right center"`, `"right bottom"`,
including the shorthands: `"top"`, `"bottom"`, `"left"` and `"right"`
- `parentRect` An object representing the rectangle of the parent. It has these properties:
- `left` The distance from the left edge of the viewport to the element.
- `top` The distance from the top edge of the viewport to the element.
- `width` The width of the element.
- `height` The height of the element.
- `childDimension` An object representing the size of the child you want to position.
- `width` The width of the element.
- `height` The height of the element.
- `viewportDimension` An object representing the size of the viewport.
- `width` The width of the element.
- `height` The height of the element.
- `options` Optional.
- `gap` The distance between the child and the parent.
### Return value
It returns an object representing where to position the child relative to the parent element. It contains these properties:
- `left` The distance from the left edge of the viewport to the child.
- `top` The distance from the top edge of the viewport to the child.