Common Needs

Common Needs is just a personal JavaScript library I'm making to make faster/easier some simple tasks that can feel repetitive during my daily work.

Utils are sorted in:

• Formatting Utils
  • toCapitalCase(str) ⇒ String
  • fillNumberUnits(num, units) ⇒ String
  • createSrcFromBase64(base64Img, format) ⇒ String
• Array Utils
  • clearDuplicatedObjects(array, criteria) ⇒ Array
  • clearDuplicatesSimple(array) ⇒ Array
• Math Utils
  • randomBool() ⇒ boolean
  • random(min, max) ⇒ number
• Functions Utils
  • debounce(func, [wait], [options]) ⇒ function
• Objects Utils
  • deepClone(obj) ⇒ *
  • sortObjectKeys(obj) ⇒ Object
  • deepSortObjectKeys(obj) ⇒ Object
  • deepObjCompare(obj1, obj2) ⇒ boolean
• DOM Utils
  • applyStyle(dom, style)
• Lang Utils
  • isObject(value) ⇒ boolean
  • toNumber(str) ⇒ number
• Bug Solving
  • iosXCodeBugWorkaround(event)

Formatting Utils

Functions

toCapitalCase(str) ⇒ String

Given a String, returns it formatted as Capital Case

Returns: String - A string formatted in Capital Case

| Param | Type | Description | | ----- | ------------------- | --------------------- | | str | String | The string to format. |

Example

const capitalizedTitle = toCapitalCase("something new");
console.log(capitalizedTitle);
// => "Something New"

fillNumberUnits(num, units) ⇒ String

Given a number and an amount of units, returns a string filling with 0 to make the string length match the units amount.

Returns: String - A string containing the formatted number.

| Param | Type | Description | | ----- | ------------------- | ------------------------------------------- | | num | number | The desired number to format | | units | number | The desired length of the formatted number. |

Example

const counter = fillNumberUnits(2, 5);
console.log(counter);
// => "00002"

createSrcFromBase64(base64Img, format) ⇒ String

image string and a desired target format.

Returns: String - A valid src for the img tag.

| Param | Type | Description | | --------- | ------------------- | ------------------------------- | | base64Img | String | The base64 string of the image. | | format | String | The desired target format |

Example

createSrcFromBase64(base64String, "png"))

Array Utils

Functions

clearDuplicatedObjects(array, criteria) ⇒ Array

Given an array of objects and a criteria to detect duplicates, filters the duplicated objects of the array.

Returns: Array - New array without duplicated objects.

| Param | Type | Description | | -------- | ------------------- | --------------------------------------------------------- | | array | Array | Array of objects with duplicated values. | | criteria | String | Key of the objects used as criteria to detect duplicates. |

Example

const originalArray = [{ a: 1 }, { a: 2 }, { a: 1 }, { a: 3 }];
const clearedArray = clearDuplicatedObjects(array, "a");
console.log(clearedArray);
// =>  [{ a: 1 }, { a: 2 }, { a: 3 }]

clearDuplicatesSimple(array) ⇒ Array

Given a simple array, clear the duplicated values and returns a new one.

Note: This will only do a shallow cleaning, this means that arrays made of Objects or other Arrays will not be cleaned. To delete duplicates from an array of objects, check clearDuplicatedObjects

Returns: Array - New array without duplicated values.

See: clearDuplicatedObjects

| Param | Type | Description | | ----- | ------------------ | ------------------------- | | array | Array | Array to clear duplicates |

Math Utils

Functions

randomBool() ⇒ boolean

Generates a random boolean

Returns: boolean - Random boolean

random(min, max) ⇒ number

Generates a random value between a maximum and a minimum points of a range.

Returns: number - Random number between min and maxs

| Param | Type | Description | | ----- | ------------------- | ---------------------- | | min | number | Minimum possible value | | max | number | Maximum possible value |

Functions Utils

debounce(func, [wait], [options]) ⇒ function

Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel method to cancel delayed func invocations and a flush method to immediately invoke them. Provide options to indicate whether func should be invoked on the leading and/or trailing edge of the wait timeout. The func is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last func invocation. Note: If leading and trailing options are true, func is invoked on the trailing edge of the timeout only if the debounced function is invoked more than once during the wait timeout. If wait is 0 and leading is false, func invocation is deferred until to the next tick, similar to setTimeout with a timeout of 0.

Returns: function - Returns the new debounced function.

| Param | Type | Default | Description | | ------------------ | --------------------- | ------------------ | --------------------------------------------------------------------- | | func | function | | The function to debounce. | | [wait] | number | 0 | The number of milliseconds to delay. | | [options] | Object | {} | The options object. | | [options.leading] | boolean | false | Specify invoking on the leading edge of the timeout. | | [options.maxWait] | number | | The maximum time func is allowed to be delayed before it's invoked. | | [options.trailing] | boolean | true | Specify invoking on the trailing edge of the timeout. |

Example

