v2.0.0

### Breaking changes - Migrated to the generic `@topmarksdevelopment/position`. Breaking as underlying types have changed: - `PositionAlignment` => `Alignment` - `PositionCollision` => `CollisionHandler` ### Changed - Now released as a `UMD`, `CJS` and `ES` module packages, for better support ### Other - Added tests to check basic functionality (plan to extend in the future) - Added workflows for auto releases to NPM and GitHub pages - Tidied readme - Other changes (nothing user facing)
TopMarksDevelopment · Dec 22, 2022 · 7445f0a · 7445f0a
1 parent 5e88906
commit 7445f0a
Show file tree

Hide file tree

Showing 4 changed files with 9,978 additions and 2,603 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,19 +26,47 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - 2022-12-22
+
+<small>[Compare to previous release][comp:2.0.0]</small>
+
+### Breaking changes
+
+-   Migrated to the generic `@topmarksdevelopment/position`. Breaking as underlying types have changed:
+    -   `PositionAlignment` => `Alignment`
+    -   `PositionCollision` => `CollisionHandler`
+
+### Changed
+
+-   Now released as a `UMD`, `CJS` and `ES` module packages, for better support
+
+### Other
+
+-   Added tests to check basic functionality (plan to extend in the future)
+-   Added workflows for auto releases to NPM and GitHub pages
+-   Tidied readme
+-   Other changes (nothing user facing)
+
 ## [1.0.1] - 2022-05-19
 
+<small>[Compare to previous release][comp:1.0.1]</small>
+
 ### Fixed
