Zazz Design Framework
Components

Utils

Shared DOM and data-attribute parsing helpers used by component scripts.

utils.js provides parsing utilities for component scripts. It parses HTML data-attribute strings into JavaScript values.

Setup

Included in index.js:

<script type="module" src="./zazz/index.js"></script>

Exposes window.Utils.

parseValue(value)

Converts string attribute values to native JavaScript types:

Utils.parseValue("true"); // true (boolean)
Utils.parseValue("false"); // false (boolean)
Utils.parseValue("42"); // 42 (number)
Utils.parseValue("[1,2,3]"); // [1, 2, 3] (array)
Utils.parseValue("hello"); // "hello" (string)

parseDataAttributes(node, prefix)

Extracts data attributes matching a prefix, converts kebab-case names to camelCase keys, and coerces values with parseValue:

// <div data-carousel-auto-play="true" data-carousel-slide-count="5">
Utils.parseDataAttributes(element, "data-carousel-");
// { autoPlay: true, slideCount: 5 }

On this page