hongshaorou/rustdesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

filename cm.tis -> cm.js

Browse Source
This commit is contained in:
csf 2022-01-04 17:29:07 +08:00 committed by open-trade
parent 365781a0c0
commit face49de00
2 changed files with 125 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/ui/cm.tis → src/ui/cm.js
View File

255
src/ui/msgbox.js
View File

@ -1,5 +1,7 @@
import {$,$$} from "@sciter"; //TEST $$ import
const view = Window.this;
var type, title, text, getParams, remember, retry, callback, contentStyle; var type, title, text, getParams, remember, retry, callback, contentStyle;
var my_translate; var my_translate; // TEST
function updateParams(params) { function updateParams(params) {
type = params.type; type = params.type;
@ -11,18 +13,17 @@ function updateParams(params) {
my_translate = params.translate; my_translate = params.translate;
retry = params.retry; retry = params.retry;
contentStyle = params.contentStyle; contentStyle = params.contentStyle;
console.log("params",type,title,text,getParams,remember,callback,my_translate,retry,contentStyle)
try { text = translate_text(text); } catch (e) {} try { text = translate_text(text); } catch (e) {}
if (retry > 0) { if (retry > 0) {
self.timer(retry * 1000, function() { setTimeout(()=>view.close({ reconnect: true }),retry * 1000);// TEST
view.close({ reconnect: true });
});
} }
} }
function translate_text(text) { function translate_text(text) {
if (text.indexOf('Failed') == 0 && text.indexOf(': ') > 0) { if (text.indexOf('Failed') == 0 && text.indexOf(': ') > 0) {
var fds = text.split(': '); let fds = text.split(': ');
for (var i = 0; i < fds.length; ++i) { for (let i = 0; i < fds.length; ++i) {
fds[i] = my_translate(fds[i]); fds[i] = my_translate(fds[i]);
} }
text = fds.join(': '); text = fds.join(': ');
@ -30,17 +31,17 @@ function translate_text(text) {
return text; return text;
} }
var params = view.parameters; var params = view.parameters; // TEST
updateParams(params); updateParams(params);
var body; var body;
class Body: Reactor.Component { class Body extends Element {
function this() { this() {
body = this; body = this;
} }
function getIcon(color) { getIcon(color) {
if (type == "input-password") { if (type == "input-password") {
return <svg viewBox="0 0 505 505"><circle cx="252.5" cy="252.5" r="252.5" fill={color}/><path d="M271.9 246.1c29.2 17.5 67.6 13.6 92.7-11.5 29.7-29.7 29.7-77.8 0-107.4s-77.8-29.7-107.4 0c-25.1 25.1-29 63.5-11.5 92.7L118.1 347.4l26.2 26.2 26.4 26.4 10.6-10.6-10.1-10.1 9.7-9.7 10.1 10.1 10.6-10.6-10.1-10 9.7-9.7 10.1 10.1 10.6-10.6-26.4-26.3 76.4-76.5z" fill="#fff"/><circle cx="337.4" cy="154.4" r="17.7" fill={color}/></svg>; return <svg viewBox="0 0 505 505"><circle cx="252.5" cy="252.5" r="252.5" fill={color}/><path d="M271.9 246.1c29.2 17.5 67.6 13.6 92.7-11.5 29.7-29.7 29.7-77.8 0-107.4s-77.8-29.7-107.4 0c-25.1 25.1-29 63.5-11.5 92.7L118.1 347.4l26.2 26.2 26.4 26.4 10.6-10.6-10.1-10.1 9.7-9.7 10.1 10.1 10.6-10.6-10.1-10 9.7-9.7 10.1 10.1 10.6-10.6-26.4-26.3 76.4-76.5z" fill="#fff"/><circle cx="337.4" cy="154.4" r="17.7" fill={color}/></svg>;
} }
@ -56,23 +57,25 @@ class Body: Reactor.Component {
return <span />; return <span />;
} }
function getInputPasswordContent() { getInputPasswordContent() {
var ts = remember ? { checked: true } : {}; var ts = remember ? { checked: true } : {};
return <div .form> // TODO <button type="checkbox" ...
// <div><button|checkbox(remember) {ts}>{my_translate('Remember password')}</button></div>
return <div class="form">
<div>{my_translate('Please enter your password')}</div> <div>{my_translate('Please enter your password')}</div>
<PasswordComponent /> <PasswordComponent />
<div><button|checkbox(remember) {ts}>{my_translate('Remember password')}</button></div> <div><button type="checkbox">{my_translate('Remember password')}</button></div>
</div>; </div>;
} }
function getContent() { getContent() {
if (type == "input-password") { if (type == "input-password") {
return this.getInputPasswordContent(); return this.getInputPasswordContent();
} }
return text; return text;
} }
function getColor() { getColor() {
if (type == "input-password") { if (type == "input-password") {
return "#AD448E"; return "#AD448E";
} }
@ -85,26 +88,25 @@ class Body: Reactor.Component {
return "#2C8CFF"; return "#2C8CFF";
} }
function hasSkip() { hasSkip() {
return type.indexOf("skip") >= 0; return type.indexOf("skip") >= 0;
} }
function render() { render() {
var color = this.getColor(); let color = this.getColor();
var icon = this.getIcon(color); let icon = this.getIcon(color);
var content = this.getContent(); let content = this.getContent();
var hasCancel = type.indexOf("error") < 0 && type != "success" && type.indexOf("nocancel") < 0; let hasCancel = type.indexOf("error") < 0 && type != "success" && type.indexOf("nocancel") < 0;
var hasOk = type != "connecting" && type.indexOf("nook") < 0; let hasOk = type != "connecting" && type.indexOf("nook") < 0;
var hasClose = type.indexOf("hasclose") >= 0; let hasClose = type.indexOf("hasclose") >= 0;
var show_progress = type == "connecting"; let show_progress = type == "connecting";
self.style.set { border: color + " solid 1px" }; this.style.setProperty("border",(color + " solid 1px"));
var me = this; setTimeout(()=>{
self.timer(1ms, function() {
if (typeof content == "string") if (typeof content == "string")
me.$(#content).html = my_translate(content); this.$("#content").html = my_translate(content);
else else
me.$(#content).content(content); this.$("#content").content(content);
}); },1);
return ( return (
<div style="size: *"> <div style="size: *">
<header style={"height: 2em; background: " + color}> <header style={"height: 2em; background: " + color}>
@ -113,72 +115,110 @@ class Body: Reactor.Component {
<div style="padding: 1em 2em; size: *;"> <div style="padding: 1em 2em; size: *;">
<div style="height: *; flow: horizontal"> <div style="height: *; flow: horizontal">
{icon && <div style="height: *; margin: * 0; padding-right: 2em;">{icon}</div>} {icon && <div style="height: *; margin: * 0; padding-right: 2em;">{icon}</div>}
<div style={contentStyle || "size: *; margin: * 0;"} #content /> <div id="content" style={contentStyle || "size: *; margin: * 0;"} />
</div> </div>
<div style="text-align: right;"> <div style="text-align: right;">
<span style="display:inline-block; max-width: 260px; font-size:12px;" #error /> <span id="error" style="display:inline-block; max-width: 260px; font-size:12px;" />
<progress #progress style={"color:" + color + "; display: " + (show_progress ? "inline-block" : "none")} /> <progress id="progress" style={"color:" + color + "; display: " + (show_progress ? "inline-block" : "none")} />
{hasCancel || hasRetry ? <button .button #cancel .outline>{my_translate(hasRetry ? "OK" : "Cancel")}</button> : ""} {hasCancel || retry ? <button id="cancel" class="button outline">{my_translate(retry ? "OK" : "Cancel")}</button> : ""}
{this.hasSkip() ? <button .button #skip .outline>{my_translate('Skip')}</button> : ""} {this.hasSkip() ? <button id="skip" class="button outline">{my_translate('Skip')}</button> : ""}
{hasOk || hasRetry ? <button .button #submit>{my_translate(hasRetry ? "Retry" : "OK")}</button> : ""} {hasOk || retry ? <button id="submit" class="button" >{my_translate(retry ? "Retry" : "OK")}</button> : ""}
{hasClose ? <button .button #cancel .outline>{my_translate('Close')}</button> : ""} {hasClose ? <button id="cancel" class="button outline">{my_translate('Close')}</button> : ""}
</div> </div>
</div> </div>
</div>); </div>);
} }
event click $(.custom-event) (_, me) { // TEST
["on click at .custom-event"](_, me) {
if (callback) callback(me); if (callback) callback(me);
} }
}
$(body).content(<Body />); ["on click at button#cancel"]() {
view.close();
if (callback) callback(null);
}
["on click at button#skip"]() {
let values = getValues();
values.skip = true;
view.close(values);
if (callback) callback(values);
}
["on click at button#submit"](){
if (type == "error") {
if (retry) {
view.close({ reconnect: true });
} else {
view.close();
if (callback) callback(null);
}
return;
}
if (type == "re-input-password") {
type = "input-password";
body.update();
set_outline_focus();
return;
}
var values = getValues();
if (callback) {
var err = callback(values, show_progress);
if (err && !err.trim()) {
return;
}
if (err) {
show_progress(false, err);
return;
}
}
view.close(values);
}
["on keydown"] (evt) { // TEST
if (!evt.shortcutKey) {
// TODO TEST Windows/Mac
if (evt.code == "KeyRETURN") {
submit();
}
if (evt.code == "KeyESCAPE") {
cancel();
}
}
}
}
function show_progress(show=1, err="") { function show_progress(show=1, err="") {
if (show == -1) { if (show == -1) {
view.close() view.close()
return; return;
} }
$(#progress).style.set { $("#progress").style.setProperty("display",show ? "inline-block" : "none");
display: show ? "inline-block" : "none" $("#error").text = err;
};
$(#error).text = err;
} }
function submit() { function submit() {
if ($(button#submit)) { if ($("button#submit")) {
$(button#submit).sendEvent("click"); $("button#submit").click(); // TEST
} }
} }
function cancel() { function cancel() {
if ($(button#cancel)) { if ($("button#cancel")) {
$(button#cancel).sendEvent("click"); $("button#cancel").click();
} }
} }
event click $(button#cancel) {
view.close();
if (callback) callback(null);
}
event click $(button#skip) {
var values = getValues();
values.skip = true;
view.close(values);
if (callback) callback(values);
}
function getValues() { function getValues() {
var values = { type: type }; let values = { type: type };
for (var el in $$(.form input)) { for (let el of $$(".form input")) {
values[el.attributes["name"]] = el.value; values[el.getAttribute("name")] = el.value;
} }
for (var el in $$(.form textarea)) { for (let el of $$(".form textarea")) {
values[el.attributes["name"]] = el.value; values[el.getAttribute("name")] = el.value;
} }
for (var el in $$(.form button)) { for (let el of $$(".form button")) {
values[el.attributes["name"]] = el.value; values[el.getAttribute("name")] = el.value;
} }
if (type == "input-password") { if (type == "input-password") {
values.password = (values.password || "").trim(); values.password = (values.password || "").trim();
@ -189,76 +229,31 @@ function getValues() {
return values; return values;
} }
event click $(button#submit) {
if (type == "error") {
if (hasRetry) {
view.close({ reconnect: true });
} else {
view.close();
if (callback) callback(null);
}
return;
}
if (type == "re-input-password") {
type = "input-password";
body.update();
set_outline_focus();
return;
}
var values = getValues();
if (callback) {
var err = callback(values, show_progress);
if (err && !err.trim()) {
return;
}
if (err) {
show_progress(false, err);
return;
}
}
view.close(values);
}
event keydown (evt) {
if (!evt.shortcutKey) {
if (evt.keyCode == Event.VK_ENTER ||
(is_osx && evt.keyCode == 0x4C) ||
(is_linux && evt.keyCode == 65421)) {
submit();
}
if (evt.keyCode == Event.VK_ESCAPE) {
cancel();
}
}
}
function set_outline_focus() { function set_outline_focus() {
self.timer(30ms, function() { setTimeout(function() {
var el = $(.outline-focus); let el = $(".outline-focus");
if (el) view.focus = el; if (el) view.focus = el;
else { else {
el = $(#submit); el = $("#submit");
if (el) view.focus = el; if (el) view.focus = el;
} }
}); },30);
} }
set_outline_focus(); set_outline_focus();
function checkParams() { // checkParams
self.timer(30ms, function() { setInterval(function() {
var tmp = getParams(); let tmp = getParams();
if (!tmp || !tmp.type) { if (!tmp || !tmp.type) {
view.close("!alive"); view.close("!alive");
return; return;
} else if (tmp != params) { } else if (tmp != params) {
params = tmp; params = tmp;
updateParams(params); updateParams(params);
body.update(); body.update();
set_outline_focus(); set_outline_focus();
} }
checkParams(); },30);
});
}
checkParams(); $("body").content(<Body />);