ios-action-safe

v0.2.0

Published

a year ago

iOS bottom bar and urlbar helper

Downloads

0High
0Medium
0Low

djpogo

ios bottombar resize urlbar padding action safe -webkit-fill-available

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.

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 in this package.

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

.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:

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:

{
    "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:

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

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

or in ES-6:

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme