You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@daybrush/utils

Package Overview
Dependencies
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@daybrush/utils - npm Package Compare versions

Comparing version

0.1.3
to
0.2.0

jsdoc.json

3

declaration/color.d.ts

@@ -1,6 +0,5 @@

export declare const COLOR_MODELS: string[];
export declare function cutHex(hex: string): string;
export declare function hexToRGBA(hex: string): number[];
export declare function hex3to6(h: string): string;
export declare function toFullHex(h: string): string;
export declare function hslToRGBA(hsl: number[]): number[];
export declare function stringToRGBA(color: string): number[];

9

declaration/consts.d.ts

@@ -8,2 +8,11 @@ export interface ObjectInterface<T> {

export declare const HSLA = "hsla";
export declare const COLOR_MODELS: string[];
export declare const FUNCTION = "function";
export declare const PROPERTY = "property";
export declare const ARRAY = "array";
export declare const OBJECT = "object";
export declare const STRING = "string";
export declare const NUMBER = "number";
export declare const UNDEFINED = "undefined";
export declare const getCrossBrowserProperty: (property: string) => string;
export declare const TRANSFORM: string;

@@ -10,0 +19,0 @@ export declare const FILTER: string;

2

declaration/index.d.ts

@@ -0,4 +1,4 @@

export * from "./consts";
export * from "./color";
export * from "./consts";
export * from "./utils";
export * from "./css";

2

declaration/utils.d.ts

@@ -23,4 +23,4 @@ import { ObjectInterface } from "./consts";

export declare function camelize(str: string): string;
export declare function decamelize(str: string): string;
export declare function decamelize(str: string, separator?: string): string;
export declare function now(): number;
export declare const requestAnimationFrame: (callback: FrameRequestCallback) => number;

483

dist/utils.esm.js

@@ -0,7 +1,154 @@

/*
Copyright (c) 2018 Daybrush
license: MIT
author: Daybrush
repository: https://github.com/daybrush/utils
@version 0.2.0
*/
/**
* @namespace
* @name Consts
*/
/**
* get string "rgb"
* @memberof Color
* @example
import {RGB} from "@daybrush/utils";
console.log(RGB); // "rgb"
*/
var RGB = "rgb";
/**
* get string "rgba"
* @memberof Color
* @example
import {RGBA} from "@daybrush/utils";
console.log(RGBA); // "rgba"
*/
var RGBA = "rgba";
/**
* get string "hsl"
* @memberof Color
* @example
import {HSL} from "@daybrush/utils";
console.log(HSL); // "hsl"
*/
var HSL = "hsl";
/**
* get string "hsla"
* @memberof Color
* @example
import {HSLA} from "@daybrush/utils";
console.log(HSLA); // "hsla"
*/
var HSLA = "hsla";
/**
* gets an array of color models.
* @memberof Color
* @example
import {COLOR_MODELS} from "@daybrush/utils";
console.log(COLOR_MODELS); // ["rgb", "rgba", "hsl", "hsla"];
*/
var COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
/**
* get string "function"
* @memberof Consts
* @example
import {FUNCTION} from "@daybrush/utils";
console.log(FUNCTION); // "function"
*/
var FUNCTION = "function";
/**
* get string "property"
* @memberof Consts
* @example
import {PROPERTY} from "@daybrush/utils";
console.log(PROPERTY); // "property"
*/
var PROPERTY = "property";
/**
* get string "array"
* @memberof Consts
* @example
import {ARRAY} from "@daybrush/utils";
console.log(ARRAY); // "array"
*/
var ARRAY = "array";
/**
* get string "object"
* @memberof Consts
* @example
import {OBJECT} from "@daybrush/utils";
console.log(OBJECT); // "object"
*/
var OBJECT = "object";
/**
* get string "string"
* @memberof Consts
* @example
import {STRING} from "@daybrush/utils";
console.log(STRING); // "string"
*/
var STRING = "string";
/**
* get string "number"
* @memberof Consts
* @example
import {NUMBER} from "@daybrush/utils";
console.log(NUMBER); // "number"
*/
var NUMBER = "number";
/**
* get string "undefined"
* @memberof Consts
* @example
import {UNDEFINED} from "@daybrush/utils";
console.log(UNDEFINED); // "undefined"
*/
var UNDEFINED = "undefined";
var prefixes = ["webkit", "ms", "moz", "o"];
/**
* @namespace CrossBrowser
*/
var checkProperties =
/**
* Get a CSS property with a vendor prefix that supports cross browser.
* @function
* @param {string} property - A CSS property
* @return {string} CSS property with cross-browser vendor prefix
* @memberof CrossBrowser
* @example
import {getCrossBrowserProperty} from "@daybrush/utils";
console.log(getCrossBrowserProperty("transform")); // "transform", "-ms-transform", "-webkit-transform"
console.log(getCrossBrowserProperty("filter")); // "filter", "-webkit-filter"
*/
var getCrossBrowserProperty =
/*#__PURE__*/
function (property) {
if (typeof document === "undefined") {
if (typeof document === UNDEFINED) {
return "";

@@ -13,3 +160,3 @@ }

if (typeof styles[property] !== "undefined") {
if (typeof styles[property] !== UNDEFINED) {
return property;

@@ -21,3 +168,3 @@ }

if (typeof styles[name] !== "undefined") {
if (typeof styles[name] !== UNDEFINED) {
return name;

@@ -29,16 +176,47 @@ }

};
/**
* get string "transfrom" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {TRANSFORM} from "@daybrush/utils";
var RGB = "rgb";
var RGBA = "rgba";
var HSL = "hsl";
var HSLA = "hsla";
console.log(TRANSFORM); // "transform", "-ms-transform", "-webkit-transform"
*/
var TRANSFORM =
/*#__PURE__*/
checkProperties("transform");
getCrossBrowserProperty("transform");
/**
* get string "filter" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {FILTER} from "@daybrush/utils";
console.log(FILTER); // "filter", "-ms-filter", "-webkit-filter"
*/
var FILTER =
/*#__PURE__*/
checkProperties("filter");
getCrossBrowserProperty("filter");
/**
* get string "animation" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {ANIMATION} from "@daybrush/utils";
console.log(ANIMATION); // "animation", "-ms-animation", "-webkit-animation"
*/
var ANIMATION =
/*#__PURE__*/
checkProperties("animation");
getCrossBrowserProperty("animation");
/**
* get string "keyframes" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {KEYFRAMES} from "@daybrush/utils";
console.log(KEYFRAMES); // "keyframes", "-ms-keyframes", "-webkit-keyframes"
*/
var KEYFRAMES =

@@ -48,21 +226,83 @@ /*#__PURE__*/

/**
* @namespace
* @name Utils
*/
/**
* Check the type that the value is undefined.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isUndefined} from "@daybrush/utils";
console.log(isUndefined(undefined)); // true
console.log(isUndefined("")); // false
console.log(isUndefined(1)); // false
console.log(isUndefined(null)); // false
*/
function isUndefined(value) {
return typeof value === "undefined";
return typeof value === UNDEFINED;
}
/**
* Check the type that the value is object.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isObject} from "@daybrush/utils";
console.log(isObject({})); // true
console.log(isObject(undefined)); // false
console.log(isObject("")); // false
console.log(isObject(null)); // false
*/
function isObject(value) {
return value && typeof value === "object";
return value && typeof value === OBJECT;
}
/**
* Check the type that the value is isArray.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isArray} from "@daybrush/utils";
console.log(isArray([])); // true
console.log(isArray({})); // false
console.log(isArray(undefined)); // false
console.log(isArray(null)); // false
*/
function isArray(value) {
return Array.isArray(value);
}
/**
* Check the type that the value is string.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isString} from "@daybrush/utils";
console.log(isString("1234")); // true
console.log(isString(undefined)); // false
console.log(isString(1)); // false
console.log(isString(null)); // false
*/
function isString(value) {
return typeof value === "string";
return typeof value === STRING;
}
/**
* divide text by space.
* @memberof Property
* @function splitSpace
* @param {String} text - text to divide
* @memberof Utils
* @param {string} text - text to divide
* @return {Array} divided texts
* @example
import {spliceSpace} from "@daybrush/utils";
console.log(splitSpace("a b c d e f g"));

@@ -81,7 +321,8 @@ // ["a", "b", "c", "d", "e", "f", "g"]

* divide text by comma.
* @memberof Property
* @function splitComma
* @param {String} text - text to divide
* @memberof Utils
* @param {string} text - text to divide
* @return {Array} divided texts
* @example
import {splitComma} from "@daybrush/utils";
console.log(splitComma("a,b,c,d,e,f,g"));

@@ -101,2 +342,16 @@ // ["a", "b", "c", "d", "e", "f", "g"]

}
/**
* divide text by bracket "(", ")".
* @memberof Utils
* @param {string} text - text to divide
* @return {object} divided texts
* @example
import {splitBracket} from "@daybrush/utils";
console.log(splitBracket("a(1, 2)"));
// {prefix: "a", value: "1, 2", suffix: ""}
console.log(splitBracket("a(1, 2)b"));
// {prefix: "a", value: "1, 2", suffix: "b"}
*/
function splitBracket(text) {

@@ -115,2 +370,18 @@ var matches = /([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(text);

}
/**
* divide text by number and unit.
* @memberof Utils
* @param {string} text - text to divide
* @return {object} divided texts
* @example
import {splitUnit} from "@daybrush/utils";
console.log(splitUnit("10px"));
// {prefix: "", value: 10, unit: "px"}
console.log(splitUnit("-10px"));
// {prefix: "", value: -10, unit: "px"}
console.log(splitUnit("a10%"));
// {prefix: "a", value: 10, unit: "%"}
*/
function splitUnit(text) {

@@ -136,2 +407,15 @@ var matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);

}
/**
* transform strings to camel-case
* @memberof Utils
* @param {String} text - string
* @return {String} camel-case string
* @example
import {camelize} from "@daybrush/utils";
console.log(camelize("transform-origin")); // transformOrigin
console.log(camelize("abcd_efg")); // abcdEfg
console.log(camelize("abcd efg")); // abcdEfg
*/
function camelize(str) {

@@ -142,10 +426,51 @@ return str.replace(/[\s-_]([a-z])/g, function (all, letter) {

}
function decamelize(str) {
/**
* transform a camelized string into a lowercased string.
* @memberof Utils
* @param {string} text - a camel-cased string
* @param {string} [separator="-"] - a separator
* @return {string} a lowercased string
* @example
import {decamelize} from "@daybrush/utils";
console.log(decamelize("transformOrigin")); // transform-origin
console.log(decamelize("abcdEfg", "_")); // abcd_efg
*/
function decamelize(str, separator) {
if (separator === void 0) {
separator = "-";
}
return str.replace(/([a-z])([A-Z])/g, function (all, letter, letter2) {
return letter + "-" + letter2.toLowerCase();
return "" + letter + separator + letter2.toLowerCase();
});
}
/**
* Date.now() method
* @memberof CrossBrowser
* @return {number} milliseconds
* @example
import {now} from "@daybrush/utils";
console.log(now()); // 12121324241(milliseconds)
*/
function now() {
return Date.now ? Date.now() : new Date().getTime();
}
/**
* window.requestAnimationFrame() method with cross browser.
* @function
* @memberof CrossBrowser
* @param {FrameRequestCallback} callback - The function to call when it's time to update your animation for the next repaint.
* @return {number} id
* @example
import {requestAnimationFrame} from "@daybrush/utils";
requestAnimationFrame((timestamp) => {
console.log(timestamp);
});
*/
var requestAnimationFrame =

@@ -155,3 +480,3 @@ /*#__PURE__*/

var firstTime = now();
var raf = typeof window !== "undefined" && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame);
var raf = typeof window !== UNDEFINED && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame);
return raf ? raf.bind(window) : function (callback) {

@@ -171,15 +496,15 @@ var currTime = now();

var COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
/**
* Remove the # from the hex color.
* @memberof Color
* @param {String} hex - hex color
* @return {String} hex color
* @param {string} hex - hex color
* @return {string} hex color
* @example
console.log(cutHex("#000000"))
// "000000"
import {cutHex} from "@daybrush/utils";
console.log(cutHex("#000000")) // "000000"
*/
function cutHex(hex) {
return hex.charAt(0) === "#" ? hex.substring(1) : hex;
return hex.replace("#", "");
}

@@ -192,6 +517,8 @@ /**

* @example
console.log(hexToRGB("#000000"));
// [0, 0, 0]
console.log(hexToRGB("#201045"));
// [32, 16, 69]
import {hexToRGBA} from "@daybrush/utils";
console.log(hexToRGBA("#00000005"));
// [0, 0, 0, 1]
console.log(hexToRGBA("#201045"));
// [32, 16, 69, 1]
*/

@@ -213,26 +540,31 @@

/**
* convert 3-digit hex color to 6-digit hex color.
* convert 3(or 4)-digit hex color to 6(or 8)-digit hex color.
* @memberof Color
* @param {String} hex - 3-digit hex color
* @return {String} 6-digit hex color
* @param {String} hex - 3(or 4)-digit hex color
* @return {String} 6(or 8)-digit hex color
* @example
console.log(hex3to6("#123"));
// "#112233"
import {toFullHex} from "@daybrush/utils";
console.log(toFullHex("#123")); // "#112233"
console.log(toFullHex("#123a")); // "#112233aa"
*/
function hex3to6(h) {
function toFullHex(h) {
var r = h.charAt(1);
var g = h.charAt(2);
var b = h.charAt(3);
var arr = ["#", r, r, g, g, b, b];
var a = h.charAt(4);
var arr = ["#", r, r, g, g, b, b, a, a];
return arr.join("");
}
/**
* convert hsl color to rgb color.
* convert hsl color to rgba color.
* @memberof Color
* @param {Array} hsl(a) - hsl color(hue: 0 ~ 360, saturation: 0 ~ 1, lightness: 0 ~ 1, alpha: 0 ~ 1)
* @return {Array} rgb color
* @return {Array} rgba color
* @example
console.log(hslToRGB([150, 0.5, 0.4]));
// [51, 153, 102]
import {hslToRGBA} from "@daybrush/utils";
console.log(hslToRGBA([150, 0.5, 0.4]));
// [51, 153, 102, 1]
*/

@@ -275,4 +607,10 @@

* @memberof Color
* @param {String} - Hex(rgb, rgba) or RGB(A), or HSL(A)
* @param {String} - 3-hex(#000), 4-hex(#0000) 6-hex(#000000), 8-hex(#00000000) or RGB(A), or HSL(A)
* @return {Array} rgba color
* @example
import {stringToRGBA} from "@daybrush/utils";
console.log(stringToRGBA("#000000")); // [0, 0, 0, 1]
console.log(stringToRGBA("rgb(100, 100, 100)")); // [100, 100, 100, 1]
console.log(stringToRGBA("hsl(150, 0.5, 0.4)")); // [51, 153, 102, 1]
*/

@@ -282,4 +620,4 @@

if (color.charAt(0) === "#") {
if (color.length === 4) {
return hexToRGBA(hex3to6(color));
if (color.length === 4 || color.length === 5) {
return hexToRGBA(toFullHex(color));
} else {

@@ -329,2 +667,17 @@ return hexToRGBA(color);

/**
* @namespace DOM
*/
/**
* Checks if the specified class value exists in the element's class attribute.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to search
* @return {boolean} return false if the class is not found.
* @example
import {hasClass} from "@daybrush/utils";
console.log(hasClass(element, "start")); // true or false
*/
function hasClass(element, className) {

@@ -337,2 +690,13 @@ if (element.classList) {

}
/**
* Add the specified class value. If these classe already exist in the element's class attribute they are ignored.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to add
* @example
import {addClass} from "@daybrush/utils";
addClass(element, "start");
*/
function addClass(element, className) {

@@ -345,2 +709,13 @@ if (element.classList) {

}
/**
* Removes the specified class value.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to remove
* @example
import {removeClass} from "@daybrush/utils";
removeClass(element, "start");
*/
function removeClass(element, className) {

@@ -354,2 +729,14 @@ if (element.classList) {

}
/**
* Gets the CSS properties from the element.
* @memberof DOM
* @param {HTMLElement | HTMLElement[]} elements - elements
* @param {string[]} properites - the CSS properties
* @return {object} returns CSS properties and values.
* @example
import {fromCSS} from "@daybrush/utils";
console.log(fromCSS(element, ["left", "opacity", "top"])); // {"left": "10px", "opacity": 1, "top": "10px"}
*/
function fromCSS(elements, properties) {

@@ -381,3 +768,3 @@ if (!elements || !properties || !properties.length) {

export { COLOR_MODELS, cutHex, hexToRGBA, hex3to6, hslToRGBA, stringToRGBA, RGB, RGBA, HSL, HSLA, TRANSFORM, FILTER, ANIMATION, KEYFRAMES, isUndefined, isObject, isArray, isString, splitSpace, splitComma, splitBracket, splitUnit, camelize, decamelize, now, requestAnimationFrame, hasClass, addClass, removeClass, fromCSS };
export { RGB, RGBA, HSL, HSLA, COLOR_MODELS, FUNCTION, PROPERTY, ARRAY, OBJECT, STRING, NUMBER, UNDEFINED, getCrossBrowserProperty, TRANSFORM, FILTER, ANIMATION, KEYFRAMES, cutHex, hexToRGBA, toFullHex, hslToRGBA, stringToRGBA, isUndefined, isObject, isArray, isString, splitSpace, splitComma, splitBracket, splitUnit, camelize, decamelize, now, requestAnimationFrame, hasClass, addClass, removeClass, fromCSS };
//# sourceMappingURL=utils.esm.js.map

1057

dist/utils.js

@@ -1,396 +0,795 @@

'use strict';
/*
Copyright (c) 2018 Daybrush
license: MIT
author: Daybrush
repository: https://github.com/daybrush/utils
@version 0.2.0
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.utils = {})));
}(this, (function (exports) { 'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
/**
* @namespace
* @name Consts
*/
var prefixes = ["webkit", "ms", "moz", "o"];
/**
* get string "rgb"
* @memberof Color
* @example
import {RGB} from "@daybrush/utils";
var checkProperties =
/*#__PURE__*/
function (property) {
if (typeof document === "undefined") {
console.log(RGB); // "rgb"
*/
var RGB = "rgb";
/**
* get string "rgba"
* @memberof Color
* @example
import {RGBA} from "@daybrush/utils";
console.log(RGBA); // "rgba"
*/
var RGBA = "rgba";
/**
* get string "hsl"
* @memberof Color
* @example
import {HSL} from "@daybrush/utils";
console.log(HSL); // "hsl"
*/
var HSL = "hsl";
/**
* get string "hsla"
* @memberof Color
* @example
import {HSLA} from "@daybrush/utils";
console.log(HSLA); // "hsla"
*/
var HSLA = "hsla";
/**
* gets an array of color models.
* @memberof Color
* @example
import {COLOR_MODELS} from "@daybrush/utils";
console.log(COLOR_MODELS); // ["rgb", "rgba", "hsl", "hsla"];
*/
var COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
/**
* get string "function"
* @memberof Consts
* @example
import {FUNCTION} from "@daybrush/utils";
console.log(FUNCTION); // "function"
*/
var FUNCTION = "function";
/**
* get string "property"
* @memberof Consts
* @example
import {PROPERTY} from "@daybrush/utils";
console.log(PROPERTY); // "property"
*/
var PROPERTY = "property";
/**
* get string "array"
* @memberof Consts
* @example
import {ARRAY} from "@daybrush/utils";
console.log(ARRAY); // "array"
*/
var ARRAY = "array";
/**
* get string "object"
* @memberof Consts
* @example
import {OBJECT} from "@daybrush/utils";
console.log(OBJECT); // "object"
*/
var OBJECT = "object";
/**
* get string "string"
* @memberof Consts
* @example
import {STRING} from "@daybrush/utils";
console.log(STRING); // "string"
*/
var STRING = "string";
/**
* get string "number"
* @memberof Consts
* @example
import {NUMBER} from "@daybrush/utils";
console.log(NUMBER); // "number"
*/
var NUMBER = "number";
/**
* get string "undefined"
* @memberof Consts
* @example
import {UNDEFINED} from "@daybrush/utils";
console.log(UNDEFINED); // "undefined"
*/
var UNDEFINED = "undefined";
var prefixes = ["webkit", "ms", "moz", "o"];
/**
* @namespace CrossBrowser
*/
/**
* Get a CSS property with a vendor prefix that supports cross browser.
* @function
* @param {string} property - A CSS property
* @return {string} CSS property with cross-browser vendor prefix
* @memberof CrossBrowser
* @example
import {getCrossBrowserProperty} from "@daybrush/utils";
console.log(getCrossBrowserProperty("transform")); // "transform", "-ms-transform", "-webkit-transform"
console.log(getCrossBrowserProperty("filter")); // "filter", "-webkit-filter"
*/
var getCrossBrowserProperty =
/*#__PURE__*/
function (property) {
if (typeof document === UNDEFINED) {
return "";
}
var styles = (document.body || document.documentElement).style;
var length = prefixes.length;
if (typeof styles[property] !== UNDEFINED) {
return property;
}
for (var i = 0; i < length; ++i) {
var name = "-" + prefixes[i] + "-" + property;
if (typeof styles[name] !== UNDEFINED) {
return name;
}
}
return "";
};
/**
* get string "transfrom" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {TRANSFORM} from "@daybrush/utils";
console.log(TRANSFORM); // "transform", "-ms-transform", "-webkit-transform"
*/
var TRANSFORM =
/*#__PURE__*/
getCrossBrowserProperty("transform");
/**
* get string "filter" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {FILTER} from "@daybrush/utils";
console.log(FILTER); // "filter", "-ms-filter", "-webkit-filter"
*/
var FILTER =
/*#__PURE__*/
getCrossBrowserProperty("filter");
/**
* get string "animation" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {ANIMATION} from "@daybrush/utils";
console.log(ANIMATION); // "animation", "-ms-animation", "-webkit-animation"
*/
var ANIMATION =
/*#__PURE__*/
getCrossBrowserProperty("animation");
/**
* get string "keyframes" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {KEYFRAMES} from "@daybrush/utils";
console.log(KEYFRAMES); // "keyframes", "-ms-keyframes", "-webkit-keyframes"
*/
var KEYFRAMES =
/*#__PURE__*/
ANIMATION.replace("animation", "keyframes");
/**
* @namespace
* @name Utils
*/
/**
* Check the type that the value is undefined.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isUndefined} from "@daybrush/utils";
console.log(isUndefined(undefined)); // true
console.log(isUndefined("")); // false
console.log(isUndefined(1)); // false
console.log(isUndefined(null)); // false
*/
function isUndefined(value) {
return typeof value === UNDEFINED;
}
/**
* Check the type that the value is object.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isObject} from "@daybrush/utils";
var styles = (document.body || document.documentElement).style;
var length = prefixes.length;
console.log(isObject({})); // true
console.log(isObject(undefined)); // false
console.log(isObject("")); // false
console.log(isObject(null)); // false
*/
if (typeof styles[property] !== "undefined") {
return property;
function isObject(value) {
return value && typeof value === OBJECT;
}
/**
* Check the type that the value is isArray.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isArray} from "@daybrush/utils";
for (var i = 0; i < length; ++i) {
var name = "-" + prefixes[i] + "-" + property;
console.log(isArray([])); // true
console.log(isArray({})); // false
console.log(isArray(undefined)); // false
console.log(isArray(null)); // false
*/
if (typeof styles[name] !== "undefined") {
return name;
}
function isArray(value) {
return Array.isArray(value);
}
/**
* Check the type that the value is string.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isString} from "@daybrush/utils";
return "";
};
console.log(isString("1234")); // true
console.log(isString(undefined)); // false
console.log(isString(1)); // false
console.log(isString(null)); // false
*/
var RGB = "rgb";
var RGBA = "rgba";
var HSL = "hsl";
var HSLA = "hsla";
var TRANSFORM =
/*#__PURE__*/
checkProperties("transform");
var FILTER =
/*#__PURE__*/
checkProperties("filter");
var ANIMATION =
/*#__PURE__*/
checkProperties("animation");
var KEYFRAMES =
/*#__PURE__*/
ANIMATION.replace("animation", "keyframes");
function isString(value) {
return typeof value === STRING;
}
/**
* divide text by space.
* @memberof Utils
* @param {string} text - text to divide
* @return {Array} divided texts
* @example
import {spliceSpace} from "@daybrush/utils";
function isUndefined(value) {
return typeof value === "undefined";
}
function isObject(value) {
return value && typeof value === "object";
}
function isArray(value) {
return Array.isArray(value);
}
function isString(value) {
return typeof value === "string";
}
/**
* divide text by space.
* @memberof Property
* @function splitSpace
* @param {String} text - text to divide
* @return {Array} divided texts
* @example
console.log(splitSpace("a b c d e f g"));
// ["a", "b", "c", "d", "e", "f", "g"]
console.log(splitSpace("'a,b' c 'd,e' f g"));
// ["'a,b'", "c", "'d,e'", "f", "g"]
*/
console.log(splitSpace("a b c d e f g"));
// ["a", "b", "c", "d", "e", "f", "g"]
console.log(splitSpace("'a,b' c 'd,e' f g"));
// ["'a,b'", "c", "'d,e'", "f", "g"]
*/
function splitSpace(text) {
// divide comma(,)
var matches = text.match(/("[^"]*")|('[^']*')|([^\s()]*(?:\((?:[^()]*|\([^()]*\))*\))[^\s()]*)|\S+/g);
return matches || [];
}
/**
* divide text by comma.
* @memberof Property
* @function splitComma
* @param {String} text - text to divide
* @return {Array} divided texts
* @example
console.log(splitComma("a,b,c,d,e,f,g"));
// ["a", "b", "c", "d", "e", "f", "g"]
console.log(splitComma("'a,b',c,'d,e',f,g"));
// ["'a,b'", "c", "'d,e'", "f", "g"]
*/
function splitSpace(text) {
// divide comma(,)
var matches = text.match(/("[^"]*")|('[^']*')|([^\s()]*(?:\((?:[^()]*|\([^()]*\))*\))[^\s()]*)|\S+/g);
return matches || [];
}
/**
* divide text by comma.
* @memberof Utils
* @param {string} text - text to divide
* @return {Array} divided texts
* @example
import {splitComma} from "@daybrush/utils";
function splitComma(text) {
// divide comma(,)
// "[^"]*"|'[^']*'
var matches = text.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);
return matches ? matches.map(function (str) {
return str.trim();
}) : [];
}
function splitBracket(text) {
var matches = /([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(text);
console.log(splitComma("a,b,c,d,e,f,g"));
// ["a", "b", "c", "d", "e", "f", "g"]
console.log(splitComma("'a,b',c,'d,e',f,g"));
// ["'a,b'", "c", "'d,e'", "f", "g"]
*/
if (!matches || matches.length < 4) {
return {};
} else {
return {
prefix: matches[1],
value: matches[2],
suffix: matches[3]
};
function splitComma(text) {
// divide comma(,)
// "[^"]*"|'[^']*'
var matches = text.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);
return matches ? matches.map(function (str) {
return str.trim();
}) : [];
}
}
function splitUnit(text) {
var matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);
/**
* divide text by bracket "(", ")".
* @memberof Utils
* @param {string} text - text to divide
* @return {object} divided texts
* @example
import {splitBracket} from "@daybrush/utils";
if (!matches) {
console.log(splitBracket("a(1, 2)"));
// {prefix: "a", value: "1, 2", suffix: ""}
console.log(splitBracket("a(1, 2)b"));
// {prefix: "a", value: "1, 2", suffix: "b"}
*/
function splitBracket(text) {
var matches = /([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(text);
if (!matches || matches.length < 4) {
return {};
} else {
return {
prefix: matches[1],
value: matches[2],
suffix: matches[3]
};
}
}
/**
* divide text by number and unit.
* @memberof Utils
* @param {string} text - text to divide
* @return {object} divided texts
* @example
import {splitUnit} from "@daybrush/utils";
console.log(splitUnit("10px"));
// {prefix: "", value: 10, unit: "px"}
console.log(splitUnit("-10px"));
// {prefix: "", value: -10, unit: "px"}
console.log(splitUnit("a10%"));
// {prefix: "a", value: 10, unit: "%"}
*/
function splitUnit(text) {
var matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);
if (!matches) {
return {
prefix: "",
unit: "",
value: NaN
};
}
var prefix = matches[1];
var value = matches[2];
var unit = matches[3];
return {
prefix: "",
unit: "",
value: NaN
prefix: prefix,
unit: unit,
value: parseFloat(value)
};
}
/**
* transform strings to camel-case
* @memberof Utils
* @param {String} text - string
* @return {String} camel-case string
* @example
import {camelize} from "@daybrush/utils";
var prefix = matches[1];
var value = matches[2];
var unit = matches[3];
return {
prefix: prefix,
unit: unit,
value: parseFloat(value)
};
}
function camelize(str) {
return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
return letter.toUpperCase();
console.log(camelize("transform-origin")); // transformOrigin
console.log(camelize("abcd_efg")); // abcdEfg
console.log(camelize("abcd efg")); // abcdEfg
*/
function camelize(str) {
return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
return letter.toUpperCase();
});
}
/**
* transform a camelized string into a lowercased string.
* @memberof Utils
* @param {string} text - a camel-cased string
* @param {string} [separator="-"] - a separator
* @return {string} a lowercased string
* @example
import {decamelize} from "@daybrush/utils";
console.log(decamelize("transformOrigin")); // transform-origin
console.log(decamelize("abcdEfg", "_")); // abcd_efg
*/
function decamelize(str, separator) {
if (separator === void 0) {
separator = "-";
}
return str.replace(/([a-z])([A-Z])/g, function (all, letter, letter2) {
return "" + letter + separator + letter2.toLowerCase();
});
}
/**
* Date.now() method
* @memberof CrossBrowser
* @return {number} milliseconds
* @example
import {now} from "@daybrush/utils";
console.log(now()); // 12121324241(milliseconds)
*/
function now() {
return Date.now ? Date.now() : new Date().getTime();
}
/**
* window.requestAnimationFrame() method with cross browser.
* @function
* @memberof CrossBrowser
* @param {FrameRequestCallback} callback - The function to call when it's time to update your animation for the next repaint.
* @return {number} id
* @example
import {requestAnimationFrame} from "@daybrush/utils";
requestAnimationFrame((timestamp) => {
console.log(timestamp);
});
}
function decamelize(str) {
return str.replace(/([a-z])([A-Z])/g, function (all, letter, letter2) {
return letter + "-" + letter2.toLowerCase();
});
}
function now() {
return Date.now ? Date.now() : new Date().getTime();
}
var requestAnimationFrame =
/*#__PURE__*/
function () {
var firstTime = now();
var raf = typeof window !== "undefined" && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame);
return raf ? raf.bind(window) : function (callback) {
var currTime = now();
var id = window.setTimeout(function () {
callback(currTime - firstTime);
}, 1000 / 60);
return id;
};
}();
*/
/**
* @namespace
* @name Color
*/
var requestAnimationFrame =
/*#__PURE__*/
function () {
var firstTime = now();
var raf = typeof window !== UNDEFINED && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame);
return raf ? raf.bind(window) : function (callback) {
var currTime = now();
var id = window.setTimeout(function () {
callback(currTime - firstTime);
}, 1000 / 60);
return id;
};
}();
var COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
/**
* Remove the # from the hex color.
* @memberof Color
* @param {String} hex - hex color
* @return {String} hex color
* @example
console.log(cutHex("#000000"))
// "000000"
*/
/**
* @namespace
* @name Color
*/
function cutHex(hex) {
return hex.charAt(0) === "#" ? hex.substring(1) : hex;
}
/**
* convert hex color to rgb color.
* @memberof Color
* @param {String} hex - hex color
* @return {Array} rgb color
* @example
console.log(hexToRGB("#000000"));
// [0, 0, 0]
console.log(hexToRGB("#201045"));
// [32, 16, 69]
*/
/**
* Remove the # from the hex color.
* @memberof Color
* @param {string} hex - hex color
* @return {string} hex color
* @example
import {cutHex} from "@daybrush/utils";
function hexToRGBA(hex) {
var h = cutHex(hex);
var r = parseInt(h.substring(0, 2), 16);
var g = parseInt(h.substring(2, 4), 16);
var b = parseInt(h.substring(4, 6), 16);
var a = parseInt(h.substring(6, 8), 16) / 255;
console.log(cutHex("#000000")) // "000000"
*/
if (isNaN(a)) {
a = 1;
function cutHex(hex) {
return hex.replace("#", "");
}
/**
* convert hex color to rgb color.
* @memberof Color
* @param {String} hex - hex color
* @return {Array} rgb color
* @example
import {hexToRGBA} from "@daybrush/utils";
return [r, g, b, a];
}
/**
* convert 3-digit hex color to 6-digit hex color.
* @memberof Color
* @param {String} hex - 3-digit hex color
* @return {String} 6-digit hex color
* @example
console.log(hex3to6("#123"));
// "#112233"
*/
console.log(hexToRGBA("#00000005"));
// [0, 0, 0, 1]
console.log(hexToRGBA("#201045"));
// [32, 16, 69, 1]
*/
function hex3to6(h) {
var r = h.charAt(1);
var g = h.charAt(2);
var b = h.charAt(3);
var arr = ["#", r, r, g, g, b, b];
return arr.join("");
}
/**
* convert hsl color to rgb color.
* @memberof Color
* @param {Array} hsl(a) - hsl color(hue: 0 ~ 360, saturation: 0 ~ 1, lightness: 0 ~ 1, alpha: 0 ~ 1)
* @return {Array} rgb color
* @example
console.log(hslToRGB([150, 0.5, 0.4]));
// [51, 153, 102]
*/
function hexToRGBA(hex) {
var h = cutHex(hex);
var r = parseInt(h.substring(0, 2), 16);
var g = parseInt(h.substring(2, 4), 16);
var b = parseInt(h.substring(4, 6), 16);
var a = parseInt(h.substring(6, 8), 16) / 255;
function hslToRGBA(hsl) {
var h = hsl[0];
var s = hsl[1];
var l = hsl[2];
if (isNaN(a)) {
a = 1;
}
if (h < 0) {
h += Math.floor((Math.abs(h) + 360) / 360) * 360;
return [r, g, b, a];
}
/**
* convert 3(or 4)-digit hex color to 6(or 8)-digit hex color.
* @memberof Color
* @param {String} hex - 3(or 4)-digit hex color
* @return {String} 6(or 8)-digit hex color
* @example
import {toFullHex} from "@daybrush/utils";
h %= 360;
var c = (1 - Math.abs(2 * l - 1)) * s;
var x = c * (1 - Math.abs(h / 60 % 2 - 1));
var m = l - c / 2;
var rgb;
console.log(toFullHex("#123")); // "#112233"
console.log(toFullHex("#123a")); // "#112233aa"
*/
if (h < 60) {
rgb = [c, x, 0];
} else if (h < 120) {
rgb = [x, c, 0];
} else if (h < 180) {
rgb = [0, c, x];
} else if (h < 240) {
rgb = [0, x, c];
} else if (h < 300) {
rgb = [x, 0, c];
} else if (h < 360) {
rgb = [c, 0, x];
function toFullHex(h) {
var r = h.charAt(1);
var g = h.charAt(2);
var b = h.charAt(3);
var a = h.charAt(4);
var arr = ["#", r, r, g, g, b, b, a, a];
return arr.join("");
}
/**
* convert hsl color to rgba color.
* @memberof Color
* @param {Array} hsl(a) - hsl color(hue: 0 ~ 360, saturation: 0 ~ 1, lightness: 0 ~ 1, alpha: 0 ~ 1)
* @return {Array} rgba color
* @example
import {hslToRGBA} from "@daybrush/utils";
var result = [Math.round((rgb[0] + m) * 255), Math.round((rgb[1] + m) * 255), Math.round((rgb[2] + m) * 255), hsl.length > 3 ? hsl[3] : 1];
return result;
}
/**
* convert string to rgba color.
* @memberof Color
* @param {String} - Hex(rgb, rgba) or RGB(A), or HSL(A)
* @return {Array} rgba color
*/
console.log(hslToRGBA([150, 0.5, 0.4]));
// [51, 153, 102, 1]
*/
function stringToRGBA(color) {
if (color.charAt(0) === "#") {
if (color.length === 4) {
return hexToRGBA(hex3to6(color));
} else {
return hexToRGBA(color);
function hslToRGBA(hsl) {
var h = hsl[0];
var s = hsl[1];
var l = hsl[2];
if (h < 0) {
h += Math.floor((Math.abs(h) + 360) / 360) * 360;
}
} else if (color.indexOf("(") !== -1) {
// in bracket.
var _a = splitBracket(color),
prefix = _a.prefix,
value = _a.value;
if (!prefix || !value) {
return;
h %= 360;
var c = (1 - Math.abs(2 * l - 1)) * s;
var x = c * (1 - Math.abs(h / 60 % 2 - 1));
var m = l - c / 2;
var rgb;
if (h < 60) {
rgb = [c, x, 0];
} else if (h < 120) {
rgb = [x, c, 0];
} else if (h < 180) {
rgb = [0, c, x];
} else if (h < 240) {
rgb = [0, x, c];
} else if (h < 300) {
rgb = [x, 0, c];
} else if (h < 360) {
rgb = [c, 0, x];
}
var arr = splitComma(value);
var colorArr = [];
var length = arr.length;
var result = [Math.round((rgb[0] + m) * 255), Math.round((rgb[1] + m) * 255), Math.round((rgb[2] + m) * 255), hsl.length > 3 ? hsl[3] : 1];
return result;
}
/**
* convert string to rgba color.
* @memberof Color
* @param {String} - 3-hex(#000), 4-hex(#0000) 6-hex(#000000), 8-hex(#00000000) or RGB(A), or HSL(A)
* @return {Array} rgba color
* @example
import {stringToRGBA} from "@daybrush/utils";
switch (prefix) {
case RGB:
case RGBA:
for (var i = 0; i < length; ++i) {
colorArr[i] = parseFloat(arr[i]);
}
console.log(stringToRGBA("#000000")); // [0, 0, 0, 1]
console.log(stringToRGBA("rgb(100, 100, 100)")); // [100, 100, 100, 1]
console.log(stringToRGBA("hsl(150, 0.5, 0.4)")); // [51, 153, 102, 1]
*/
return colorArr;
function stringToRGBA(color) {
if (color.charAt(0) === "#") {
if (color.length === 4 || color.length === 5) {
return hexToRGBA(toFullHex(color));
} else {
return hexToRGBA(color);
}
} else if (color.indexOf("(") !== -1) {
// in bracket.
var _a = splitBracket(color),
prefix = _a.prefix,
value = _a.value;
case HSL:
case HSLA:
for (var i = 0; i < length; ++i) {
if (arr[i].indexOf("%") !== -1) {
colorArr[i] = parseFloat(arr[i]) / 100;
} else {
if (!prefix || !value) {
return;
}
var arr = splitComma(value);
var colorArr = [];
var length = arr.length;
switch (prefix) {
case RGB:
case RGBA:
for (var i = 0; i < length; ++i) {
colorArr[i] = parseFloat(arr[i]);
}
} // hsl, hsla to rgba
return colorArr;
return hslToRGBA(colorArr);
case HSL:
case HSLA:
for (var i = 0; i < length; ++i) {
if (arr[i].indexOf("%") !== -1) {
colorArr[i] = parseFloat(arr[i]) / 100;
} else {
colorArr[i] = parseFloat(arr[i]);
}
} // hsl, hsla to rgba
return hslToRGBA(colorArr);
}
}
return;
}
return;
}
/**
* @namespace DOM
*/
function hasClass(element, className) {
if (element.classList) {
return element.classList.contains(className);
/**
* Checks if the specified class value exists in the element's class attribute.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to search
* @return {boolean} return false if the class is not found.
* @example
import {hasClass} from "@daybrush/utils";
console.log(hasClass(element, "start")); // true or false
*/
function hasClass(element, className) {
if (element.classList) {
return element.classList.contains(className);
}
return !!element.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
}
/**
* Add the specified class value. If these classe already exist in the element's class attribute they are ignored.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to add
* @example
import {addClass} from "@daybrush/utils";
return !!element.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
}
function addClass(element, className) {
if (element.classList) {
element.classList.add(className);
} else {
element.className += " " + className;
addClass(element, "start");
*/
function addClass(element, className) {
if (element.classList) {
element.classList.add(className);
} else {
element.className += " " + className;
}
}
}
function removeClass(element, className) {
if (element.classList) {
element.classList.remove(className);
} else {
var reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
element.className = element.className.replace(reg, " ");
}
}
function fromCSS(elements, properties) {
if (!elements || !properties || !properties.length) {
return {};
}
/**
* Removes the specified class value.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to remove
* @example
import {removeClass} from "@daybrush/utils";
var element;
removeClass(element, "start");
*/
if (elements instanceof Element) {
element = elements;
} else if (elements.length) {
element = elements[0];
} else {
return {};
function removeClass(element, className) {
if (element.classList) {
element.classList.remove(className);
} else {
var reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
element.className = element.className.replace(reg, " ");
}
}
/**
* Gets the CSS properties from the element.
* @memberof DOM
* @param {HTMLElement | HTMLElement[]} elements - elements
* @param {string[]} properites - the CSS properties
* @return {object} returns CSS properties and values.
* @example
import {fromCSS} from "@daybrush/utils";
var cssObject = {};
var styles = window.getComputedStyle(element);
var length = properties.length;
console.log(fromCSS(element, ["left", "opacity", "top"])); // {"left": "10px", "opacity": 1, "top": "10px"}
*/
for (var i = 0; i < length; ++i) {
cssObject[properties[i]] = styles[properties[i]];
function fromCSS(elements, properties) {
if (!elements || !properties || !properties.length) {
return {};
}
var element;
if (elements instanceof Element) {
element = elements;
} else if (elements.length) {
element = elements[0];
} else {
return {};
}
var cssObject = {};
var styles = window.getComputedStyle(element);
var length = properties.length;
for (var i = 0; i < length; ++i) {
cssObject[properties[i]] = styles[properties[i]];
}
return cssObject;
}
return cssObject;
}
exports.RGB = RGB;
exports.RGBA = RGBA;
exports.HSL = HSL;
exports.HSLA = HSLA;
exports.COLOR_MODELS = COLOR_MODELS;
exports.FUNCTION = FUNCTION;
exports.PROPERTY = PROPERTY;
exports.ARRAY = ARRAY;
exports.OBJECT = OBJECT;
exports.STRING = STRING;
exports.NUMBER = NUMBER;
exports.UNDEFINED = UNDEFINED;
exports.getCrossBrowserProperty = getCrossBrowserProperty;
exports.TRANSFORM = TRANSFORM;
exports.FILTER = FILTER;
exports.ANIMATION = ANIMATION;
exports.KEYFRAMES = KEYFRAMES;
exports.cutHex = cutHex;
exports.hexToRGBA = hexToRGBA;
exports.toFullHex = toFullHex;
exports.hslToRGBA = hslToRGBA;
exports.stringToRGBA = stringToRGBA;
exports.isUndefined = isUndefined;
exports.isObject = isObject;
exports.isArray = isArray;
exports.isString = isString;
exports.splitSpace = splitSpace;
exports.splitComma = splitComma;
exports.splitBracket = splitBracket;
exports.splitUnit = splitUnit;
exports.camelize = camelize;
exports.decamelize = decamelize;
exports.now = now;
exports.requestAnimationFrame = requestAnimationFrame;
exports.hasClass = hasClass;
exports.addClass = addClass;
exports.removeClass = removeClass;
exports.fromCSS = fromCSS;
exports.COLOR_MODELS = COLOR_MODELS;
exports.cutHex = cutHex;
exports.hexToRGBA = hexToRGBA;
exports.hex3to6 = hex3to6;
exports.hslToRGBA = hslToRGBA;
exports.stringToRGBA = stringToRGBA;
exports.RGB = RGB;
exports.RGBA = RGBA;
exports.HSL = HSL;
exports.HSLA = HSLA;
exports.TRANSFORM = TRANSFORM;
exports.FILTER = FILTER;
exports.ANIMATION = ANIMATION;
exports.KEYFRAMES = KEYFRAMES;
exports.isUndefined = isUndefined;
exports.isObject = isObject;
exports.isArray = isArray;
exports.isString = isString;
exports.splitSpace = splitSpace;
exports.splitComma = splitComma;
exports.splitBracket = splitBracket;
exports.splitUnit = splitUnit;
exports.camelize = camelize;
exports.decamelize = decamelize;
exports.now = now;
exports.requestAnimationFrame = requestAnimationFrame;
exports.hasClass = hasClass;
exports.addClass = addClass;
exports.removeClass = removeClass;
exports.fromCSS = fromCSS;
})));
//# sourceMappingURL=utils.js.map

34

package.json
{
"name": "@daybrush/utils",
"version": "0.1.3",
"version": "0.2.0",
"description": "utils for daybrush",

@@ -19,3 +19,13 @@ "main": "dist/utils.js",

"splitComma",
"splitBracket"
"splitBracket",
"camelize",
"decamelize",
"now",
"requestAnimationFrame",
"transform",
"filter",
"animation",
"crossbrowser",
"rgb",
"hsl"
],

@@ -25,3 +35,10 @@ "scripts": {

"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
"build:rollup": "rollup -c"
"build:rollup": "rollup -c",
"doc": "rm -rf ./doc && jsdoc -c jsdoc.json",
"deploy": "gh-pages -d ./demo --dest=./ --add",
"release": "npm run build && npm run release:current && npm run release:latest && npm run release:doc && npm run deploy",
"release:mkdir": "mkdir -p ./demo/release",
"release:current": "npm run release:mkdir && rm -rf ./demo/release/$npm_package_version && cp -a ./dist/. ./demo/release/$npm_package_version",
"release:latest": "npm run release:mkdir && rm -rf ./demo/release/latest && cp -a ./dist/. ./demo/release/latest",
"release:doc": "npm run doc && cp -a ./doc/. ./demo/release/latest/doc && cp -a ./doc/. ./demo/release/$npm_package_version/doc"
},

@@ -39,11 +56,16 @@ "repository": {

"devDependencies": {
"@daybrush/jsdoc": "^0.2.1",
"daybrush-jsdoc-template": "^1.3.2",
"gh-pages": "^2.0.1",
"rollup": "^0.66.6",
"rollup-plugin-es3": "^1.1.0",
"rollup-plugin-prototype-minify": "^1.0.4",
"rollup-plugin-replace": "^2.1.0",
"string-replace": "^0.2.0",
"rollup": "^0.66.6",
"rollup-plugin-typescript": "^1.0.0",
"rollup-plugin-uglify": "^6.0.0",
"string-replace": "^0.2.0",
"tslint": "^5.11.0",
"typescript": "^3.1.3"
}
},
"dependencies": {}
}

62

README.md
# @daybrush/utils [![npm version](https://badge.fury.io/js/%40daybrush%2Futils.svg)](https://badge.fury.io/js/%40daybrush%2Futils)
utils for Daybush
utils for daybrush
[**API Documentation**](http://daybrush.com/utils/release/latest/doc/index.html)
### consts
* RGB
* RGBA
* HSL
* HSLA
```
$ npm i @daybrush/utils
```
```js
import {TRANSFORM, requestAnimationFrame, splitComma} from "@daybrush/utils";
```
### [Consts](http://daybrush.com/utils/release/latest/doc/Consts.html)
* OBJECT
* PROPERTY
* STRING
* UNDEFINED
* FUNCTION
* ARRAY
### [Cross Browser](http://daybrush.com/utils/release/latest/doc/CrossBrowser.html)
* TRANSFORM

@@ -15,10 +28,29 @@ * FILTER

* KEYFRAMES
* getCrossBrowserProperty
* now
* requestAnimationFrame
### functions
### [Color](http://daybrush.com/utils/release/latest/doc/Color.html)
* RGB
* RGBA
* HSL
* HSLA
* COLOR_MODELS
* cutHex
* hexToRGBA
* hslToRGBA
* stringToRGBA
* toFullHex
### [DOM](http://daybrush.com/utils/release/latest/doc/DOM.html)
* hasClass
* removeClass
* addClass
* fromCSS
### [Utils](http://daybrush.com/utils/release/latest/doc/Utils.html)
* splitUnit
* splitComma
* splitSpace
* hexToRGBA
* hex3to6
* hslToRGBA
* splitBracket
* isUndefined

@@ -28,8 +60,4 @@ * isObject

* isString
* camelize,
* decamelize,
* hasClass
* removeClass,
* addClass,
* fromCSS,
* requestAnimationFrame
* camelize
* decamelize

12

rollup.config.js
import typescript from 'rollup-plugin-typescript';
import PrototypeMinify from "rollup-plugin-prototype-minify";
import es3 from "rollup-plugin-es3";
const merge = require("./config/merge");

@@ -15,5 +17,6 @@ const banner = require("./config/banner");

plugins: [
plugin, PrototypeMinify({sourcemap: true})
plugin, PrototypeMinify({sourcemap: true}),
],
output: {
banner,
format: "es",

@@ -33,6 +36,9 @@ freeze: false,

},
}, {
},
{
input: 'src/index.ts',
plugins: [es3({sourcemap: true})],
output: {
format: "cjs",
format: "umd",
name: "utils",
file: `./dist/utils.js`,

@@ -39,0 +45,0 @@ },

61

src/color.ts

@@ -8,3 +8,2 @@ import { RGB, RGBA, HSL, HSLA } from "./consts";

*/
export const COLOR_MODELS = [RGB, RGBA, HSL, HSLA];

@@ -14,10 +13,11 @@ /**

* @memberof Color
* @param {String} hex - hex color
* @return {String} hex color
* @param {string} hex - hex color
* @return {string} hex color
* @example
console.log(cutHex("#000000"))
// "000000"
import {cutHex} from "@daybrush/utils";
console.log(cutHex("#000000")) // "000000"
*/
export function cutHex(hex: string) {
return (hex.charAt(0) === "#") ? hex.substring(1) : hex;
return hex.replace("#", "");
}

@@ -30,6 +30,8 @@ /**

* @example
console.log(hexToRGB("#000000"));
// [0, 0, 0]
console.log(hexToRGB("#201045"));
// [32, 16, 69]
import {hexToRGBA} from "@daybrush/utils";
console.log(hexToRGBA("#00000005"));
// [0, 0, 0, 1]
console.log(hexToRGBA("#201045"));
// [32, 16, 69, 1]
*/

@@ -50,15 +52,18 @@ export function hexToRGBA(hex: string) {

/**
* convert 3-digit hex color to 6-digit hex color.
* convert 3(or 4)-digit hex color to 6(or 8)-digit hex color.
* @memberof Color
* @param {String} hex - 3-digit hex color
* @return {String} 6-digit hex color
* @param {String} hex - 3(or 4)-digit hex color
* @return {String} 6(or 8)-digit hex color
* @example
console.log(hex3to6("#123"));
// "#112233"
import {toFullHex} from "@daybrush/utils";
console.log(toFullHex("#123")); // "#112233"
console.log(toFullHex("#123a")); // "#112233aa"
*/
export function hex3to6(h: string) {
export function toFullHex(h: string) {
const r = h.charAt(1);
const g = h.charAt(2);
const b = h.charAt(3);
const arr = ["#", r, r, g, g, b, b];
const a = h.charAt(4);
const arr = ["#", r, r, g, g, b, b, a, a];

@@ -68,9 +73,11 @@ return arr.join("");

/**
* convert hsl color to rgb color.
* convert hsl color to rgba color.
* @memberof Color
* @param {Array} hsl(a) - hsl color(hue: 0 ~ 360, saturation: 0 ~ 1, lightness: 0 ~ 1, alpha: 0 ~ 1)
* @return {Array} rgb color
* @return {Array} rgba color
* @example
console.log(hslToRGB([150, 0.5, 0.4]));
// [51, 153, 102]
import {hslToRGBA} from "@daybrush/utils";
console.log(hslToRGBA([150, 0.5, 0.4]));
// [51, 153, 102, 1]
*/

@@ -117,9 +124,15 @@ export function hslToRGBA(hsl: number[]) {

* @memberof Color
* @param {String} - Hex(rgb, rgba) or RGB(A), or HSL(A)
* @param {String} - 3-hex(#000), 4-hex(#0000) 6-hex(#000000), 8-hex(#00000000) or RGB(A), or HSL(A)
* @return {Array} rgba color
* @example
import {stringToRGBA} from "@daybrush/utils";
console.log(stringToRGBA("#000000")); // [0, 0, 0, 1]
console.log(stringToRGBA("rgb(100, 100, 100)")); // [100, 100, 100, 1]
console.log(stringToRGBA("hsl(150, 0.5, 0.4)")); // [51, 153, 102, 1]
*/
export function stringToRGBA(color: string) {
if (color.charAt(0) === "#") {
if (color.length === 4) {
return hexToRGBA(hex3to6(color));
if (color.length === 4 || color.length === 5) {
return hexToRGBA(toFullHex(color));
} else {

@@ -126,0 +139,0 @@ return hexToRGBA(color);

182

src/consts.ts

@@ -0,1 +1,6 @@

/**
* @namespace
* @name Consts
*/
export interface ObjectInterface<T> {

@@ -5,5 +10,132 @@ [name: string]: T;

/**
* get string "rgb"
* @memberof Color
* @example
import {RGB} from "@daybrush/utils";
console.log(RGB); // "rgb"
*/
export const RGB = "rgb";
/**
* get string "rgba"
* @memberof Color
* @example
import {RGBA} from "@daybrush/utils";
console.log(RGBA); // "rgba"
*/
export const RGBA = "rgba";
/**
* get string "hsl"
* @memberof Color
* @example
import {HSL} from "@daybrush/utils";
console.log(HSL); // "hsl"
*/
export const HSL = "hsl";
/**
* get string "hsla"
* @memberof Color
* @example
import {HSLA} from "@daybrush/utils";
console.log(HSLA); // "hsla"
*/
export const HSLA = "hsla";
/**
* gets an array of color models.
* @memberof Color
* @example
import {COLOR_MODELS} from "@daybrush/utils";
console.log(COLOR_MODELS); // ["rgb", "rgba", "hsl", "hsla"];
*/
export const COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
/**
* get string "function"
* @memberof Consts
* @example
import {FUNCTION} from "@daybrush/utils";
console.log(FUNCTION); // "function"
*/
export const FUNCTION = "function";
/**
* get string "property"
* @memberof Consts
* @example
import {PROPERTY} from "@daybrush/utils";
console.log(PROPERTY); // "property"
*/
export const PROPERTY = "property";
/**
* get string "array"
* @memberof Consts
* @example
import {ARRAY} from "@daybrush/utils";
console.log(ARRAY); // "array"
*/
export const ARRAY = "array";
/**
* get string "object"
* @memberof Consts
* @example
import {OBJECT} from "@daybrush/utils";
console.log(OBJECT); // "object"
*/
export const OBJECT = "object";
/**
* get string "string"
* @memberof Consts
* @example
import {STRING} from "@daybrush/utils";
console.log(STRING); // "string"
*/
export const STRING = "string";
/**
* get string "number"
* @memberof Consts
* @example
import {NUMBER} from "@daybrush/utils";
console.log(NUMBER); // "number"
*/
export const NUMBER = "number";
/**
* get string "undefined"
* @memberof Consts
* @example
import {UNDEFINED} from "@daybrush/utils";
console.log(UNDEFINED); // "undefined"
*/
export const UNDEFINED = "undefined";
const prefixes: string[] = ["webkit", "ms", "moz", "o"];
const checkProperties = /*#__PURE__*/(property: string) => {
if (typeof document === "undefined") {
/**
* @namespace CrossBrowser
*/
/**
* Get a CSS property with a vendor prefix that supports cross browser.
* @function
* @param {string} property - A CSS property
* @return {string} CSS property with cross-browser vendor prefix
* @memberof CrossBrowser
* @example
import {getCrossBrowserProperty} from "@daybrush/utils";
console.log(getCrossBrowserProperty("transform")); // "transform", "-ms-transform", "-webkit-transform"
console.log(getCrossBrowserProperty("filter")); // "filter", "-webkit-filter"
*/
export const getCrossBrowserProperty = /*#__PURE__*/(property: string) => {
if (typeof document === UNDEFINED) {
return "";

@@ -14,3 +146,3 @@ }

if (typeof styles[property] !== "undefined") {
if (typeof styles[property] !== UNDEFINED) {
return property;

@@ -21,3 +153,3 @@ }

if (typeof styles[name] !== "undefined") {
if (typeof styles[name] !== UNDEFINED) {
return name;

@@ -29,9 +161,37 @@ }

export const RGB = "rgb";
export const RGBA = "rgba";
export const HSL = "hsl";
export const HSLA = "hsla";
export const TRANSFORM = /*#__PURE__*/checkProperties("transform");
export const FILTER = /*#__PURE__*/checkProperties("filter");
export const ANIMATION = /*#__PURE__*/checkProperties("animation");
/**
* get string "transfrom" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {TRANSFORM} from "@daybrush/utils";
console.log(TRANSFORM); // "transform", "-ms-transform", "-webkit-transform"
*/
export const TRANSFORM = /*#__PURE__*/getCrossBrowserProperty("transform");
/**
* get string "filter" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {FILTER} from "@daybrush/utils";
console.log(FILTER); // "filter", "-ms-filter", "-webkit-filter"
*/
export const FILTER = /*#__PURE__*/getCrossBrowserProperty("filter");
/**
* get string "animation" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {ANIMATION} from "@daybrush/utils";
console.log(ANIMATION); // "animation", "-ms-animation", "-webkit-animation"
*/
export const ANIMATION = /*#__PURE__*/getCrossBrowserProperty("animation");
/**
* get string "keyframes" with the vendor prefix.
* @memberof CrossBrowser
* @example
import {KEYFRAMES} from "@daybrush/utils";
console.log(KEYFRAMES); // "keyframes", "-ms-keyframes", "-webkit-keyframes"
*/
export const KEYFRAMES = /*#__PURE__*/ANIMATION.replace("animation", "keyframes");

46

src/css.ts
import { ObjectInterface } from "./consts";
/**
* @namespace DOM
*/
/**
* Checks if the specified class value exists in the element's class attribute.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to search
* @return {boolean} return false if the class is not found.
* @example
import {hasClass} from "@daybrush/utils";
console.log(hasClass(element, "start")); // true or false
*/
export function hasClass(element: HTMLElement, className: string) {

@@ -10,2 +25,12 @@ if (element.classList) {

/**
* Add the specified class value. If these classe already exist in the element's class attribute they are ignored.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to add
* @example
import {addClass} from "@daybrush/utils";
addClass(element, "start");
*/
export function addClass(element: HTMLElement, className: string) {

@@ -19,2 +44,12 @@ if (element.classList) {

/**
* Removes the specified class value.
* @memberof DOM
* @param {HTMLElement} element - target
* @param {string} className - the class name to remove
* @example
import {removeClass} from "@daybrush/utils";
removeClass(element, "start");
*/
export function removeClass(element: HTMLElement, className: string) {

@@ -30,2 +65,13 @@ if (element.classList) {

/**
* Gets the CSS properties from the element.
* @memberof DOM
* @param {HTMLElement | HTMLElement[]} elements - elements
* @param {string[]} properites - the CSS properties
* @return {object} returns CSS properties and values.
* @example
import {fromCSS} from "@daybrush/utils";
console.log(fromCSS(element, ["left", "opacity", "top"])); // {"left": "10px", "opacity": 1, "top": "10px"}
*/
export function fromCSS(elements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, properties: string[]) {

@@ -32,0 +78,0 @@ if (!elements || !properties || !properties.length) {

3

src/index.ts

@@ -0,4 +1,5 @@

export * from "./consts";
export * from "./color";
export * from "./consts";
export * from "./utils";
export * from "./css";

158

src/utils.ts

@@ -1,22 +0,79 @@

import { ObjectInterface } from "./consts";
import { ObjectInterface, UNDEFINED, STRING, OBJECT } from "./consts";
/**
* @namespace
* @name Utils
*/
/**
* Check the type that the value is undefined.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isUndefined} from "@daybrush/utils";
console.log(isUndefined(undefined)); // true
console.log(isUndefined("")); // false
console.log(isUndefined(1)); // false
console.log(isUndefined(null)); // false
*/
export function isUndefined(value: any): value is undefined {
return (typeof value === "undefined");
return (typeof value === UNDEFINED);
}
/**
* Check the type that the value is object.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isObject} from "@daybrush/utils";
console.log(isObject({})); // true
console.log(isObject(undefined)); // false
console.log(isObject("")); // false
console.log(isObject(null)); // false
*/
export function isObject(value: any): value is ObjectInterface<any> {
return value && (typeof value === "object");
return value && (typeof value === OBJECT);
}
/**
* Check the type that the value is isArray.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isArray} from "@daybrush/utils";
console.log(isArray([])); // true
console.log(isArray({})); // false
console.log(isArray(undefined)); // false
console.log(isArray(null)); // false
*/
export function isArray(value: any): value is any[] {
return Array.isArray(value);
}
/**
* Check the type that the value is string.
* @memberof Utils
* @param {string} value - Value to check the type
* @return {boolean} true if the type is correct, false otherwise
* @example
import {isString} from "@daybrush/utils";
console.log(isString("1234")); // true
console.log(isString(undefined)); // false
console.log(isString(1)); // false
console.log(isString(null)); // false
*/
export function isString(value: any): value is string {
return typeof value === "string";
return typeof value === STRING;
}
/**
* divide text by space.
* @memberof Property
* @function splitSpace
* @param {String} text - text to divide
* @memberof Utils
* @param {string} text - text to divide
* @return {Array} divided texts
* @example
import {spliceSpace} from "@daybrush/utils";
console.log(splitSpace("a b c d e f g"));

@@ -35,7 +92,8 @@ // ["a", "b", "c", "d", "e", "f", "g"]

* divide text by comma.
* @memberof Property
* @function splitComma
* @param {String} text - text to divide
* @memberof Utils
* @param {string} text - text to divide
* @return {Array} divided texts
* @example
import {splitComma} from "@daybrush/utils";
console.log(splitComma("a,b,c,d,e,f,g"));

@@ -53,3 +111,15 @@ // ["a", "b", "c", "d", "e", "f", "g"]

}
/**
* divide text by bracket "(", ")".
* @memberof Utils
* @param {string} text - text to divide
* @return {object} divided texts
* @example
import {splitBracket} from "@daybrush/utils";
console.log(splitBracket("a(1, 2)"));
// {prefix: "a", value: "1, 2", suffix: ""}
console.log(splitBracket("a(1, 2)b"));
// {prefix: "a", value: "1, 2", suffix: "b"}
*/
export function splitBracket(text: string) {

@@ -64,2 +134,17 @@ const matches = (/([^(]*)\(([\s\S]*)\)([\s\S]*)/g).exec(text);

}
/**
* divide text by number and unit.
* @memberof Utils
* @param {string} text - text to divide
* @return {object} divided texts
* @example
import {splitUnit} from "@daybrush/utils";
console.log(splitUnit("10px"));
// {prefix: "", value: 10, unit: "px"}
console.log(splitUnit("-10px"));
// {prefix: "", value: -10, unit: "px"}
console.log(splitUnit("a10%"));
// {prefix: "a", value: 10, unit: "%"}
*/
export function splitUnit(text: string) {

@@ -77,14 +162,61 @@ const matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);

}
/**
* transform strings to camel-case
* @memberof Utils
* @param {String} text - string
* @return {String} camel-case string
* @example
import {camelize} from "@daybrush/utils";
console.log(camelize("transform-origin")); // transformOrigin
console.log(camelize("abcd_efg")); // abcdEfg
console.log(camelize("abcd efg")); // abcdEfg
*/
export function camelize(str: string) {
return str.replace(/[\s-_]([a-z])/g, (all, letter) => letter.toUpperCase());
}
export function decamelize(str: string) {
return str.replace(/([a-z])([A-Z])/g, (all, letter, letter2) => `${letter}-${letter2.toLowerCase()}`);
/**
* transform a camelized string into a lowercased string.
* @memberof Utils
* @param {string} text - a camel-cased string
* @param {string} [separator="-"] - a separator
* @return {string} a lowercased string
* @example
import {decamelize} from "@daybrush/utils";
console.log(decamelize("transformOrigin")); // transform-origin
console.log(decamelize("abcdEfg", "_")); // abcd_efg
*/
export function decamelize(str: string, separator: string = "-") {
return str.replace(/([a-z])([A-Z])/g, (all, letter, letter2) => `${letter}${separator}${letter2.toLowerCase()}`);
}
/**
* Date.now() method
* @memberof CrossBrowser
* @return {number} milliseconds
* @example
import {now} from "@daybrush/utils";
console.log(now()); // 12121324241(milliseconds)
*/
export function now() {
return Date.now ? Date.now() : new Date().getTime();
}
/**
* window.requestAnimationFrame() method with cross browser.
* @function
* @memberof CrossBrowser
* @param {FrameRequestCallback} callback - The function to call when it's time to update your animation for the next repaint.
* @return {number} id
* @example
import {requestAnimationFrame} from "@daybrush/utils";
requestAnimationFrame((timestamp) => {
console.log(timestamp);
});
*/
export const requestAnimationFrame = /*#__PURE__*/(() => {
const firstTime = now();
const raf = typeof window !== "undefined" &&
const raf = typeof window !== UNDEFINED &&
(window.requestAnimationFrame || window.webkitRequestAnimationFrame ||

@@ -91,0 +223,0 @@ (window as any).mozRequestAnimationFrame);

dist/utils.esm.js.map

Sorry, the diff of this file is not supported yet

dist/utils.js.map

Sorry, the diff of this file is not supported yet