Skip to content
This repository was archived by the owner on Dec 12, 2022. It is now read-only.

Tidied readme #4

Merged
merged 1 commit into from
May 19, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 22 additions & 68 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
A small package to help position a floating element. This can be positioned relative to another element or to a mouse event.

### Links
- [Options](#options)
- [Change log](./CHANGELOG.md)
- [License (MIT)](./LICENSE)

Expand Down Expand Up @@ -44,78 +45,31 @@ document.addEventListener("mousemove", function(mouse){

## Options

### `my`
Option | Type | Default | Details
---|---|---|---
<a id="options-my">`my`</a> | [`PositionAlignment`](#The-PositionAlignment-property) | N/A | The location on the `target` to position from
<a id="options-at">`at`</a> | [`PositionAlignment`](#The-PositionAlignment-property) | N/A | The location on the `anchor` to position against
<a id="options-anchor">`anchor`</a> | `HTMLElement` OR `MouseEvent` | N/A | The element or mouse event to anchor our target to
<a id="options-target">`target`</a> | `HTMLElement` | N/A | The target that we're going to be positioning
<a id="options-collision">`collision?`</a> | [`PositionCollision`](#The-PositionCollision-property) | `bestFit` | How to handle collisions with the window edge
<a id="options-bestFitPreference">`bestFitPreference?`</a> | `horizontal` OR `vertical` | `horizontal` | This is the preferred "best" direction when `collision = bestFit` and there is a "best fit" horizontally and vertically
<a id="options-defaults">`defaults?`</a> | `{ my: PositionAlignment; at: PositionAlignment }` | `my: "top center", at: "bottom center"` | The fallback when only one property is supplied or the property supplied is invalid

The location of the `target` to position from
## The `PositionAlignment` property

**Type:** `PositionAlignment`

### `at`

The location of the `anchor` to position to

**Type:** `PositionAlignment` | `PositionAlignment` |

### `anchor`

**Type:** `HTMLElement` OR `MouseEvent` | The element or mouse event to calculate against

### `target`

**Type:** `HTMLElement` | The target that we're going to be positioning

### `collision` - Optional

How to handle any collisions.

**Type:** `"bestFit"` OR `"flipfit"` OR `"ignore"` |

- bestFit
- This will find the best fit before trying to flip the element
- flipFit
- This will flip the element completely vertically and horizontally
- ignore
- This will just ignore any collisions and place the element exactly where you wanted it

### `bestFitPreference` - Optional

When `collision` is set to `bestFit`, this is the preferred "best" direction

**Type:** `"horizontal"` OR `"vertical"`

### `defaults` - Optional

This has two uses.

1. If only `"top"` is suppled to `my`, `my`'s horizontal position is fetched from here
2. If you are allowing `at` or `my` to be parsed from an untrusted source then this allows you to fall back to a default

**Type:** `{ my: CombinedAlignment; at: CombinedAlignment }`

#### The `CombinedAlignment` property

The `CombinedAlignment` is a combination of vertical and horizontal alignments.

Strings that match this are:

- "top center"
- "top left"
- "top right"
- "center center"
- "center left"
- "center right"
- "bottom center"
- "bottom left"
- "bottom right"

#### The `PositionAlignment` property

The `PositionAlignment` is an extension of the `CombinedAlignment` property but it also allows just a vertical or horizontal alignment to be passed to it.

So, as well as those above, it will also allow:
The `PositionAlignment` will allow any of the below, plus a combination in the form `vertical horizontal` (e.g. `top center`, `bottom right` or `center left`)

- "top"
- "bottom"
- "center"
- "left"
- "right"
- "right"

## The `PositionCollision` property

- `bestFit`
- This will find the closest fit before trying to flip the element
- `flipFit`
- This will flip the element completely vertically and horizontally
- `ignore`
- This will just ignore any collisions and place the element exactly where you wanted it