From 6c61225cd017f4d8fd823ce9e70f7e3926e733fc Mon Sep 17 00:00:00 2001
From: Glenn <33450392+glenn2223@users.noreply.github.com>
Date: Thu, 19 May 2022 16:35:58 +0100
Subject: [PATCH] Tidied readme

- Converted options list to table for easier readability
- Added options link
---
 README.md | 90 ++++++++++++++-----------------------------------------
 1 file changed, 22 insertions(+), 68 deletions(-)

diff --git a/README.md b/README.md
index e204caa..3bfcbf5 100644
--- a/README.md
+++ b/README.md
@@ -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)
 
@@ -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"
\ No newline at end of file
+-   "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