10000 feat: add existing utilities · coreui/coreui-utils@25a0def · GitHub
[go: up one dir, main page]
Skip to content

Commit 25a0def

Browse files
woothuwoothu
committed
feat: add existing utilities
1 parent d4dde10 commit 25a0def

8 files changed

+186
-0
lines changed

‎src/deep-objects-merge.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const deepObjectsMerge = (target, source) => {
2+
// Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
3+
for (const key of Object.keys(source)) {
4+
if (source[key] instanceof Object) {
5+
Object.assign(source[key], deepObjectsMerge(target[key], source[key]))
6+
}
7+
}
8+
9+
// Join `target` and modified `source`
10+
Object.assign(target || {}, source)
11+
return target
12+
}
13+
14+
export default deepObjectsMerge

‎src/get-color.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import getStyle from './get-style'
2+
3+
const getColor = (rawProperty, element = document.body) => {
4+
const property = `--${rawProperty}`
5+
const style = getStyle(property, element)
6+
return style ? style : rawProperty
7+
}
8+
9+
export default getColor

‎src/get-css-custom-properties.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* --------------------------------------------------------------------------
3+
* Licensed under MIT (https://coreui.io/license)
4+
* @returns {string} css custom property name
5+
* --------------------------------------------------------------------------
6+
*/
7+
const getCssCustomProperties = () => {
8+
const cssCustomProperties = {}
9+
const sheets = document.styleSheets
10+
let cssText = ''
11+
for (let i = sheets.length - 1; i > -1; i--) {
12+
const rules = sheets[i].cssRules
13+
for (let j = rules.length - 1; j > -1; j--) {
14+
if (rules[j].selectorText === '.ie-custom-properties') {
15+
// eslint-disable-next-line prefer-destructuring
16+
cssText = rules[j].cssText
17+
break
18+
}
19+
}
20+
21+
if (cssText) {
22+
break
23+
}
24+
}
25+
26+
// eslint-disable-next-line unicorn/prefer-string-slice
27+
cssText = cssText.substring(
28+
cssText.lastIndexOf('{') + 1,
29+
cssText.lastIndexOf('}')
30+
)
31+
32+
cssText.split(';').forEach(property => {
33+
if (property) {
34+
const name = property.split(': ')[0]
35+
const value = property.split(': ')[1]
36+
if (name && value) {
37+
cssCustomProperties[`--${name.trim()}`] = value.trim()
38+
}
39+
}
40+
})
41+
return cssCustomProperties
42+
}
43+
44+
export default getCssCustomProperties

‎src/get-style.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import getCssCustomProperties from './get-css-custom-properties'
2+
3+
const minIEVersion = 10
4+
const isIE1x = () => Boolean(document.documentMode) && document.documentMode >= minIEVersion
5+
const isCustomProperty = property => property.match(/^--.*/i)
6+
7+
const getStyle = (property, element = document.body) => {
8+
let style
9+
10+
if (isCustomProperty(property) && isIE1x()) {
11+
const cssCustomProperties = getCssCustomProperties()
12+
style = cssCustomProperties[property]
13+
} else {
14+
style = window.getComputedStyle(element, null).getPropertyValue(property).replace(/^\s/, '')
15+
}
16+
17+
return style
18+
}
19+
20+
export default getStyle

‎src/hex-to-rgb.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* eslint-disable no-magic-numbers */
2+
const hexToRgb = color => {
3+
if (typeof color === 'undefined') {
4+
throw new TypeError('Hex color is not defined')
5+
}
6+
7+
const hex = color.match(/^#(?:[0-9a-f]{3}){1,2}$/i)
8+
9+
if (!hex) {
10+
throw new Error(`${color} is not a valid hex color`)
11+
}
12+
13+
let r
14+
let g
15+
let b
16+
17+
if (color.length === 7) {
18+
r = parseInt(color.slice(1, 3), 16)
19+
g = parseInt(color.slice(3, 5), 16)
20+
b = parseInt(color.slice(5, 7), 16)
21+
} else {
22+
r = parseInt(color.slice(1, 2), 16)
23+
g = parseInt(color.slice(2, 3), 16)
24+
b = parseInt(color.slice(3, 5), 16)
25+
}
26+
27+
return `rgba(${r}, ${g}, ${b})`
28+
}
29+
30+
export default hexToRgb

‎src/hex-to-rgba.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* eslint-disable no-magic-numbers */
2+
const hexToRgba = (color, opacity = 100) => {
3+
if (typeof color === 'undefined') {
4+
throw new TypeError('Hex color is not defined')
5+
}
6+
7+
const hex = color.match(/^#(?:[0-9a-f]{3}){1,2}$/i)
8+
9+
if (!hex) {
10+
throw new Error(`${color} is not a valid hex color`)
11+
}
12+
13+
let r
14+
let g
15+
let b
16+
17+
if (color.length === 7) {
18+
r = parseInt(color.slice(1, 3), 16)
19+
g = parseInt(color.slice(3, 5), 16)
20+
b = parseInt(color.slice(5, 7), 16)
21+
} else {
22+
r = parseInt(color.slice(1, 2), 16)
23+
g = parseInt(color.slice(2, 3), 16)
24+
b = parseInt(color.slice(3, 5), 16)
25+
}
26+
27+
return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
28+
}
29+
30+
export default hexToRgba

‎src/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import deepObjectsMerge from './deep-objects-merge'
2+
import getColor from './get-color'
3+
import getStyle from './get-style'
4+
import hexToRgb from './hex-to-rgb'
5+
import hexToRgba from './hex-to-rgba'
6+
import rgbToHex from './rgb-to-hex'
7+
8+
export {
9+
deepObjectsMerge,
10+
getColor,
11+
getStyle,
12+
hexToRgb,
13+
hexToRgba,
14+
rgbToHex
15+
}

‎src/rgb-to-hex.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* eslint-disable no-magic-numbers */
2+
const rgbToHex = color => {
3+
if (typeof color === 'undefined') {
4+
throw new TypeError('Hex color is not defined')
5+
}
6+
7+
if (color === 'transparent') {
8+
return '#00000000'
9+
}
10+
11+
const rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)
12+
13+
if (!rgb) {
14+
throw new Error(`${color} is not a valid rgb color`)
15+
}
16+
17+
const r = `0${parseInt(rgb[1], 10).toString(16)}`
18+
const g = `0${parseInt(rgb[2], 10).toString(16)}`
19+
const b = `0${parseInt(rgb[3], 10).toString(16)}`
20+
21+
return `#${r.slice(-2)}${g.slice(-2)}${b.slice(-2)}`
22+
}
23+
24+
export default rgbToHex

0 commit comments

Comments
 (0)
0