AFTC.js

A collection of usefull everyday utilities / functions.

Find AFTC.JS useful? Please Donate...

Any and all donations to help keep active development and the lights on are more than welcome.

Want the ES6+ modules version? aftc-modules.js

Visit https://github.com/DarceyLloyd/aftc-modules
npm i aftc-modules

What's new

Added loadCss(href,onComplete)

Added alias loadScript for loadJs

Reduced core to it's bare minimum

Why? This is because of the direction JS development is going, if I am building a webpack project I often only want: log, logTo, onReady and argsToObject. And so a new core was born! Using webpack? You should be using aftc-modules unless I haven't migrated a feature over yet.

Added fadeTo and fadeFromTo to AFTC.Color()

let color = new AFTC.Color(); color.setRGB(0,255,0); // set starting color let colors1 = color.fadeTo(255,0,0,10); // Or do it with fromTo let colors2 = color.fadeFromTo(0,0,0,255,0,0,10);

AnimationFrameStack

A single request animation frame function stack which can be used to control multiple classes / whole applications renderers etc via methods add(fn) remove(fn) stop() start() dispose()

let AnimStack = new AnimationFrameStack(); animStack.add(fn1); animStack.stop(); adnimStack.remove(fn2); animStack.start();

aftc.js v1.6.x

You can view all pens at https://codepen.io/AllForTheCode/pens/public/?grid_type=list

Added loadJS(src,onComplete,onProgress)

Quick and easy script loading and attachement to the DOM.

attachDebug(no, ele)

Attach some visual debug divs to an element which you can logTo, returns an array of elements so you can:

let v = attachDebug(10,document.body);
debugTo(v[0],"hello world 1");
debugTo(v[9],"hello world 10");

Installation

npm i aftc.js

or via cdn:

https://cdn.jsdelivr.net/npm/aftc.js@latest/dist/aftc.min.js
https://cdn.jsdelivr.net/npm/aftc.js@latest/dist/aftc.core.min.js

Use aftc.min.js in your html include or vendor merged packages.

Use aftc-modules.js in your ES6 projects for tree shacking.

File descirptions

Then include the version you wish to use, your options are:

aftc.min.js (44KB) - Have it all!
aftc.core.min.js (3.71KB) - onReady, log, Log, getElement shortcuts, getRandomInt/float etc.

NOTE: You can always customise your build of the AFTC.JS, see the Build Guide below.

Build Guide

gulp build

Step by step

Open aftc.js directory in VSCode
Open "gulpfile.js" and edit / comment out or uncomment any of the imports that you want or don't want

// The extras, the modules, the ooo or to some, the bloat
// Nice to have, but not essential
var aftc_modules = [
    "./dist/aftc.core.js", // The AFTC Core (required)
    "./src/AFTC/AFTC.Audio.js", // Enables new AFTC.Audio() and playSound()
    "./src/AFTC/AFTC.Animate.js", // Enables new AFTC.Animate()
    "./src/AFTC/AFTC.Canvas.js", // Enables new AFTC.Canvas();
    // "./src/AFTC/AFTC.CheckboxHideShow.js", // Up for review - to be updated or removed
    "./src/AFTC/AFTC.Color.js", // Enables new AFTC.Color();
    "./src/AFTC/AFTC.Visibility.js", // Enables hide(), show(), fade(), fadeIn() & fadeOut()
    // "./src/AFTC/AFTC.ResizeManager.js", // Up for review - to be updated or removed
    "./src/AFTC/AFTC.XHR.js", // Everyone needs some IO, I know I do...
];

Open terminal in VSCode by pressing CTRL + '
Type into terminal

    gulp build

NPMJS Has issues with Docs from GITHUB from this point, want to see the docs better please visit the github page https://github.com/DarceyLloyd/AFTC.js.git

Browse on codepen

https://codepen.io/AllForTheCode/pens/public/?grid_type=list

FILE: AFTC.JS

argsToObject(fArgs, obj, strict)

Quick and easy args to object

More information

Parameters:

