1. Home
  2. Namespaces
  3. FooGallery.utils

utils

This namespace contains common utility methods and code shared between our plugins.

Description

This namespace relies on jQuery being included in the page prior to it being loaded.

Details

core/js/foogallery.js, line 76

Classes

new Class()

A base class providing some helper methods for prototypal inheritance.

new Bounds()

A simple bounding rectangle class.

new Factory()

A factory for classes allowing them to be registered and created using a friendly name.

new Debugger( key )

A debug utility class that can be enabled across sessions using the given key by storing its state in localStorage.

new Throttle( [ idle ] )

A timer to throttle the execution of code.

Namespaces

is

Contains common type checking utility methods.

fn

Contains common function utility methods.

url

Contains common url utility methods.

str

Contains common string utility methods.

obj

Contains common object utility methods.

transition

Contains common utility methods and members for the CSS transition property.

Members

<static> $ :jQuery

A reference to the jQuery object the library is registered with.

Description

This is used internally for all jQuery operations to help work around issues where multiple jQuery libraries have been included in a single page.

Examples

The following shows the issue when multiple jQuery's are included in a single page.


<script src="jquery-1.12.4.js"></script>
<script src="my-plugin.js"></script>
<script src="jquery-2.2.4.js"></script>
<script>
	jQuery(function($){
		$(".selector").myPlugin(); // => This would throw a TypeError: $(...).myPlugin is not a function
	});
</script>

The reason the above throws an error is that the $.fn.myPlugin function is registered to the first instance of jQuery in the page however the instance used to create the ready callback and actually try to execute $(...).myPlugin() is the second. To resolve this issue ideally you would remove the second instance of jQuery however you can use the FooGallery.utils.$ member to ensure you are always working with the instance of jQuery the library was registered with.


<script src="jquery-1.12.4.js"></script>
<script src="my-plugin.js"></script>
<script src="jquery-2.2.4.js"></script>
<script>
	FooGallery.utils.$(function($){
		$(".selector").myPlugin(); // => It works!
	});
</script>
Details
jQuery

core/js/foogallery.js, line 82

<static> version :string

The version of this library.

Details
string

core/js/foogallery.js, line 108

Methods

<static> versionCompare( version1, version2 ) → {number}

Compares two version numbers.

Description

This method will compare two version numbers that conform to the basic MAJOR.MINOR.PATCH format returning the result as a simple number. This method will handle short version string comparisons e.g. 1.0 versus 1.0.1.

Parameters
Name Type Description
version1 string

The first version to use in the comparison.
version2 string

The second version to compare to the first.
Returns

0 if the version are equal.
-1 if version1 is less than version2.
1 if version1 is greater than version2.
NaN if either of the supplied versions do not conform to MAJOR.MINOR.PATCH format.

Examples

The following shows the results of comparing various version strings.


console.log( FooGallery.utils.versionCompare( "0", "0" ) ); // => 0
console.log( FooGallery.utils.versionCompare( "0.0", "0" ) ); // => 0
console.log( FooGallery.utils.versionCompare( "0.0", "0.0.0" ) ); // => 0
console.log( FooGallery.utils.versionCompare( "0.1", "0.0.0" ) ); // => 1
console.log( FooGallery.utils.versionCompare( "0.1", "0.0.1" ) ); // => 1
console.log( FooGallery.utils.versionCompare( "1", "0.1" ) ); // => 1
console.log( FooGallery.utils.versionCompare( "1.10", "1.9" ) ); // => 1
console.log( FooGallery.utils.versionCompare( "1.9", "1.10" ) ); // => -1
console.log( FooGallery.utils.versionCompare( "1", "1.1" ) ); // => -1
console.log( FooGallery.utils.versionCompare( "1.0.9", "1.1" ) ); // => -1

If either of the supplied version strings does not match the MAJOR.MINOR.PATCH format then NaN is returned.


