Skip to content

Latest commit

 

History

History
583 lines (411 loc) · 15.1 KB

README.md

File metadata and controls

583 lines (411 loc) · 15.1 KB
Raw

Regular.js

A light and simple JavaScript Library

GitHub license PRs welcome coded with passion by Regular Labs

Very small: ~1.5 kB gzipped 😮

This library contains a number of simple static javascript functions.

hasClasses
addClasses
removeClasses
toggleClasses
makeVisible
show
hide
toggle
fadeIn
fadeOut
fadeTo
createElementFromHTML
onReady
loadUrl
toUrlQueryString
alias

Function Aliases

hasClasses

Checks if the element contains one or more of the given class names.

Syntax

Regular.hasClasses(selector, classes, true)
Parameter Description Default
selector A CSS selector string or a HTMLElement object.
classes A string or array of class names.
matchAll Optional boolean whether the element should have all given classes (true) or at least one (false). true
Returns

boolean true or false based on whether the element contains one or more of the given class names.

Examples

<div id="mydiv" class="foo bar">...</div>
Regular.hasClasses('#mydiv', 'foo');
// => true

Regular.hasClasses('#mydiv', 'baz');
// => false

Regular.hasClasses('#mydiv', 'bar baz');
// => false

Regular.hasClasses('#mydiv', ['bar', 'baz']);
// => false

const div = document.querySelector('#mydiv');
Regular.hasClasses(div, ['bar', 'baz'], false);
// => true

addClasses

Adds given class name(s) to the element.

Syntax

Regular.addClasses(selector, classes)
Parameter Description
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
classes A string or array of class names.

Examples

<div id="mydiv" class="foo">...</div>
Regular.addClasses('#mydiv', 'bar');
// => class="foo bar"

Regular.addClasses('#mydiv', 'foo');
// => class="foo"

Regular.addClasses('#mydiv', 'bar baz');
// => class="foo bar baz"

const div = document.querySelector('#mydiv');
Regular.addClasses(div, ['bar', 'baz']);
// => class="foo bar baz"

removeClasses

Removes given class name(s) from the element.

Syntax

Regular.removeClasses(selector, classes)
Parameter Description
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
classes A string or array of class names.

Examples

<div id="mydiv" class="foo bar baz">...</div>
Regular.removeClasses('#mydiv', 'bar');
// => class="foo baz"

Regular.removeClasses('#mydiv', 'bar baz');
// => class="foo"

Regular.removeClasses('#mydiv', ['bar', 'baz']);
// => class="foo"

const div = document.querySelector('#mydiv');
Regular.removeClasses(div, 'qux');
// => class="foo bar baz"

toggleClasses

Toggles given class name(s) of the element.

Syntax

Regular.toggleClasses(selector, classes)
Parameter Description
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
classes A string or array of class names.
force An optional boolean value that forces the class to be added or removed.

Examples

<div id="mydiv" class="foo bar baz">...</div>
Regular.toggleClasses('#mydiv', 'bar');
// => class="foo baz"

Regular.toggleClasses('#mydiv', 'bar baz');
// => class="foo"

Regular.toggleClasses('#mydiv', ['bar', 'qux']);
// => class="foo baz qux"

Regular.toggleClasses('#mydiv', ['bar', 'qux'], true);
// => class="foo bar baz qux"

Regular.toggleClasses('#mydiv', ['bar', 'qux'], false);
// => class="foo baz"

const div = document.querySelector('#mydiv');
Regular.toggleClasses(div, 'qux');
// => class="foo bar baz qux"

makeVisible

Makes the given element(s) visible (changes visibility and display attributes).

Syntax

Regular.makeVisible(el)
Parameter Description
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.

Examples

<div id="mydiv" style="display:none;">...</div>
Regular.makeVisible('#mydiv');

const div = document.querySelector('#mydiv');
Regular.makeVisible(div);

show

Shows the given element(s) (makes visible and changes opacity attribute).

Syntax

Regular.show(el)
Parameter Description
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.

Examples

<div id="mydiv" style="display:none;opacity:0;">...</div>
Regular.show('#mydiv');

const div = document.querySelector('#mydiv');
Regular.show(div);

hide

Hides the given element (changes opacity and display attributes).

Syntax

Regular.hide(el)
Parameter Description
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.

Examples

<div id="mydiv">...</div>
Regular.hide(div);

const div = document.querySelector('#mydiv');
Regular.hide('#mydiv');

toggle

Shows or hides the given element(s).

Syntax

Regular.hide(el)
Parameter Description
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
force An optional boolean value that forces the class to be added or removed.

Examples

<div id="mydiv">...</div>
Regular.toggle(div);

Regular.toggle(div, true);

Regular.toggle(div, foobar > 2);

