|
3 | 3 | A small package to help position a floating element. This can be positioned relative to another element or to a mouse event.
|
4 | 4 |
|
5 | 5 | ### Links
|
| 6 | +- [Options](#options) |
6 | 7 | - [Change log](./CHANGELOG.md)
|
7 | 8 | - [License (MIT)](./LICENSE)
|
8 | 9 |
|
@@ -44,78 +45,31 @@ document.addEventListener("mousemove", function(mouse){
|
44 | 45 |
|
45 | 46 | ## Options
|
46 | 47 |
|
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 |
48 | 57 |
|
49 |
| -The location of the `target` to position from |
| 58 | +## The `PositionAlignment` property |
50 | 59 |
|
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`) |
116 | 61 |
|
117 | 62 | - "top"
|
118 | 63 | - "bottom"
|
119 | 64 | - "center"
|
120 | 65 | - "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