fizzy-ui-utils

What is fizzy-ui-utils?

fizzy-ui-utils is a utility library for common UI tasks, such as event handling, DOM manipulation, and array operations. It provides a set of helper functions to simplify these tasks.

What are fizzy-ui-utils's main functionalities?

Event Handling

This feature allows you to easily add event listeners to DOM elements. In this example, a click event listener is added to a button element.

const fizzyUIUtils = require('fizzy-ui-utils');

function handleClick(event) {
  console.log('Element clicked:', event.target);
}

const button = document.querySelector('button');
fizzyUIUtils.addEvent(button, 'click', handleClick);

DOM Manipulation

This feature provides methods for manipulating the DOM. In this example, the text content of a DOM element is set to 'Hello, World!'.

const fizzyUIUtils = require('fizzy-ui-utils');

const element = document.querySelector('.my-element');
fizzyUIUtils.setText(element, 'Hello, World!');

Array Operations

This feature includes utility functions for array operations. In this example, the `filter` method is used to create a new array containing only the even numbers from the original array.

const fizzyUIUtils = require('fizzy-ui-utils');

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = fizzyUIUtils.filter(numbers, function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

Other packages similar to fizzy-ui-utils

lodash

Lodash is a modern JavaScript utility library delivering modularity, performance, and extras. It provides a wide range of utility functions for common programming tasks, including array manipulation, object manipulation, and function utilities. Compared to fizzy-ui-utils, Lodash offers a more extensive set of features and is widely adopted in the JavaScript community.

jquery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. While jQuery is more comprehensive and includes more features for DOM manipulation and event handling, fizzy-ui-utils is a lighter alternative for specific UI tasks.

underscore

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It includes functions for working with arrays, objects, and other data types. Similar to Lodash, Underscore offers a broad range of utility functions, but it is less modular and performant compared to Lodash. Fizzy-ui-utils is more focused on UI-related utilities.

README

Fizzy UI utils

UI utility & helper functions

Used in Flickity, Isotope, Masonry, Draggabilly

Install

npm: npm install fizzy-ui-utils

Yarn: yarn add fizzy-ui-utils

API

// browser global
const utils = window.fizzyUIUtils;

// CommonJS
const utils = require('fizzy-ui-utils');

// JavaScript module
import utils from 'fizzy-ui-utils';

// ---- ---- //

utils.makeArray( obj )
// make array from object
// makeArray('single object') => [ 'single object' ]

utils.modulo( num, div )
// num [modulo] div

utils.removeFrom( ary, obj )
// remove object from array

utils.getQueryElement( elem )
// if elem is a string, use it as a selector and return element

MyClass.prototype.handleEvent = utils.handleEvent;
// enable MyClass.onclick when element.addEventListener( 'click', this, false )

utils.filterFindElements( elems, selector )
// iterate through elems, filter and find all elements that match selector

utils.debounceMethod( MyClass, methodName, threhold )
// debounce a class method

utils.docReady( callback )
// trigger callback on document ready

utils.toDashed( str )
// 'camelCaseString' -> 'camel-case-string'

utils.htmlInit( MyClass, namespace )
// on document ready, initialize MyClass on every element
// that matches [data-my-class] attribute
// pass in JSON options from attribute value

Legacy API The following methods were available in v2, and still available in v3, but should be avoided in favor of native browser API

utils.extend( a, b )
// extend object
// use Object.assign() or { ...obj } instead

utils.getParent( elem, selector )
// get parent element of an element, given a selector string
// use elem.closest( selector ) instead

Browser support

Fizzy UI utils uses ES2018 features like spread operators and arrow functions. As such its browser support is: Chrome 46+, Firefox 34+, Safari 10+, and Edge 12+.

For older browser support, including IE10 and Android 4, try v2.

MIT license. Have at it.

By Metafizzy 🌈🐻