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

• ch.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

.emit(event, var_args)

Execute each item in the listener collection in order with the specified data.

• event - String : The name of the event you want to emit.
• var_args - Object : Data to pass to the listeners.

// Will emit the 'ready' event with 'param1' and 'param2' as arguments.
widget.emit('ready', 'param1', 'param2');

.getListeners(event) → {Array}

Returns all listeners from the collection for a specified event.

• event - String : The event name.

// Returns listeners from 'ready' event.
widget.getListeners('ready');

.off(event, listener) → {Object}

Removes a listener from the collection for a specified event.

• event - String : Event name.
• listener - Function : Listener function.

// Will remove event listener to 'ready' event.
widget.off('ready', listener);

.on(event, listener, once)

Adds a listener to the collection for a specified event.

• event - String : The event name to subscribe.
• listener - Function : Listener function.
• once - Boolean : Indicate if a listener function will be called only one time.

// Will add an event listener to 'ready' event.
widget.on('ready', listener);

.once(event, listener) → {Object}

Adds a listener to the collection for a specified event to will execute only once.

• event - String : Event name.
• listener - Function : Listener function.

// Will add an event handler to 'contentLoad' event once.
widget.once('contentLoad', listener);

.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();