alexiscolin / utils

🛠️ Personal helpers functions

🛠️ UTILS

Lightweight personal utilities for javascript manipulation.

1. createElement
2. getComputedTranslateXY
3. ancestorFinder
4. watch
5. SVGLength
6. math.createAffine
7. math.random
8. math.shuffle

• classAction
• prefixBrowser
• eventBinder
• rAF
• wordWrapper
• createPromise
• debounce
• throttle

createElement

This function create DOM elements with styles, attributes, content and let you insert it in the DOM through multiple options.

SYNTAX

utils.createElement([option, insert]);

USE

import { utils } from 'utils';

let el = utils.createElement({
    type: 'a',
    link: 'image.png',
    style: 'my-first-style my-second-style',
    attributes: {'target': '_blank', 'title': 'this is awesome'},
    content: 'click here'
  },{
    target: document.getElementById('target'),
    type: 'sibling',
    method: 'after'
  });

OPTIONS AND SETTINGS

This function has two optionals parameters you can use with object type argument. The first one is set in order to define element configuration wherheas the second one is used in order to configure the insertion in the DOM. Several optional properties can be set inside of them:

Option object (1st argument)

option	type	explanation	exemple
type - default: 'div'	String	Element type you want to create	'type' : 'img'
id	String	Id that you may want to set on the element.	'id' : 'myID'
style	String	You can set one or multiple classes by adding them in string separated by space.	'style': 'style1 style2'
	Object	You can also set inline style using an object listing all the style you want to apply, separated by comma.	'style': { 'height': '200px', 'z-index': '-1' }
attributes	Object	List of attributes to apply. Think about `target` or `title` for <a> element or `alt` for <img> element. Data attributes can also be set.	'attributes': { 'data-attr' : 'true', 'target': '_blank', 'title': 'titre' }
src	String	Link to the image for src attribute on media elements.	'src' : './myimage.png'
link	String	Target you want to link with href attribute on link elements (internal or external links are OK)	'link' : 'mylink.html'
content	String	String that will be added to the content of the new element.	'content' : 'my content here'
	HTMLNode	Node that will be added to the content of the new element	'content': '<span>here</span>'

Insert object (2nd argument)

option	type	value	explanation	exemple
target	HTMLNode		Target element that is the reference for adding the new element in the DOM.	'target' : targetEl
type - default: 'sibling'	String	sibling	The new element will be adding as a sibling of the targeted element.	'type' : 'sibling'
		container	The new element will be adding as a child of targeted element.	'type' : 'container'
method default: 'after'	String	before	The new element will be added before the target in case of sibling type or as a first child of the target in case of container type.	'method' : 'before'
		after	The new element will be added after the target in case of sibling type or as a last child of the target in case of container type.	'method' : 'after'

---

getComputedTranslateXY

Get CSS translate state of DOM element.

---

ancestorFinder

Look for a parent element that matches for a specific class.

---

Watch

Watch function let you create a proxy object in order to listen for properties values changes. Then, you can create an object with many properties, update them and trigger some functions if these properties are listened. This is useful to avoid regenerate the DOM for listening and let modules interact under the hood.

SYNTAX

let proxy = utils.watch({});

USE

import { utils } from 'utils';

const obj = {
    value1: 0,
    value2: false
}

// create proxy
let proxy = utils.watch(obj);

// add a listener on the proxy
let listener = proxy.addListener('value1', function(){
    console.log('change');
});

proxy.value1 = 10; // console -> 'change'

// remove a listener
proxy.removeListener(listener);
proxy.value1 = 5; // console -> ø

OPTIONS AND SETTINGS

To start using this function, you need to watch an object. Then, the watch function will return a proxy object that you should interact with. Another module in code may want to intercept a changement on the proxy properties values. To do so, the proxy returned hold some methods:

Methods

addListner

In order to listen for a property value changement. This method need two arguments:

• a string calling the value you want to listen for
• a function you want to trigger when a modification has been detected on the value listened.

This method return a reference to the listener. Once you call this method on the proxy's property, the function will be triggered each time the value will be changed.

removeListner

In order to remove a listener for a property. Since you already have created the listener, you only have to remove the listener by passing the listener reference in the proxy's removeListener method: proxy.removeListener(listenerReference);

---

SVG Total Length

A function to measure the length of an SVG path since SVGPathElement.getTotalLength() is not longer available in SVG 2. The function take an element as attribute and return the length in pixel.

import { utils } from 'utils';
    
const SVG = document.getElementByID('mySVG');
const SVGLength = utils.SVGLength(SVG);
SVG.style.strokeDasharray = SVG.style.strokeDashoffset = SVGLength;

---

Math - createAffine

This function let you generate an affine function (AX + B) with two couples of coordinates. This is usefull if you want to find a point related to another following a rule given by other coordinates.

This function let you get the multiplying factor variable A. This function let you get the origin coordinate variable B.

By using a closure, you can directly create an affine function that let you get a point on the line drawn by the function (ax+b). To do, you only need to initiate the closure passing two coordinate systems (X and Y), then, by passing an X variable at any moment, you will get the point.

SYNTAX

utils.math.createAffine.a(array(number, number), array(number, number));
utils.math.createAffine.b(number, array(number, number));
utils.math.createAffine.func(array(number, number), array(number, number));

USE

import { utils } from 'utils';

const vars = {
    x: [0, -500],
    y: [100, 500]
};

//get affine variables
const affineVarA = utils.math.createAffine.a(vars.x, vars.y);
const affineVarB = utils.math.createAffine.b(vars.x, affineVarA);

//get closure function
const affineFunc = utils.math.createAffine.func(vars.x, vars.y);
affineFunc.getPoint(50);

OPTIONS AND SETTINGS

The most simple way to get the affine function is to use utils.math.affine.func(x,y) giving two arguments (X and Y coordinates systems) to the function. This will return a closure function. Using this closure function, you can call the getPoint() method. getPoint has an unique parameter: the X variable in the affine function (A*X+B).

const affineFunc = utils.math.createAffine.func([1000, -100], [2000, 100]);
console.log(affineFunc.getPoint(1500)) // display -> 0

Thanks to @NathalieVidon who helped me a lot with maths concepts on this function.

---

Math - Random

This function give you the power to get a random number between two other number. You need to pass two argument to the function: a min and a max. These arguments are optional, by default min argument is set to 0 and max is argument is set to 1.

SYNTAX

utils.math.random([number, number]);

USE

import { utils } from 'utils';
let random = utils.math.random(0, 10);

---

Math - Shuffle

Shuffle array