Front end utilities that I commonly use, packaged as an ESModule.

• Get Started
  
• Color Log
  
• Color Error
  
• Wait Timeout
  
• Element Things (3)
  
• Randoms (3)
  
• Converters (3)
  
• Calculations (2)
  
• noResizeTransition
  
• onDOMLoad
  

You can import this module just like any other ESModule.

import { color, wait, rand } from './filepath/jsamutils.js'

// or

import * as utils from './filepath/jsamutils.js'

Available imports:
color, wait,
div, create, el,
rand, randFloor, randBool,
pxToVmax, pxToVmin, msToTime,
angle, distance,
noResizeTransition,
onDOMLoad

color.log adds some style to your browser console logs.

To use, simply log as you normally would, and then add a string as the last parameter with the styles you want, seperated by spaces.

color.log('Hi', 'green big')

Color Log uses groups. For inline logs, such as one the example above would produce, you can click on the log to expand the group and expose the trace for that log.

Color Log will concat your log items to one line, as long as all items are strings or numbers.

If any logged items are not a number or string, it will log an expanded group, containing a normal log (to preserve normal object/array console capabilities). The trace will be displayed underneath as an expandable sub-group.

Available styles:

Colors: 'red' 'orange' 'yellow' 'green' 'blue' 'purple'
Sizes: 'small' 'big' 'huge'
Other: 'nobg' (removes background)

You don't have to pass styles, and in that case, a default styling will be used.

Keep in mind that if the last passed parameter is a string that just happens to contain any of these style keywords, that string will not be logged, all valid styles in that string will be used, and the rest of that string will be ignored.

color.err allows you to label your errors, and applies a default style.

It accepts 1 or 2 parameters, the first being the error label, the second being the error.

If only 1 parameter is passed, it will be used as the error.

If the (error) parameter passed is not an Error object, one will be created, using the passed argument as the message.

The logged message is a group that can be clicked to reveal the trace stack.

// these are all valid ways of using color.err

color.err('this is the error')
color.err('error label', 'this is the error')

try {
    // ...
}
catch(error){
    color.err(error)
    color.err('error label', error)
}

Note: color.err always uses default styles 'red' and 'big', so there is no need to pass any styles.

wait is a shortcut for setTimeout that reverses the order of the parameters, and returns a clear() function.

wait accepts 1 or 2 parameters.

If only one parameter is passed, it must be a function, and will be treated the same as setTimeout(fn, 0)

If two parameters are passed, the first will be used as time (in ms), and the second must be a function.

When assigning wait() to a variable, wait will return an object with a single function: clear()

If clear is called on the function before the wait time runs out, it will clear the timeout.

Any following calls to clear will print an error to the console, notifying you that the timeout has already been cleared.

If the function was already executed, wait will also print an error to console if you try to clear.

var timeout = wait(100, ()=>color.log('function executed'))
timeout.clear() // timeout clears
timeout.clear() // error: can't clear, timeout already cleared

var timeout = wait(100, ()=>color.log('function executed'))
wait(101, timeout.clear) 
// ... 100ms passes
// log: function executed
// error: can't clear, function already executed

If you don't want clear to report errors, you can pass any truthy value as a parameter.

var timeout = wait(100, ()=>color.log('function executed'))
timeout.clear() // timeout clears
timeout.clear(true) // nothing happens
timeout.clear(1) // also nothing

div is used to create a div element.

It accepts 0 - 2 parameters.

The first parameter is a string that contains the css classes that you want to add to that element.

The second parameter is the element that you want to append the div to.

If no second parameter is passed, appending the div will be up to you.

If no parameters are passed, a simple div, (empty classList, not appended) will be returned.

var newDiv = div('cssClassesHere', elementToAppendTo)

create is similar to div except that it requires a string as a first parameter, indicating what kind of element you want to create.

The second parameter is optional, and should be a string containing the css classes you want to add to the created element.

The third parameter is optional, and should be an element that you want to append the created element to.

If no third parameter is passed, appending the element will be up to you.

