ch.Viewport

Description

The Viewport is a component to ease viewport management. You can get the dimensions of the viewport and beyond, which can be quite helpful to perform some checks with JavaScript.

Extends

• tiny.EventEmitter

Properties

.bottom Number

The current bottom client rect of the viewport (in pixels).

// Checks if the bottom client rect of the viewport is equal to a number.
(ch.viewport.bottom === 900) ? 'Yes': 'No';

.height Number

The current height of the viewport (in pixels).

// Checks if the height of the viewport is equal to a number.
(ch.viewport.height === 700) ? 'Yes': 'No';

.left Number

The current left client rect of the viewport (in pixels).

// Checks if the left client rect of the viewport is equal to 0.
(ch.viewport.left === 0) ? 'Yes': 'No';

.right Number

The current right client rect of the viewport (in pixels).

// Checks if the right client rect of the viewport is equal to a number.
(ch.viewport.bottom === 1200) ? 'Yes': 'No';

.top Number

The current top client rect of the viewport (in pixels).

// Checks if the top client rect of the viewport is equal to 0.
(ch.viewport.top === 0) ? 'Yes': 'No';

.width Number

The current width of the viewport (in pixels).

// Checks if the height of the viewport is equal to a number.
(ch.viewport.width === 1200) ? 'Yes': 'No';

Methods

.calculateClientRect() → {viewport}

Calculates/updates the client rects of viewport (in pixels).

// Update the client rects of the viewport.
ch.viewport.calculateClientRect();

.calculateDimensions() → {viewport}

Calculates/updates the dimensions (width and height) of the viewport (in pixels).

// Update the dimensions values of the viewport.
ch.viewport.calculateDimensions();

.calculateOffset() → {viewport}

Calculates/updates the viewport position.

// Update the offest values of the viewport.
ch.viewport.calculateOffset();

.calculateOrientation() → {viewport}

Rertuns/updates the viewport orientation: landscape or portrait.

// Update the dimensions values of the viewport.
ch.viewport.calculateDimensions();

.inViewport() → {Boolean}

Calculates if an element is completely located in the viewport.

// Checks if an element is in the viewport.
ch.viewport.inViewport(HTMLElement) ? 'Yes': 'No';

.isVisible() → {Boolean}

Calculates if an element is visible in the viewport.

// Checks if an element is visible.
ch.viewport.isVisisble(HTMLElement) ? 'Yes': 'No';

.refresh() → {viewport}

Upadtes the viewport dimension, viewport positions and orietation.

// Refreshs the viewport.
ch.viewport.refresh();