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.
RnQ/Distro/Template/status.htm

155 lines
5.3 KiB
HTML

<html window-resizable="false" window-frame="extended" class="customframe">
<head>
<include src="common.htm" />
<style src="status.css" />
<style src="customframe.css" />
<script>
var mainThis = view.parameters.mainThis;
var statuses = $("#statuses"),
statustext = $("#statustext"),
chars = $("#chars"),
charsleft = $("#charsleft"),
charsText, charsleftText,
selected = 0;
CommonNative.SetLargeWindowIcon(document, "");
setupWindow(false, false, false);
translateWindow("button > span");
function fitWindow(x, y, newWidth, newHeight, parentWidth, parentHeight) {
var [sx, sy, sw, sh] = view.screenBox("workarea", "rectw");
var step = View.share.commonSettings.animateWindows ? 7 : 0;
var padding = 15;
var startingPos = "top";
if (mainThis.settings.barPos == 1) startingPos = "bottom";
if (startingPos == "top") {
var addstep = MainNative.HasBorder() ? 30 : 0;
if (y - newHeight - padding - step - addstep < sy) startingPos = "left"; else {
x += parentWidth / 2 - newWidth / 2;
y -= newHeight + padding + step + addstep;
}
}
if (startingPos == "bottom") {
if (y + parentHeight + padding + step + newHeight > sy + sh) startingPos = "left"; else {
x += parentWidth / 2 - newWidth / 2;
y += parentHeight + padding + step;
}
}
if (startingPos == "left") {
if (x - newWidth - padding - step < sx) {
x += parentWidth + padding + step;
startingPos = "right";
} else {
x -= newWidth + padding + step;
}
y += parentHeight / 2 - newHeight / 2;
}
var gap = 10dip.valueOf();
if (x < sx + gap) x = sx + gap;
if (y < sy + gap) y = sy + gap;
if (x > sx + sw - newWidth - gap) x = sx + sw - newWidth - gap;
if (y > sy + sh - newHeight - gap) y = sy + sh - newHeight - gap;
if (View.share.commonSettings.animateWindows) document.post(() => {
document.morphContent((progress) => {
var newx = x, newy = y;
if (startingPos == "top") newy = Math.trunc(y + progress * step);
else if (startingPos == "bottom") newy = Math.trunc(y - progress * step);
else if (startingPos == "left") newx = Math.trunc(x + progress * step);
else if (startingPos == "right") newx = Math.trunc(x - progress * step);
view.move(newx, newy);
return true;
}, { duration: 100 });
});
return [x, y];
}
function saveCurrent() {
MainNative.SaveXStatusAndMessage(selected, statustext.value);
}
function setCurrent() {
MainNative.SetXStatusAndMessage(selected);
view.close();
}
function updateCharCount() {
chars.text = charsText + " " + (statustext.value ? statustext.value.length : 0);
var left = statustext.value ? 251 - statustext.value.length : 251;
charsleft.html = charsleftText + " " + (left < 0 ? "" + left + "" : left);
}
$("window-caption").text = view.caption;
charsText = _("Chars:");
charsleftText = _("Left:");
var statusList = MainNative.GetStatusMessages();
var statusBtns = [];
for (var status of statusList) {
statusBtns.push(<div class="imgbtn" title={status.caption} status={status.code} state-checked={status.current}><div>{status.code == 0 ? "⬜" : status.img}</div></div>);
if (status.current) {
statustext.plaintext.content = status.text;
statustext.execCommand("navigate:end");
selected = status.code;
}
}
statuses.append(statusBtns);
updateCharCount();
statuses.on("click", ".imgbtn", function(e, el) {
var checked = statuses.$(":checked");
if (checked) checked.state.checked = false;
el.state.checked = true;
saveCurrent();
selected = parseInt(el.attr["status"]);
statustext.value = MainNative.GetStatusMessage(selected);
statustext.state.focus = true;
statustext.execCommand("navigate:end");
updateCharCount();
}).on("dblclick", ".imgbtn", (e) => {
if (e.mainButton) setCurrent();
});
$("button").on("click", (e) => {
saveCurrent();
setCurrent();
});
statustext.on("change", (e) => {
updateCharCount();
});
document.on("keydown", (e) => {
if (e.keyCode == Event.VK_ESCAPE || (e.ctrlKey && e.keyCode == Event.VK_W)) view.close();
});
var winBorders = document.state.box("width", "border") - document.state.box("width", "inner");
var boxPadding = statuses.state.box("top", "padding", "inner");
var btnWidth = statuses.$("> div").state.box("width", "border") || 18;
var newWidth = boxPadding + (btnWidth + boxPadding) * 13 + winBorders;
var [x, y] = view.box("position", "client", "desktop");
view.move(x, y, newWidth, view.box("height", "client", "desktop"));
var newHeight = document.body.state.box("height", "margin") + $("window-header").state.box("height", "margin") + winBorders;
[x, y] = fitWindow(x, y, newWidth, newHeight, view.parameters.parentWidth, view.parameters.parentHeight);
view.move(x, y, newWidth, newHeight);
</script>
</head>
<window-header>
<window-caption role="window-caption"></window-caption>
<window-buttons>
<window-button role="window-close"></window-button>
</window-buttons>
</window-header>
<body>
<div id="statuses" class="xstatus"></div>
<plaintext maxlength="25" id="statustext" spellcheck="false"></plaintext>
<div class="characters"><div id="chars"> </div><div id="charsleft"> </div></div>
<button uwp wide><span>Apply</span></button>
</body>
</html>