AFTC.js

A collection of usefull everyday utilities / functions.

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

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

Quick links: addClass(elementOrId,classname) addEvent(obj,type,fn,useCapture) AFTC.Animate() AFTC.Animate(elementId, onComplete) AFTC.Audio({options}) AFTC.Color({params}) AFTC.Point(x,y) AFTC.Rectangle(x, y, w, h) AFTC.Velocity(vx,vy) AFTC.XHR({options}) argsToObject(fArgs, obj, strict) arrayContains(needle,haystack) arrayEmpty(arr) arrayGetMin(arr) arrayRemoveIndex(arr,index) arrayShuffle(arr) arrayShuffle2(arr) arrayToSingleLineString(arr) boolToString(bool) boolToYesNo(bool) centerAbsoluteElement(elementId) cleanJSONString(s) cls() convertToArray(val) cutStringTo(input, len) cycle(pos, max) degToRad(input) escapeHTML(input) exitFullScreen() getAllStringsBetween(str,start,end) getAnchor(url) getArrayOfRandomNumbers(arraySize,min,max) getArrayOfRandomStrings(arraySize,strLength) getBooleanFrom(input) getBrowser() getCookie(name) getDateTime(local) getDaysBetween(startDateTime, endDateTime) getElementByClassName(className) getElementById(id) getElementByName(name) getElementByTagName(tagName) getElementOffsetTop(elementId) getElementsByClassName(className) getElementsByName(name) getElementsByTagName(tagName) getFileExtension(input) getFileExtension2(input) getFunctionName(fn) getIEVersion() getLastPartOfUrl(url) getMaxFromArray(arr) getOS(testUserAgent) getRandomColor() getRandomFloat(min,max) getRandomInt(min,max) getRandomThatsNot(min,max,not) getSQLDateTime() getStringBetween(input,start,end) getUID(length) getUKDateFromDate(dte) getUkDateFromDbDateTime(input) getUkDateTimeFromDbDateTime(input) getUSDateFromDate(dte) getWeightedRandom(odds, iterations) goFullScreen(element) guid() hasClass(elementOrId, cls) hexToRgb(hex) iOS() isAlphaNumeric(input) isAndroid() isArray(input) isBoolean(input) isChecked(elementId) isChrome() isDOM(obj) isEdge() isElement(o) isElement2(element) isEven(n) isFireFox() isIE() isInString(find,source) isMobile() isNumberKey(evt) isNumeric(n) isOdd(n) isOpera() isSafari() isStringInArray(needle,haystack) leftTrim(str, by) limitLengthInWords(str, maxWords) log(*) logTo(element,str,append) onReady(fn) openDebugWindow(html) parseArrayToFloat(arr) parseArrayToInt(arr) parseJSONToSelect(j, selectElementIdOrElement, label, value) querySelector(query) radToDeg(input) randomString(length) redirect(url) removeAllSelectOptions(elementId) removeClass(elementOrId,className) removeFileFromPath(path) rgb2Hex(r,g,b) rgbToHex(r,g,b) scrollToElement(elementId, duration, offset) setCookie(name, value) setHTML(elementOrId,html); String.prototype.endsWith(str) String.prototype.startsWith(str) stringToBool(str) toArray(v) toHex(num) trimStringBy(input, trimBy) validateEmail(email)

Quick and easy args to object

Returns: null

Gets an element from the DOM by ID. NOTE

Returns: html element

Gets an element from the DOM via DOM Query. NOTE

Returns: html element

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

Returns: array of html elements

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

Returns: html elements

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

Returns: array of html elements

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

Returns: html elements

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

Returns: array of html elements

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

Returns: html element

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

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

Clears the console if supported

remove a specified index from an array

Returns: array

Check to see if a string is in an array

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

clears/empties an array for garbage collection

returns the maximum value in an array

returns the minimum value in an array

shuffles an array (method 1)

shuffles an array (method 2)

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

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

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

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

Exits full screen mode

converts radians to degrees

converts degrees to radians

Converts a number to hex

Returns: hexidecimal value

converts boolean to a string of true or false

converts a boolean to yes or no

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

converts an input to a boolean

parses all values in array to float

parses all values in array to float

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

rgb to hex

rgb to hex

hexToRgb

Sets a cookie by name with a value

Gets the value of a cookie by name

Add a css class to a html element

shortcut to remove a class from a html element

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

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

Formats a date in the UK format

Formats a date in the US format

get a uk date from a mysql db date value

get a uk date from a mysql db date time value

gets the date time now for sql insert

gets the date time at a specified local

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

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

Detects if the device you are using is android or not

Detects if the device you are using is iOS or not

Detects FireFox

Detects Chrome

Detects Edge

Detects Safari

Detects IE

Detects Opera

Gets version of IE

Detects browser

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

Quick shortcut for outputting html to an element

setHTML("header","Welcome");

Gets an elements top offset

Center element that is absolute positioned

Scroll to element on page

Shortcut for adding events with old browser compatibility

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

Checks to if checkbox is checked or not

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

Removes all the options in a select

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

2D Point

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

Returns: AFTC.Rectangle

AFTC.Velocity class helper

tries to get the function name of a suppled function

check for string in string

check if input is even

check if input is odd

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

checks if your variable is an element or not

checks to see if your vairable is an element or not

checks to see if your variable is a DOM object

<h