Class: pdSticker

pdSticker() → {void}

Creates sticker elements along-side pre-defined DOM element(s)

Constructor

new pdSticker() → {void}

The element's constructor. Some basic properties are initialized here. .
Author:
License:
  • MIT
Source:
Returns:
Type
void

Extends

  • HTMLElement

Classes

pdSticker

Members

(static) observedAttributes

Define what are the elements observed attributes, custom or non-custom. .
Source:

Methods

addIndicator(button, div) → {void}

Add a button based on pd-indicator custom web component. This means that pd-indicator must be imported and that a data-button attribute has been placed in your HTML. e.g. data-button="pd-indicator-switch,pd-indicator-heart,pd-indicator-circle,pd-indicator-octastar,pd-indicator-yin-yang"
Parameters:
Name Type Description
button string A comma separated list of pd-indicator styles.
div HTMLDivElement An HTML
element that the pd-indicator button will be placed.
Source:
Returns:
Type
void

adoptedCallback() → {void}

Invoked each time the custom element is moved to a new document.
Source:
Returns:
Type
void

applyPosition(sticker, item, index, scroll_distance, initialOffsetLeft, initialOffsetTop) → {void}

This is a function that acts as a helper function to changeDirection() and init(). Styling will be applied. All stickers will be created and displayed at the proper position. At the same time the scroll distance of each sticker will have been calculated.
Parameters:
Name Type Description
sticker HTMLDivElement An HTML
sub-element that is the sticker object displayed at the front-end.
item HTMLElement An HTML element that the associated sticker object created by pd-sticker will be placed.
index number The index of the item HTML element above.
scroll_distance array An empty array that will be filled with the values of available scroll distance for each sticker object.
initialOffsetLeft number The initial left offset of each sticker object.
initialOffsetTop number The initial top offset of each sticker object.
Source:
Returns:
Type
void

attributeChangedCallback(name, oldValue, newValue) → {void}

Invoked each time one of the custom element's attributes is added, removed, or changed. Which attributes to notice change for is specified in a static getobservedAttributes() method
Parameters:
Name Type Description
name string The element's attribute name.
oldValue string The old attribute value.
newValue string The new attribute value.
Source:
Returns:
Type
void

changeDirection() → {void}

Changes the direction of the stickers' side. It is either "left" or "right".
Source:
Returns:
Type
void

connectedCallback() → {void}

Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed.
Source:
Returns:
Type
void

disconnectedCallback() → {void}

Invoked each time the custom element is disconnected from the document's DOM.
Source:
Returns:
Type
void

duringScroll(sticker, item, scroll_distance, initialOffsetTop) → {void}

This is a function that acts as a helper function to applyPosition(). It helps on smoother animation of the stickers' movement while scrolling. It also manages the behavior of each sticker. If it has an absolute position or fixed while scrolling.
Parameters:
Name Type Default Description
sticker HTMLDivElement An HTML
sub-element that is the sticker object displayed at the front-end.
item HTMLElement An HTML element that the associated sticker object created by pd-sticker will be placed.
scroll_distance array An array containing the values of available scroll distance for each sticker object.
initialOffsetTop number 0 The initial top offset of each sticker object.
Source:
Returns:
Type
void

init() → {void}

Initialize the module. After the module instance has been created, here is were most work is done. Styling will be applied. All stickers will be created and displayed at the proper position. At the same time the scroll distance of each sticker will have been calculated.
Source:
Returns:
Type
void

isEmpty(valuenullable) → {boolean}

This is a function that acts as a helper function in general. It checks if a value is "empty" in case of many types of input.
Parameters:
Name Type Attributes Description
value number | boolean | array | object | string <nullable>
 An multiple type value to be checked.
Source:
Returns:
Type
boolean