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 = ; @@ -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 ; // TODO property 'length' of undefined sessions = sessions.map((x) => this.getSession(x)); - // TODO is_win + // TODO is_win + // TODO
  • RDP
    • return
  • {translate('Connect')}
  • {translate('Transfer File')}
  • {translate('TCP Tunneling')}
    • -
  • RDP
    • +
  • {translate('Rename')}
  • {translate('Remove')}
    • {is_win &&
  • {translate('Create Desktop Shortcut')}
    • } @@ -168,25 +169,26 @@ export class SessionList extends Element {
    ); } - // 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 && } class RecentSessions extends Element { + sessionList; + componentDidMount(){ + this.sessionList = this.$("#SessionList") + } render() { let sessions = handler.xcall("get_recent_sessions"); if (sessions.length == 0) return ; @@ -62,10 +66,10 @@ class RecentSessions extends Element {
    {translate("Recent Sessions")}
    - + {!app.hidden && } {!app.hidden && } - {!app.hidden && } + {!app.hidden && } ); } // 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 ${} @@ -339,15 +352,15 @@ class App extends Element{
    {translate('Control Remote Desktop')}
    - +
    - +
    - + ); } @@ -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 { ); } - // 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 { ); } - // 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);