// Avoid costly calculations while the window size is in flux.
window.addEventListener("resize", debounce(calculateLayout, 150));
// Invoke `sendMail` when clicked, debouncing subsequent calls.
window.addEventListener(
  "click",
  debounce(sendMail, 300, {
    leading: true,
    trailing: false
  })
);
// Ensure `batchLog` is invoked once after 1 second of debounced calls.
var debounced = debounce(batchLog, 250, { maxWait: 1000 });
var source = new EventSource("/stream");
webSocket.addEventListener("message", debounced);
// Cancel the trailing debounced invocation.
debounced.cancel();

Objects Utils

Functions

deepClone(obj) ⇒ *

Deeply clones a given value. The difference between using this method and the spread operator method is that the spread operator method doesn't clone the object in depth, but only the first layer of it (shallow copy). So, if we have an array of objects, the object properties are not cloned but referenced to the same memory location as the original, so if we make any changes to the cloned object it would affect the original one. By deeply cloning the object we get a completely new object, not making any references to the original set.

Returns: * - Returns the new cloned object.

| Param | Type | Description | | ----- | --------------- | -------------------------------------------------------- | | obj | * | Given value to clone. Can be any type (Array, Object...) |

sortObjectKeys(obj) ⇒ Object

Given an object, returns a new object (shallow copy) which properties have been sorted by their keys.

Returns: Object - Shallow copy of the given object with its keys sorted.

| Param | Type | Description | | ----- | ------------------- | -------------- | | obj | Object | Object to sort |

Example

const initialObj = { a: 1, c: 2, e: 3, b: 4, d: 5, f: 6 };
sortObjectKeys(initialObj);
// => {a: 1, b: 4, c: 2, d: 5, e: 3, f: 6}

deepSortObjectKeys(obj) ⇒ Object

Given an object, returns a new object (deep copy) which properties have been sorted by their keys.

The difference between this and sortObjectKeys is that this function returns a deep copy, sorting also all the objects contained as property value.

Returns: Object - Deep copy of the given object with its keys sorted.

| Param | Type | Description | | ----- | ------------------- | -------------- | | obj | Object | Object to sort |

Example

const initialObj = { a: 1, c: 2, e: 3, b: 4, d: { b: 1, a: 2 }, f: 6 };
deepSortObjectKeys(initialObj);
// => {a: 1, b: 4, c: 2, d: { a: 2, b: 1 }, e: 3, f: 6}

deepObjCompare(obj1, obj2) ⇒ boolean

Given two objects, checks if both objects are equal by making a deep comparison between them.

Returns: boolean - true if the objects are equal, false if are different.

| Param | Type | Description | | ----- | ------------------- | ------------------------ | | obj1 | Object | First object to compare | | obj2 | Object | Second object to compare |

Example

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { a: 1, c: 3, b: 2 };
const obj3 = { a: 4, b: 5, c: 6 };
const obj4 = { a: { b: 1 }, c: 2 };
const obj5 = { a: { b: 2 }, c: 2 };
const obj6 = { a: { b: 1, a: 2 }, c: 2 };
const obj7 = { a: { a: 2, b: 1 }, c: 2 };

deepObjCompare(obj1, obj2);
// => true
deepObjCompare(obj2, obj3);
// => false
deepObjCompare(obj4, obj5);
// => false
deepObjCompare(obj6, obj7);
// => true

DOM Utils

Functions

applyStyle(dom, style)

Given a DOM element and a style object, applies the desired style to the DOM element.

| Param | Type | Description | | ------ | ----------------------------- | ------------------------------------------ | | dom | DOM Element/Node | DOM element to apply the desired style. | | style | Object | Style desired to apply to the DOM element. |

Example

const header = document.querySelector('header')
applyStyle(header, {
 backgroundColor: "#FAFAFA",
 textAlign: "center",
 fontWeight: "bold"
})

Lang Utils

Functions

isObject(value) ⇒ boolean

Checks if value is the language type of Object. (e.g. arrays, functions, objects, regexes, new Number(0), and new String(''))

Returns: boolean - Returns true if value is an object, else false.

| Param | Type | Description | | ----- | --------------- | ------------------- | | value | * | The value to check. |

Example

isObject({});
// => true
isObject([1, 2, 3]);
// => true
isObject(null);
// => false

toNumber(str) ⇒ number

Parses a string to number, getting rid of all non-numerical values. Accepts both "." and "," as float indicators.

Returns: number - Parsed number from string.

| Param | Type | Description | | ----- | ------------------- | -------------------------------- | | str | String | Given string to parse to number. |

Example

toNumber("0.5");
// => 0.5
toNumber("0,5");
// => 0.5
toNumber("sdfsdf0,5");
// => 0.5
toNumber("sdfsdf0df,5");
// => 0.5
toNumber("sdfsdf0df,5sdf");
// => 0.5

Bug Solving

iosXCodeBugWorkaround

There's a bug in XCode in which the touchscreen won't work properly after the virtual keyboard has hidden in a cordova app.

To solve this, apply this function (only on iOS) on the blur event of the input field.

Note: This bug workaround must be used only on ios apps.

| Param | Type | Description | | ----- | ------------------ | -------------------------------------------------------------------------------------------------------- | | event | Event | The event that triggers the bug workaround. Typically it will be a blur event fired from an input field. |