A light and simple JavaScript Library

Very small: 😮

---

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