ak-layer

Layer

The layer is responsible for the positioning of an element on a page. For example, you wrap a tooltip with a layer to make its position relative to a target. You can specify up to 12 different positions.

If you use a layer with a component that could be opened or closed, you have to make sure you re-render the layer the first time you open the component, otherwise it will end up with a wrong position.

Setup and install

npm install ak-layer

Using the component

The ak-layer package exports the Layer skate component:

import Layer from 'ak-layer';

const myLayer = new Layer();

Layer

Kind: global class

• Properties

  • layer.position : string
  • layer.target : String
  • layer.onRender : function
  • layer.boundariesElement : HTMLElement | String
  • layer.enableFlip : Boolean
  • layer.offset : String
  • layer.onUpdate : function
  • layer.isFlipped ⇒

• Methods

  • layer.reposition() ⇒

new Layer()

The layer is responsible for the positioning of an element on a page.

HTML Example

<ak-layer target="#target"></ak-layer>

JS Example

import Layer from 'ak-layer';
const myLayer = new Layer();

layer.position : string

Position of a layer relative to it's target. The position attribute takes two positional arguments in the format position="edge edge-position", where edge specifies what edge to align the layer to, and edge-position specifies where on that edge the layer should appear. Refer to the table below for examples:

	top left	top center	top right
left top				right top
left middle		target		right middle
left bottom				right bottom
	bottom left	bottom center	bottom right

Kind: instance property of Layer
Default: "right middle"
HTML Example

<ak-layer position="top left"></ak-layer>

JS Example

layer.position = 'top left';

layer.target : String

Target of a layer. Selector or element on a page relative to which layer should be positioned

Kind: instance property of Layer
HTML Example

<ak-layer target="#target"></ak-layer>

JS Example

layer.target = document.body.querySelector('#target');

JS Example

layer.target = '#target'

layer.onRender : function

Callback function that is called whenever layer is rendered. The Layer element will be passed in as an argument.

Kind: instance property of Layer
JS Example

layer.onRender = (elem) => { console.log(elem); };

layer.boundariesElement : HTMLElement | String

Element to act as a boundary for the Layer. The Layer will not sit outside this element if it can help it. If, through it's normal positoning, it would end up outside the boundary the layer will flip positions if the enable-flip prop is set. Can either be an element or a selector of an element. If not set the boundary will be the current viewport.

Kind: instance property of Layer
HTML Example

<ak-layer enable-flip boundaries-element="#container"></ak-layer>

JS Example

layer.boundariesElement = document.body.querySelector('#container');

JS Example

layer.enableFlip = true;

layer.enableFlip : Boolean

Sets whether a Layer will flip it's position if there is not enough space in the requested position. i.e. if a layer is set to position="top middle" but placing it there would cause it to be outside the viewport (or the boundariesElement if that is set) the Layer will instead be positioned in "bottom middle".

Kind: instance property of Layer
HTML Example

<ak-layer enable-flip></ak-layer>

JS Example

layer.enableFlip = true;

layer.offset : String

A string representing the offsets from the target element in the format "[x-offset] [y-offset]", measured in pixels.

Kind: instance property of Layer
HTML Example

<ak-layer offset="0 2"></ak-layer>

JS Example

layer.offset = '0 2';

layer.onUpdate : function

Callback function that is called whenever layer is updated (it is rendered, it flips positition because it does not have enough space, etc). The callback will receive an object with the following properties:

• isFlipped - boolean representing whether a layer has flipped from its original position.
• originalPosition - the position the element was supposed to be rendered.
• actualPositon - the position the element is actually in now after the update.

Kind: instance property of Layer
JS Example

layer.onUpdate = (data) => { console.log(data.isFlipped); };

layer.isFlipped ⇒

Will be true if a Layer has been flipped from its original position.

Kind: instance property of Layer
Returns: Boolean
JS Example

const isFlipped = elem.isFlipped;

layer.reposition() ⇒

Forces the Layer to recalculate and reposition itself on the page. This should not usually be required as any modifications to the Layer itself should also cause reposition to be called.

Kind: instance method of Layer
Returns: undefined
JS Example

layer.reposition();