const div = document.querySelector('#mydiv');
Regular.hide('#mydiv');

fadeIn

Fades in the given element.

Syntax

Regular.fadeIn(selector, duration, oncomplete)
Parameter Description Default
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
duration Optional duration of the effect in milliseconds. 250
oncomplete Optional callback function to execute when effect is completed.

Examples

<div id="mydiv" style="display:none;">...</div>
Regular.fadeIn('#mydiv');

const div = document.querySelector('#mydiv');
Regular.fadeIn(div, 1000, () => console.log('Faded in'));

fadeOut

Fades out the given element.

Syntax

Regular.fadeOut(selector, duration, oncomplete)
Parameter Description Default
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
duration Optional duration of the effect in milliseconds. 250
oncomplete Optional callback function to execute when effect is completed.

Examples

<div id="mydiv">...</div>
Regular.fadeOut('#mydiv');

const div = document.querySelector('#mydiv');
Regular.fadeOut(div, 1000, () => console.log('Faded out'));

fadeTo

Fades out the given element.

Syntax

Regular.fadeTo(selector, opacity, duration, oncomplete)
Parameter Description Default
selector A CSS selector string, a HTMLElement object or a collection of HTMLElement objects.
opacity The opacity to fade to (number between 0 and 1).
duration Optional duration of the effect in milliseconds. 250
oncomplete Optional callback function to execute when effect is completed.

Examples

<div id="mydiv">...</div>
Regular.fadeTo('#mydiv', 0.5);

const div = document.querySelector('#mydiv');
Regular.fadeTo(div, 0.2, 1000, () => console.log('Finished fading'));

createElementFromHTML

Converts a string with HTML code to a HTMLElement object.

Syntax

Regular.createElementFromHTML(html)
Parameter Description
html String with HTML code.
Returns

HTMLElement object based on the given string.

Example

const mydiv = Regular.createElementFromHTML(`<div id="mydiv" class="foo">My <strong>cool</strong> element!</div>`);

onReady

Runs a function when the document is loaded (on ready state).

Syntax

Regular.onReady(func)
Parameter Description
func Callback function to execute when document is ready.

Example

Regular.onReady(`console.log('Document is ready!')`);

loadUrl

Loads a url with optional POST data and optionally calls a function on success or fail.

Syntax

Regular.loadUrl(url, data, success, fail)
Parameter Description
url String containing the url to load.
data Optional string representing the POST data to send along.
success Optional callback function to execute when the url loads successfully (status 200).
fail Optional callback function to execute when the url fails to load.

The result (responseText), status and the full XMLHttpRequest object will be passed to the callback functions.

Example

Regular.loadUrl('my/url.php');

Regular.loadUrl(
	'my/url.php',
	'id=123&format=ajax',
	(result) => {
		console.log('Yeah!');
		console.log(result);
	},
	(result, status) => console.log(`Oh no! Failed with status: ${status}`)
);

toUrlQueryString

Converts a data object (key, value) to a serialized query string.

Syntax

Regular.toUrlQueryString(data, prefix)
Parameter Description
data The object with the data to serialize.
prefix An Optional prefix.

Example

const url_params = {
	'id'     : 123,
	'page'   : 'band',
	'members': ['Peter', 'Paul', 'Mary'],
};

// Results in: index.php?id=123&page=band&members[]=Peter&members[]=Paul&members[]=Mary
const url = 'index.php?' + Regular.toUrlQueryString(my_object);
const url_params = {
	'page'   : 'band',
	'members': {
		'John'  : 'Lennon',
		'Paul'  : 'McCartney',
		'George': 'Harrison',
		'Ringo' : 'Star',
	},
};

// Results in: index.php?page=band&members[John]=Lennon&members[Paul]=McCartney&members[George]=Harrison&members[Ringo]=Star
const url = 'index.php?' + Regular.toUrlQueryString(url_params);
const members = {
	'John'  : 'Lennon',
	'Paul'  : 'McCartney',
	'George': 'Harrison',
	'Ringo' : 'Star',
};

// Results in: index.php?members[John]=Lennon&members[Paul]=McCartney&members[George]=Harrison&members[Ringo]=Star
const url = 'index.php?' + Regular.toUrlQueryString(members, 'members');

alias

Sets a global alias for the Regular class.

Syntax

Regular.alias(word)
Parameter Description
word A string (character or word) representing the alias for the Regular class.
Returns

boolean true if the alias is created, false if the given alias already exists as a global variable names.

Example

Regular.alias('$');

$.addClass('#myDiv', 'foo');

Function Aliases

There are some aliases for some of the functions:

Function Alias for
hasClass hasClasses
addClass addClasses
removeClass removeClasses
toggleClass toggleClasses
as alias