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

Commit dba1482

Browse files
authored
Tidied readme - PR #4 from glenn2223
- Converted options list to table for easier readability - Added options link
2 parents a87a8b0 + 6c61225 commit dba1482

File tree

1 file changed

+22
-68
lines changed

1 file changed

+22
-68
lines changed

README.md

Lines changed: 22 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
A small package to help position a floating element. This can be positioned relative to another element or to a mouse event.
44

55
### Links
6+
- [Options](#options)
67
- [Change log](./CHANGELOG.md)
78
- [License (MIT)](./LICENSE)
89

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

4546
## Options
4647

47-
### `my`
48+
Option | Type | Default | Details
49+
---|---|---|---
50+
<a id="options-my">`my`</a> | [`PositionAlignment`](#The-PositionAlignment-property) | N/A | The location on the `target` to position from
51+
<a id="options-at">`at`</a> | [`PositionAlignment`](#The-PositionAlignment-property) | N/A | The location on the `anchor` to position against
52+
<a id="options-anchor">`anchor`</a> | `HTMLElement` OR `MouseEvent` | N/A | The element or mouse event to anchor our target to
53+
<a id="options-target">`target`</a> | `HTMLElement` | N/A | The target that we're going to be positioning
54+
<a id="options-collision">`collision?`</a> | [`PositionCollision`](#The-PositionCollision-property) | `bestFit` | How to handle collisions with the window edge
55+
<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
56+
<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
4857

49-
The location of the `target` to position from
58+
## The `PositionAlignment` property
5059

51-
**Type:** `PositionAlignment`
52-
53-
### `at`
54-
55-
The location of the `anchor` to position to
56-
57-
**Type:** `PositionAlignment` | `PositionAlignment` |
58-
59-
### `anchor`
60-
61-
**Type:** `HTMLElement` OR `MouseEvent` | The element or mouse event to calculate against
62-
63-
### `target`
64-
65-
**Type:** `HTMLElement` | The target that we're going to be positioning
66-
67-
### `collision` - Optional
68-
69-
How to handle any collisions.
70-
71-
**Type:** `"bestFit"` OR `"flipfit"` OR `"ignore"` |
72-
73-
- bestFit
74-
- This will find the best fit before trying to flip the element
75-
- flipFit
76-
- This will flip the element completely vertically and horizontally
77-
- ignore
78-
- This will just ignore any collisions and place the element exactly where you wanted it
79-
80-
### `bestFitPreference` - Optional
81-
82-
When `collision` is set to `bestFit`, this is the preferred "best" direction
83-
84-
**Type:** `"horizontal"` OR `"vertical"`
85-
86-
### `defaults` - Optional
87-
88-
This has two uses.
89-
90-
1. If only `"top"` is suppled to `my`, `my`'s horizontal position is fetched from here
91-
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
92-
93-
**Type:** `{ my: CombinedAlignment; at: CombinedAlignment }`
94-
95-
#### The `CombinedAlignment` property
96-
97-
The `CombinedAlignment` is a combination of vertical and horizontal alignments.
98-
99-
Strings that match this are:
100-
101-
- "top center"
102-
- "top left"
103-
- "top right"
104-
- "center center"
105-
- "center left"
106-
- "center right"
107-
- "bottom center"
108-
- "bottom left"
109-
- "bottom right"
110-
111-
#### The `PositionAlignment` property
112-
113-
The `PositionAlignment` is an extension of the `CombinedAlignment` property but it also allows just a vertical or horizontal alignment to be passed to it.
114-
115-
So, as well as those above, it will also allow:
60+
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`)
11661

11762
- "top"
11863
- "bottom"
11964
- "center"
12065
- "left"
121-
- "right"
66+
- "right"
67+
68+
## The `PositionCollision` property
69+
70+
- `bestFit`
71+
- This will find the closest fit before trying to flip the element
72+
- `flipFit`
73+
- This will flip the element completely vertically and horizontally
74+
- `ignore`
75+
- This will just ignore any collisions and place the element exactly where you wanted it

0 commit comments

Comments
 (0)