Name	Type	Description
args	object	arguments (from the function structure, typically code will always be 'arguments'
obj	object	object to parse into
strict	boolean	console.warn any args that have been supplied that don't exist in args

Returns: null

Alias's:

- argsTo

Usage examples:

- https://codepen.io/AllForTheCode/pen/PaqbKN

getElementById(id)

Gets an element from the DOM by ID. NOTE

More information

Parameters:

Name	Type	Description
id	string	The ID of the DOM element you wish to find

Returns: html element

Alias's:

- getId - byId

Usage examples:

- https://codepen.io/AllForTheCode/pen/PedyNO

querySelector(query)

Gets an element from the DOM via DOM Query. NOTE

More information

Parameters:

Name	Type	Description
query	string	The DOM Query / css element path you wish to find

Returns: html element

Alias's:

- query

Usage examples:

- https://codepen.io/AllForTheCode/pen/MGqPrN

getElementsByName(name)

Gets an array of element from the DOM that have a specific name. NOTE

More information

Parameters:

Name	Type	Description
name	string	The name of the DOM element you wish to find

Returns: array of html elements

Usage examples:

- https://codepen.io/AllForTheCode/pen/gzdBdz

getElementByName(name)

Gets the first element from the DOM that has a specific name. NOTE

More information

Parameters:

Name	Type	Description
name	string	The name of the DOM element you wish to find

Returns: html elements

Usage examples:

- https://codepen.io/AllForTheCode/pen/gzdBdz

getElementsByClassName(className)

Gets an array of html elements from the DOM that have a specific class name. NOTE

More information

Parameters:

Name	Type	Description
className	string	The class the DOM element(s) use you wish to find

Returns: array of html elements

Usage examples:

- https://codepen.io/AllForTheCode/pen/odPQxE

getElementByClassName(className)

Gets the first html element from the DOM that has a specific class name. NOTE

More information

Parameters:

Name	Type	Description
className	string	The class name the DOM element uses you wish to find

Returns: html elements

Usage examples:

- https://codepen.io/AllForTheCode/pen/odPQxE

getElementsByTagName(tagName)

Gets an array of html elements from the DOM that has a specific tag name. NOTE

More information

Parameters:

Name	Type	Description
tagName	string	the tag name you wish to find

Returns: array of html elements

getElementByTagName(tagName)

Gets the first html element from the DOM that has a specific tag name. NOTE

More information

Parameters:

Name	Type	Description
tagName	string	the tag name you wish to find

Returns: html element

**log(*)**

Shortcut for console.log with some formatting capabilities, you can also log to html elements see logTo()

log("Hello World");
log("a = " + a);
log("myVar1 = " + myVar1 + "  myVar2 = " + myVar2);
log(MyObject);
log(MyClass);

More information

Parameters:

Name	Type	Description
*	input	what you want to console.log

Alias's:

- log - trace

Usage examples:

- https://codepen.io/AllForTheCode/pen/pVOOZV - https://codepen.io/AllForTheCode/pen/NMLLJX

logTo(element or elementId,string,append:boolean=true)

Shortcut for console.log with some formatting capabilities, you can also log to html elements see logTo()

logTo("MyElement","Hello World",false); // clears element and inserts
logTo("MyElement","Hello World"); // appends
let myElement = document.getElementById("MyElementId");
logTo(myElement,"Hello World"); // appends

More information

Parameters:

Element or ElementId	String	Append
HTML Element or String	String to be inserted into element	To append string or not to elements contents

cls()

Clears the console if supported

More information

Alias's:

- clearLog();

Usage examples:

- https://codepen.io/AllForTheCode/pen/pVOOZV - https://codepen.io/AllForTheCode/pen/NMLLJX

FILE: ARRAY.JS

arrayRemoveIndex(arr,index)

remove a specified index from an array

More information

Parameters:

Name	Type	Description
arr	array	the array you wish to remove an index on
index	number	the array index you wish to remove

Returns: array

Usage examples:

- https://codepen.io/AllForTheCode/pen/mLzyGP

isStringInArray(needle,haystack)

Check to see if a string is in an array

More information

Parameters:

Name	Type	Description
needle	string	what you want to search for in each array index
haystack	string	the array you want to search

Usage examples:

- https://codepen.io/AllForTheCode/pen/QrZrBM

arrayContains(needle,haystack)

Check to see if your array contains something you want to find

More information

Parameters:

Name	Type	Description
needle	string	what you want to search for in each array index
haystack	string	the array you want to search

Alias's:

- isInArray

Usage examples:

- https://codepen.io/AllForTheCode/pen/VxExVw

arrayEmpty(arr)

clears/empties an array for garbage collection

More information

Parameters:

Name	Type	Description
array	arr	the array to clear / empty

Alias's:

- arrayClear

Usage examples:

- https://codepen.io/AllForTheCode/pen/ELdRYJ

getMaxFromArray(arr)

returns the maximum value in an array

More information

Parameters:

Name	Type	Description
array	arr	the array you wish to find the maximum value in

Alias's:

- arrayGetMax - arrayMax

Usage examples:

- https://codepen.io/AllForTheCode/pen/GdYGjW

arrayGetMin(arr)

returns the minimum value in an array

More information

Parameters:

Name	Type	Description
arr	array	the array you wish to find the minimum value in

Alias's:

- getMinFromArray - arrayMin

Usage examples:

- https://codepen.io/AllForTheCode/pen/bMmKBa

arrayShuffle(arr)

shuffles an array (method 1)

More information

Parameters:

Name	Type	Description
arr	array	the array to shuffle

Alias's:

- shuffle - arrayShuffle

Usage examples:

- https://codepen.io/AllForTheCode/pen/wjYjmo

arrayShuffle2(arr)

shuffles an array (method 2)

More information

Parameters:

Name	Type	Description
arr	array	the array to shuffle

Alias's:

- shuffle2 - arrayShuffle2

Usage examples:

- https://codepen.io/AllForTheCode/pen/wjYjmo

arrayToSingleLineString(arr)

Converts an array to a single line string (usefull for debug)

More information

Parameters:

Name	Type	Description
arr	array	the convert

Alias's:

- arrayToString

Usage examples:

- https://codepen.io/AllForTheCode/pen/XqoVEe

convertToArray(val)

takes an input and returns it as index[0] of an array

More information

Parameters:

Name	Type	Description
val	*	value to make into array an array

Alias's:

- valueToArray

Usage examples:

- https://codepen.io/AllForTheCode/pen/QrzazK

FILE: BROWSER.JS

redirect(url)

no more typing self.location.href, just use redirect(url)

More information

Parameters:

Name	Type	Description
url	string	the url you wish to redirect to

Usage examples:

- https://codepen.io/AllForTheCode/pen/RyEpPY

goFullScreen(element)

Go full screen, on an element if specified or whole browser if left out

More information

Parameters:

Name	Type	Description
element	element	optional - html element that you want to go full screen on, leave out for whole browser

Usage examples:

- https://codepen.io/AllForTheCode/pen/ELGWpE

exitFullScreen()

Exits full screen mode

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/ELGWpE

FILE: CONVERSION.JS

radToDeg(input)

converts radians to degrees

More information

Parameters:

Name	Type	Description
input	number	the radians you wish converted to degrees

Alias's:

- rad2deg

Usage examples:

- https://codepen.io/AllForTheCode/pen/wjRpBZ

degToRad(input)

converts degrees to radians

More information

Parameters:

Name	Type	Description
number	input	the value you wish converted to radians

Alias's:

- deg2rad

Usage examples:

- https://codepen.io/AllForTheCode/pen/jxXYbE

toHex(num)

Converts a number to hex

More information

Parameters:

Name	Type	Description
num	number	decimal base 10

Returns: hexidecimal value

Usage examples:

- https://codepen.io/AllForTheCode/pen/ELGoKX

boolToString(bool)

converts boolean to a string of true or false

More information

Parameters:

Name	Type	Description
bool	boolean	the boolean you wish to convert

Usage examples:

- https://codepen.io/AllForTheCode/pen/PeXEbg

boolToYesNo(bool)

converts a boolean to yes or no

More information

Parameters:

Name	Type	Description
bool	boolean	the boolean you wish to convert

Usage examples:

- https://codepen.io/AllForTheCode/pen/zjypZz

stringToBool(str)

Converts a string to a boolean (y,yes,"1",no etc)

More information

Parameters:

Name	Type	Description
str	string	the string you wish to convert

Usage examples:

- https://codepen.io/AllForTheCode/pen/vjvpmQ

getBooleanFrom(input)

converts an input to a boolean

More information

Parameters:

Name	Type	Description
*	input	the variable you wish to convert to a boolean

Usage examples:

- https://codepen.io/AllForTheCode/pen/XqoVea

parseArrayToFloat(arr)

parses all values in array to float

More information

Parameters:

Name	Type	Description
array	arr	array to process

Alias's:

- arrayToFloat

Usage examples:

- https://codepen.io/AllForTheCode/pen/erbyVR

parseArrayToInt(arr)

parses all values in array to float

More information

Parameters:

Name	Type	Description
array	arr	array to process

Alias's:

- arrayToInt

Usage examples:

- https://codepen.io/AllForTheCode/pen/yjGpqM

toArray(v)

takes an input and returns it as index[0] of an array

More information

Parameters:

Name	Type	Description
*	arg	value to insert into array

Alias's:

- convertToArray - valueToArray

Usage examples:

- https://codepen.io/AllForTheCode/pen/QrzazK

rgb2Hex(r,g,b)

rgb to hex

More information

Parameters:

Name	Type	Description
number	r	red
number	g	green
number	b	blue

rgbToHex(r,g,b)

rgb to hex

More information

Parameters:

Name	Type	Description
number	r	red
number	g	green
number	b	blue

hexToRgb(hex)

hexToRgb

More information

Parameters:

Name	Type	Description
string	hex	hex color

FILE: COOKIES.JS

setCookie(name, value, expiryTimeInDays)

Sets a cookie by name with a value

More information

Parameters:

Name	Type	Description
name	string	name of the cookie
value	string	value of the cookie
expiryTimeInDays	number	Specify the number of days the cookie will expire in.

Usage examples:

- https://codepen.io/AllForTheCode/pen/RyBMwq

getCookie(name)

Gets the value of a cookie by name

More information

Parameters:

Name	Type	Description
name	string	name of the cookie to get

Usage examples:

- https://codepen.io/AllForTheCode/pen/RyBMwq

FILE: CSS.JS

addClass(elementOrId,classname)

Add a css class to a html element

More information

Parameters:

Name	Type	Description
elementOrId	elementORstring	The elemnt or id of the html element to add a css class to
className	string	the class name to add

Alias's:

-

Usage examples:

- https://codepen.io/AllForTheCode/pen/BxvYmW

removeClass(elementOrId,className)

shortcut to remove a class from a html element

More information

Parameters:

Name	Type	Description
elementOrId	elementORstring	The elemnt or id of the html element to add a css class to
className	string	the class name to remove

Alias's:

-

Usage examples:

- https://codepen.io/AllForTheCode/pen/gzZvKL

hasClass(elementOrId, cls)

Check to see if an element has a class attached to it

More information

Parameters:

Name	Type	Description
elementOrId	string	The elemnt or id of the html element
cls	string	class to look for

Usage examples:

- https://codepen.io/AllForTheCode/pen/dewdwY

FILE: DATETIME.JS

getDaysBetween(startDateTime, endDateTime)

Gets the number of whole days between a start and end date

More information

Parameters:

Name	Type	Description
startDateTime	DateTime	start date
endDateTime	DateTime	end date

Alias's:

- getNoOfDaysBetween - getDaysBetweenDates

Usage examples:

- https://codepen.io/AllForTheCode/pen/pVqaGZ

getUKDateFromDate(dte)

Formats a date in the UK format

More information

Parameters:

Name	Type	Description
dte	Date

Usage examples:

- https://codepen.io/AllForTheCode/pen/RyEMwp

getUSDateFromDate(dte)

Formats a date in the US format

More information

Parameters:

Name	Type	Description
dte	Date	date

Usage examples:

- https://codepen.io/AllForTheCode/pen/XqoEWL

getUkDateFromDbDateTime(input)

get a uk date from a mysql db date value

More information

Parameters:

Name	Type	Description
input	MySQLDateTimeString	MySQL DB DateTime

Usage examples:

- https://codepen.io/AllForTheCode/pen/BxvePW

getUkDateTimeFromDbDateTime(input)

get a uk date from a mysql db date time value

More information

Parameters:

Name	Type	Description
input	MySQLDateTimeString	MySQL DB DateTime

Usage examples:

- https://codepen.io/AllForTheCode/pen/MGZdBB

getSQLDateTime()

gets the date time now for sql insert

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/wjRbEe

getDateTime(local)

gets the date time at a specified local

More information

Parameters:

Name	Type	Description
local	string	options are us or do not supply for en-gb

Usage examples:

- https://codepen.io/AllForTheCode/pen/GdPaYj

FILE: DEBUG.JS

openDebugWindow(html)

open a popup window with the html you wish to display in it

More information

Parameters:

Name	Type	Description
html	string	the html you wish to display in the popup window

Alias's:

- stringToWindow - htmlToWindow

Usage examples:

- https://codepen.io/AllForTheCode/pen/ELGWpE

FILE: DETECTION.JS

isMobile()

Detects if the device you are using is a mobile or not

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/KRbLdm

isAndroid()

Detects if the device you are using is android or not

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/RyEmgN

iOS()

Detects if the device you are using is iOS or not

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/ELGzXO

isFireFox()

Detects FireFox

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/mLaYMe

isChrome()

Detects Chrome

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/xjmNLM

isEdge()

Detects Edge

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/aGPrLP

isSafari()

Detects Safari

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/gzZJXr

isIE()

Detects IE

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/MGZdOG

isOpera()

Detects Opera

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/dewEJb

getIEVersion()

Gets version of IE

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/BxveJp

getBrowser()

Detects browser

More information

Usage examples:

- https://codepen.io/AllForTheCode/pen/GdPaQZ

getOS(testUserAgent)

Attempts to get the os from the user agent or the test user agent

More information

Parameters:

Name	Type	Description
string	testUserAgent	test user agent string

Usage examples:

- https://codepen.io/AllForTheCode/pen/erbaVj

FILE: DOM.JS

setHTML(elementOrId,html);

Quick shortcut for outputting html to an element

setHTML("header","Welcome");

More information

Parameters:

Name	Type	Description
elementOrId	stringIdOrHtmlElement	the element or the element id you wish to set the html of
html	string	the html string to insert into your element

Alias's:

- html

Usage examples:

- https://codepen.io/AllForTheCode/pen/KRbLER

getElementOffsetTop(elementId)

Gets an elements top offset

More information

Parameters:

Name	Type	Description
elementId	string	the element ID you wish to get the top offset of

Usage examples:

- https://codepen.io/AllForTheCode/pen/GdPaLr

centerAbsoluteElement(elementId)

Center element that is absolute positioned

More information

Parameters:

Name	Type	Description
elementId	string	element or id of element to center

Usage examples:

- https://codepen.io/AllForTheCode/pen/ZRGabV

scrollToElement(elementId, duration, offset)

Scroll to element on page

More information

Parameters:

Name	Type	Description
elementId	string	ID of element you wish to scroll to
duration	float	Duration in seconds
offset	number	How much to offset scroll by

Usage examples:

- https://codepen.io/AllForTheCode/pen/eKNeVq

FILE: EASING.JS

FILE: EVENTS.JS

addEvent(obj,type,fn,useCapture)

Shortcut for adding events with old browser compatibility

More information

Parameters:

Name	Type	Description
obj	object	The object you wish to attach the event listener to
type	string	The event type (e.type) mousedown, mouseup, click etc
fn	function	The function to call when the event is triggered
useCapture	boolean	Whether the event should be executed in the capturing or in the bubbling phase

Usage examples:

- https://codepen.io/AllForTheCode/pen/VxExLg

onReady(fn)

A replacement for using body onload and no need for jQuery's $(document).ready

More information

Parameters:

Name	Type	Description
fn	function	inline function or pass it a function for when your page is loaded and ready to be used

Alias's:

- ready

Usage examples:

- https://codepen.io/AllForTheCode/pen/GdYxVa

FILE: FORM.JS

isChecked(elementId)

Checks to if checkbox is checked or not

More information

Parameters:

Name	Type	Description
elementId	string	element id of the form element to check

Usage examples:

- https://codepen.io/AllForTheCode/pen/KRbjpx

isNumberKey(evt)

Checks if evt supplied (use on form input events via onkeyup or onkeydown)

More information

Parameters:

Name	Type	Description
evt	event	html onkeyup(event) or onkeydown(event)

Usage examples:

- https://codepen.io/AllForTheCode/pen/vjvqLg

removeAllSelectOptions(elementId)

Removes all the options in a select

More information

Parameters:

Name	Type	Description
elementId	string	id of select element

Usage examples:

- https://codepen.io/AllForTheCode/pen/mLaZEm - https://codepen.io/AllForTheCode/pen/rvoEME

parseJSONToSelect(j, selectElementIdOrElement, label, value)

parses a json object of key value pairs to a form select element

More information

Parameters:

Name	Type	Description
j	string	the json data
selectElementIdOrElement	elementOrIdString	the json data
label	string	of key value pair this is the key
value	string	of key value pair this is the value

Usage examples:

- https://codepen.io/AllForTheCode/pen/rvoEME

FILE: GEOMETRY.JS

AFTC.Point(x,y)

2D Point

More information

Parameters:

Name	Type	Description
x	number	x coordinate
y	number	y coordinate

Methods:

Name	Description
	position
	clone
	delta
	distance
	moveTo
	moveAtAngle
	applyVelocity
	angleRadians
	angleDeg
	rotate

Usage examples:

- https://codepen.io/AllForTheCode/pen/qYLzzm

AFTC.Rectangle(x, y, w, h)

Rectangle class, allos you to set x, y, width and height or a rectangle

More information

Parameters:

Name	Type	Description
x	number	x coordinate
y	number	y coordinate
w	number	w width
h	number	h height

Methods:

Name	Description
	offsetOuter
	offsetInner
	setX
	setY
	setW
	setH

Returns: AFTC.Rectangle

Usage examples:

- https://codepen.io/AllForTheCode/pen/JvQRKg

AFTC.Velocity(vx,vy)

AFTC.Velocity class helper

More information

Parameters:

Name	Type	Description
vx	number	velocity vector x
vy	number	velocity vector y

Methods:

Name	Description
flip	flip
flipX	flipX
flipY	flipY
multiply	multiply
divide	divide

Usage examples:

- https://codepen.io/AllForTheCode/pen/erxRBo

FILE: GET.JS

getFunctionName(fn)

tries to get the function name of a suppled function

More information

Parameters:

Name	Type	Description
fn	function	the function wish to get the name of

Usage examples:

- https://codepen.io/AllForTheCode/pen/YLBKRy

FILE: IS.JS

isInString(find,source)

check for string in string

More information

Parameters:

Name	Type	Description
string	find	The string to look for
string	source	The string to look in

Usage examples:

- https://codepen.io/AllForTheCode/pen/jxdONK

isEven(n)

check if input is even

More information

Parameters:

Name	Type	Description
n	number	variable / value you wish to test

Usage examples:

- https://codepen.io/AllForTheCode/pen/rvPNBR

isOdd(n)

check if input is odd

More information

Parameters:

Name	Type	Description
n	number	variable value you wish to test

Usage examples:

- https://codepen.io/AllForTheCode/pen/gzqOOW

isAlphaNumeric(input)

check if an input is an alpha numerical value ([a-z],[A-Z],[0-9] only)

More information

Parameters:

Name	Type	Description
string\|\|number	input	variable / value you wish to check

Usage examples:

- https://codepen.io/AllForTheCode/pen/pVGooO

isElement(o)

checks if your variable is an element or not

More information

Parameters:

Name	Type	Description
o	*	variable you wish to check

Usage examples:

- https://codepen.io/AllForTheCode/pen/RyvwPK

isElement2(element)

checks to see if your vairable is an element or not

More information

Parameters:

Name	Type	Description
element	*	the variable you wish to check

Usage examples:

- https://codepen.io/AllForTheCode/pen/RyvwPK

isDOM(obj)

checks to see if your variable is a DOM object

More information

Parameters:

Name	Type	Description
obj	object	variable to check

Usage examples:

- https://codepen.io/AllForTheCode/pen/JvxjYo

isBoolean(input)

checks if a variable is a boolean

More information

Parameters:

Name	Type	Description
input	*	variable to check

Alias's:

- isBool

Usage examples:

- https://codepen.io/AllForTheCode/pen/JvxjGo

isNumeric(n)

check if variable is numeric

More information

Parameters:

Name	Type	Description
n	*	variable to check

Alias's:

- isNumber

Usage examples:

- https://codepen.io/AllForTheCode/pen/bMzGEL

isArray(input)

check if variable is an array

More information

Parameters:

Name	Type	Description
input	*	variable to check

Usage examples:

- https://codepen.io/AllForTheCode/pen/rvPNeg

FILE: MISC.JS

cycle(pos, max)

cycles from 0 to max based on pos, will cycle back to 0 if over max

More information

Parameters:

Name	Type	Description
pos	number	position of max
max	number	max number to cycle to

Usage examples:

- https://codepen.io/AllForTheCode/pen/BxMZBZ

FILE: RANDOM.JS

getRandomInt(min,max)

returns a random number / int betwen your specified min and max values

More information

Parameters:

Name	Type	Description
min	number	the minimum your random number is allowed to go
max	number	the maximum your random number is allowed to go

Alias's:

- getRandom

Usage examples:

- https://codepen.io/AllForTheCode/pen/PeVqLp

getRandomThatsNot(min,max,not)

returns a random int betwen your specified min and max values but never the not value

More information

Parameters:

Name	Type	Description
min	number	the minimum your random number is allowed to go
max	number	the maximum your random number is allowed to go

Alias's:

- getRandom

Usage examples:

- https://codepen.io/AllForTheCode/pen/yEBZNq

getRandomFloat(min,max)

returns a random floating point number betwen your specified min and max values

More information

Parameters:

Name	Type	Description
min	number	min value
max	number	max value

Usage examples:

- https://codepen.io/AllForTheCode/pen/gzqaYm

randomString(length)

get a random string of a specified length

More information

Parameters:

Name	Type	Description
length	number	the length of the string you wish to generate

Alias's:

- getRandomString

Usage examples:

- https://codepen.io/AllForTheCode/pen/QrYjwr

getUID(length)

Generates a random id

More information

Parameters:

Name	Type	Description
length	number	length of the unique id to generate

Alias's:

- getUID - generateUID

Usage examples:

- https://codepen.io/AllForTheCode/pen/NMoGGY

getArrayOfRandomNumbers(arraySize,min,max)

generate an array of random number between your max and min values

More information

Parameters:

Name	Type	Description
arraySize	number	the number of random numbers to generate also the array size that will be returned
min	number	the minimum your random number is allowed to be
max	number	the maximum your random number is allowed to be

Usage examples:

- https://codepen.io/AllForTheCode/pen/NMoGdz

getArrayOfRandomStrings(arraySize,strLength)

generate an array of random string of a specified length

More information

Parameters:

Name	Type	Description
arraySize	number	the number of random strings to generate also the array size that will be returned
strLength	number	the length of the strings to be generated

Usage examples:

- https://codepen.io/AllForTheCode/pen/BVNJvB

guid()

generates a guid

More information

Alias's:

- getGUID

Usage examples:

- https://codepen.io/AllForTheCode/pen/MGLayZ

getWeightedRandom(odds, iterations)

Get a weighted random based on odds and iterations

More information

Parameters:

Name	Type	Description
odds	array	array of odds
iterations	number	number of iterations to run on each number test

Usage examples:

- https://codepen.io/AllForTheCode/pen/RyvWjZ

FILE: STRING.JS

limitLengthInWords(str, maxWords)

Limit a string in length of words

More information

Parameters:

Name	Type	Description
str	string	the original string to limit
maxWords	number	the number of words you wish to limit to

Returns: {output

Usage examples:

- https://codepen.io/AllForTheCode/pen/xjMdye

cleanJSONString(s)

Attempts to clean a json string

More information

Parameters:

Name	Type	Description
s	string	input string

Usage examples:

- https://codepen.io/AllForTheCode/pen/BxMRER

escapeHTML(input)

Attempts to escape a html string

More information

Parameters:

Name	Type	Description
input	string	the string you wish to escape

Usage examples:

- https://codepen.io/AllForTheCode/pen/PerGRJ

cutStringTo(input, len)

sets the length of a string from left to right

More information

Parameters:

Name	Type	Description
input	string	what string do you want to set the length of?
length	number	the length you want the string to be

Alias's:

- cutStringTo - cutString - cutStringLength - setStrLen - trimStringLength

Usage examples:

- https://codepen.io/AllForTheCode/pen/VxJKEm

trimStringBy(input, trimBy)

Trims the length of a string by a value

More information

Parameters:

Name	Type	Description
input	string	The string you want to trim
trimBy	number	How many characters do you want to trim off the end

Alias's:

- tTrim

Usage examples:

- https://codepen.io/AllForTheCode/pen/BxgLvr

leftTrim(str, by)

Trims the left of a string by a specified amount

More information

Parameters:

Name	Type	Description
string	str	The string you want to trim
number	by	How many characters do you want to trim off the end

Alias's:

- lTrim

Usage examples:

- https://codepen.io/AllForTheCode/pen/wXayva

getFileExtension(input)

Attempts to get the file extension from a file path string

More information

Parameters:

Name	Type	Description
string	str	the file path string

Usage examples:

- https://codepen.io/AllForTheCode/pen/OZeRqv

getFileExtension2(input)

Attempts to get the file extension from a file path string

More information

Parameters:

Name	Type	Description
string	str	the file path string

Usage examples:

- https://codepen.io/AllForTheCode/pen/OZeRqv

getLastPartOfUrl(url)

Gets the last part of a URL

More information

Parameters:

Name	Type	Description
string	url	url to process

Usage examples:

- https://codepen.io/AllForTheCode/pen/gzNwNv

removeFileFromPath(path)

Attempts to remove the file from a file path string

More information

Parameters:

Name	Type	Description
string	path	path

Usage examples:

- https://codepen.io/AllForTheCode/pen/QrXGWY

getAnchor(url)

Get anchor from url

More information

Parameters:

Name	Type	Description
string	url	The url to get the anchor from

Usage examples:

- https://codepen.io/AllForTheCode/pen/xxxxxxx

String.prototype.startsWith(str)

ES6 supports the startsWith(), this is for pre ES6 support

More information

Parameters:

Name	Type	Description
string	str	string to check

Usage examples:

- https://codepen.io/AllForTheCode/pen/xxxxxxx

String.prototype.endsWith(str)

ES6 supports endsWith(), this is for pre ES6 support

More information

Parameters:

Name	Type	Description
string	str	string to check

Usage examples:

- https://codepen.io/AllForTheCode/pen/xxxxxxx

getStringBetween(input,start,end)

Gets a string between two other strings

More information

Parameters:

Name	Type	Description
string	input	input string to check
string	start	start string marker
string	end	end string marker

Usage examples:

- https://codepen.io/AllForTheCode/pen/xxxxxxx

getAllStringsBetween(str,start,end)

Gets all strings between two other strings (multi match)

More information

Parameters:

Name	Type	Description
string	str	input string to check
string	start	start string marker
string	end	end string marker

Usage examples:

- https://codepen.io/AllForTheCode/pen/xxxxxxx

FILE: TABLES.JS

FILE: VALIDATION.JS

validateEmail(email)

Validats an email address

More information

Parameters:

Name	Type	Description
string	email	email address

Usage examples:

- https://codepen.io/AllForTheCode/pen/xjogjy

FILE: VIDEO.JS

FILE: AFTC.COLOR.JS

AFTC.Color({params})

Color allows you to create, convert, lighten or darken colours and more.

var color1 = new AFTC.Color(); // creates a random color
var color2 = new AFTC.Color({r
var color3 = new AFTC.Color({r
log( color3.getHex() ); // Outputs the hex code of color 3

More information

Parameters:

Name	Type	Description
object	params	parameters object

Methods:

Name	Description
lighten(percent,spectrum)	lighten the color by precent and optional spectrum {r
darken(percent,spectrum)	darken the color by precent and optional spectrum {r
randomizeColor	randomises the colour
getRGBString	returns the RGB value of the color
getRGBAString	returns the RGBA value of the color
getHexString	returns the HEX value of the color
getHex	returns the HEX value of the color
hex	returns the HEX value of the color
getRGB	returns the RGB value of the color
rgb	returns the RGB value of the color
getRGBA	returns the RGBA value of the color
rgba	returns the RGBA value of the color
setRGB	returns the RGB value of the color
setHex	returns the HEX value of the color

Usage examples:

- https://codepen.io/AllForTheCode/pen/mLZRge

getRandomColor()

returns a random RGB object o.r, o.g, o.g

More information

FILE: AFTC.ANIMATE.JS

AFTC.Animate(elementId, onComplete)

Quick and easy css animation for nearly every css element style

var anim1 = new AFTC.Animate("box1", onCompleteFunction);
anim1.wait(2); // wait in 2 seconds
anim1.set("backgroundColor","RGBA(255,255,255,0.5)"); // sets background color to white 50% opacity
anim1.anim("fontColor","RGBA(255,0,0,1)",1.5); // animates the font color to red over 1.5 seconds
anim1.set(["html","paddingLeft",left"],["hello","10px","100px"],[1,2,3]); // sets innerHTML, padding-left and left position over 1, 2 and 3 seconds

More information

Usage examples:

- see usage example in test/animation.htm - https://codepen.io/AllForTheCode/pen/MXYGob - https://codepen.io/AllForTheCode/pen/MXYPqq - https://codepen.io/AllForTheCode/pen/xzbymv

FILE: AFTC.AUDIO.JS

AFTC.Audio({options})

An audio player with preloading capabilities, looping abilities and loop offset capabilities

More information

Parameters:

Name	Type	Description
s	src	String or Array of urls/paths to sound files
s	cache	To cache or not to cache
s	volume	0 to 1
s	repeat	-1 forever, 0 play once only, or the number of times to repeat
s	preload	true or false
s	offsetLoopBy	the sample offset from the end that you wish to loop by can help remove loop gaps
s	onUpdate	the function you wish to run when your sound is playing provides and info object
s	onReady	the function you wish to run when your sound is ready and can play
s	onComplete	the function you wish to run when your sound has finished playing
s	hideWarnings	hides notices in console for compatibility issues when not using mp3 etc

Methods:

Name	Description
play	Play audio
stop	Stop audio
pause	Pause audio
resume	Resume ausio

Usage examples:

- https://codepen.io/AllForTheCode/pen/NzWrvm

FILE: AFTC.COLOR.JS

AFTC.Color({params})

Color allows you to create, convert, lighten or darken colours and more.

var color1 = new AFTC.Color(); // creates a random color
var color2 = new AFTC.Color({r
var color3 = new AFTC.Color({r
log( color3.getHex() ); // Outputs the hex code of color 3

More information

Parameters:

Name	Type	Description
object	params	parameters object

Methods:

Name	Description
lighten(percent,spectrum)	lighten the color by precent and optional spectrum {r
darken(percent,spectrum)	darken the color by precent and optional spectrum {r
randomizeColor	randomises the colour
getRGBString	returns the RGB value of the color
getRGBAString	returns the RGBA value of the color
getHexString	returns the HEX value of the color
getHex	returns the HEX value of the color
hex	returns the HEX value of the color
getRGB	returns the RGB value of the color
rgb	returns the RGB value of the color
getRGBA	returns the RGBA value of the color
rgba	returns the RGBA value of the color
setRGB	returns the RGB value of the color
setHex	returns the HEX value of the color

Usage examples:

- https://codepen.io/AllForTheCode/pen/mLZRge

getRandomColor()

returns a random RGB object o.r, o.g, o.g

More information

FILE: AFTC.VISIBILITY.JS

FILE: AFTC.XHR.JS

AFTC.XHR({options})

Quick and easy xhr/ajax

More information

Parameters:

Name	Type	Description
s	seelink	please review link

Usage examples:

- https://codepen.io/AllForTheCode/pen/dKodKx

Found this useful? Please Donate...

Any and all donations to help keep active development and the lights on are more than welcome.

Files

readme.md

Latest commit

History

readme.md

File metadata and controls

AFTC.js

A collection of usefull everyday utilities / functions.

Find AFTC.JS useful? Please Donate...

Want the ES6+ modules version? aftc-modules.js

What's new

Added loadCss(href,onComplete)

Added alias loadScript for loadJs

Reduced core to it's bare minimum

Added fadeTo and fadeFromTo to AFTC.Color()

AnimationFrameStack

aftc.js v1.6.x

Added loadJS(src,onComplete,onProgress)

attachDebug(no, ele)

Installation

Use aftc.min.js in your html include or vendor merged packages.

Use aftc-modules.js in your ES6 projects for tree shacking.

File descirptions

NOTE: You can always customise your build of the AFTC.JS, see the Build Guide below.

Build Guide

Step by step

NPMJS Has issues with Docs from GITHUB from this point, want to see the docs better please visit the github page https://github.com/DarceyLloyd/AFTC.js.git

Quick links:

Browse on codepen

FILE: AFTC.JS

argsToObject(fArgs, obj, strict)

Parameters:

Alias's:

Usage examples:

getElementById(id)

Parameters:

Alias's:

Usage examples:

querySelector(query)

Parameters:

Alias's:

Usage examples:

getElementsByName(name)

Parameters:

Usage examples:

getElementByName(name)

Parameters:

Usage examples:

getElementsByClassName(className)

Parameters:

Usage examples:

getElementByClassName(className)

Parameters:

Usage examples:

getElementsByTagName(tagName)

Parameters:

getElementByTagName(tagName)

Parameters:

log(*)

Parameters:

Alias's:

Usage examples:

logTo(element or elementId,string,append:boolean=true)

Parameters:

cls()

Alias's:

Usage examples:

FILE: ARRAY.JS

arrayRemoveIndex(arr,index)

Parameters:

Usage examples:

isStringInArray(needle,haystack)

Parameters:

Usage examples:

arrayContains(needle,haystack)

Parameters:

Alias's:

Usage examples:

arrayEmpty(arr)

Parameters:

**log(*)**