AFTC.js

A collection of usefull everyday utilities / functions.

Find AFTC.JS useful? Please Donate...

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

npm i aftc-modules

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

Quick links:

Browse on codepen

FILE: AFTC.JS

---

argsToObject(fArgs, obj, strict)

Quick and easy args to object

Usage examples:

getElementById(id)

Gets an element from the DOM by ID. NOTE

Usage examples:

querySelector(query)

Gets an element from the DOM via DOM Query. NOTE

Usage examples:

getElementsByName(name)

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

Usage examples:

getElementByName(name)

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

Usage examples:

getElementsByClassName(className)

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

Usage examples:

getElementByClassName(className)

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

Usage examples:

getElementsByTagName(tagName)

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

getElementByTagName(tagName)

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

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

Usage examples:

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

cls()

Clears the console if supported

Usage examples:

FILE: ARRAY.JS

---

arrayRemoveIndex(arr,index)

remove a specified index from an array

Usage examples:

isStringInArray(needle,haystack)

Check to see if a string is in an array

Usage examples:

arrayContains(needle,haystack)

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

Usage examples:

arrayEmpty(arr)

clears/empties an array for garbage collection

Usage examples:

getMaxFromArray(arr)

returns the maximum value in an array

Usage examples:

arrayGetMin(arr)

returns the minimum value in an array

Usage examples:

arrayShuffle(arr)

shuffles an array (method 1)

Usage examples:

arrayShuffle2(arr)

shuffles an array (method 2)

Usage examples:

arrayToSingleLineString(arr)

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

Usage examples:

convertToArray(val)

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

Usage examples:

FILE: BROWSER.JS

---

redirect(url)

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

Usage examples:

goFullScreen(element)

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

Usage examples:

exitFullScreen()

Exits full screen mode

Usage examples:

FILE: CONVERSION.JS

---

radToDeg(input)

converts radians to degrees

Usage examples:

degToRad(input)

converts degrees to radians

Usage examples:

toHex(num)

Converts a number to hex

Usage examples:

boolToString(bool)

converts boolean to a string of true or false

Usage examples:

boolToYesNo(bool)

converts a boolean to yes or no

Usage examples:

stringToBool(str)

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

Usage examples:

getBooleanFrom(input)

converts an input to a boolean

Usage examples:

parseArrayToFloat(arr)

parses all values in array to float

Usage examples:

parseArrayToInt(arr)

parses all values in array to float

Usage examples:

toArray(v)

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

Usage examples:

rgb2Hex(r,g,b)

rgb to hex

rgbToHex(r,g,b)

rgb to hex

hexToRgb(hex)

hexToRgb

FILE: COOKIES.JS

---

setCookie(name, value, expiryTimeInDays)

Sets a cookie by name with a value

Usage examples:

getCookie(name)

Gets the value of a cookie by name

Usage examples:

FILE: CSS.JS

---

addClass(elementOrId,classname)

Add a css class to a html element

Usage examples:

removeClass(elementOrId,className)

shortcut to remove a class from a html element

Usage examples:

hasClass(elementOrId, cls)

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

Usage examples:

FILE: DATETIME.JS

---

getDaysBetween(startDateTime, endDateTime)

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

Usage examples:

getUKDateFromDate(dte)

Formats a date in the UK format

Usage examples:

getUSDateFromDate(dte)

Formats a date in the US format

Usage examples:

getUkDateFromDbDateTime(input)

get a uk date from a mysql db date value

Usage examples:

getUkDateTimeFromDbDateTime(input)

get a uk date from a mysql db date time value

Usage examples:

getSQLDateTime()

gets the date time now for sql insert

Usage examples:

getDateTime(local)

gets the date time at a specified local

Usage examples:

FILE: DEBUG.JS

---

openDebugWindow(html)

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

Usage examples:

FILE: DETECTION.JS

---

isMobile()

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

Usage examples:

isAndroid()

Detects if the device you are using is android or not

Usage examples:

iOS()

Detects if the device you are using is iOS or not

Usage examples:

isFireFox()

Detects FireFox

Usage examples:

isChrome()

Detects Chrome

Usage examples:

isEdge()

Detects Edge

Usage examples:

isSafari()

Detects Safari

Usage examples:

isIE()

Detects IE

Usage examples:

isOpera()

Detects Opera

Usage examples:

getIEVersion()

Gets version of IE

Usage examples:

getBrowser()

Detects browser

Usage examples:

getOS(testUserAgent)

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

Usage examples:

