# ios-action-safe

> iOS bottom bar and urlbar helper

Latest version **0.2.0** (published 2023-07-25) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install ios-action-safe
pnpm add ios-action-safe
yarn add ios-action-safe
bun add ios-action-safe
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-07-25 |
| First published | 2019-12-04 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 70.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | djpogo |
| Maintainers | djpogo |
| Keywords | ios, bottombar, resize, urlbar, padding, action, safe, -webkit-fill-available |

## Links

- npm: https://www.npmjs.com/package/ios-action-safe
- Repository: https://github.com/djpogo/ios-action-safe
- Homepage: https://github.com/djpogo/ios-action-safe#readme
- Issues: https://github.com/djpogo/ios-action-safe/issues
- npm.io page: https://npm.io/package/ios-action-safe

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 0.2.0 (latest) — 2023-07-25
- 0.1.1 — 2019-12-06
- 0.1.0 — 2019-12-05
- 0.0.1 — 2019-12-04

## README

# IOS Action Safe

Utilize CSS Custom Properties to style your overlay components with binding to window.innerHeight.

## How it works

It adds an `aside` element into the dom with `100vw` and `100vh` dimensions and read out its width and height in `px`.

On every resize event, the `window.innerWidth` and `window.innerHeight` are gathered and updated into your [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).

By using the Custom Properties in your overlay/flyout/modal css, your element will always fit in the viewport, without the ios bottom bar come in your way.

## Default Custom Properties

You can change any of this options to your needs, by providing a customOption Object in constructor call.

### --visibleHeight

stores always the value of `window.innerHeight`  suffixed with `px`. 

### --visibleWidth

stores always the value of `window.innerHeight` suffixed with `px`.

### --visiblePadding

stores the difference from  a `100vh` element and `window.innerHeight` suffixed with `px`.

## Setup

Grab your copy of this package:

`npm i ios-action-safe --save`

Import this package in your project:

**ES-6**
`import IosActionSafe from 'ios-action-safe';`
…
`new IosActionSafe(<{customOptions}>);`

**ES-5**
You'll find a minified and unminified version in the dist/-folder, to embed in your project:
`<script src="/vendor/ios-action-safe.min.js" defer></script>`

same way as with the ES-6 class:
`new IosActionSage(<{customOptions}>);`

## Configuration

For a working example have a look into the [index.html](./index.html) in this package.

The key configuration is, to add the following CSS to elements who needs to fit into the viewport:

```css
.modal,
.flyout,
.overlay,
.mobile-nav {
    …
    height: 100vh; /* ie11 */
    height: var(--visibleHeight);
    ..
    padding-bottom: 0; /* ie11 */
    padding-bottom: var(--visiblePadding);
}
```

You might want to setup only **height** or **padding-bottom**. In combination you will end up with a bottom bar height visible padding on your element.

### customise custom property names

By calling the constructor, you can provide an object with overrides for every custom property name:

```js
new IosActionSafe({
    visibleHeight: '--visibleHeight',
    visibleWidth: '--visibleWidth',
    visiblePadding: '--visiblePadding',
});
```

### callback

On every resize and measuring event, you can add a `callback` function too, which will give you all the numbers **without** `px`:

```json
{
    "viewportHeight": this.viewportHeight,
    "viewportWidth": this.viewportWidth,
    "visibleHeight": this.visibleHeight,
    "visibleWidth": this.visibleWidth,
    "visiblePadding": this.viewportHeight - visibleHeight
}
```

to add a callback, add the callback option to the constructor call:

```js
new IosActionsSafe({
    callback: (event, data) => { console.log(event, data); },
});
```

or

```js
new IosActionsSafe({
    visibleHeight: '--visibleHeight',
    visibleWidth: '--visibleWidth',
    visiblePadding: '--visiblePadding',
    callback: updateSizes
});
…
function updateSizes(event, data) {
    …
}
```

or in ES-6:
```js
new IosActionsSafe({
    visibleHeight: '--visibleHeight',
    visibleWidth: '--visibleWidth',
    visiblePadding: '--visiblePadding',
    callback: (event, data) => { this.updateSizes(event, data); }),
});

## side fx

this package will add an `<aside>` after your `<body>` element. Do not wonder about it, this is used to measure 100vh and 100vw.

## Package Name

In video editing you have three different viewports, the native resolution (for exmaple 1920x1080) but tv's cut parts of this resolution away, or parts of the signal where used for teletext, and so there is a **action safe** and **title safe** setting, you can enable in every video editing software, to keep your content visible to any recipient. That's where the name for this package comes from.

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