|
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