classasync.md

DOM/classAsync()

This function is a convenience function over attrAsync() for setting/unsetting the class attribute or adding/removing entries on an element's class list.

The suffix Async differentiates this method from its Sync counterpart - classSync(). Unlike the Async counterpart, classAsync() is a promise-based function that runs in a different flow from that of the calling code.

Import

import classAsync from '@web-native-js/play-ui/src/dom/classAsync.js';

Syntax

// Method signature
let promise = classAsync(el[, valOrMutation = null[, subValMutation = null]]);

> Set/Remove the Class Attribute

// Set the class attribute
let el = classAsync(el, classlist);

// Remove the class attribute
let promise = classAsync(el, false);

Parameters

• el - HTMLElement: The target DOM element.
• classlist - String|Boolean: Space-delimitted class names. When true, the string "true" is implied. When false, the class attribute is unset from the element.

Return

• Promise - A Promise that resolves when the operation finally gets executed. The target DOM element is returned when the promise resolves.

> Add/Remove Class Entry

// Set a class entry
let promise = classAsync(el, entry, state === true);
// Remove a class entry
let promise = classAsync(el, entry, state === false);

Parameters

• el - HTMLElement: The target DOM element.
• entry - String: The classname to insert or remove.
• state - Boolean: The indication of insert or remove. When true, the given classname is inserted into the aelement's classlist. When false, the given classname is removed from the aelement's classlist.

Return

• Promise - A Promise that resolves when the operation finally gets executed. The target DOM element is returned when the promise resolves.

> Get the Class Attribute

let promise = classAsync(el);

Parameters

• el - HTMLElement: The source DOM element.

Return

• Promise - A Promise that resolves when the operation finally gets executed. The element's classlist is returned as a string when the promise resolves.

Usage

<div class="class1 class2"></div>

let article = document.querySelector('.class1');

// Insert a class entry
classAsync(article, 'class3', true);

// Get the classlist
classAsync(article).then(classlist => {
    // Do something with classlist
});

Implementation Note

See attrAsync()