-- Fixed an issue where dragging back onto an element before its timeout fired would cancel the old hide queue but not re-queue it [#4](https://github.com/TopMarksDevelopment/JavaScript.HoverBox/pull/4)
+
+-   Fixed an issue where dragging back onto an element before its timeout fired would cancel the old hide queue but not re-queue it [#4](https://github.com/TopMarksDevelopment/JavaScript.HoverBox/pull/4)
 
 ### Updated
-- `@topmarksdevelopment/hover-position` from `1.0.0` to `1.0.1`
-    - Fixed position when the anchor is inside a scrollable element [hover-position#4](https://github.com/TopMarksDevelopment/JavaScript.HoverPosition/pull/4)
-    - Other changes (nothing user facing)
+
+-   `@topmarksdevelopment/hover-position` from `1.0.0` to `1.0.1`
+    -   Fixed position when the anchor is inside a scrollable element [hover-position#4](https://github.com/TopMarksDevelopment/JavaScript.HoverPosition/pull/4)
+    -   Other changes (nothing user facing)
 
 ## [1.0.0] - 2022-05-12
 
 **This was the first release**
 
-[1.0.1]: https://github.com/TopMarksDevelopment/JavaScript.HoverBox/compare/v1.0.0...v1.0.1
-[1.0.0]: https://github.com/TopMarksDevelopment/JavaScript.HoverBox/release/tag/v1.0.0
+[2.0.0]: https://github.com/TopMarksDevelopment/JavaScript.HoverBox/release/tag/v2.0.0
+[comp:2.0.0]: https://github.com/TopMarksDevelopment/JavaScript.HoverBox/compare/v1.0.1...v2.0.0
+[1.0.1]: https://github.com/TopMarksDevelopment/JavaScript.HoverBox/release/tag/v1.0.1
+[comp:1.0.1]: https://github.com/TopMarksDevelopment/JavaScript.HoverBox/compare/v1.0.0...v1.0.1
+[1.0.0]: https://github.com/TopMarksDevelopment/JavaScript.HoverBox/release/tag/v1.0.0
diff --git a/README.md b/README.md
@@ -3,13 +3,17 @@
 A simple package to reveal some extra information on hover
 
 ### Links
-- [Change log](./CHANGELOG.md)
-- [License (MIT)](./LICENSE)
+
+-   [Options](#options)
+-   [Change log](./CHANGELOG.md)
+-   [License (MIT)](./LICENSE)
 
 ## Usage
 
 Add the below to your code to your project and you're away
 
+_Note:_ by default, we're listening upon construction
+
 ```TS
 const hb = new HoverBox(".HoverBox");
 const hbWithOptions = new HoverBox(".HoverBox", options); // if you have options
@@ -21,33 +25,74 @@ hb.stopListening();
 
 ## Options
 
-Option | Type | Default | Description
----|---|---|---
-setMy? | [Type: pA][PositionAlignment] | `top center` | The part of the popup linked the anchor
-at? | [Type: pA][PositionAlignment] | `bottom center` | The part of the anchor that the target should link to
-keepOpen? | boolean | `true` | If the mouse moves into the popup, keep it open
-allowHtml? | boolean | `false` | The text provided can be treated as safe HTML
-transitionDelay? | number | `333` | The delay before we start the transition
-transitionDuration? | number | `333` | Must match the CSS transition property
-**HoverPosition specific**
-collision? | [PositionCollision](#type-positioncollision) | `bestfit` | How to handle the popup colliding with the window edge
-bestFitPreference? | `horizontal` OR `vertical` | `horizontal` | The preferred direction to try `bestfit` first
-defaults? | { my: [pA][PositionAlignment]; at: [pA][PositionAlignment]; } | Same as `setMy` & `at` respectively | Defaults to use if parsing of `setMy` or `at` fails
+### setMy?: [`alignment`][alignment]
+
+The part of the popup linked to `at`  
+**Default:** `top center`
+
+### at?: [`alignment`][alignment]
+
+The part of the anchor `setMy` will "attach" to  
+**Default:** `bottom center`
+
+### keepOpen?: `boolean`
+
+If the mouse moves into the popup, keep the pop-up open  
+**Default:** `true`
+
+### allowHtml?: `boolean`
+
+The text provided can be treated as safe HTML  
+**Default:** `false`
+
+### transitionDelay?: `number`
+
+The delay before we start the transition (in milliseconds)  
+**Default:** `333`
 
-### Type: `PositionAlignment`
+### transitionDuration?: `number`
 
-Where to position an element. Use either: `top`, `bottom`, `center`, `left` or `right`. You can also specify a vertical and horizontal alignment like `top right`, `bottom right` or `center left`.
+A link to the transition duration (in milliseconds). This must match the CSS transition property or the element  
+**Default:** `333`
 
+### collision?: [`CollisionHandler`](#the-collisionhandler-type)
+
+How to handle the popup colliding with the window edge  
+**Default:** `bestfit`  
+**Note:** This is just passed straight to the underlying [Position](https://github.com/TopMarksDevelopment/JavaScript.Position) module
+
+### bestFitPreference?: `horizontal` OR `vertical`
+
+The preferred direction to try `bestfit` first  
+**Default:** `horizontal`  
+**Note:** This is just passed straight to the underlying [Position](https://github.com/TopMarksDevelopment/JavaScript.Position) module
+
+### defaults?: `{ my: `[`alignment`][alignment]`, at: `[`alignment`][alignment]` }`
+
+The fallback values when only one property is supplied, or the property supplied is invalid  
+**Default:** Same as `setMy` & `at` respectively  
+**Note:** This is just passed straight to the underlying [Position](https://github.com/TopMarksDevelopment/JavaScript.Position) module
+
+## Types
+
+### The `Alignment` type
+
+The `Alignment` 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`
 
 Using a single value will default the other to `center` so `left` == `center left`
 
-### Type: `PositionCollision`
+### The `CollisionHandler` type
 
 How to handle any collisions, either:
 
-- `bestFit`: find the best fit before trying to flip the element
-- `flipFit`: flip the element completely vertically and horizontally
-- `ignore`: ignore any collisions and just carry on
-
+-   `bestFit`: find the best fit before trying to flip the element
+-   `flipFit`: flip the element completely vertically and horizontally
+-   `ignore`: ignore any collisions and just carry on
 
-[PositionAlignment]: #type-positionalignment
+[alignment]: #the-alignment-type