FILE: DOM.JS

---

setHTML(elementOrId,html);

Quick shortcut for outputting html to an element

setHTML("header","Welcome");

Usage examples:

getElementOffsetTop(elementId)

Gets an elements top offset

Usage examples:

centerAbsoluteElement(elementId)

Center element that is absolute positioned

Usage examples:

scrollToElement(elementId, duration, offset)

Scroll to element on page

Usage examples:

FILE: EASING.JS

---

FILE: EVENTS.JS

---

addEvent(obj,type,fn,useCapture)

Shortcut for adding events with old browser compatibility

Usage examples:

onReady(fn)

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

Usage examples:

FILE: FORM.JS

---

isChecked(elementId)

Checks to if checkbox is checked or not

Usage examples:

isNumberKey(evt)

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

Usage examples:

removeAllSelectOptions(elementId)

Removes all the options in a select

Usage examples:

parseJSONToSelect(j, selectElementIdOrElement, label, value)

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

Usage examples:

FILE: GEOMETRY.JS

---

AFTC.Point(x,y)

2D Point

Usage examples:

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

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

Usage examples:

AFTC.Velocity(vx,vy)

AFTC.Velocity class helper

Usage examples:

FILE: GET.JS

---

getFunctionName(fn)

tries to get the function name of a suppled function

Usage examples:

FILE: IS.JS

---

isInString(find,source)

check for string in string

Usage examples:

isEven(n)

check if input is even

Usage examples:

isOdd(n)

check if input is odd

Usage examples:

isAlphaNumeric(input)

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

Usage examples:

isElement(o)

checks if your variable is an element or not

Usage examples:

isElement2(element)

checks to see if your vairable is an element or not

Usage examples:

isDOM(obj)

checks to see if your variable is a DOM object

Usage examples:

isBoolean(input)

checks if a variable is a boolean

Usage examples:

isNumeric(n)

check if variable is numeric

Usage examples:

isArray(input)

check if variable is an array

Usage examples:

FILE: MISC.JS

---

cycle(pos, max)

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

Usage examples:

FILE: RANDOM.JS

---

getRandomInt(min,max)

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

Usage examples:

getRandomThatsNot(min,max,not)

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

Usage examples:

getRandomFloat(min,max)

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

Usage examples:

randomString(length)

get a random string of a specified length

Usage examples:

getUID(length)

Generates a random id

Usage examples:

getArrayOfRandomNumbers(arraySize,min,max)

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

Usage examples:

getArrayOfRandomStrings(arraySize,strLength)

generate an array of random string of a specified length

Usage examples:

guid()

generates a guid

Usage examples:

getWeightedRandom(odds, iterations)

Get a weighted random based on odds and iterations

Usage examples:

FILE: STRING.JS

---

limitLengthInWords(str, maxWords)

Limit a string in length of words

Usage examples:

cleanJSONString(s)

Attempts to clean a json string

Usage examples:

escapeHTML(input)

Attempts to escape a html string

Usage examples:

cutStringTo(input, len)

sets the length of a string from left to right

Usage examples:

trimStringBy(input, trimBy)

Trims the length of a string by a value

Usage examples:

leftTrim(str, by)

Trims the left of a string by a specified amount

Usage examples:

getFileExtension(input)

Attempts to get the file extension from a file path string

Usage examples:

getFileExtension2(input)

Attempts to get the file extension from a file path string

Usage examples:

getLastPartOfUrl(url)

Gets the last part of a URL

Usage examples:

removeFileFromPath(path)

Attempts to remove the file from a file path string

Usage examples:

getAnchor(url)

Get anchor from url

Usage examples:

String.prototype.startsWith(str)

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

Usage examples:

String.prototype.endsWith(str)

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

Usage examples:

getStringBetween(input,start,end)

Gets a string between two other strings

Usage examples:

getAllStringsBetween(str,start,end)

Gets all strings between two other strings (multi match)

Usage examples:

FILE: TABLES.JS

---

FILE: VALIDATION.JS

---

validateEmail(email)

Validats an email address

Usage examples:

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

Usage examples:

getRandomColor()

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

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

Usage examples:

FILE: AFTC.AUDIO.JS

---

AFTC.Audio({options})

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

Usage examples:

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

Usage examples:

getRandomColor()

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

FILE: AFTC.VISIBILITY.JS

---

FILE: AFTC.XHR.JS

---

AFTC.XHR({options})

Quick and easy xhr/ajax

Usage examples:

Found this useful? Please Donate...

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