569 lines
22 KiB
JavaScript
569 lines
22 KiB
JavaScript
class YJColorPicker {
|
|
constructor(options = {}) {
|
|
let _this = this
|
|
let RInput
|
|
let GInput
|
|
let BInput
|
|
let AInput
|
|
|
|
let config = {
|
|
el: options.el,
|
|
size: "mini",
|
|
isLog: false,
|
|
disabled: options.disabled || false, //是否禁止打开颜色选择器
|
|
alpha: false, //是否开启透明度
|
|
clickDefineColor: clickDefineColor,
|
|
hasClear: true,
|
|
openPickerAni: 'opacity',
|
|
defaultColor: options.defaultColor,
|
|
pickerInputChange: pickerInputChange,
|
|
startMainCallback: (t) => {
|
|
_this.colorPicker && (_this.colorPicker.picker.style.opacity = 0)
|
|
setTimeout(() => {
|
|
customizeStyle()
|
|
}, 0);
|
|
}
|
|
}
|
|
this.el = options.el
|
|
if (options.sure) {
|
|
config.sure = (color) => {
|
|
// this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
|
|
let c = Cesium.Color.fromCssColorString(color)
|
|
if (AInput) {
|
|
c = c.withAlpha(AInput.value)
|
|
this.pickAlphaInputValue = AInput.value
|
|
}
|
|
color = c.toCssHexString()
|
|
if (typeof options.sure == 'function') {
|
|
options.sure(color)
|
|
}
|
|
customizeStyle()
|
|
}
|
|
}
|
|
if (options.clear) {
|
|
config.clear = () => {
|
|
if (AInput) {
|
|
AInput.value = this.pickAlphaInputValue = 1
|
|
}
|
|
this.colorPicker.config.defaultColor = ''
|
|
customizeStyle()
|
|
if (typeof options.clear == 'function') {
|
|
options.clear()
|
|
}
|
|
// setTimeout(() => {
|
|
// this.pickAlphaInputValue = 100
|
|
// this.colorPicker.$Dom.pickerInput.value = ''
|
|
// if (options.clear && typeof options.clear == 'function') {
|
|
// options.clear()
|
|
// }
|
|
// customizeStyle()
|
|
// }, this.colorPicker.config.pickerAnimationTime);
|
|
}
|
|
}
|
|
let CesiumColor
|
|
if (config.defaultColor) {
|
|
CesiumColor = Cesium.Color.fromCssColorString(config.defaultColor)
|
|
}
|
|
// if (options.predefineColor) {
|
|
// config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
|
|
// }
|
|
config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
|
|
this.colorPicker = new ewPlugins('colorpicker', config)
|
|
// window.colorPicker = this.colorPicker
|
|
|
|
customizeStyle()
|
|
|
|
function customizeStyle() {
|
|
if (!_this.colorPicker || !_this.colorPicker.picker) {
|
|
return
|
|
}
|
|
let isSubtract = false
|
|
let box = _this.colorPicker.box
|
|
let picker = _this.colorPicker.picker
|
|
let x = box.getBoundingClientRect().x
|
|
let y = box.getBoundingClientRect().y
|
|
let height = 0
|
|
|
|
// if (picker.style.display === 'none') {
|
|
// picker.style.display = 'block'
|
|
// height = picker.offsetHeight
|
|
// console.log('picker.style.display.opacity', picker.style.display.opacity)
|
|
// picker.style.display = 'none'
|
|
// }
|
|
// console.log('===========================================')
|
|
// console.log((y + box.offsetHeight + 4), height, window.innerHeight)
|
|
// if ((y + box.offsetHeight + 4) + height > window.innerHeight) {
|
|
// console.log(y, height)
|
|
// picker.style.top = y - height + 'px'
|
|
// }
|
|
// else {
|
|
// picker.style.top = (y + box.offsetHeight + 4) + 'px'
|
|
// }
|
|
|
|
picker.style.left = x + 'px'
|
|
picker.style.minWidth = '325px'
|
|
// let pickerContent = picker.getElementsByClassName('ew-color-picker-content')[0]
|
|
let pickAlphaSliderBar = picker.getElementsByClassName('ew-alpha-slider-bar')[0]
|
|
if (pickAlphaSliderBar) {
|
|
pickAlphaSliderBar.parentNode.style.width = '16px'
|
|
pickAlphaSliderBar.parentNode.removeChild(pickAlphaSliderBar)
|
|
}
|
|
|
|
let pickPen = document.createElement('div')
|
|
pickPen.className = 'icon-pen-box'
|
|
pickPen.innerHTML = '<svg class="icon-pen"><use xlink:href="#yj-icon-pen"></use></svg>'
|
|
|
|
/** 为完成、暂时隐藏 *///////
|
|
pickPen.style.display = 'none'
|
|
pickPen.style.cursor = 'unset'
|
|
|
|
|
|
|
|
let pickerInput = _this.colorPicker.pickerInput
|
|
pickerInput.parentNode.insertBefore(pickPen, pickerInput)
|
|
pickerInput.style.width = '188px'
|
|
pickerInput.style.display = 'none'
|
|
|
|
let colorInputBox = document.createElement('div')
|
|
let row1Elm = document.createElement('div')
|
|
row1Elm.className = 'row'
|
|
row1Elm.style.margin = '6px 0 0 0'
|
|
row1Elm.innerHTML = `
|
|
<div class="col">R</div>
|
|
<div class="col">G</div>
|
|
<div class="col">B</div>
|
|
<div class="col" style="flex: 0 0 92px;"></div>
|
|
`
|
|
let row2Elm = document.createElement('div')
|
|
row2Elm.className = 'row'
|
|
row2Elm.innerHTML = `
|
|
<div class="col">
|
|
<input type="number" step="1" min="0" max="255">
|
|
</div>
|
|
<div class="col">
|
|
<input type="number" step="1" min="0" max="255">
|
|
</div>
|
|
<div class="col">
|
|
<input type="number" step="1" min="0" max="255">
|
|
</div>
|
|
`
|
|
colorInputBox.appendChild(row1Elm)
|
|
colorInputBox.appendChild(row2Elm)
|
|
let Inputs = row2Elm.getElementsByTagName('input')
|
|
Inputs[0].style.width = '72px'
|
|
Inputs[1].style.width = '72px'
|
|
Inputs[2].style.width = '72px'
|
|
RInput = Inputs[0]
|
|
GInput = Inputs[1]
|
|
BInput = Inputs[2]
|
|
|
|
let dropbtns = picker.getElementsByClassName('ew-color-dropbtns')[0]
|
|
picker.insertBefore(colorInputBox, dropbtns)
|
|
|
|
RInput.addEventListener('blur', (e) => {
|
|
let value = e.target.value
|
|
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
|
|
value = Number(value)
|
|
if ((e.target.max) && value > Number(e.target.max)) {
|
|
value = Number(e.target.max)
|
|
}
|
|
if ((e.target.min) && value < Number(e.target.min)) {
|
|
value = Number(e.target.min)
|
|
}
|
|
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
|
value = Number(e.target.dataset.min)
|
|
}
|
|
RInput.value = parseInt(value)
|
|
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
|
|
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
|
|
}
|
|
})
|
|
GInput.addEventListener('blur', (e) => {
|
|
let value = e.target.value
|
|
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
|
|
value = Number(value)
|
|
if ((e.target.max) && value > Number(e.target.max)) {
|
|
value = Number(e.target.max)
|
|
}
|
|
if ((e.target.min) && value < Number(e.target.min)) {
|
|
value = Number(e.target.min)
|
|
}
|
|
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
|
value = Number(e.target.dataset.min)
|
|
}
|
|
GInput.value = parseInt(value)
|
|
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
|
|
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
|
|
}
|
|
})
|
|
BInput.addEventListener('blur', (e) => {
|
|
let value = e.target.value
|
|
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
|
|
value = Number(value)
|
|
if ((e.target.max) && value > Number(e.target.max)) {
|
|
value = Number(e.target.max)
|
|
}
|
|
if ((e.target.min) && value < Number(e.target.min)) {
|
|
value = Number(e.target.min)
|
|
}
|
|
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
|
value = Number(e.target.dataset.min)
|
|
}
|
|
BInput.value = parseInt(value)
|
|
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
|
|
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
if (options.alpha) {
|
|
Inputs[0].style.width = '52px'
|
|
Inputs[1].style.width = '52px'
|
|
Inputs[2].style.width = '52px'
|
|
let pickAlpha = document.createElement('div')
|
|
pickAlpha.className = 'input-number input-number-unit color-alpha'
|
|
pickAlpha.innerHTML = `
|
|
<input class="input" type="number" title="" step="0.01" min="0" max="1">
|
|
<span class="arrow"></span>`
|
|
pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
|
|
pickAlpha.style.width = '66px'
|
|
pickAlpha.style.margin = '0 6px 0 0'
|
|
AInput = pickAlpha.getElementsByClassName('input')[0]
|
|
row1Elm.innerHTML = `
|
|
<div class="col">R</div>
|
|
<div class="col">G</div>
|
|
<div class="col">B</div>
|
|
<div class="col">A</div>
|
|
<div class="col" style="flex: 0 0 106px;"></div>
|
|
`
|
|
row2Elm.appendChild(pickAlpha)
|
|
AInput.addEventListener('blur', (e) => {
|
|
let value = e.target.value
|
|
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
|
|
value = Number(value)
|
|
if ((e.target.max) && value > Number(e.target.max)) {
|
|
value = Number(e.target.max)
|
|
}
|
|
if ((e.target.min) && value < Number(e.target.min)) {
|
|
value = Number(e.target.min)
|
|
}
|
|
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
|
value = Number(e.target.dataset.min)
|
|
}
|
|
AInput.value = parseInt(value * 100) / 100
|
|
}
|
|
})
|
|
if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
|
|
AInput.value = parseInt(_this.pickAlphaInputValue * 100) / 100
|
|
}
|
|
else {
|
|
AInput.value = CesiumColor ? parseInt(Number(CesiumColor.alpha.toFixed(2)) * 100) / 100 : 1
|
|
}
|
|
_this.pickAlphaInputValue = AInput.value
|
|
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(AInput.value).toCssColorString()
|
|
}
|
|
else {
|
|
CesiumColor = CesiumColor ? CesiumColor.withAlpha(1) : ''
|
|
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssColorString()
|
|
}
|
|
|
|
let btngroup = picker.getElementsByClassName('ew-color-dropbtngroup')[0]
|
|
row2Elm.appendChild(btngroup)
|
|
|
|
let defineColorContainer = picker.getElementsByClassName('ew-pre-define-color-container')[0]
|
|
if (defineColorContainer) {
|
|
let colorList = localStorage.getItem('custom-color')
|
|
if (colorList) {
|
|
colorList = JSON.parse(colorList)
|
|
}
|
|
else {
|
|
colorList = {}
|
|
}
|
|
let customDivider2 = document.createElement('span')
|
|
customDivider2.className = 'custom-divider'
|
|
customDivider2.style.margin = '10px 0'
|
|
let customDivider3 = document.createElement('span')
|
|
customDivider3.className = 'custom-divider'
|
|
defineColorContainer.parentNode.insertBefore(customDivider2, defineColorContainer)
|
|
defineColorContainer.parentNode.insertBefore(customDivider3, defineColorContainer.nextSibling)
|
|
|
|
let collectColorContainer = document.createElement('div')
|
|
collectColorContainer.className = 'yj-pre-collect-color-container'
|
|
customDivider3.parentNode.insertBefore(collectColorContainer, customDivider3.nextSibling)
|
|
|
|
let addColorBtn = document.createElement('div')
|
|
addColorBtn.innerHTML = '<svg class="icon-add2"><use xlink:href="#yj-icon-add2"></use></svg>'
|
|
addColorBtn.className = 'yj-pre-collect-color add'
|
|
|
|
let subtractColorBtn = document.createElement('div')
|
|
subtractColorBtn.innerHTML = '<svg class="icon-minus" style="display: unset;"><use xlink:href="#yj-icon-minus"></use></svg><svg class="icon-confirm" style="display: none;"><use xlink:href="#yj-icom-confirm"></use></svg>'
|
|
subtractColorBtn.className = 'yj-pre-collect-color subtract'
|
|
let minusIcon = subtractColorBtn.getElementsByClassName('icon-minus')[0]
|
|
let confirmIcon = subtractColorBtn.getElementsByClassName('icon-confirm')[0]
|
|
collectColorContainer.appendChild(addColorBtn)
|
|
collectColorContainer.appendChild(subtractColorBtn)
|
|
|
|
let subtractElmList = []
|
|
for (let key in colorList) {
|
|
let colorElm = document.createElement('div')
|
|
colorElm.className = 'yj-pre-collect-color'
|
|
colorElm.setAttribute('tabindex', '0')
|
|
colorElm.setAttribute('color-box-id', _this.colorPicker.uid)
|
|
let colorItemElm = document.createElement('div')
|
|
colorItemElm.className = 'yj-pre-define-color-item'
|
|
colorElm.appendChild(colorItemElm)
|
|
colorItemElm.className = 'yj-pre-define-color-item'
|
|
let c = Cesium.Color.fromCssColorString(colorList[key])
|
|
let colorString = c.toCssHexString()
|
|
colorItemElm.style.backgroundColor = colorString
|
|
colorItemElm.addEventListener('click', (e) => {
|
|
_this.colorPicker.updateColor(e)
|
|
colorElm.className = 'yj-pre-collect-color yj-pre-collect-color-active'
|
|
clickDefineColor(colorString)
|
|
})
|
|
colorElm.addEventListener("blur", function (e) {
|
|
colorElm.className = 'yj-pre-collect-color'
|
|
})
|
|
|
|
let subtractElm = document.createElement('div')
|
|
subtractElm.className = 'yj-pre-define-color-item subtract-btn'
|
|
subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
|
|
subtractElm.style.display = 'none'
|
|
colorElm.appendChild(subtractElm)
|
|
|
|
collectColorContainer.appendChild(colorElm)
|
|
|
|
subtractElm.addEventListener('click', () => {
|
|
delete colorList[key]
|
|
localStorage.setItem('custom-color', JSON.stringify(colorList))
|
|
collectColorContainer.removeChild(colorElm)
|
|
})
|
|
subtractElmList.push(subtractElm)
|
|
}
|
|
|
|
addColorBtn.addEventListener('click', () => {
|
|
if (isSubtract) {
|
|
isSubtract = false
|
|
for (let i = 0; i < subtractElmList.length; i++) {
|
|
subtractElmList[i].style.display = 'none'
|
|
}
|
|
}
|
|
let colorElm = document.createElement('div')
|
|
colorElm.className = 'yj-pre-collect-color'
|
|
colorElm.setAttribute('tabindex', '0')
|
|
colorElm.setAttribute('color-box-id', _this.colorPicker.uid)
|
|
let colorItemElm = document.createElement('div')
|
|
colorItemElm.className = 'yj-pre-define-color-item'
|
|
colorElm.appendChild(colorItemElm)
|
|
|
|
let color = colorRgbaToHex(colorHsbaToRgba(_this.colorPicker.hsba))
|
|
let c = Cesium.Color.fromCssColorString(color || '#ffffff')
|
|
if (AInput) {
|
|
c = c.withAlpha(AInput.value)
|
|
}
|
|
let colorString = c.toCssHexString()
|
|
colorItemElm.style.backgroundColor = colorString
|
|
colorItemElm.addEventListener('click', (e) => {
|
|
_this.colorPicker.updateColor(e)
|
|
colorElm.className = 'yj-pre-collect-color yj-pre-collect-color-active'
|
|
clickDefineColor(colorString)
|
|
})
|
|
colorElm.addEventListener("blur", function (e) {
|
|
colorElm.className = 'yj-pre-collect-color'
|
|
})
|
|
collectColorContainer.appendChild(colorElm)
|
|
|
|
let subtractElm = document.createElement('div')
|
|
subtractElm.className = 'yj-pre-define-color-item subtract-btn'
|
|
subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
|
|
subtractElm.style.display = 'none'
|
|
colorElm.appendChild(subtractElm)
|
|
subtractElmList.push(subtractElm)
|
|
|
|
let key = Cesium.createGuid()
|
|
colorList[key] = colorString
|
|
localStorage.setItem('custom-color', JSON.stringify(colorList))
|
|
subtractElm.addEventListener('click', () => {
|
|
delete colorList[key]
|
|
localStorage.setItem('custom-color', JSON.stringify(colorList))
|
|
collectColorContainer.removeChild(colorElm)
|
|
})
|
|
})
|
|
|
|
subtractColorBtn.addEventListener('click', () => {
|
|
isSubtract = !isSubtract
|
|
if (isSubtract) {
|
|
minusIcon.style.display = 'none'
|
|
confirmIcon.style.display = 'unset'
|
|
for (let i = 0; i < subtractElmList.length; i++) {
|
|
subtractElmList[i].style.display = 'block'
|
|
}
|
|
}
|
|
else {
|
|
minusIcon.style.display = 'unset'
|
|
confirmIcon.style.display = 'none'
|
|
for (let i = 0; i < subtractElmList.length; i++) {
|
|
subtractElmList[i].style.display = 'none'
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
height = picker.offsetHeight
|
|
if (picker.style.display === 'none') {
|
|
picker.style.display = 'block'
|
|
height = picker.offsetHeight
|
|
picker.style.display = 'none'
|
|
}
|
|
if ((y + box.offsetHeight + 4) + height > window.innerHeight) {
|
|
picker.style.top = y - height + 'px'
|
|
}
|
|
else {
|
|
picker.style.top = (y + box.offsetHeight + 4) + 'px'
|
|
}
|
|
_this.colorPicker.pancelTop = parseFloat(picker.style.top) - 2
|
|
|
|
pickerInputChange(Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssHexString())
|
|
}
|
|
|
|
function clickDefineColor(color) {
|
|
if (AInput) {
|
|
let c = Cesium.Color.fromCssColorString(color)
|
|
AInput.value = parseInt(Number(c.alpha.toFixed(2)) * 100) / 100
|
|
}
|
|
}
|
|
|
|
function colorHsbaToRgba(e) {
|
|
var r, n, o, i = e.a, a = Math.round(e.h), s = Math.round(255 * e.s / 100), l = Math.round(255 * e.b / 100);
|
|
if (0 === s)
|
|
r = n = o = l;
|
|
else {
|
|
var c = (255 - s) * l / 255
|
|
, d = a % 60 * (l - c) / 60;
|
|
360 === a ? (r = l,
|
|
n = o = 0) : a < 60 ? (r = l,
|
|
n = c + d,
|
|
o = c) : a < 120 ? (r = l - d,
|
|
n = l,
|
|
o = c) : a < 180 ? (r = c,
|
|
n = l,
|
|
o = c + d) : a < 240 ? (r = c,
|
|
n = l - d,
|
|
o = l) : a < 300 ? (r = c + d,
|
|
n = c,
|
|
o = l) : a < 360 ? (r = l,
|
|
n = c,
|
|
o = l - d) : r = n = o = 0
|
|
}
|
|
return "rgba(" + Math.round(r) + "," + Math.round(n) + "," + Math.round(o) + "," + i + ")"
|
|
}
|
|
|
|
function colorRgbaToHex(e) {
|
|
var t = {
|
|
10: "A",
|
|
11: "B",
|
|
12: "C",
|
|
13: "D",
|
|
14: "E",
|
|
15: "F"
|
|
};
|
|
if (/rgba?/.test(e)) {
|
|
var r = e.replace(/rgba?\(/, "").replace(/\)/, "").replace(/[\s+]/g, "").split(",")
|
|
, n = "";
|
|
r[3];
|
|
return r.map(function (e, r) {
|
|
r <= 2 && (n += function (e) {
|
|
e = Math.min(Math.round(e), 255);
|
|
var r = Math.floor(e / 16)
|
|
, n = e % 16;
|
|
return "" + (t[r] || r) + (t[n] || n)
|
|
}(e))
|
|
}),
|
|
"#" + n
|
|
}
|
|
}
|
|
|
|
function colorHexToRgba(hex, alpha) {
|
|
let a = alpha || 1,
|
|
hColor = hex.toLowerCase(),
|
|
hLen = hex.length,
|
|
rgbaColor = [];
|
|
hColor = Cesium.Color.fromCssColorString(hColor).toCssHexString().substring(0, 7)
|
|
const colorRegExp = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
|
if (hex && colorRegExp.test(hColor)) {
|
|
//the hex length may be 4 or 7,contained the symbol of #
|
|
if (hLen === 4) {
|
|
let hSixColor = '#';
|
|
|
|
for (let i = 1; i < hLen; i++) {
|
|
let sColor = hColor.slice(i, i + 1);
|
|
hSixColor += sColor.concat(sColor);
|
|
}
|
|
|
|
hColor = hSixColor;
|
|
}
|
|
|
|
for (let j = 1, len = hColor.length; j < len; j += 2) {
|
|
rgbaColor.push(parseInt('0X' + hColor.slice(j, j + 2), 16));
|
|
}
|
|
|
|
// return "rgba(" + rgbaColor.join(",") + ',' + a + ")";
|
|
return rgbaColor;
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
function colorRgbaToHsba(e) {
|
|
var t = e.slice(e.indexOf("(") + 1, e.lastIndexOf(")")).split(",")
|
|
, r = t.length < 4 ? 1 : Number(t[3])
|
|
, n = Number(t[0]) / 255
|
|
, o = Number(t[1]) / 255
|
|
, i = Number(t[2]) / 255
|
|
, a = void 0
|
|
, s = void 0
|
|
, l = void 0
|
|
, c = Math.min(n, o, i)
|
|
, d = l = Math.max(n, o, i)
|
|
, u = d - c;
|
|
if (d === c)
|
|
a = 0;
|
|
else {
|
|
switch (d) {
|
|
case n:
|
|
a = (o - i) / u + (o < i ? 6 : 0);
|
|
break;
|
|
case o:
|
|
a = 2 + (i - n) / u;
|
|
break;
|
|
case i:
|
|
a = 4 + (n - o) / u
|
|
}
|
|
a = Math.round(60 * a)
|
|
}
|
|
s = 0 === d ? 0 : 1 - c / d;
|
|
return s = Math.round(100 * s),
|
|
l = Math.round(100 * l),
|
|
{
|
|
h: a,
|
|
s: s,
|
|
b: l,
|
|
a: r
|
|
}
|
|
}
|
|
|
|
function pickerInputChange(v) {
|
|
if (_this.colorPicker && _this.colorPicker.pickerInput) {
|
|
let rgbaColor = colorHexToRgba(v || _this.colorPicker.pickerInput.value)
|
|
RInput.value = rgbaColor[0]
|
|
GInput.value = rgbaColor[1]
|
|
BInput.value = rgbaColor[2]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
window.YJColorPicker = YJColorPicker
|
|
export default YJColorPicker |