# viewport-funcs

> A very limited subset of viewport functions I use every day

Latest version **0.3.1** (published 2016-07-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install viewport-funcs
pnpm add viewport-funcs
yarn add viewport-funcs
bun add viewport-funcs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2016-07-28 |
| First published | 2016-03-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jérôme Decoster |
| Maintainers | jeromedecoster |
| Keywords | browser, viewport, document, size, position, contains, margins, rect |

## Links

- npm: https://www.npmjs.com/package/viewport-funcs
- Repository: https://github.com/jeromedecoster/viewport-funcs
- Homepage: https://github.com/jeromedecoster/viewport-funcs#readme
- Issues: https://github.com/jeromedecoster/viewport-funcs/issues
- npm.io page: https://npm.io/package/viewport-funcs

## Dependencies (2)

- [is-funcs](https://npm.io/package/is-funcs.md) ^0.5.1
- [set-funcs](https://npm.io/package/set-funcs.md) ^0.1.1

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2016-07-28
- 0.3.0 — 2016-07-04
- 0.2.1 — 2016-06-09
- 0.2.0 — 2016-06-09
- 0.1.2 — 2016-05-24
- 0.1.1 — 2016-04-15
- 0.1.0 — 2016-04-01
- 0.0.0 — 2016-03-31

## README

# viewport-funcs

> A very limited subset of viewport functions I use every day

## Install

```bash
npm i viewport-funcs
```

Package [on npm](https://www.npmjs.com/package/viewport-funcs)

## API

* [contains](#containsel-offset)
* [margins](#margins)
* [rect](#rect)

#### contains(el, [offset], [check])

Check if `el` is in the viewport, return a boolean

| Argument | Action |
| :------ | :------- |
| **el** | the tested **Html Element** `el` |
| **offset** | optional `offset`, default to `0`  |
| **check** | optional `check`, default to `false`. If `true` performs multiple tests explained below  |

If `check` is `true`, safer but slower tests are performed

* check if `el` is a **Html Element**, with nodeType 1 and landed in the document.body
* check if `el` has no size. An empty or a `display:none` div or an img with no src will always return `false`

```js
const contains = require('viewport-funcs/contains')

var el = document.querySelector('.rect')

// true if the element is fully or partially in the viewport
contains(el)
```

---

#### margins()

Get the viewport size and margins

`left`, `top`, `right` and `bottom` are relative to each side of the document

The object returned contains:

| Key | Value |
| :------ | :------- |
| **width** | the viewport width |
| **height** | the viewport height |
| **left** | the `margin-left`, distance between the left of the document and the left of the viewport |
| **top** | the `margin-top`, distance between the top of the document and the top of the viewport |
| **right** | the `margin-right`, distance between the right of the document and the right of the viewport |
| **bottom** | the `margin-bottom`, distance between the bottom of the document and the bottom of the viewport |

The example below shows:
* how to get the viewport bottom-right corner location
* how to get the document width and height

```js
const margins = require('viewport-funcs/margins')

// {width: 591, height: 328, left: 0, top: 56, right: 0, bottom: 316}
var data = margins()

/*
the viewport bottom-right corner location
{x: 591, y: 384}
*/
var br = {x: data.left + data.width, y: data.top + data.height}

/*
the document width and height
{width: 591, height: 700}
*/
var doc = {
   width: data.left + data.width  + data.right,
  height: data.top  + data.height + data.bottom
}
```

The returned object is internally cached to boost performance

---

#### rect()

Get the viewport size and position

`left`, `top`, `right` and `bottom` are relative to the top-left of the document

The object returned contains:

| Key | Value |
| :------ | :------- |
| **width** | the viewport width |
| **height** | the viewport height |
| **left** | the distance between the left of the document and the left of the viewport |
| **top** | the distance between the top of the document and the top of the viewport |
| **right** | the distance between the left of the document and the right of the viewport |
| **bottom** | the distance between the top of the document and the bottom of the viewport |

This means:
* `right` = `left` + `width`
* `bottom` = `top` + `height`

The returned object is internally cached to boost performance

```js
const rect = require('viewport-funcs/rect')

// {width: 800, height: 600, left: 10, top: 10, right: 810, bottom: 610}
rect()
```

## Thanks

Mainly forked / inspired on
- [in-viewport](https://github.com/vvo/in-viewport)

Performance and tips from
- [documentWidth/Height is the max of 3 tested sizes](http://ryanve.com/lab/dimensions/#document)
- [check if the element is visible](https://github.com/jquery/jquery/blob/0402963845be8d71c4e8ddf65e7c055014739b60/src/css/hiddenVisibleSelectors.js#L10)

## License

MIT

---
_Source: https://npm.io/package/viewport-funcs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._