ch.Positioner

Description

The Positioner lets you position elements on the screen and changes its positions.

How-to

// Instance the Positioner It requires a little configuration.
// The default behavior place an element center into the Viewport.
var positioned = new ch.Positioner({
    'target': document.querySelector('.target'),
    'reference': document.querySelector('.reference'),
    'side': 'top',
    'align': 'left',
    'offsetX': 20,
    'offsetY': 10
});

// offsetX: The Positioner could be configurated with an offsetX.
// This example show an element displaced horizontally by 10px of defined position.
var positioned = new ch.Positioner({
    'target': document.querySelector('.target'),
    'reference': document.querySelector('.reference'),
    'side': 'top',
    'align': 'left',
    'offsetX': 10
});

// offsetY: The Positioner could be configurated with an offsetY.
// This example show an element displaced vertically by 10px of defined position.
var positioned = new ch.Positioner({
    'target': document.querySelector('.target'),
    'reference': document.querySelector('.reference'),
    'side': 'top',
    'align': 'left',
    'offsetY': 10
});

// positioned: The positioner could be configured to work with fixed or absolute position value.
var positioned = new ch.Positioner({
    'target': document.querySelector('.target'),
    'reference': document.querySelector('.reference'),
    'position': 'fixed'
});

Parameters

• options - Object : Configuration object.
  • target - String : A HTMLElement that reference to the element to be positioned.
  • reference - String : A HTMLElement that it's a reference to position and size of element that will be considered to carry out the position. If it isn't defined through configuration, it will be the ch.viewport.
  • side - String : The side option where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "center".
  • align - String : The align options where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "center".
  • offsetX - Number : Distance to displace the target horizontally. Default: 0.
  • offsetY - Number : Distance to displace the target vertically. Default: 0.
  • position - String : Thethe type of positioning used. You must use: "absolute" or "fixed". Default: "fixed".

Properties

.Positioner#name String

The name of the component.

.reference HTMLElement

It's a reference to position and size of element that will be considered to carry out the position.

.target HTMLElement

Reference to the element to be positioned.

Methods

.refresh() → {positioner}

Updates the current position with a given options

// Updates the current position.
positioned.refresh();

// Updates the current position with new offsetX and offsetY.
positioned.refresh({
    'offestX': 100,
    'offestY': 10
});