优化颜色选择插件
This commit is contained in:
27
static/3rdparty/ewPlugins.min.js
vendored
27
static/3rdparty/ewPlugins.min.js
vendored
@ -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,
|
||||
|
@ -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,
|
||||
|
Reference in New Issue
Block a user