var newElement = create('img', 'cssClassesHere', elementToAppendTo)

el is a shortcut for document.querySelector.

It accepts one parameter, a string identifying the element you want to query.

el adopts it's functionality from document.querySelector, so it works with IDs, and css classes.

In the case that there are mutiple items for the query to find, it will only return the first one.

var refByClass = el('.someCssClass')
var refByID = el('#someElementID')

rand is a shortcut for Math.random() with a little bit of added functionality.

It accepts 0 - 2 number parameters.

If no parameters are passed, it will return a number between 0 and 1.

If only one parameter is passed, rand will return a number between that number and 0.

If two parameters are passed, it will return a number between those numbers.

rand will not include the larger number, even if the larger number is 0.

rand() // 0 to 1, not including 1
rand(-5) // -5 to 0, not including 0
rand(-9, 9) // -9 to 9, not including 9
rand(9, -9) // same, order doesn't matter

randFloor has the same functionality as rand, but with Math.floor() applied to it.

This causes it to return a random whole number.

Essentially, it is Math.floor(rand()).

Keep in mind that using randFloor with no parameters will always return 0, and is thus pointless to do so.

You guessed it, randBool returns a random Boolean value. Impressive, I know.

It is literally Boolean(randFloor(2)).

It will always return either true or false.

pxToVmax converts a number of pixels to the corresponding vmax value, based on the size of the current window.

It requires one number parameter, the number of pixels that you want to convert.

pxToVmin is the same as pxToVmax except that it calculates vmin instead of vmax.

It also requires one number parameter, the number of pixels that you want to convert.

msToTime converts milliseconds to a string representing the time in English.

It requires one number parameter, the number of milliseconds that you want to convert.

msToTime will only use the applicable time identifiers, so if the time is less than a day, 'days' will not be included.

msToTime(9999999) // 2 hours, 46 minutes and 39 seconds
msToTime(9999999 * 24) // 2 days, 18 hours, 39 minutes and 59 seconds
msToTime(90000000) // 1 day and 1 hour

angle returns a number, representing the angle between two points.

It requires four number parameters x1, y1, x2, y2, in that order.

The return value will be a number between 0 and 360, with 0 meaning up, and 90 to the right.

angle(0, 0, 1, 1) // 45

distance returns a number, representing the distance between two points.

It requires four number parameters x1, y1, x2, y2, in that order.

The return value will either be a positive number, or 0 if the points are the same.

distance(0, 0, 1, 1) // 1.4142135623730951

noResizeTransition is a module that prevents elements from animating css transitions during a window resize.

It works by listening for the resize event, and then adds a css class named notransition onto all elements that are added to the module.

It removes the class from all added elements 250ms after the window has stopped resizing.

For the module to work, you must add the following class to your stylesheet:

.notransition{
    transition: none !important;
}

The module exposes 3 functions that you can use, add(), remove(), and inspect().

add() requires at least one element as a parameter, but can accept an unlimited amount.

After adding an element, it will no longer transition when a user resizes their window.

var element = div()
noResizeTransition.add(element)

Note: noResizeTransition will not work if you have specified a transition using JavaScript. It will only override regular css declarations.

remove() requires at least one element as a parameter, but can accept an unlimited amount.

After removing an element, it will no longer exist in the array of elements to add the notransition class to.

inspect() doesn't accept any parameters, and when called, it will log the array of elements that have been added to the module.

var element = div()
noResizeTransition.add(element)
noResizeTransition.add(document.body)
noResizeTransition.remove(element)
noResizeTransition.inspect() // [body]

onDOMLoad is a function that accepts an unlimited amount of functions as parameters.

When the window detects the DOMContentLoaded event, it will execute all passed functions.

onDOMLoad(
    ()=> color.log('DOM Loaded')
)
// ... DOM loads
// log: DOM Loaded

If the DOM is already loaded, onDOMLoad will immediately place the passed functions on the event loop.

This gives the engine a chance to finish initializing all variables and functions in your code before your functions execute.