trapezium

trapezium

Trapezium is a simple library for positioning popups relative to elements on the page. You pass a JavaScript or jQuery element object to the method, and it tells you which side of the element has the most space, which side out of left and right has the most space, and which side out of top and bottom has the most space.

Quick Start

Install the package using NPM or Yarn:

npm install --save trapezium
# or
yarn add trapezium

Then, import it into a JavaScript file:

import trapezium from "trapezium";

const result = trapezium(element);

The result will look something like this:

{
    horizontal: "left", // left-hand side has more space than right-hand side
    vertical: "top",    // more space on the top than on the bottom
    best: "top"         // the top of the element has the most space
}

You can then use that information to inform the positioning of a popup, tooltip, or other element that overlays the window and points to the passed element.

Development

This project is written in TypeScript, and has tooling set up to work with that. In development, open up the project, and install the development dependencies:

npm install
# or
yarn install

Modify the source code as required, and then run:

npm run build
# or
yarn run build

To build the source code, generate a TypeScript declaration file, and minify the source code. To run tests against the code, run:

npm test
# or
yarn run test