You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
274 lines
7.4 KiB
HTML
274 lines
7.4 KiB
HTML
<html window-frame="transparent">
|
|
<head>
|
|
<include src="common.htm" />
|
|
<style src="tips.css" />
|
|
<style id="dyncss" />
|
|
<script>
|
|
view.minSize = [1, 1];
|
|
view.maxSize = [1, 1];
|
|
view.move(-9999, -9999, 1, 1);
|
|
// view.state = View.WINDOW_HIDDEN;
|
|
CommonNative.HideTaskbarButton2(document);
|
|
|
|
var tipsList = [],
|
|
settings = {
|
|
tipsMaxCount: 20,
|
|
tipsSpaceBetween: 2,
|
|
tipsAlign: 0,
|
|
tipsHorIndent: 0,
|
|
tipsVerIndent: 0,
|
|
tipsAvatar: true,
|
|
tipsLimitAvatar: true,
|
|
tipsMaxAvatarSize: 100,
|
|
tipsAlpha: false,
|
|
tipsAlphaValue: 220
|
|
};
|
|
|
|
function initSettings(sets) {
|
|
settings = sets;
|
|
const avatarSize = (sets.tipsLimitAvatar ? sets.tipsMaxAvatarSize + "px" : "auto");
|
|
var dyncss = $("style#dyncss");
|
|
dyncss.text = ".tipavatar { max-width: " + avatarSize + "; max-height: " + avatarSize + "; }";
|
|
dyncss.text += ".tip:expanded { opacity: " + (sets.tipsAlpha ? Math.min(0.999, sets.tipsAlphaValue / 255.0) : 0.999) + "; } ";
|
|
//dyncss.text += ".tip:expanded:hover { opacity: " + (sets.tipsAlpha ? 0.999 : 1.0) + " } ";
|
|
}
|
|
|
|
class Tip extends Element {
|
|
data;
|
|
dblclicked;
|
|
|
|
init(data) {
|
|
this.data = data;
|
|
this.dblclicked = false;
|
|
if (data.mode == 1 || data.mode == 3) {
|
|
var header = [];
|
|
if (data.pic !== "")
|
|
header.push(<div auto pic={data.pic}></div>);
|
|
header.push(<span><b>{data.who}</b></span>);
|
|
header.push(<span>{data.what}</span>);
|
|
if (data.spic !== "")
|
|
header.push(<div auto pic={data.spic}></div>);
|
|
if (data.xpic !== "")
|
|
header.push(<div auto pic={data.xpic}></div>);
|
|
this.append(<div class="tipheader">{header}</div>);
|
|
}
|
|
|
|
if (data.mode == 1) {
|
|
if (data.body !== "")
|
|
this.append(<div class="tiptext">{data.body}</div>);
|
|
else if (settings.tipsAvatar && data.avatar !== "")
|
|
this.append(<img class="tipavatar" src={data.avatar} />);
|
|
|
|
if (data.images && data.images.length > 0) {
|
|
var embeds = [];
|
|
for (let [index, image] of data.images.entries()) {
|
|
document.bindImage("tipsimages:" + data.hashes[index], Graphics.Image.fromBytes(image));
|
|
embeds.push(<img class="tipimage" src={"tipsimages:" + data.hashes[index]} />);
|
|
}
|
|
this.append(<div class="tipembeds">{embeds}</div>);
|
|
}
|
|
} else if (data.mode == 2) {
|
|
this.classList.add("image");
|
|
if (data.image && data.image.length > 0) {
|
|
document.bindImage("tipsimage:" + data.hash, Graphics.Image.fromBytes(data.image));
|
|
this.append(<img class="tipimage" src={"tipsimage:" + data.hash} />);
|
|
}
|
|
}
|
|
|
|
tipsList.push(this);
|
|
if (data.counter > 0)
|
|
this.timer(data.counter * 100, this.autoHide);
|
|
this.takeOff({
|
|
x: 0, y: 0,
|
|
relativeTo : "screen",
|
|
window: "popup"
|
|
});
|
|
}
|
|
|
|
show() {
|
|
this.state.expanded = true;
|
|
}
|
|
|
|
hide(quick = false) {
|
|
this.timer(0, this.autoHide);
|
|
|
|
if (this.data !== null) {
|
|
if (this.data.image && this.data.image.length > 0)
|
|
document.bindImage("tipsimage:" + this.data.hash, null);
|
|
if (this.data.images && this.data.images.length > 0)
|
|
for (let [index, image] of this.data.images.entries())
|
|
document.bindImage("tipsimages:" + this.data.hashes[index], null);
|
|
this.data = null;
|
|
}
|
|
|
|
var thisTip = this;
|
|
tipsList = tipsList.filter((item) => item !== thisTip);
|
|
if (tipsList.length == 0 && !quick) {
|
|
this.on("transitionend", function() {
|
|
this.remove();
|
|
repositionTips();
|
|
});
|
|
this.state.expanded = false;
|
|
} else {
|
|
this.remove();
|
|
repositionTips();
|
|
}
|
|
|
|
CommonNative.SwitchToPreviousWindow();
|
|
}
|
|
|
|
autoHide() {
|
|
if (this.data !== null)
|
|
CommonNative.ClearTip("close", this.data.event);
|
|
this.hide();
|
|
}
|
|
|
|
["on ~mouseenter"](e) {
|
|
CommonNative.SavePreviousWindow();
|
|
}
|
|
|
|
["on ~mouseleave"](e) {
|
|
CommonNative.ClearPreviousWindow();
|
|
}
|
|
|
|
["on mouseup"](e) {
|
|
var prop = e.propButton,
|
|
delay = prop ? 1 : CommonNative.GetDoubleClickDelay();
|
|
|
|
this.timer(delay, () => {
|
|
if (!this.dblclicked && this.data !== null) {
|
|
CommonNative.ClearTip(prop ? "remove" : "close", this.data.event);
|
|
this.hide();
|
|
}
|
|
this.dblclicked = false;
|
|
});
|
|
}
|
|
|
|
["on dblclick"](e) {
|
|
if (!e.mainButton) return;
|
|
if (this.data !== null)
|
|
CommonNative.ClearTip("realize", this.data.event);
|
|
this.dblclicked = true;
|
|
this.hide();
|
|
}
|
|
|
|
render() {
|
|
return <popup class="tip"></popup>
|
|
}
|
|
}
|
|
|
|
function addTip(data) {
|
|
var tip = Element.create(<Tip />);
|
|
document.append(tip);
|
|
tip.init(data);
|
|
if (tipsList.length > settings.tipsMaxCount) tipsList.shift();
|
|
repositionTips();
|
|
tip.show();
|
|
if (tipsList.length > 0) {
|
|
var refresh = false;
|
|
var gap = 50dip.valueOf();
|
|
var [sx, sy, sw, sh] = view.screenBox("workarea", "rectw");
|
|
if (settings.tipsAlign == 0 || settings.tipsAlign == 1) {
|
|
var lastTop = tipsList.last.state.box("top", "border", "screen");
|
|
refresh = lastTop - sy < gap;
|
|
} else if (settings.tipsAlign == 2 || settings.tipsAlign == 3) {
|
|
var lastBottom = tipsList.last.state.box("bottom", "border", "screen");
|
|
refresh = sy + sh - lastBottom < gap;
|
|
}
|
|
if (refresh) {
|
|
tipsList.shift();
|
|
repositionTips();
|
|
}
|
|
}
|
|
}
|
|
|
|
function removeTipByGUID(GUID) {
|
|
for (let tip of tipsList)
|
|
if (tip.data !== null && tip.data.event == GUID) {
|
|
tip.hide();
|
|
return;
|
|
}
|
|
}
|
|
|
|
function removeTipByUID(UID) {
|
|
for (let tip of tipsList)
|
|
if (tip.data !== null && tip.data.uid == UID) {
|
|
tip.hide();
|
|
return;
|
|
}
|
|
}
|
|
|
|
function removeAll() {
|
|
for (let tip of tipsList) tip.hide(true);
|
|
}
|
|
|
|
function getStartingPoint() {
|
|
var x = 0, y = 0, pos = 3;
|
|
var window = findWindow("main");
|
|
if (!window) return;
|
|
var [sx, sy, sw, sh] = window.screenBox("workarea", "rectw");
|
|
var onedip = 1dip.valueOf();
|
|
if (settings.tipsAlign == 0) { // alBottomRight
|
|
pos = 3;
|
|
x = sx + sw - settings.tipsHorIndent - onedip;
|
|
y = sy + sh - settings.tipsVerIndent - onedip;
|
|
} else if (settings.tipsAlign == 1) { // alBottomLeft
|
|
pos = 1;
|
|
x = sx + settings.tipsHorIndent;
|
|
y = sy + sh - settings.tipsVerIndent - onedip;
|
|
} else if (settings.tipsAlign == 2) { // alTopLeft
|
|
pos = 7;
|
|
x = sx + settings.tipsHorIndent;
|
|
y = sy + settings.tipsVerIndent + onedip;
|
|
} else if (settings.tipsAlign == 3) { // alTopRight
|
|
pos = 9;
|
|
x = sx + sw - settings.tipsHorIndent - onedip;
|
|
y = sy + settings.tipsVerIndent + onedip;
|
|
}
|
|
|
|
return {
|
|
x: x,
|
|
y: y,
|
|
pos: pos
|
|
};
|
|
}
|
|
|
|
function repositionTips() {
|
|
if (tipsList.length == 0) return;
|
|
var point = getStartingPoint();
|
|
var onedip = 1dip.valueOf();
|
|
for (let tip of tipsList) {
|
|
var tipWidth = tip.state.box("width", "border");
|
|
var tipHeight = tip.state.box("height", "border");
|
|
|
|
let tx = point.x, ty = point.y;
|
|
if (settings.tipsAlign == 0) {
|
|
tx -= tipWidth;
|
|
ty -= tipHeight;
|
|
} else if (settings.tipsAlign == 1) {
|
|
ty -= tipHeight;
|
|
} else if (settings.tipsAlign == 3) {
|
|
tx -= tipWidth;
|
|
}
|
|
|
|
tip.takeOff({
|
|
x: tx, y: ty,
|
|
relativeTo : "screen",
|
|
window: "popup"
|
|
});
|
|
|
|
if (settings.tipsAlign == 0 || settings.tipsAlign == 1)
|
|
point.y -= tipHeight + settings.tipsSpaceBetween * onedip;
|
|
else if (settings.tipsAlign == 2 || settings.tipsAlign == 3)
|
|
point.y += tipHeight + settings.tipsSpaceBetween * onedip;
|
|
}
|
|
}
|
|
|
|
document.on("closerequest", function(e){
|
|
e.preventDefault();
|
|
return false;
|
|
})
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html> |