wilsonge / regularjs

Regular.js - A light and simple JavaScript Library

A light and simple JavaScript Library

Very small: 😮

---

This library contains a number of simple static javascript functions.

hasClasses
addClasses
removeClasses
toggleClasses
show
hide
fadeIn
fadeOut
createElementFromHTML
onReady
loadUrl
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.

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"

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

---

show

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

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;">...</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');

---

fadeIn

Fades in the 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 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'));

---

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}`)
);

---

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