API

Full API documentation.

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

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) → {component}



    

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.
component.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.
component.getListeners('ready');

.off(event, listener) → {component}



    

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.
component.off('ready', listener);

.on(event, listener, once) → {component}



    

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.
component.on('ready', listener);

.once(event, listener) → {component}



    

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