Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
By Sarah Gooding - Sep 30, 2024
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.
Try it out
Interact with a live demo of the ak-layer component.
Installation
npm install ak-layer
Using the component
HTML
The ak-layer package exports the Layer skate component:
Import the component in your JS resource:
bundle.js
import Layer from 'ak-layer';
const myLayer = new Layer();
Now you can use the defined layer in your HTML markup:
index.html
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-layer></ak-layer>
</body>
React
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import Layer from 'ak-layer';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Layer, {});
ReactDOM.render(<ReactComponent />, container);
Classes
Members
- defaultPosition ⇒
String Default position
- attachmentMap ⇒
Object Transformation map from ak-positions to popper-positions
Functions
- destroy()
Disable positioning and destroy element. Being used in the ak-layer component on the 'detached' event
- reposition()
Manually trigger the repositioning
- getElement()
Returns an element from a selector or the element itself if it was passed as an argument
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 :
Boolean
- layer.position :
-
Methods
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 : Boolean
Will be true if a Layer has been flipped from its original position.
Kind: instance property of Layer
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: Layer
JS Example
layer.reposition();
Alignment
new Alignment()
Helper class for positioning elements on a page
JS Example
import Alignment from 'akutil-common';
const alignment = new Alignment({});
defaultPosition ⇒ String
Default position
Kind: global variable
Returns: String - A string with the default position
attachmentMap ⇒ Object
Transformation map from ak-positions to popper-positions
Kind: global variable
Returns: Object - Map of transformations
destroy()
Disable positioning and destroy element. Being used in the ak-layer component on the 'detached' event
Kind: global function
JS Example
alignment.destroy();
reposition()
Manually trigger the repositioning
Kind: global function
JS Example
alignment.reposition();
getElement()
Returns an element from a selector or the element itself if it was passed as an argument
Kind: global function
JS Example
Alignment.getElement('#TargetId');
Support and feedback
We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
Community support
Ask a question in our forum.
Check if someone has already asked the same question before.
Create a support ticket
Are you in trouble? Let us know!
FAQs
A React layer component responsible for the position of an element on a page
The npm package ak-layer receives a total of 365 weekly downloads. As such, ak-layer popularity was classified as not popular.
We found that ak-layer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 19 Oct 2016
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Malicious “express-dompurify” npm Package Steals Browser and Cryptocurrency Wallet Data
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
By Socket Research Team - Sep 27, 2024
Security News
ENISA 2024 Threat Landscape Report Warns of Increasing State-Sponsored Supply Chain Attacks on Open Source Software
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
By Sarah Gooding - Sep 27, 2024