修改颜色选择器样式，显示rgba格式
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric', 'icon-pen', 'icon-cross']
|
||||
let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric', 'icon-pen', 'icon-cross', 'icom-confirm']
|
||||
function setSvg() {
|
||||
let svgElm = document.createElement('svg');
|
||||
svgElm.xmlns = 'http://www.w3.org/2000/svg'
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
class YJColorPicker {
|
||||
constructor(options = {}) {
|
||||
let _this = this
|
||||
let pickAlphaInput
|
||||
let RInput
|
||||
let GInput
|
||||
let BInput
|
||||
let AInput
|
||||
|
||||
let config = {
|
||||
el: options.el,
|
||||
size: "mini",
|
||||
@ -12,6 +16,7 @@ class YJColorPicker {
|
||||
hasClear: true,
|
||||
openPickerAni: 'opacity',
|
||||
defaultColor: options.defaultColor,
|
||||
pickerInputChange: pickerInputChange,
|
||||
startMainCallback: (t) => {
|
||||
_this.colorPicker && (_this.colorPicker.picker.style.opacity = 0)
|
||||
setTimeout(() => {
|
||||
@ -24,9 +29,9 @@ class YJColorPicker {
|
||||
config.sure = (color) => {
|
||||
// this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
|
||||
let c = Cesium.Color.fromCssColorString(color)
|
||||
if (pickAlphaInput) {
|
||||
c = c.withAlpha(pickAlphaInput.value / 100)
|
||||
this.pickAlphaInputValue = pickAlphaInput.value
|
||||
if (AInput) {
|
||||
c = c.withAlpha(AInput.value)
|
||||
this.pickAlphaInputValue = AInput.value
|
||||
}
|
||||
color = c.toCssHexString()
|
||||
if (typeof options.sure == 'function') {
|
||||
@ -37,8 +42,8 @@ class YJColorPicker {
|
||||
}
|
||||
if (options.clear) {
|
||||
config.clear = () => {
|
||||
if (pickAlphaInput) {
|
||||
pickAlphaInput.value = this.pickAlphaInputValue = 100
|
||||
if (AInput) {
|
||||
AInput.value = this.pickAlphaInputValue = 1
|
||||
}
|
||||
this.colorPicker.config.defaultColor = ''
|
||||
customizeStyle()
|
||||
@ -64,7 +69,7 @@ class YJColorPicker {
|
||||
// }
|
||||
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
|
||||
// window.colorPicker = this.colorPicker
|
||||
|
||||
customizeStyle()
|
||||
|
||||
@ -78,7 +83,7 @@ class YJColorPicker {
|
||||
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
|
||||
@ -103,16 +108,13 @@ class YJColorPicker {
|
||||
pickAlphaSliderBar.parentNode.style.width = '16px'
|
||||
pickAlphaSliderBar.parentNode.removeChild(pickAlphaSliderBar)
|
||||
}
|
||||
// let customDivider = document.createElement('span')
|
||||
// customDivider.className = 'custom-divider'
|
||||
// customDivider.style.margin = '10px 0'
|
||||
// pickerContent.parentNode.insertBefore(customDivider, pickerContent.nextSibling)
|
||||
|
||||
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.opacity = '0'
|
||||
pickPen.style.display = 'none'
|
||||
pickPen.style.cursor = 'unset'
|
||||
|
||||
|
||||
@ -120,19 +122,67 @@ class YJColorPicker {
|
||||
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)
|
||||
|
||||
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-1 color-alpha'
|
||||
pickAlpha.className = 'input-number input-number-unit color-alpha'
|
||||
pickAlpha.innerHTML = `
|
||||
<input class="input" type="number" title="" step="1" min="0" max="100">
|
||||
<span class="unit">%</span>
|
||||
<input class="input" type="number" title="" step="0.01" min="0" max="1">
|
||||
<span class="arrow"></span>`
|
||||
pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
|
||||
pickerInput.style.width = '106px'
|
||||
pickAlpha.style.width = '80px'
|
||||
pickAlphaInput = pickAlpha.getElementsByClassName('input')[0]
|
||||
pickAlphaInput.addEventListener('blur', (e) => {
|
||||
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)
|
||||
@ -145,23 +195,26 @@ class YJColorPicker {
|
||||
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
|
||||
value = Number(e.target.dataset.min)
|
||||
}
|
||||
pickAlphaInput.value = Number(value.toFixed(0))
|
||||
AInput.value = parseInt(value * 100) / 100
|
||||
}
|
||||
})
|
||||
if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
|
||||
pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(0))
|
||||
AInput.value = parseInt(_this.pickAlphaInputValue * 100) / 100
|
||||
}
|
||||
else {
|
||||
pickAlphaInput.value = CesiumColor ? Number((CesiumColor.alpha * 100).toFixed(0)) : 100
|
||||
AInput.value = CesiumColor ? parseInt(CesiumColor.alpha * 100) / 100 : 1
|
||||
}
|
||||
_this.pickAlphaInputValue = pickAlphaInput.value
|
||||
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(pickAlphaInput.value / 100).toCssColorString()
|
||||
_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')
|
||||
@ -188,8 +241,10 @@ class YJColorPicker {
|
||||
addColorBtn.className = 'yj-pre-collect-color add'
|
||||
|
||||
let subtractColorBtn = document.createElement('div')
|
||||
subtractColorBtn.innerHTML = '<svg class="icon-minus"><use xlink:href="#yj-icon-minus"></use></svg>'
|
||||
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)
|
||||
|
||||
@ -248,8 +303,8 @@ class YJColorPicker {
|
||||
|
||||
let color = colorRgbaToHex(colorHsbaToRgba(_this.colorPicker.hsba))
|
||||
let c = Cesium.Color.fromCssColorString(color || '#ffffff')
|
||||
if (pickAlphaInput) {
|
||||
c = c.withAlpha(pickAlphaInput.value / 100)
|
||||
if (AInput) {
|
||||
c = c.withAlpha(AInput.value)
|
||||
}
|
||||
let colorString = c.toCssHexString()
|
||||
colorItemElm.style.backgroundColor = colorString
|
||||
@ -283,11 +338,15 @@ class YJColorPicker {
|
||||
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'
|
||||
}
|
||||
@ -308,12 +367,14 @@ class YJColorPicker {
|
||||
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 (pickAlphaInput) {
|
||||
if (AInput) {
|
||||
let c = Cesium.Color.fromCssColorString(color)
|
||||
pickAlphaInput.value = Number((c.alpha * 100).toFixed(0))
|
||||
AInput.value = parseInt(c.alpha * 100) / 100
|
||||
}
|
||||
}
|
||||
|
||||
@ -366,6 +427,46 @@ class YJColorPicker {
|
||||
"#" + 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 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]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
5
static/3rdparty/ewPlugins.min.js
vendored
5
static/3rdparty/ewPlugins.min.js
vendored
@ -746,6 +746,7 @@
|
||||
o.colorHsbaToRgba)(e.hsba) : e.pickerInput.value = (0,
|
||||
o.colorRgbaToHex)((0,
|
||||
o.colorHsbaToRgba)(e.hsba))
|
||||
e.config.pickerInputChange && e.config.pickerInputChange()
|
||||
}
|
||||
function f(e) {
|
||||
if (this.pickerFlag = !1,
|
||||
@ -795,6 +796,8 @@
|
||||
n.isFunction)(e.sure) ? e.sure : null,
|
||||
clear: (0,
|
||||
n.isFunction)(e.clear) ? e.clear : null,
|
||||
pickerInputChange: (0,
|
||||
n.isFunction)(e.pickerInputChange) ? e.pickerInputChange : null,
|
||||
startMainCallback: (0,
|
||||
n.isFunction)(e.startMainCallback) ? e.startMainCallback : null,
|
||||
clickDefineColor: (0,
|
||||
@ -891,6 +894,7 @@
|
||||
var u = i - e.hsba.a * i;
|
||||
c(e.alphaBarThumb, "top", u + "px")
|
||||
}
|
||||
e.config.pickerInputChange && e.config.pickerInputChange()
|
||||
}
|
||||
function b(e, t) {
|
||||
var r = e.hueBar.offsetHeight
|
||||
@ -1086,6 +1090,7 @@
|
||||
o.colorRgbaToHex)((0,
|
||||
o.colorHsbaToRgba)(e.hsba));
|
||||
e.config.defaultColor = e.pickerInput.value
|
||||
e.config.pickerInputChange && e.config.pickerInputChange()
|
||||
e.render(e.box.parentNode, e.config),
|
||||
e.config.sure(t, e)
|
||||
}(r)
|
||||
|
||||
@ -1034,8 +1034,19 @@
|
||||
padding: 5px;
|
||||
position: fixed !important;
|
||||
}
|
||||
.YJ-custom-base-dialog>.content .ew-color-picker input {
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.YJ-custom-base-dialog>.content .ew-color-picker .input-number-unit input[type=number] {
|
||||
padding: 0 20px 0 8px;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog .ew-color-picker>.ew-color-picker-content {
|
||||
.YJ-custom-base-dialog.ew-color-picker>.ew-color-picker-content {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.YJ-custom-base-dialog .ew-color-picker>.ew-color-picker-content>.ew-color-panel {
|
||||
@ -1064,6 +1075,10 @@
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog>.content>div .ew-color-picker .row>.col {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog .ew-color-picker .icon-pen-box .icon-pen {
|
||||
margin: 0;
|
||||
}
|
||||
@ -1079,9 +1094,9 @@
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog .ew-color-picker .color-alpha>input {
|
||||
font-weight: 400;
|
||||
font-family: Arial;
|
||||
font-size: 14px;
|
||||
font-weight: 400 !important;
|
||||
font-family: Arial !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog .ew-color-picker>.ew-pre-define-color-container {
|
||||
@ -1169,10 +1184,13 @@
|
||||
|
||||
.YJ-custom-base-dialog .ew-color-picker .ew-color-dropbtngroup {
|
||||
display: flex;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.YJ-custom-base-dialog .ew-color-picker .ew-color-dropbtngroup button {
|
||||
padding: 5px 10px 4px 10px;
|
||||
padding: 0 8px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.YJ-custom-base-dialog .ew-color-picker .ew-color-dropbtngroup button.ew-color-clear {
|
||||
margin-right: 8px;
|
||||
|
||||
4
static/custom/img/icom-confirm.svg
Normal file
4
static/custom/img/icom-confirm.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="9.19921875" viewBox="0 0 12 9.19921875" fill="none">
|
||||
<path d="M4.66806 9.2C4.47815 9.2 4.29548 9.12926 4.15776 9.00078L0.22761 5.35124C-0.0666872 5.0784 -0.0768368 4.62509 0.204411 4.33925C0.485649 4.0534 0.953909 4.04474 1.2482 4.31759L4.60427 7.43442L10.6916 0.260945C10.9511 -0.0436629 11.4165 -0.0884161 11.731 0.162779C12.0457 0.413972 12.0905 0.864388 11.8325 1.17044L5.23924 8.94014C5.10877 9.09461 4.91741 9.18845 4.713 9.2L4.66806 9.2Z" fill="#FFFFFF" >
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 582 B |
Reference in New Issue
Block a user