176 lines
5.1 KiB
JavaScript
176 lines
5.1 KiB
JavaScript
export default {
|
|
methods: {
|
|
getCssCustomProperties() {
|
|
if (process.client) {
|
|
const cssCustomProperties = {}
|
|
const sheets = document.styleSheets
|
|
let cssText = ''
|
|
for (let i = sheets.length - 1; i > -1; i--) {
|
|
const rules = sheets[i].cssRules
|
|
for (let j = rules.length - 1; j > -1; j--) {
|
|
if (rules[j].selectorText === '.ie-custom-properties') {
|
|
// eslint-disable-next-line prefer-destructuring
|
|
cssText = rules[j].cssText
|
|
break
|
|
}
|
|
}
|
|
|
|
if (cssText) {
|
|
break
|
|
}
|
|
}
|
|
|
|
// eslint-disable-next-line unicorn/prefer-string-slice
|
|
cssText = cssText.substring(
|
|
cssText.lastIndexOf('{') + 1,
|
|
cssText.lastIndexOf('}')
|
|
)
|
|
|
|
cssText.split(';').forEach(property => {
|
|
if (property) {
|
|
const name = property.split(': ')[0]
|
|
const value = property.split(': ')[1]
|
|
if (name && value) {
|
|
cssCustomProperties[`--${name.trim()}`] = value.trim()
|
|
}
|
|
}
|
|
})
|
|
return cssCustomProperties
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
deepObjectsMerge(target, source) {
|
|
// Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
|
|
for (const key of Object.keys(source)) {
|
|
if (source[key] instanceof Object) {
|
|
Object.assign(source[key], this.deepObjectsMerge(target[key], source[key]))
|
|
}
|
|
}
|
|
|
|
// Join `target` and modified `source`
|
|
Object.assign(target || {}, source)
|
|
return target
|
|
},
|
|
getColor(rawProperty, element = process.client ? document.body : null) {
|
|
const property = `--${rawProperty}`
|
|
const style = this.getStyle(property, element)
|
|
return style ? style : rawProperty
|
|
},
|
|
getStyle(property, element = process.client ? document.body : null) {
|
|
if (process.client) {
|
|
const minIEVersion = 10
|
|
const isIE1x = () => Boolean(document.documentMode) && document.documentMode >= minIEVersion
|
|
const isCustomProperty = property => property.match(/^--.*/i)
|
|
///
|
|
let style
|
|
|
|
if (isCustomProperty(property) && isIE1x()) {
|
|
const cssCustomProperties = this.getCssCustomProperties()
|
|
style = cssCustomProperties[property]
|
|
} else {
|
|
style = window.getComputedStyle(element, null).getPropertyValue(property).replace(/^\s/, '')
|
|
}
|
|
|
|
return style
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
hexToRgb(color) {
|
|
if (typeof color === 'undefined') {
|
|
throw new TypeError('Hex color is not defined')
|
|
}
|
|
|
|
const hex = color.match(/^#(?:[0-9a-f]{3}){1,2}$/i)
|
|
|
|
if (!hex) {
|
|
throw new Error(`${color} is not a valid hex color`)
|
|
}
|
|
|
|
let r
|
|
let g
|
|
let b
|
|
|
|
if (color.length === 7) {
|
|
r = parseInt(color.slice(1, 3), 16)
|
|
g = parseInt(color.slice(3, 5), 16)
|
|
b = parseInt(color.slice(5, 7), 16)
|
|
} else {
|
|
r = parseInt(color.slice(1, 2), 16)
|
|
g = parseInt(color.slice(2, 3), 16)
|
|
b = parseInt(color.slice(3, 5), 16)
|
|
}
|
|
|
|
return `rgba(${r}, ${g}, ${b})`
|
|
},
|
|
hexToRgba(color, opacity = 100) {
|
|
if (typeof color === 'undefined') {
|
|
throw new TypeError('Hex color is not defined')
|
|
}
|
|
|
|
const hex = color.match(/^#(?:[0-9a-f]{3}){1,2}$/i)
|
|
|
|
if (!hex) {
|
|
throw new Error(`${color} is not a valid hex color`)
|
|
}
|
|
|
|
let r
|
|
let g
|
|
let b
|
|
|
|
if (color.length === 7) {
|
|
r = parseInt(color.slice(1, 3), 16)
|
|
g = parseInt(color.slice(3, 5), 16)
|
|
b = parseInt(color.slice(5, 7), 16)
|
|
} else {
|
|
r = parseInt(color.slice(1, 2), 16)
|
|
g = parseInt(color.slice(2, 3), 16)
|
|
b = parseInt(color.slice(3, 5), 16)
|
|
}
|
|
|
|
return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
|
|
},
|
|
makeUid() {
|
|
const key = Math.random().toString(36).substr(2)
|
|
return 'uid-' + key
|
|
},
|
|
omitByKeys(originalObject, keys) {
|
|
var newObj = {}
|
|
var objKeys = Object.keys(originalObject)
|
|
for (var i = 0; i < objKeys.length; i++) {
|
|
!keys.includes(objKeys[i]) && (newObj[objKeys[i]] = originalObject[objKeys[i]])
|
|
}
|
|
return newObj
|
|
},
|
|
pickByKeys(originalObject, keys) {
|
|
var newObj = {}
|
|
for (var i = 0; i < keys.length; i++) {
|
|
newObj[keys[i]] = originalObject[keys[i]]
|
|
}
|
|
return newObj
|
|
},
|
|
rgbToHex(color) {
|
|
if (typeof color === 'undefined') {
|
|
throw new TypeError('Hex color is not defined')
|
|
}
|
|
|
|
if (color === 'transparent') {
|
|
return '#00000000'
|
|
}
|
|
|
|
const rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)
|
|
|
|
if (!rgb) {
|
|
throw new Error(`${color} is not a valid rgb color`)
|
|
}
|
|
|
|
const r = `0${parseInt(rgb[1], 10).toString(16)}`
|
|
const g = `0${parseInt(rgb[2], 10).toString(16)}`
|
|
const b = `0${parseInt(rgb[3], 10).toString(16)}`
|
|
|
|
return `#${r.slice(-2)}${g.slice(-2)}${b.slice(-2)}`
|
|
}
|
|
}
|
|
}
|