From ae9c4e5995fc5e6be5ba873b5dbc68de4bfb5bc2 Mon Sep 17 00:00:00 2001
From: csf <csf@breakbeat.cn>
Date: Tue, 4 Jan 2022 12:08:05 +0800
Subject: [PATCH] update index.js
---
src/ui/ab.js | 36 +++++++++++++++-------------
src/ui/index.js | 64 ++++++++++++++++++++++++++++---------------------
2 files changed, 56 insertions(+), 44 deletions(-)
diff --git a/src/ui/ab.js b/src/ui/ab.js
index 6b6aa0ca7..646b0357f 100644
--- a/src/ui/ab.js
+++ b/src/ui/ab.js
@@ -1,4 +1,4 @@
-import { handler, string2RGB, platformSvg, msgbox,translate } from "./common.js";
+import { handler, string2RGB, platformSvg, msgbox,translate,is_win,OS } from "./common.js";
import { app, formatId, createNewConnect,svg_menu } from "./index.js"; // TODO check app obj
// TODO transform
const svg_tile = <svg id="session-tile" viewBox="0 0 158.6 158.6"><path style="stroke-width:.309756" d="M5.4 157.7c-1-.3-2-1-3.2-2.1-2.8-2.8-2.6-1-2.5-32 0-26.7 0-27 .7-28.3a9.3 9.3 0 0 1 4-4.2c1.2-.6 2.3-.6 29-.7 27.5 0 27.6 0 29.1.6.8.4 2 1.2 2.7 2 2.4 2.5 2.3.7 2.2 31.6-.1 26.5-.1 27.6-.7 28.8a9.3 9.3 0 0 1-4.2 4c-1.4.6-1.6.6-28.5.7a235 235 0 0 1-28.6-.4zm91 0a8.5 8.5 0 0 1-5.7-5.4c-.2-.7-.3-8.3-.3-28.3V96.7l.7-1.6a8.9 8.9 0 0 1 4.6-4.3c1.2-.4 3.8-.5 28.9-.4 26.6.1 27.6.1 28.8.7 1.6.8 3.2 2.5 4 4.2.7 1.4.7 1.6.7 28.3.1 31 .3 29.2-2.5 32-2.8 2.7-1 2.6-31.4 2.6-21.4 0-26.8-.1-27.9-.5zM5.3 67a8.7 8.7 0 0 1-4-3C-.5 61.6-.5 62.3-.5 33.6-.4 3.2-.5 5 2.2 2.2 5-.6 3.2-.4 34.2-.3c26.7 0 27 0 28.3.7 1.7.8 3.4 2.4 4.2 4 .6 1.2.6 2.2.7 28.8 0 25.1 0 27.7-.4 29a9 9 0 0 1-4.3 4.5l-1.6.7H33.7c-20.2 0-27.7-.1-28.4-.4Zm89.8-.3a9 9 0 0 1-4.3-4.6c-.5-1.2-.5-3.8-.5-28.9.1-26.6.2-27.6.7-28.8a9.3 9.3 0 0 1 4.2-4c1.4-.7 1.6-.7 28.3-.7 31-.1 29.2-.3 32 2.5 2.8 2.8 2.6 1 2.5 32 0 26.7 0 26.9-.7 28.3a9.3 9.3 0 0 1-4 4.2c-1.2.5-2.2.6-29 .6l-27.7.1z" transform="translate(.4 .4)" /></svg>;
@@ -20,10 +20,10 @@ export function getSessionsStyle(type) {
// function stupidUpdate(me) {
// /* hidden is workaround of stupid sciter bug */
// me.hidden = true;
-// me.update();
+// me.componentUpdate();
// self.timer(60ms, function() {
// me.hidden = false;
-// me.update();
+// me.componentUpdate();
// });
// }
@@ -56,7 +56,7 @@ export class SearchBar extends Element {
onChange(v) {
this.value = v;
- this.update(); // TODO update()
+ this.componentUpdate();
this.parent.filter(v);
}
}
@@ -81,7 +81,7 @@ export class SessionStyle extends Element {
let sessionsStyle = getSessionsStyle(this.type);
handler.xcall("set_option", option, sessionsStyle == "tile" ? "list" : "tile");
//stupidUpdate(app); // seems fixed in new sciter
- app.update();
+ app.componentUpdate();
}
}
@@ -99,7 +99,7 @@ export class SessionList extends Element {
filter(v) {
this.filterPattern = v;
- this.update(); // TODO update
+ this.componentUpdate();
}
getSessions() {
@@ -117,14 +117,15 @@ export class SessionList extends Element {
let sessions = this.getSessions();
if (!sessions || sessions.length == 0) return <span />; // TODO property 'length' of undefined
sessions = sessions.map((x) => this.getSession(x));
- // TODO is_win
+ // TODO is_win
+ // TODO <li id="rdp">RDP<EditRdpPort /></li>
return <div class="recent-sessions-content" key={sessions.length} >
<popup>
<menu class="context" id="remote-context">
<li id="connect">{translate('Connect')}</li>
<li id="transfer">{translate('Transfer File')}</li>
<li id="tunnel">{translate('TCP Tunneling')}</li>
- <li id="rdp">RDP<EditRdpPort /></li>
+
<li id="rename">{translate('Rename')}</li>
<li id="remove">{translate('Remove')}</li>
{is_win && <li id="shortcut">{translate('Create Desktop Shortcut')}</li>}
@@ -168,25 +169,26 @@ export class SessionList extends Element {
</div >);
}
- // TEST dbclick
- ["on dbclick at div.remote-session-link"](evt, me) {
+ ["on doubleclick at div.remote-session-link"](evt, me) {
createNewConnect(me.id, "connect");
}
- // TODO #menu
["on click at #menu"](_, me) {
- let id = me.parent.parent.id;
- let platform = me.parent.parent.attributes["platform"]; // TODO attributes["platform"]
- this.$("#rdp").style.setProperty("display", (platform == "Windows" && is_win) ? "block" : "none");
+ let id = me.parentElement.parentElement.id;
+ let platform = me.parentElement.parentElement.getAttribute("platform");
+ console.log("menu id,platform:",id,platform);
+ // TODO rdp
+ // this.$("#rdp").style.setProperty("display", (platform == "Windows" && is_win) ? "block" : "none");
// https://sciter.com/forums/topic/replacecustomize-context-menu/
let menu = this.$("menu#remote-context");
- menu.attributes["remote-id"] = id; // // TODO attributes["remote-id"]
+ menu.setAttribute("remote-id",id);
me.popup(menu);
}
// TODO li
["on click at menu#remote-context li"](evt, me) {
let action = me.id;
- let id = me.parent.attributes["remote-id"];
+ let id = me.parentElement.getAttribute("remote-id");
+ console.log("click li",id);
if (action == "connect") {
createNewConnect(id, "connect");
} else if (action == "transfer") {
@@ -194,7 +196,7 @@ export class SessionList extends Element {
} else if (action == "remove") {
if (!this.type) {
handler.xcall("remove_peer", id);
- app.update(); // TODO app.update()
+ app.componentUpdate();
}
} else if (action == "forget-password") {
handler.forget_password(id);
diff --git a/src/ui/index.js b/src/ui/index.js
index 933038fc9..2d9328cd6 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -4,9 +4,9 @@ if (is_osx) view.blurBehind = "light";
console.log("current platform:", OS);
// html min-width, min-height not working on mac, below works for all
-view.minSize = [500, 300]; // TODO TEST
+view.minSize = [500, 300]; // TODO not work on ubuntu
-export var app;
+export var app; // 注意判空
var tmp = handler.xcall("get_connect_status");
var connect_status = tmp[0];
var service_stopped = false;
@@ -54,6 +54,10 @@ class ConnectStatus extends Element {
// TODO** SearchBar SessionStyle sessionsStyle SessionList
// TODO @{this.sessionList} {!app.hidden && <SessionList @{this.sessionList} style={sessionsStyle} sessions={sessions} />}
class RecentSessions extends Element {
+ sessionList;
+ componentDidMount(){
+ this.sessionList = this.$("#SessionList")
+ }
render() {
let sessions = handler.xcall("get_recent_sessions");
if (sessions.length == 0) return <span />;
@@ -62,10 +66,10 @@ class RecentSessions extends Element {
<div style="width:*">
{translate("Recent Sessions")}
</div>
- <SearchBar parent={this} />
+ {!app.hidden && <SearchBar parent={this} />}
{!app.hidden && <SessionStyle />}
</div>
- {!app.hidden && <SessionList />}
+ {!app.hidden && <SessionList id="SessionList" sessions={sessions} />}
</div>);
}
// TODO TEST
@@ -137,7 +141,7 @@ class AudioInputs extends Element {
toggleMenuState() {
let v = this.get_value();
- for (let el in this.$$("menu#audio-input>li")) {
+ for (let el of this.$$("menu#audio-input>li")) {
let selected = el.id == v;
el.classList.toggle("selected", selected);
}
@@ -185,7 +189,7 @@ class MyIdMenu extends Element {
// TEST svg#menu // .popup()
["on click at svg#menu"](_, me) {
- audioInputMenu.update({ show: true });
+ audioInputMenu.componentUpdate({ show: true });
this.toggleMenuState();
let menu = this.$("menu#config-options");
me.popup(menu);
@@ -299,10 +303,19 @@ class MyIdMenu extends Element {
}
class App extends Element{
+ remote_id;
+ recent_sessions;
+ connect_status;
this() {
app = this;
}
+ componentDidMount(){
+ this.remote_id = this.$("#ID");
+ this.recent_sessions = this.$("#RecentSessions");
+ this.connect_status = this.$("#ConnectStatus");
+ }
+
render() {
let is_can_screen_recording = handler.xcall("is_can_screen_recording",false);
// TODO ${} <ID @{this.remote_id} /> <RecentSessions @{this.recent_sessions} /> <ConnectStatus @{this.connect_status} />
@@ -339,15 +352,15 @@ class App extends Element{
<div class="right-content">
<div class="card-connect">
<div class="title">{translate('Control Remote Desktop')}</div>
- <ID />
+ <ID id="ID" />
<div class="right-buttons">
<button class="button outline" id="file-transfer">{translate('Transfer File')}</button>
<button class="button" id="connect">{translate('Connect')}</button>
</div>
</div>
- <RecentSessions />
+ <RecentSessions id="RecentSessions" />
</div>
- <ConnectStatus />
+ <ConnectStatus id="ConnectStatus" />
</div>
</div>);
}
@@ -543,7 +556,7 @@ class FixWayland extends Element {
["on click at #fix-wayland"] () {
handler.xcall("fix_login_wayland");
- app.update(); //TODO app.update()
+ app.componentUpdate();
}
}
@@ -566,7 +579,7 @@ class ModifyDefaultLogin extends Element {
if (r) {
msgbox("custom-error", "Error", r);
}
- app.update(); // TODO
+ app.componentUpdate();
}
}
@@ -593,20 +606,17 @@ class PasswordEyeArea extends Element {
</div>);
}
- // TEST
["on mouseenter"]() {
this.leaved = false;
setTimeout(()=> {
if (this.leaved) return;
- // TODO TEST input need $?
- this.input.value = handler.xcall("get_password");
+ this.$("input").value = handler.xcall("get_password");
},300);
}
- // TEST
["on mouseleave"]() {
this.leaved = true;
- this.input.value = "******";
+ this.$("input").value = "******";
}
}
@@ -618,7 +628,7 @@ class Password extends Element {
</div>);
}
- // TEST popup
+ // TODO expecting element to popup
["on click at svg#edit"](_,me) {
let menu = this.$("menu#edit-password-context");
me.popup(menu);
@@ -626,7 +636,7 @@ class Password extends Element {
["on click at li#refresh-password"] () {
handler.xcall("update_password");
- this.update(); // TODO
+ this.componentUpdate();
}
["on click at li#set-password"] () {
@@ -647,7 +657,7 @@ class Password extends Element {
return translate("The confirmation is not identical.");
}
handler.xcall("update_password",p0);
- this.update(); // TODO
+ this.componentUpdate();
});
}
}
@@ -716,34 +726,34 @@ setInterval(() => {
let tmp = !!handler.xcall("get_option","stop-service");
if (tmp != service_stopped) {
service_stopped = tmp;
- app.connect_status.update(); // TDOD
- myIdMenu.update(); // TDOD
+ app.connect_status.componentUpdate();
+ myIdMenu.componentUpdate();
}
tmp = handler.xcall("get_connect_status");
if (tmp[0] != connect_status) {
connect_status = tmp[0];
- app.connect_status.update(); // TDOD
+ app.connect_status.componentUpdate();
}
if (tmp[1] != key_confirmed) {
key_confirmed = tmp[1];
- app.update(); // TDOD
+ app.componentUpdate();
}
if (tmp[2] && tmp[2] != my_id) {
console.log("id updated");
- app.update(); // TDOD
+ app.componentUpdate();
}
tmp = handler.xcall("get_error");
if (system_error != tmp) {
system_error = tmp;
- app.update(); // TDOD
+ app.componentUpdate();
}
tmp = handler.xcall("get_software_update_url");
if (tmp != software_update_url) {
software_update_url = tmp;
- app.update(); // TDOD
+ app.componentUpdate();
}
if (handler.xcall("recent_sessions_updated")) {
console.log("recent sessions updated");
- app.recent_sessions.update(); // TDOD
+ app.recent_sessions.componentUpdate();
}
}, 1000);