@aofl/component-utils

@aofl/component-utils

A small collection of component utility functions.

Api Documentation

Installation

npm i -S @aofl/component-utils

Usage

import {findParent} from '@aofl/component-utils';

class MyElement extends AoflELement {
...
connectedCallback() {
    super.connectedCallback();
    this.targetParent = findParent(this, 'addOption'); // register this list option with a parent who supports it
    this.targetParent.addOption(this);
  }
...

Methods

traverseParents()

Finds a parent component which has all the matching attributes

Arguments

Name	Type	Description
node	HTMLElement	The child component
...args	String	Attribute names that must be found on the parent

findParent()

Finds a parent component which matches the method signature provided

Arguments

Name	Type	Description
node	HTMLElement	The child component
...args	String	Method names that must be found on the parent

findParentByAttributes()

Finds a parent component which has all the matching attributes

Arguments

Name	Type	Description
node	HTMLElement	The child component
...args	String	Attribute names that must be found on the parent

isInViewport()

Check whether or not the supplied element is within the visible area of the screen. The threshold values are multipliers of their respective dimension. 0 means the exact viewport dimensions and .5 means viewport + half of viewport.

Arguments

Name	Type	Description
node	HTMLElement	target node
widthThreshold	String	viewport width multiplier
heightThreshold	String	viewport width multiplier

isInViewportMixin()

Mixes the superClass with functions necessary to detect if the element is within the visible area of the page.

Methods

• firstWithinViewport() is invoked when element scrolls into view for the first time.
• withinViewportUpdated(newValue, oldValue) withinViewportUpdated() is invoked anytime the element enters or exists the viewport.
• stopIsInViewportCheck() when invoked it removes the event listeners and stops invoking the withinViewportUpdated() function. This is useful when we want to disconnect the event listeners and keep the component attached to dom. For example, conside lazy loading images with aofl-img. Once the image is loaded it is no longer necessary to check isInViewStatus.