@abtasty/widget-utils

Widgets Utils

Collection of useful functions for AB Tasty Widgets.

Installation

Inside your Widget folder, install the widget-utils library:

npm install @abtasty/widget-utils

Note: you can also use yarn instead of npm: yarn add @abtasty/widget-utils

Usage

With Webpack or Rollup.js:

// Import what you need
import { domReady, log } from '@abtasty/widget-utils'

domReady(() => {
    log('The dom is ready here..')
})

Functions

domReady(callback)

Trigger callback function once the page Document Object Model (DOM) is ready.

The is useful when you want to manipulate the DOM of the page (someting that you will probably do with a Widget). This function ensures that the DOM is ready and you can safely manipulate it, even if your Widget is injected before the document is ready.

domReady(() => {
    // The dom is ready here..
})

waitForElement(selector, successCallback, errorCallback)

Trigger a callback function once a specific element on the page is ready.

Similar to domReady, but this function will not wait for the DOM to be ready but for a more specific element on the page. For example, the DOM can be ready but the webpage adds an element after the page is fully loaded. If the element is not found after 10 secondes, errorCallback is called.

waitForElement('.footer', () => {
    // Footer is found and ready to be manipulated.

}, () => {
    // Footer not found :(

})

Note: It is strongly recommended to use this function if you let the user select an element with an Element selector input, see https://abtasty.gitbooks.io/widget/create-widget/configuration-form.html#element-selector.

log(...messages)

Log messages prefixed with "AB Tasty Widget" and the name of your widget.

log(`Can't find element.`)
// Will output:
// [AB Tasty Widget] tooltip: Can't find element.