1.0.1 • Published 6 months ago

@topmarksdevelopment/position v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

Position (A JavaScript package)

A small package to help position a floating element. This can be positioned relative to another element or to a mouse event.

Links

Usage

If you want to position an element to another fixed element then you can use the sample below

return position(
    {
        anchor: document.getElementById("Anchor"),
        target: document.getElementById("Target"),
        my: "top center",
        at: "bottom center",
    }
);

If you'd rather position the element to the mouse's movement then you can use the sample below

⚠ It is recommended to debounce the below sample, just to prevent performance issues

document.addEventListener("mousemove", function(mouse){
    const target = document.getElementById("Target"),
        pos = position(
            {
                anchor: mouse,
                target: target,
                my: "top center",
                at: "bottom center",
            }
        );

    target.style.top = pos.top;
    target.style.left = pos.left;
});

Options

my: Alignment

The location on the target to position from

at: Alignment

The location on the anchor to position against

anchor: HTMLElement OR MouseEvent

The element or mouse event to anchor our target to

target: HTMLElement

The target that we're going to be positioning

collision?: CollisionHandler

How to handle collisions with the window edge
Default: bestFit

bestFitPreference?: horizontal OR vertical

This is the preferred "best" direction when collision = bestFit and there is a "best fit" horizontally and vertically
Default: horizontal

defaults?: { my:alignment, at:alignment}

The fallback values when only one property is supplied, or the property supplied is invalid
Default: { my: "top center", at: "bottom center" }

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

The CollisionHandler type

  • 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