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

Bower: bower install fizzy-ui-utils --save

npm: npm install fizzy-ui-utils --save

API

// fizzyUIUtils is the browser global
var utils = fizzyUIUtils;

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

utils.extend( a, b )
// extend object

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

utils.makeArray( obj )
// make array from object

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

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

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

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

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

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

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

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

utils.htmlInit( Class, namespace )
// on document ready, initialize Class on every element
// that matches js-namespace
// pass in JSON options from element's data-options-namespace attribute

MIT license. Have at it.

By Metafizzy