diff --git a/src/Obj/Element/yj-color-picker.js b/src/Obj/Element/yj-color-picker.js
index 0526de9..3495428 100644
--- a/src/Obj/Element/yj-color-picker.js
+++ b/src/Obj/Element/yj-color-picker.js
@@ -13,13 +13,16 @@ class YJColorPicker {
openPickerAni: 'opacity',
defaultColor: options.defaultColor,
startMainCallback: (t) => {
- customizeStyle()
+ _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
+ // this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
let c = Cesium.Color.fromCssColorString(color)
if (pickAlphaInput) {
c = c.withAlpha(pickAlphaInput.value / 100)
@@ -53,7 +56,7 @@ class YJColorPicker {
}
}
let CesiumColor
- if(config.defaultColor) {
+ if (config.defaultColor) {
CesiumColor = Cesium.Color.fromCssColorString(config.defaultColor)
}
// if (options.predefineColor) {
@@ -61,19 +64,40 @@ 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()
function customizeStyle() {
- if (!_this.colorPicker) {
+ 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 pickerContent = picker.getElementsByClassName('ew-color-picker-content')[0]
let pickAlphaSliderBar = picker.getElementsByClassName('ew-alpha-slider-bar')[0]
if (pickAlphaSliderBar) {
pickAlphaSliderBar.parentNode.style.width = '16px'
@@ -101,7 +125,7 @@ class YJColorPicker {
let pickAlpha = document.createElement('div')
pickAlpha.className = 'input-number input-number-unit-1 color-alpha'
pickAlpha.innerHTML = `
-
+
%
`
pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
@@ -121,14 +145,14 @@ class YJColorPicker {
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
- pickAlphaInput.value = Number(value.toFixed(2))
+ pickAlphaInput.value = Number(value.toFixed(0))
}
})
if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
- pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(2))
+ pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(0))
}
else {
- pickAlphaInput.value = CesiumColor ? Number((CesiumColor.alpha * 100).toFixed(2)) : 100
+ pickAlphaInput.value = CesiumColor ? Number((CesiumColor.alpha * 100).toFixed(0)) : 100
}
_this.pickAlphaInputValue = pickAlphaInput.value
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(pickAlphaInput.value / 100).toCssColorString()
@@ -270,12 +294,26 @@ class YJColorPicker {
}
})
}
+
+ 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
}
function clickDefineColor(color) {
if (pickAlphaInput) {
let c = Cesium.Color.fromCssColorString(color)
- pickAlphaInput.value = Number((c.alpha * 100).toFixed(2))
+ pickAlphaInput.value = Number((c.alpha * 100).toFixed(0))
}
}
diff --git a/static/3rdparty/ewPlugins.min.js b/static/3rdparty/ewPlugins.min.js
index 735f08b..8f9a006 100644
--- a/static/3rdparty/ewPlugins.min.js
+++ b/static/3rdparty/ewPlugins.min.js
@@ -809,6 +809,7 @@
}
this.close = () => {
this.pickerFlag = !this.pickerFlag,
+ this.picker.style.opacity = 0
this.render(this.box.parentNode, this.config),
d(this),
g(this, this.panelWidth, this.panelHeight)
@@ -965,6 +966,7 @@
}
,
f.prototype.startMain = function(e, t) {
+ // console.log(e,t)
var r = this;
this.box = l(e, "ew-color-picker-box"),
this.box.setAttribute("color-box-id", this.uid),
@@ -1002,8 +1004,21 @@
c += s.offsetParent.offsetTop,
f += s.offsetParent.offsetLeft,
s = s.offsetParent;
- this.pancelLeft = f,
- this.pancelTop = c + e.offsetHeight,
+ this.pancelLeft = f;
+ let defineColorContainer = this.picker.getElementsByClassName('ew-pre-define-color-container')[0]
+ let customColorHeight = 0
+ if(defineColorContainer) {
+ let colorList = localStorage.getItem('custom-color') || '{}'
+ colorList = JSON.parse(colorList)
+ customColorHeight = (Math.floor((Object.keys(colorList).length+2) / 11)+1) * 30
+ }
+ this.picker.style.display = 'block'
+ this.pancelTop = e.getBoundingClientRect().y + (e.offsetHeight + customColorHeight) + 2
+ if((this.picker.offsetHeight + customColorHeight) + this.pancelTop > window.innerHeight) {
+ this.pancelTop = e.getBoundingClientRect().y - (this.picker.offsetHeight + customColorHeight)
+ this.picker.style.top = this.pancelTop + 2 + 'px'
+ }
+ this.picker.style.display = 'none'
this.preDefineItem = l(e, "ew-pre-define-color", !0),
this.preDefineItem.length && (0,
n.ewObjToArray)(this.preDefineItem).map(function(e) {
@@ -1054,7 +1069,7 @@
}, !1),
this.pickerClear.addEventListener("click", function() {
!function(e, t) {
- t.config.defaultColor = "rgba(255,255,255,1)",
+ t.config.defaultColor = "",
t.pickerFlag = !t.pickerFlag,
t.render(e, t.config),
d(t),
@@ -1070,6 +1085,8 @@
o.colorHsbaToRgba)(e.hsba) : (0,
o.colorRgbaToHex)((0,
o.colorHsbaToRgba)(e.hsba));
+ e.config.defaultColor = e.pickerInput.value
+ e.render(e.box.parentNode, e.config),
e.config.sure(t, e)
}(r)
}),
@@ -1097,6 +1114,7 @@
}(r, e)
}, !1),
this.bindEvent(this.pickerCursor, function(e, t, r, n) {
+ // console.log(e)
r=r-7
n=n-7
u(e, Math.max(0, Math.min(r - e.pancelLeft, i)), Math.max(0, Math.min(n - e.pancelTop, a)), i, a)
@@ -1119,7 +1137,8 @@
a = i,
o.moveX = n.eventType[0].indexOf("touch") > -1 ? a.changedTouches[0].clientX : a.clientX,
o.moveY = n.eventType[0].indexOf("touch") > -1 ? a.changedTouches[0].clientY : a.clientY,
- r ? t(o, o.moveX, o.moveY) : t(o, e, o.moveX, o.moveY)
+ r ? t(o, o.moveX, o.moveY) : t(o, e, o.moveX, o.moveY);
+ // console.log('222222', i, t,e, o.moveX, o.moveY)
};
document.addEventListener(n.eventType[1], a, {
capture: !1,
diff --git a/static/custom/css/index.css b/static/custom/css/index.css
index c96547d..87032c8 100644
--- a/static/custom/css/index.css
+++ b/static/custom/css/index.css
@@ -68,7 +68,6 @@
z-index: 999999;
background: linear-gradient(0deg, var(--color-sdk-bg-gradual)), rgba(0, 0, 0, 0.6);
border: 1.5px solid;
- backdrop-filter: blur(2px);
border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1;
text-align: left;
font-family: 'sy-boldface';
@@ -1033,6 +1032,7 @@
background: linear-gradient(0deg, var(--color-sdk-bg-gradual)), rgba(0, 0, 0, 0.6);
border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1;
padding: 5px;
+ position: fixed !important;
}
.YJ-custom-base-dialog .ew-color-picker>.ew-color-picker-content {
@@ -1160,6 +1160,7 @@
position: absolute;
top: 0;
left: 0;
+ line-height: 20px;
}
.YJ-custom-base-dialog .ew-color-picker>.yj-pre-collect-color-container>.yj-pre-collect-color:hover {
@@ -1180,6 +1181,7 @@
.YJ-custom-base-dialog .ew-color-picker-box {
border-width: 4px;
border-color: #ffffff;
+ display: block;
}
.YJ-custom-base-dialog .ew-color-picker-box>.ew-color-picker-no,