This commit is contained in:
Mirco Wittrien 2020-08-03 23:37:33 +02:00
parent a468dea6f5
commit 2d6cdfc3c2
2 changed files with 67 additions and 28 deletions

View File

@ -214,6 +214,7 @@
updateNoticeList.hasTooltip = true; updateNoticeList.hasTooltip = true;
BDFDB.TooltipUtils.create(updateNoticeList, BDFDB.LanguageUtils.LibraryStrings.update_notice_click, { BDFDB.TooltipUtils.create(updateNoticeList, BDFDB.LanguageUtils.LibraryStrings.update_notice_click, {
type: "bottom", type: "bottom",
unhideable: true,
delay: 500, delay: 500,
onHide: _ => {updateNoticeList.hasTooltip = false;} onHide: _ => {updateNoticeList.hasTooltip = false;}
}); });
@ -754,11 +755,11 @@
notice.style.setProperty("left", "unset", "important"); notice.style.setProperty("left", "unset", "important");
notice.style.setProperty("right", "unset", "important"); notice.style.setProperty("right", "unset", "important");
let sideMargin = ((BDFDB.DOMUtils.getWidth(document.body.firstElementChild) - BDFDB.DOMUtils.getWidth(notice))/2); let sideMargin = ((BDFDB.DOMUtils.getWidth(document.body.firstElementChild) - BDFDB.DOMUtils.getWidth(notice))/2);
notice.style.setProperty("left", sideMargin + "px", "important"); notice.style.setProperty("left", `${sideMargin}px`, "important");
notice.style.setProperty("right", sideMargin + "px", "important"); notice.style.setProperty("right", `${sideMargin}px`, "important");
notice.style.setProperty("min-width", "unset", "important"); notice.style.setProperty("min-width", "unset", "important");
notice.style.setProperty("width", "unset", "important"); notice.style.setProperty("width", "unset", "important");
notice.style.setProperty("max-width", "calc(100vw - " + (sideMargin*2) + "px)", "important"); notice.style.setProperty("max-width", `calc(100vw - ${sideMargin*2}px)`, "important");
notice.querySelector(BDFDB.dotCN.noticedismiss).addEventListener("click", _ => { notice.querySelector(BDFDB.dotCN.noticedismiss).addEventListener("click", _ => {
notice.style.setProperty("overflow", "hidden", "important"); notice.style.setProperty("overflow", "hidden", "important");
notice.style.setProperty("height", "0px", "important"); notice.style.setProperty("height", "0px", "important");
@ -807,11 +808,12 @@
style = (style ? (style + " ") : "") + `background: ${backgroundColor} !important; border-color: ${backgroundColorIsGradient ? BDFDB.ColorUtils.convert(options.backgroundColor[type == "left" ? 100 : 0], "RGBA") : backgroundColor} !important;`; style = (style ? (style + " ") : "") + `background: ${backgroundColor} !important; border-color: ${backgroundColorIsGradient ? BDFDB.ColorUtils.convert(options.backgroundColor[type == "left" ? 100 : 0], "RGBA") : backgroundColor} !important;`;
} }
if (style) tooltip.style = style; if (style) tooltip.style = style;
if (typeof options.zIndex == "number") { if (typeof options.zIndex == "number" || options.unhideable) {
itemLayer.style.setProperty("z-index", options.zIndex, "important"); itemLayer.style.setProperty("z-index", options.zIndex || 1002, "important");
tooltip.style.setProperty("z-index", options.zIndex, "important"); tooltip.style.setProperty("z-index", options.zIndex || 1002, "important");
tooltipContent.style.setProperty("z-index", options.zIndex || 1002, "important");
} }
if (customBackgroundColor) BDFDB.DOMUtils.addClass(tooltip, BDFDB.disCN.tooltipcustom); if (customBackgroundColor || options.unhideable) BDFDB.DOMUtils.addClass(tooltip, BDFDB.disCN.tooltipcustom);
else if (options.color && BDFDB.disCN["tooltip" + options.color.toLowerCase()]) BDFDB.DOMUtils.addClass(tooltip, BDFDB.disCN["tooltip" + options.color.toLowerCase()]); else if (options.color && BDFDB.disCN["tooltip" + options.color.toLowerCase()]) BDFDB.DOMUtils.addClass(tooltip, BDFDB.disCN["tooltip" + options.color.toLowerCase()]);
else BDFDB.DOMUtils.addClass(tooltip, BDFDB.disCN.tooltipblack); else BDFDB.DOMUtils.addClass(tooltip, BDFDB.disCN.tooltipblack);
@ -875,9 +877,7 @@
else if (options.html === true) tooltipContent.innerHTML = text; else if (options.html === true) tooltipContent.innerHTML = text;
else tooltipContent.innerText = text; else tooltipContent.innerText = text;
} }
if (options.hide) BDFDB.DOMUtils.appendLocalStyle("BDFDBhideOtherTooltips" + id, `#app-mount ${BDFDB.dotCN.tooltip}:not([tooltip-id="${id}"]) {display: none !important;}`, itemLayerContainer);
let mouseLeave = _ => {BDFDB.DOMUtils.remove(itemLayer);}; let mouseLeave = _ => {BDFDB.DOMUtils.remove(itemLayer);};
if (!options.perssist) anker.addEventListener("mouseleave", mouseLeave); if (!options.perssist) anker.addEventListener("mouseleave", mouseLeave);
@ -893,7 +893,7 @@
} }
})); }));
observer.observe(document.body, {subtree:true, childList:true}); observer.observe(document.body, {subtree:true, childList:true});
(tooltip.update = itemLayer.update = _ => { (tooltip.update = itemLayer.update = _ => {
let left, top, tRects = BDFDB.DOMUtils.getRects(anker), iRects = BDFDB.DOMUtils.getRects(itemLayer), aRects = BDFDB.DOMUtils.getRects(document.querySelector(BDFDB.dotCN.appmount)), positionOffsets = {height: 10, width: 10}, offset = typeof options.offset == "number" ? options.offset : 0; let left, top, tRects = BDFDB.DOMUtils.getRects(anker), iRects = BDFDB.DOMUtils.getRects(itemLayer), aRects = BDFDB.DOMUtils.getRects(document.querySelector(BDFDB.dotCN.appmount)), positionOffsets = {height: 10, width: 10}, offset = typeof options.offset == "number" ? options.offset : 0;
switch (type) { switch (type) {
@ -915,37 +915,63 @@
break; break;
} }
itemLayer.style.setProperty("top", top + "px"); itemLayer.style.setProperty("top", `${top}px`, "important");
itemLayer.style.setProperty("left", left + "px"); itemLayer.style.setProperty("left", `${left}px`, "important");
tooltipPointer.style.removeProperty("margin-left"); tooltipPointer.style.removeProperty("margin-left");
tooltipPointer.style.removeProperty("margin-top"); tooltipPointer.style.removeProperty("margin-top");
if (type == "top" || type == "bottom") { if (type == "top" || type == "bottom") {
if (left < 0) { if (left < 0) {
itemLayer.style.setProperty("left", "5px"); itemLayer.style.setProperty("left", "5px", "important");
tooltipPointer.style.setProperty("margin-left", `${left - 10}px`); tooltipPointer.style.setProperty("margin-left", `${left - 10}px`, "important");
} }
else { else {
let rightMargin = aRects.width - (left + iRects.width); let rightMargin = aRects.width - (left + iRects.width);
if (rightMargin < 0) { if (rightMargin < 0) {
itemLayer.style.setProperty("left", (aRects.width - iRects.width - 5) + "px"); itemLayer.style.setProperty("left", `${aRects.width - iRects.width - 5}px`, "important");
tooltipPointer.style.setProperty("margin-left", `${-1*rightMargin}px`); tooltipPointer.style.setProperty("margin-left", `${-1*rightMargin}px`, "important");
} }
} }
} }
else if (type == "left" || type == "right") { else if (type == "left" || type == "right") {
if (top < 0) { if (top < 0) {
itemLayer.style.setProperty("top", "5px"); itemLayer.style.setProperty("top", "5px");
tooltipPointer.style.setProperty("margin-top", `${top - 10}px`); tooltipPointer.style.setProperty("margin-top", `${top - 10}px`, "important");
} }
else { else {
let bottomMargin = aRects.height - (top + iRects.height); let bottomMargin = aRects.height - (top + iRects.height);
if (bottomMargin < 0) { if (bottomMargin < 0) {
itemLayer.style.setProperty("top", aRects.height - iRects.height - 5 + "px"); itemLayer.style.setProperty("top", `${aRects.height - iRects.height - 5}px`, "important");
tooltipPointer.style.setProperty("margin-top", `${-1*bottomMargin}px`); tooltipPointer.style.setProperty("margin-top", `${-1*bottomMargin}px`, "important");
} }
} }
} }
if (options.unhideable) {
for (let node of [itemLayer, tooltip, tooltipContent]) {
node.style.setProperty("position", "absolute", "important");
node.style.setProperty("right", "unset", "important");
node.style.setProperty("bottom", "unset", "important");
node.style.setProperty("display", "block", "important");
node.style.setProperty("opacity", "1", "important");
node.style.setProperty("visibility", "visible", "important");
node.style.setProperty("max-width", "unset", "important");
node.style.setProperty("min-width", "50px", "important");
node.style.setProperty("width", "unset", "important");
node.style.setProperty("max-height", "unset", "important");
node.style.setProperty("min-height", "14px", "important");
node.style.setProperty("height", "unset", "important");
node.style.setProperty("animation", "unset", "important");
node.style.setProperty("transform", "unset", "important");
}
for (let node of [tooltip, tooltipContent]) {
node.style.setProperty("position", "static", "important");
node.style.setProperty("top", "unset", "important");
node.style.setProperty("left", "unset", "important");
}
tooltip.style.setProperty("background", "#000", "important");
tooltipContent.style.setProperty("color", "#dcddde", "important");
tooltipPointer.style.setProperty(`border-top-color`, "#000", "important");
}
})(); })();
if (options.delay) { if (options.delay) {
@ -3145,7 +3171,7 @@
}; };
BDFDB.DOMUtils.toggle = function (...eles) { BDFDB.DOMUtils.toggle = function (...eles) {
if (!eles) return; if (!eles) return;
var force = eles.pop(); let force = eles.pop();
if (typeof force != "boolean") { if (typeof force != "boolean") {
eles.push(force); eles.push(force);
force = undefined; force = undefined;
@ -3158,9 +3184,22 @@
} }
function toggle(node) { function toggle(node) {
if (!node || !Node.prototype.isPrototypeOf(node)) return; if (!node || !Node.prototype.isPrototypeOf(node)) return;
var hidden = force === undefined ? !BDFDB.DOMUtils.isHidden(node) : !force; let hidden = force === undefined ? !BDFDB.DOMUtils.isHidden(node) : !force;
if (hidden) node.style.setProperty("display", "none", "important"); if (hidden) {
else node.style.removeProperty("display"); let display = node.style.getPropertyValue("display");
if (display && display != "none") node.BDFDBhideDisplayState = {
display: display,
important: (` ${node.style.cssText} `.split(` display: ${display}`)[1] || "").trim().indexOf("!important") == 0
};
node.style.setProperty("display", "none", "important");
}
else {
if (node.BDFDBhideDisplayState) {
node.style.setProperty("display", node.BDFDBhideDisplayState.display, node.BDFDBhideDisplayState.important ? "important" : "");
delete node.BDFDBhideDisplayState;
}
else node.style.removeProperty("display");
}
} }
}; };
BDFDB.DOMUtils.isHidden = function (node) { BDFDB.DOMUtils.isHidden = function (node) {
@ -7634,8 +7673,8 @@
let mousemove = e2 => { let mousemove = e2 => {
left = left - (oldX - e2.pageX), top = top - (oldY - e2.pageY); left = left - (oldX - e2.pageX), top = top - (oldY - e2.pageY);
oldX = e2.pageX, oldY = e2.pageY; oldX = e2.pageX, oldY = e2.pageY;
this.domElementRef.current.style.setProperty("left", left + "px", "important"); this.domElementRef.current.style.setProperty("left", `${left}px`, "important");
this.domElementRef.current.style.setProperty("top", top + "px", "important"); this.domElementRef.current.style.setProperty("top", `${top}px`, "important");
}; };
document.addEventListener("mouseup", mouseup); document.addEventListener("mouseup", mouseup);
document.addEventListener("mousemove", mousemove); document.addEventListener("mousemove", mousemove);
@ -9298,7 +9337,7 @@
let Animation = new LibraryModules.AnimationUtils.Value(0); let Animation = new LibraryModules.AnimationUtils.Value(0);
Animation Animation
.interpolate({inputRange:[0, 1], outputRange:[0, (BDFDB.DOMUtils.getRects(ele.firstElementChild).width - BDFDB.DOMUtils.getRects(ele).width) * -1]}) .interpolate({inputRange:[0, 1], outputRange:[0, (BDFDB.DOMUtils.getRects(ele.firstElementChild).width - BDFDB.DOMUtils.getRects(ele).width) * -1]})
.addListener(v => {ele.firstElementChild.style.setProperty("left", v.value + "px", "important");}); .addListener(v => {ele.firstElementChild.style.setProperty("left", `${v.value}px`, "important");});
this.scroll = p => { this.scroll = p => {
let w = p + parseFloat(ele.firstElementChild.style.getPropertyValue("left")) / (BDFDB.DOMUtils.getRects(ele.firstElementChild).width - BDFDB.DOMUtils.getRects(ele).width); let w = p + parseFloat(ele.firstElementChild.style.getPropertyValue("left")) / (BDFDB.DOMUtils.getRects(ele.firstElementChild).width - BDFDB.DOMUtils.getRects(ele).width);
w = isNaN(w) || !isFinite(w) ? p : w; w = isNaN(w) || !isFinite(w) ? p : w;

File diff suppressed because one or more lines are too long