console.log( FooGallery.utils.versionCompare( "not-a-version", "1.1" ) ); // => NaN
console.log( FooGallery.utils.versionCompare( "1.1", "not-a-version" ) ); // => NaN
console.log( FooGallery.utils.versionCompare( "not-a-version", "not-a-version" ) ); // => NaN
Details

core/js/foogallery.js, line 117

<static> ready( callback )

Waits for the DOM to be accessible and then executes the supplied callback.

Parameters
Name Type Description
callback FooGallery.utils~readyCallback

The function to execute once the DOM is accessible.
Examples

This method can be used as a replacement for the jQuery ready callback to avoid an error in another script stopping our scripts from running.


FooGallery.utils.ready(function($){
	// do something
});
Details

core/js/foogallery.js, line 1888

<static> uniqueId( $element [, prefix ] ) → {string}

Generate and apply a unique id for the given $element.

Parameters
Name Type Attributes Default Description
$element jQuery

The jQuery element object to retrieve an id from or generate an id for.
prefix string <optional>
 "uid-"

A prefix to append to the start of any generated ids.
Returns

Either the $element's existing id or a generated one that has been applied to it.

Examples

// alias the FooGallery.utils namespace
var _ = FooGallery.utils;

// create some elements to test
var $hasId = $("<span/>", {id: "exists"});
var $generatedId = $("<span/>");
var $generatedPrefixedId = $("<span/>");

console.log( _.uniqueId( $hasId ) ); // => "exists"
console.log( $hasId.attr( "id" ) ); // => "exists"
console.log( _.uniqueId( $generatedId ) ); // => "uid-1"
console.log( $generatedId.attr( "id" ) ); // => "uid-1"
console.log( _.uniqueId( $generatedPrefixedId, "plugin-" ) ); // => "plugin-2"
console.log( $generatedPrefixedId.attr( "id" ) ); // => "plugin-2"

Details

core/js/foogallery.js, line 1910

<static> removeUniqueId( $element )

Remove the id from the given $element if it was set using the uniqueId method.

Parameters
Name Type Description
$element jQuery

The jQuery element object to remove a generated id from.
Examples

// alias the FooGallery.utils namespace
var _ = FooGallery.utils;

// create some elements to test
var $hasId = $("<span/>", {id: "exists"});
var $generatedId = $("<span/>");
var $generatedPrefixedId = $("<span/>");

console.log( _.uniqueId( $hasId ) ); // => "exists"
console.log( _.uniqueId( $generatedId ) ); // => "uid-1"
console.log( _.uniqueId( $generatedPrefixedId, "plugin-" ) ); // => "plugin-2"

Details

core/js/foogallery.js, line 1943

<static> getViewportBounds( [ inflate ] ) → {FooGallery.utils.Bounds}

Gets the bounding rectangle of the current viewport.

Parameters
Name Type Attributes Description
inflate number <optional>

An amount to inflate the bounds by. A positive number will expand the bounds outside of the visible viewport while a negative one would shrink it.
Returns
Details

core/js/foogallery.js, line 2329

<static> getElementBounds( element ) → {FooGallery.utils.Bounds}

Get the bounding rectangle for the supplied element.

Parameters
Name Type Description
element jQuery | HTMLElement | string

The jQuery wrapper around the element, the element itself, or a CSS selector to retrieve the element with.
Returns
Details

core/js/foogallery.js, line 2349

<static> selectify( classes ) → {object|string}

Simple utility method to convert space delimited strings of CSS class names into a CSS selector.

Parameters
Name Type Description
classes string | Array.<string> | object

A single space delimited string of CSS class names to convert or an array of them with each item being included in the selector using the OR (,) syntax as a separator. If an object is supplied the result will be an object with the same property names but the values converted to selectors.
Returns
Details

core/js/foogallery.js, line 2917

Type Definitions

readyCallback( $ )

The callback for the FooGallery.utils.ready method.

Parameters
Name Type Description
$ jQuery

The instance of jQuery the plugin was registered with.
Details
function

core/js/foogallery.js, line 1880

Take a look at the FooGallery.utils.ready method for example usage.