primo commit
This commit is contained in:
436
media/regularlabs/js/README.md
Normal file
436
media/regularlabs/js/README.md
Normal file
@ -0,0 +1,436 @@
|
||||
|
||||
|
||||
### *A light and simple JavaScript Library*
|
||||
|
||||
[](https://github.com/regularlabs/regularjs/blob/master/LICENCE)
|
||||
[](https://github.com/regularlabs/regularjs/pulls)
|
||||
[](https://github.com/regularlabs)
|
||||
|
||||
Very small:  😮
|
||||
|
||||
---
|
||||
|
||||
This library contains a number of simple static javascript functions.
|
||||
|
||||
[hasClasses](#hasclasses)<br>
|
||||
[addClasses](#addclasses)<br>
|
||||
[removeClasses](#removeclasses)<br>
|
||||
[toggleClasses](#toggleclasses)<br>
|
||||
[show](#show)<br>
|
||||
[hide](#hide)<br>
|
||||
[fadeIn](#fadein)<br>
|
||||
[fadeOut](#fadeout)<br>
|
||||
[createElementFromHTML](#createelementfromhtml)<br>
|
||||
[onReady](#onready)<br>
|
||||
[loadUrl](#loadurl)<br>
|
||||
[alias](#alias)<br>
|
||||
<br>
|
||||
[Function Aliases](#function-aliases)
|
||||
|
||||
---
|
||||
|
||||
## hasClasses
|
||||
|
||||
Checks if the element contains one or more of the given class names.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```html
|
||||
<div id="mydiv" class="foo bar">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
|
||||
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
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```html
|
||||
<div id="mydiv" class="foo">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```html
|
||||
<div id="mydiv" class="foo bar baz">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```html
|
||||
<div id="mydiv" class="foo bar baz">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
Regular.show(el)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|------------|-------------------------------------------------------------------------------------|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv" style="display:none;">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.show('#mydiv');
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.show(div);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## hide
|
||||
|
||||
Hides the given element (changes opacity and display attributes).
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
Regular.hide(el)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|------------|-------------------------------------------------------------------------------------|
|
||||
| `selector` | A CSS selector string, a HTMLElement object or a collection of HTMLElement objects. |
|
||||
|
||||
#### Examples
|
||||
|
||||
```html
|
||||
<div id="mydiv">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.hide(div);
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.hide('#mydiv');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## fadeIn
|
||||
|
||||
Fades in the the given element.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```html
|
||||
<div id="mydiv" style="display:none;">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Regular.fadeIn('#mydiv');
|
||||
|
||||
const div = document.querySelector('#mydiv');
|
||||
Regular.fadeIn(div, 1000, () => console.log('Faded in'));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## fadeOut
|
||||
|
||||
Fades out the the given element.
|
||||
|
||||
#### Syntax
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```html
|
||||
<div id="mydiv">...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
Regular.createElementFromHTML(html)
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|------------------------|
|
||||
| `html` | String with HTML code. |
|
||||
|
||||
##### Returns
|
||||
|
||||
`HTMLElement` object based on the given string.
|
||||
|
||||
#### Example
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
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
|
||||
|
||||
```javascript
|
||||
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 |
|
||||
Reference in New Issue
Block a user