From 54b37862f11ed0454189fba103b7a2af12c0783f Mon Sep 17 00:00:00 2001 From: csf Date: Sun, 2 Jan 2022 20:42:09 +0800 Subject: [PATCH] change ab.js --- src/ui/ab.js | 258 +++++++++++++++++++++++------------------------ src/ui/common.js | 72 ++++++------- src/ui/index.js | 27 ++++- 3 files changed, 185 insertions(+), 172 deletions(-) diff --git a/src/ui/ab.js b/src/ui/ab.js index 22dc17f3d..73ca30ae5 100644 --- a/src/ui/ab.js +++ b/src/ui/ab.js @@ -1,202 +1,194 @@ -var svg_tile = ; -var svg_list = ; -var search_icon = ; -var clear_icon = ; +import { handler, string2RGB, platformSvg, msgbox } from "./common.js"; +import { app, formatId, createNewConnect } from "./index.js"; // TODO check app obj +// TODO transform +const svg_tile = ; +const svg_list = ; +const search_icon = ; +const clear_icon = ; function getSessionsStyleOption(type) { return (type || "recent") + "-sessions-style"; } -function getSessionsStyle(type) { +export function getSessionsStyle(type) { var v = handler.get_local_option(getSessionsStyleOption(type)); if (!v) v = type == "ab" ? "list" : "tile"; return v; } -var searchPatterns = {}; +class SearchBar extends Element { + parent; + value = ""; -class SearchBar: Reactor.Component { - this var type = ""; - - function this(params) { - this.type = (params || {}).type || ""; + constructor(props) { + this.parent = props.parent; } - function render() { - var value = searchPatterns[this.type] || ""; - var me = this; - self.timer(1ms, function() { me.search_id.value = value; }); - return
- {search_icon} - - {value && {clear_icon}} -
; + render() { + // TODO @{this.search_id} TIS: + return (
+ {search_icon} + + {this.value && {clear_icon}} +
); } - event click $(span.clear-input) { + ["on click at span.clear-input"](_) { + this.search_id.value = ''; this.onChange(''); } - event change $(input) (_, el) { + // TODO TEST params + ["on change at input"](_, el) { this.onChange(el.value.trim()); } - - function onChange(v) { - searchPatterns[this.type] = v; - app.multipleSessions.update(); + + onChange(v) { + this.value = v; + this.update(); // TODO update() + this.parent.filter(v); } } -class SessionStyle: Reactor.Component { - this var type = ""; +class SessionStyle extends Element { + type = ""; - function this(params) { - this.type = (params || {}).type || ""; + constructor(props) { + this.type = (props || {}).type; } - function render() { - var sessionsStyle = getSessionsStyle(this.type); - return
- {svg_tile} - {svg_list} -
; + render() { + let sessionsStyle = getSessionsStyle(this.type); + return (
+ {svg_tile} + {svg_list} +
); } - event click $(span.inactive) { - var option = getSessionsStyleOption(this.type); - var sessionsStyle = getSessionsStyle(this.type); - handler.set_option(option, sessionsStyle == "tile" ? "list" : "tile"); - app.multipleSessions.update(); + ["on click at span.inactive"](_) { + let option = getSessionsStyleOption(this.type); + let sessionsStyle = getSessionsStyle(this.type); + handler.xcall("set_option", option, sessionsStyle == "tile" ? "list" : "tile"); + //stupidUpdate(app); // seems fixed in new sciter + app.update(); } } -class SessionList: Reactor.Component { - this var sessions = []; - this var type = ""; - this var style; - - function this(params) { - this.sessions = params.sessions; - this.type = params.type || ""; - this.style = getSessionsStyle(this.type); +class SessionList extends Element { + sessions = []; + type = ""; + style; + filterPattern = ""; + + constructor(props) { + this.sessions = props.sessions; + this.type = props.type; + this.style = getSessionsStyle(props.type); } - function getSessions() { - var p = searchPatterns[this.type]; + filter(v) { + this.filterPattern = v; + this.update(); // TODO update + } + + getSessions() { + let p = this.filterPattern; if (!p) return this.sessions; - var tmp = []; - this.sessions.map(function(s) { - var name = s[4] || s.alias || s[0] || s.id || ""; + let tmp = []; + this.sessions.map(function (s) { + let name = s[4] || s.alias || s[0] || s.id || ""; if (name.indexOf(p) >= 0) tmp.push(s); }); return tmp; } - function render() { - var sessions = this.getSessions(); - if (sessions.length == 0) { - return
{translate("Empty")}
; - } - var me = this; - sessions = sessions.map(function(x) { return me.getSession(x); }); - return
+ render() { + let sessions = this.getSessions(); + if (sessions.length == 0) return ; + sessions = sessions.map((x) => this.getSession(x)); + // TODO is_win + return
- -
  • {translate('Connect')}
    • -
  • {translate('Transfer File')}
    • -
  • {translate('TCP Tunneling')}
    • -
  • RDP
    • -
    -
  • {translate('Rename')}
    • - {this.type != "fav" &&
  • {translate('Remove')}
    • } - {is_win &&
  • {translate('Create Desktop Shortcut')}
    • } -
  • {translate('Unremember Password')}
    • - {(!this.type || this.type == "fav") &&
  • {translate('Add to Favorites')}
    • } - {(!this.type || this.type == "fav") &&
  • {translate('Remove from Favorites')}
    • } + +
  • {translate('Connect')}
    • +
  • {translate('Transfer File')}
    • +
  • {translate('TCP Tunneling')}
    • +
  • RDP
    • +
  • {translate('Rename')}
    • +
  • {translate('Remove')}
    • + {is_win &&
  • {translate('Create Desktop Shortcut')}
    • }     {sessions} -
    ; +
    ; } - function getSession(s) { - var id = s[0] || s.id || ""; - var username = s[1] || s.username || ""; - var hostname = s[2] || s.hostname || ""; - var platform = s[3] || s.platform || ""; - var alias = s[4] || s.alias || ""; + getSession(s) { + let id = s[0] || s.id || ""; + let username = s[1] || s.username || ""; + let hostname = s[2] || s.hostname || ""; + let platform = s[3] || s.platform || ""; + let alias = s[4] || s.alias || ""; if (this.style == "list") { - return
    -
    - {platform && platformSvg(platform, "white")} + return (); } - return
    -
    - {platform && platformSvg(platform, "white")} -
    {username}@{hostname}
    + return ( +
    ); } - event dblclick $(div.remote-session-link) (evt, me) { + // TEST dbclick + ["on dbclick at div.remote-session-link"](evt, me) { createNewConnect(me.id, "connect"); } - - event click $(#menu) (_, me) { - var id = me.parent.parent.id; - var platform = me.parent.parent.attributes["platform"]; - this.$(#rdp).style.set{ - display: (platform == "Windows" && is_win) ? "block" : "none", - }; - this.$(#forget-password).style.set{ - display: handler.peer_has_password(id) ? "block" : "none", - }; - if (!this.type || this.type == "fav") { - var in_fav = handler.get_fav().indexOf(id) >= 0; - this.$(#add-fav).style.set{ - display: in_fav ? "none" : "block", - }; - this.$(#remove-fav).style.set{ - display: in_fav ? "block" : "none", - }; - } + + // 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"); // https://sciter.com/forums/topic/replacecustomize-context-menu/ - var menu = this.$(menu#remote-context); - menu.attributes["remote-id"] = id; + let menu = this.$("menu#remote-context"); + menu.attributes["remote-id"] = id; // // TODO attributes["remote-id"] me.popup(menu); } - - event click $(menu#remote-context li) (evt, me) { - var action = me.id; - var id = me.parent.attributes["remote-id"]; + // TODO li + ["on click at menu#remote-context li"](evt, me) { + let action = me.id; + let id = me.parent.attributes["remote-id"]; if (action == "connect") { createNewConnect(id, "connect"); } else if (action == "transfer") { createNewConnect(id, "file-transfer"); } else if (action == "remove") { if (!this.type) { - handler.remove_peer(id); - app.update(); + handler.xcall("remove_peer", id); + app.update(); // TODO app.update() } } else if (action == "forget-password") { handler.forget_password(id); } else if (action == "shortcut") { - handler.create_shortcut(id); + handler.xcall("create_shortcut", id); } else if (action == "rdp") { createNewConnect(id, "rdp"); } else if (action == "add-fav") { @@ -216,15 +208,15 @@ class SessionList: Reactor.Component { } else if (action == "tunnel") { createNewConnect(id, "port-forward"); } else if (action == "rename") { - var old_name = handler.get_peer_option(id, "alias"); - msgbox("custom-rename", "Rename", "
    \ -
    \ -
    \ - ", function(res=null) { + let old_name = handler.xcall("get_peer_option", id, "alias"); + msgbox("custom-rename", "Rename", "
    \ +
    \ +
    ", + function (res = null) { if (!res) return; - var name = (res.name || "").trim(); + let name = (res.name || "").trim(); if (name != old_name) { - handler.set_peer_option(id, "alias", name); + handler.xcall("set_peer_option", id, "alias", name); } app.update(); }); diff --git a/src/ui/common.js b/src/ui/common.js index cfcd21933..d9fa9de27 100644 --- a/src/ui/common.js +++ b/src/ui/common.js @@ -217,7 +217,7 @@ function getMsgboxParams() { } // tmp workaround https://sciter.com/forums/topic/menu-not-be-hidden-when-open-dialog-on-linux/ -function msgbox(type, title, text, callback = null, height = 180, width = 500, retry = 0, contentStyle = "") { +export function msgbox(type, title, text, callback = null, height = 180, width = 500, retry = 0, contentStyle = "") { if (is_linux) { // fix menu not hidden issue setTimeout(() => msgbox_(type, title, text, callback, height, width, retry, contentStyle), 1); } else { @@ -285,45 +285,45 @@ handler.msgbox_retry = function (type, title, text, hasRetry) { } /******************** end of msgbox ****************************************/ // TODO Progress -function Progress() -{ - var _val; - var pos = -0.25; +// function Progress() +// { +// var _val; +// var pos = -0.25; - function step() { - if( _val !== undefined ) { this.refresh(); return false; } - pos += 0.02; - if( pos > 1.25) - pos = -0.25; - this.refresh(); - return true; - } +// function step() { +// if( _val !== undefined ) { this.refresh(); return false; } +// pos += 0.02; +// if( pos > 1.25) +// pos = -0.25; +// this.refresh(); +// return true; +// } - function paintNoValue(gfx) - { - var (w,h) = this.box(#dimension,#inner); - var x = pos * w; - w = w * 0.25; - gfx.fillColor( this.style#color ) - .pushLayer(#inner-box) - .rectangle(x,0,w,h) - .popLayer(); - return true; - } +// function paintNoValue(gfx) +// { +// var (w,h) = this.box(#dimension,#inner); +// var x = pos * w; +// w = w * 0.25; +// gfx.fillColor( this.style#color ) +// .pushLayer(#inner-box) +// .rectangle(x,0,w,h) +// .popLayer(); +// return true; +// } - this[#value] = property(v) { - get return _val; - set { - _val = undefined; - pos = -0.25; - this.paintContent = paintNoValue; - this.animate(step); - this.refresh(); - } - } +// this[#value] = property(v) { +// get return _val; +// set { +// _val = undefined; +// pos = -0.25; +// this.paintContent = paintNoValue; +// this.animate(step); +// this.refresh(); +// } +// } - this.value = ""; -} +// this.value = ""; +// } const svg_eye_cross = ( diff --git a/src/ui/index.js b/src/ui/index.js index a69e5b014..8d64248c0 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -4,7 +4,7 @@ stdout.println("current platform:", OS); // html min-width, min-height not working on mac, below works for all view.windowMinSize = (500, 300); -var app; +export var app; var tmp = handler.get_connect_status(); var connect_status = tmp[0]; var service_stopped = false; @@ -50,7 +50,28 @@ class ConnectStatus: Reactor.Component { } } -function createNewConnect(id, type) { +class RecentSessions: Reactor.Component { + function render() { + var sessions = handler.get_recent_sessions(); + if (sessions.length == 0) return ; + return
    +
    +
    + {translate("Recent Sessions")} +
    + + {!app.hidden && } +
    + {!app.hidden && } +
    ; + } + + function filter(v) { + this.sessionList.filter(v); + } +} + +export function createNewConnect(id, type) { id = id.replace(/\s/g, ""); app.remote_id.value = formatId(id); if (!id) return; @@ -627,7 +648,7 @@ class ID: Reactor.Component { } var reg = /^\d+$/; -function formatId(id) { +export function formatId(id) { id = id.replace(/\s/g, ""); if (reg.test(id) && id.length > 3) { var n = id.length;