Utility

The utility object contains methods that are used throughout a variety of JavaScript components and can also be used in custom scripts. Once you include _utility.js into you script or document, it’s common to save it in a shorthand variable allowing you to use it’s methods more quickly:

var u = utility; // Create shorthand for the utility object

u.toArray('something'); // Converts a string into array object
u.extend( object_a, object_b ); // jQuery type extend of objects

.hasClass()

Check whether or not an element contains a specific class.

utility.hasClass( element, className )
Parameter Type Description
element Element Element to check class(es) on
className String || Array Class(es) to check
Return Boolean

Example Usage

<div id="mydiv" class="foo bar"></div>
var div = document.querySelector('#mydiv');

utility.hasClass(div, 'foo');  // Returns: true
utility.hasClass(div, 'quux'); // Returns: false

.addClass()

Adds a class or classes to an element.

utility.addClass( element, className )
Parameter Type Description
element Element Element to add class(es) to
className String || Array Class(es) to add

Example Usage

<div id="mydiv"></div>
var div = document.querySelector('#mydiv');

utility.addClass(div, 'foo');
// Result: <div id="mydiv" class="foo"></div>

utility.addClass(div, ['bar', 'quux']);
// Result: <div id="mydiv" class="foo bar quux"></div>

.removeClass()

Remove a class or classes from an element.

utility.removeClass( element, className )
Parameter Type Description
element Element Element to remove class(es) from
className String || Array Class(es) to remove

Example Usage

<div id="mydiv" class="foo bar quux"></div>
var div = document.querySelector('#mydiv');

utility.removeClass(div, 'foo');
// Result: <div id="mydiv" class="bar quux"></div>

utility.removeClass(div, ['bar', 'quux']);
// Result: <div id="mydiv"></div>

.toggleClass()

Toggle a class or classes on an element.

utility.toggleClass( element, className )
Parameter Type Description
element Element Element to toggle class(es) on
className String || Array Class(es) to toggle

Example Usage

<div id="mydiv" class="foo bar"></div>
var div = document.querySelector('#mydiv');

utility.toggleClass(div, 'foo');
// Result: <div id="mydiv" class="bar"></div>

utility.toggleClass(div, ['bar', 'quux']);
// Result: <div id="mydiv" class="quux"></div>

.closest()

Find the closest parent element based on class. This is different from the native .closest() method in that it skips the current element.

utility.closest( element, className )
Parameter Type Description
element Element Element to start search from
className String || Array Class(es) to check for
Return Element Object

Example Usage

<div class="foo">
  <div class="bar">
    <div class="quux"></div>
  </div>
</div>
var div = document.querySelector('.quux');

utility.closest(div, 'foo');
// Returns: <div class="foo"></div>

.toArray()

Converts a string to an array. If an array is passed, it’s returned as is. Anything else is returned as false.

utility.toArray( string )
Parameter Type Description
string String || Array String to convert into an array
Return Array

Example Usage

utility.toArray("foo");
// Returns: ["foo"]

.extend()

Merge two or more objects. Returns a new object. Set the first argument to true for a deep or recursive merge.

utility.extend( deep[optional], objects... )
Parameter Type Description
deep Boolean [Optional] Deep If true, do a deep (or recursive) merge
objects... Objects The objects to merge together; each overriding the next.
Return Object

Example Usage

// Our initial object
var defaults = {
  class : 'example',
  color : 'blue',
  other : true
};

// The override object we'll use to merge
var options = {
  color : 'red',
  other : false,
  new : '100px'
};

var settings = utility.extend(defaults, options);
// Returns: merged objects into the `options` variable
// { class: "example", color: "red", other: false, new: "100px" }