From face49de00ca36fc50783f3f276d63ea6953219e Mon Sep 17 00:00:00 2001 From: csf Date: Tue, 4 Jan 2022 17:29:07 +0800 Subject: [PATCH] filename cm.tis -> cm.js --- src/ui/{cm.tis => cm.js} | 0 src/ui/msgbox.js | 255 +++++++++++++++++++-------------------- 2 files changed, 125 insertions(+), 130 deletions(-) rename src/ui/{cm.tis => cm.js} (100%) diff --git a/src/ui/cm.tis b/src/ui/cm.js similarity index 100% rename from src/ui/cm.tis rename to src/ui/cm.js diff --git a/src/ui/msgbox.js b/src/ui/msgbox.js index eb0ef8a62..da8019403 100644 --- a/src/ui/msgbox.js +++ b/src/ui/msgbox.js @@ -1,5 +1,7 @@ +import {$,$$} from "@sciter"; //TEST $$ import +const view = Window.this; var type, title, text, getParams, remember, retry, callback, contentStyle; -var my_translate; +var my_translate; // TEST function updateParams(params) { type = params.type; @@ -11,18 +13,17 @@ function updateParams(params) { my_translate = params.translate; retry = params.retry; contentStyle = params.contentStyle; + console.log("params",type,title,text,getParams,remember,callback,my_translate,retry,contentStyle) try { text = translate_text(text); } catch (e) {} if (retry > 0) { - self.timer(retry * 1000, function() { - view.close({ reconnect: true }); - }); + setTimeout(()=>view.close({ reconnect: true }),retry * 1000);// TEST } } function translate_text(text) { if (text.indexOf('Failed') == 0 && text.indexOf(': ') > 0) { - var fds = text.split(': '); - for (var i = 0; i < fds.length; ++i) { + let fds = text.split(': '); + for (let i = 0; i < fds.length; ++i) { fds[i] = my_translate(fds[i]); } text = fds.join(': '); @@ -30,17 +31,17 @@ function translate_text(text) { return text; } -var params = view.parameters; +var params = view.parameters; // TEST updateParams(params); var body; -class Body: Reactor.Component { - function this() { +class Body extends Element { + this() { body = this; } - function getIcon(color) { + getIcon(color) { if (type == "input-password") { return ; } @@ -56,23 +57,25 @@ class Body: Reactor.Component { return ; } - function getInputPasswordContent() { + getInputPasswordContent() { var ts = remember ? { checked: true } : {}; - return
+ // TODO
+ return
{my_translate('Please enter your password')}
-
{my_translate('Remember password')}
+
; } - function getContent() { + getContent() { if (type == "input-password") { return this.getInputPasswordContent(); } return text; } - function getColor() { + getColor() { if (type == "input-password") { return "#AD448E"; } @@ -85,26 +88,25 @@ class Body: Reactor.Component { return "#2C8CFF"; } - function hasSkip() { + hasSkip() { return type.indexOf("skip") >= 0; } - function render() { - var color = this.getColor(); - var icon = this.getIcon(color); - var content = this.getContent(); - var hasCancel = type.indexOf("error") < 0 && type != "success" && type.indexOf("nocancel") < 0; - var hasOk = type != "connecting" && type.indexOf("nook") < 0; - var hasClose = type.indexOf("hasclose") >= 0; - var show_progress = type == "connecting"; - self.style.set { border: color + " solid 1px" }; - var me = this; - self.timer(1ms, function() { + render() { + let color = this.getColor(); + let icon = this.getIcon(color); + let content = this.getContent(); + let hasCancel = type.indexOf("error") < 0 && type != "success" && type.indexOf("nocancel") < 0; + let hasOk = type != "connecting" && type.indexOf("nook") < 0; + let hasClose = type.indexOf("hasclose") >= 0; + let show_progress = type == "connecting"; + this.style.setProperty("border",(color + " solid 1px")); + setTimeout(()=>{ if (typeof content == "string") - me.$(#content).html = my_translate(content); + this.$("#content").html = my_translate(content); else - me.$(#content).content(content); - }); + this.$("#content").content(content); + },1); return (
@@ -113,72 +115,110 @@ class Body: Reactor.Component {
{icon &&
{icon}
} -
+
- - - {hasCancel || hasRetry ? : ""} - {this.hasSkip() ? : ""} - {hasOk || hasRetry ? : ""} - {hasClose ? : ""} + + + {hasCancel || retry ? : ""} + {this.hasSkip() ? : ""} + {hasOk || retry ? : ""} + {hasClose ? : ""}
); } - event click $(.custom-event) (_, me) { + // TEST + ["on click at .custom-event"](_, me) { if (callback) callback(me); } -} -$(body).content(); + ["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="") { if (show == -1) { view.close() return; } - $(#progress).style.set { - display: show ? "inline-block" : "none" - }; - $(#error).text = err; + $("#progress").style.setProperty("display",show ? "inline-block" : "none"); + $("#error").text = err; } function submit() { - if ($(button#submit)) { - $(button#submit).sendEvent("click"); + if ($("button#submit")) { + $("button#submit").click(); // TEST } } function cancel() { - if ($(button#cancel)) { - $(button#cancel).sendEvent("click"); + if ($("button#cancel")) { + $("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() { - var values = { type: type }; - for (var el in $$(.form input)) { - values[el.attributes["name"]] = el.value; + let values = { type: type }; + for (let el of $$(".form input")) { + values[el.getAttribute("name")] = el.value; } - for (var el in $$(.form textarea)) { - values[el.attributes["name"]] = el.value; + for (let el of $$(".form textarea")) { + values[el.getAttribute("name")] = el.value; } - for (var el in $$(.form button)) { - values[el.attributes["name"]] = el.value; + for (let el of $$(".form button")) { + values[el.getAttribute("name")] = el.value; } if (type == "input-password") { values.password = (values.password || "").trim(); @@ -189,76 +229,31 @@ function getValues() { 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() { - self.timer(30ms, function() { - var el = $(.outline-focus); + setTimeout(function() { + let el = $(".outline-focus"); if (el) view.focus = el; else { - el = $(#submit); + el = $("#submit"); if (el) view.focus = el; } - }); + },30); } set_outline_focus(); -function checkParams() { - self.timer(30ms, function() { - var tmp = getParams(); - if (!tmp || !tmp.type) { - view.close("!alive"); - return; - } else if (tmp != params) { - params = tmp; - updateParams(params); - body.update(); - set_outline_focus(); - } - checkParams(); - }); -} +// checkParams +setInterval(function() { + let tmp = getParams(); + if (!tmp || !tmp.type) { + view.close("!alive"); + return; + } else if (tmp != params) { + params = tmp; + updateParams(params); + body.update(); + set_outline_focus(); + } +},30); -checkParams(); +$("body").content(); \ No newline at end of file