diff --git a/src/ui/cm.css b/src/ui/cm.css index 45f02d116..1a76d4673 100644 --- a/src/ui/cm.css +++ b/src/ui/cm.css @@ -4,11 +4,11 @@ body { div.content { flow: horizontal; - size: *; + size: "*"; } div.left-panel { - size: *; + size: "*"; padding: 1em; border-spacing: 1em; overflow-x: scroll-indicator; @@ -38,7 +38,7 @@ div.chaticon:active { div.right-panel { background: white; border-left: color(border) 1px solid; - size: *; + size: "*"; } div.icon-and-id { @@ -71,7 +71,7 @@ div.permissions > div { } div.permissions icon { - margin: *; + margin: "*"; size: 32px; background-size: cover; background-repeat: no-repeat; @@ -99,7 +99,7 @@ icon.audio { } div.buttons { - width: *; + width: "*"; border-spacing: 0.5em; text-align: center; } @@ -120,14 +120,14 @@ button#disconnect:active { opacity: 0.5; } -@media platform != "OSX" { +@media not_osx { header .window-toolbar { left: 40px; top: 8px; } } -@media platform == "OSX" { +@media is_osx { header .tabs-wrapper { margin-left: 80px; margin-top: 8px; @@ -135,13 +135,13 @@ header .tabs-wrapper { } div.tabs-wrapper { - size: *; + size: "*"; position: relative; overflow: hidden; } div.tabs { - size: *; + size: "*"; flow: horizontal; white-space: nowrap; overflow: hidden; @@ -156,7 +156,7 @@ div.border-bottom { position: absolute; bottom: 0; left: 0; - width: *; + width: "*"; height: 1px; background: color(border) 1px solid; } @@ -213,7 +213,7 @@ div.tab-arrows { div.tab-arrows span { display: inline-block; - height: *; + height: "*"; margin: 0; padding: 6px 2px; } diff --git a/src/ui/cm.html b/src/ui/cm.html index 4edb4a762..b6ff7fb25 100644 --- a/src/ui/cm.html +++ b/src/ui/cm.html @@ -1,20 +1,15 @@ - - + + +
- +
- - - +
+
+
diff --git a/src/ui/common.js b/src/ui/common.js index b4e0bf190..cfcd21933 100644 --- a/src/ui/common.js +++ b/src/ui/common.js @@ -1,211 +1,211 @@ -include "sciter:reactor.tis"; +const view = Window.this; +export const handler = document.$("#handler") || view; -var handler = $(#handler) || view; -try { view.windowIcon = self.url(handler.get_icon()); } catch(e) {} -var OS = view.mediaVar("platform"); -var is_osx = OS == "OSX"; -var is_win = OS == "Windows"; -var is_linux = OS == "Linux"; +try { view.windowIcon = document.url(handler.xcall("get_icon")); } catch (e) { } + +const OS = view.mediaVar("platform"); +const is_osx = OS == "OSX"; +const is_win = OS == "Windows"; +const is_linux = OS == "Linux"; + +view.mediaVar("is_osx", is_osx); +view.mediaVar("not_osx", !is_osx); var is_file_transfer; var is_xfce = false; -try { is_xfce = handler.is_xfce(); } catch(e) {} +try { is_xfce = handler.xcall("is_xfce"); } catch (e) { } -function translate(name) { +export function translate(name) { try { - return handler.t(name); - } catch(_) { + return handler.xcall("t", name); + } catch (_) { return name; } } -function hashCode(str) { - var hash = 160 << 16 + 114 << 8 + 91; - for (var i = 0; i < str.length; i += 1) { - hash = str.charCodeAt(i) + ((hash << 5) - hash); - } - return hash % 16777216; +export function hashCode(str) { + let hash = 160 << 16 + 114 << 8 + 91; + for (let i = 0; i < str.length; i += 1) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + return hash % 16777216; } -function intToRGB(i, a = 1) { - return 'rgba(' + ((i >> 16) & 0xFF) + ', ' + ((i >> 8) & 0x7F) - + ',' + (i & 0xFF) + ',' + a + ')'; +export function intToRGB(i, a = 1) { + return `rgba(${((i >> 16) & 0xFF)}, ${((i >> 8) & 0x7F)},${(i & 0xFF)},${a})`; } -function string2RGB(s, a = 1) { - return intToRGB(hashCode(s), a); +export function string2RGB(s, a = 1) { + return intToRGB(hashCode(s), a); } -function getTime() { - var now = new Date(); - return now.valueOf(); +export function getTime() { + return new Date().valueOf(); } -function platformSvg(platform, color) { +export function platformSvg(platform, color) { platform = (platform || "").toLowerCase(); if (platform == "linux") { - return - - - - - ; + return ( + + + + + ); } if (platform == "mac os") { - return - - ; + return ( + + ); } - return - - ; + return ( + + ); } -function centerize(w, h) { - var (sx, sy, sw, sh) = view.screenBox(#workarea, #rectw); +export function centerize(w, h) { + let [sx, sy, sw, sh] = view.screenBox("workarea", "rectw"); if (w > sw) w = sw; if (h > sh) h = sh; - var x = (sx + sw - w) / 2; - var y = (sy + sh - h) / 2; + const x = (sx + sw - w) / 2; + const y = (sy + sh - h) / 2; view.move(x, y, w, h); } -function setWindowButontsAndIcon(only_min=false) { +// TODO CSS +export function setWindowButontsAndIcon(only_min = false) { if (only_min) { - $(div.window-buttons).content(
-
-
); + document.$("div.window-buttons").content( +
+ +
+ ); } else { - $(div.window-buttons).content(
-
-
-
+ document.$("div.window-buttons").content(
+ + +
); } - $(div.window-icon>icon).style.set { - "background-image": "url('" + handler.get_icon() + "')", - }; + document.$("div.window-icon>icon").style.setProperty( + "background-image", `url(${handler.xcall("get_icon")})`, + ); } -function adjustBorder() { +export function adjustBorder() { if (is_osx) { - if (view.windowState == View.WINDOW_FULL_SCREEN) { - $(header).style.set { - display: "none", - }; + let headerStyle = document.$("header").style; + if (view.state == Window.WINDOW_FULL_SCREEN) { + headerStyle.setProperty("display", "none",); } else { - $(header).style.set { - display: "block", - padding: "0", - }; + headerStyle.setProperty("display", "block",); + headerStyle.setProperty("padding", "0",); } return; } - if (view.windowState == view.WINDOW_MAXIMIZED) { - self.style.set { - border: "window-frame-width solid transparent", - }; - } else if (view.windowState == view.WINDOW_FULL_SCREEN) { - self.style.set { - border: "none", - }; + if (view.state == Window.WINDOW_MAXIMIZED) { + document.style.setProperty("border", "window-frame-width solid transparent"); + } else if (view.state == Window.WINDOW_FULL_SCREEN) { + document.style.setProperty("border", "none"); } else { - self.style.set { - border: "black solid 1px", - }; + document.style.setProperty("border", "black solid 1px"); } - var el = $(button#maximize); - if (el) el.attributes.toggleClass("restore", view.windowState == View.WINDOW_MAXIMIZED); - el = $(span#fullscreen); - if (el) el.attributes.toggleClass("active", view.windowState == View.WINDOW_FULL_SCREEN); + let el = document.$("button#maximize"); + if (el) el.classList.toggle("restore", view.state == Window.WINDOW_MAXIMIZED); + el = document.$("span#fullscreen"); + if (el) el.classList.toggle("active", view.state == Window.WINDOW_FULL_SCREEN); } -var svg_checkmark = ; -var svg_edit = - -; -var svg_eye = - - -; -var svg_send = - -; -var svg_chat = - -; +export const svg_checkmark = (); +export const svg_edit = ( + +); +export const svg_eye = ( + + +); +export const svg_send = ( + +); +export const svg_chat = ( + +); -function scrollToBottom(el) { - var y = el.box(#height, #content) - el.box(#height, #client); +export function scrollToBottom(el) { + // TODO .box() + let y = el.box(#height, #content) - el.box(#height, #client); el.scrollTo(0, y); } -function getNowStr() { - var now = new Date(); +export function getNowStr() { + let now = new Date(); return String.printf("%02d:%02d:%02d", now.hour, now.minute, now.second); } /******************** start of chatbox ****************************************/ -class ChatBox: Reactor.Component { - this var msgs = []; - this var callback; - - function this(params) { - if (params) { - this.msgs = params.msgs || []; - this.callback = params.callback; - } - } +export class ChatBox extends Element { + msgs = []; + callback; - function renderMsg(msg) { - var cls = msg.name == "me" ? "right-side msg" : "left-side msg"; - return
- {msg.name == "me" ? -
{msg.time + " "} me
: -
{msg.name} {" " + msg.time}
+ constructor(props) { + if (props) { + this.msgs = props.msgs || []; + this.callback = props.callback; } -
{msg.text}
-
; - } + } - function render() { - var me = this; - var msgs = this.msgs.map(function(msg) { return me.renderMsg(msg); }); - self.timer(1ms, function() { - scrollToBottom(me.msgs); - }); - return
- - {msgs} - -
- - {svg_send} -
-
; - } + renderMsg(msg) { + let cls = msg.name == "me" ? "right-side msg" : "left-side msg"; + return ( +
+ {msg.name == "me" ? +
{msg.time + " "} me
: +
{msg.name} {" " + msg.time}
+ } +
{msg.text}
+
+ ); + } - function send() { - var el = this.$(input); - var value = (el.value || "").trim(); - el.value = ""; - if (!value) return; - if (this.callback) this.callback(value); - } + render() { + let msgs = this.msgs.map((msg) => this.renderMsg(msg)); + setTimeout(() => { + scrollToBottom(this.msgs); + }, 1); + // TODO @{this.msgs} in TIS: + return (
+ + {msgs} + +
+ + {svg_send} +
+
); + } - event keydown $(input) (evt) { - if (!evt.shortcutKey) { - if (evt.keyCode == Event.VK_ENTER || - (view.mediaVar("platform") == "OSX" && evt.keyCode == 0x4C)) { + send() { + let el = this.$("input"); + let value = (el.value || "").trim(); + el.value = ""; + if (!value) return; + if (this.callback) this.callback(value); + } + + ["on keydown at input"](evt) { + // TODO is shortcutKey useless? + if (!evt.shortcutKey) { + // TODO TEST Windows/Mac + if (evt.code == "KeyRETURN") { this.send(); } + } } - } - event click $(div.send span) { - this.send(); - view.focus = $(input); - } + ["on click at div.send span"](evt) { + this.send(); + view.focus = this.$("input"); + } } /******************** end of chatbox ****************************************/ @@ -213,47 +213,44 @@ class ChatBox: Reactor.Component { var remember_password = false; var msgbox_params; function getMsgboxParams() { - return msgbox_params; + return msgbox_params; } // 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="") { +function msgbox(type, title, text, callback = null, height = 180, width = 500, retry = 0, contentStyle = "") { if (is_linux) { // fix menu not hidden issue - self.timer(1ms, - function() { - msgbox_(type, title, text, callback, height, width, retry, contentStyle); - }); + setTimeout(() => msgbox_(type, title, text, callback, height, width, retry, contentStyle), 1); } else { msgbox_(type, title, text, callback, height, width, retry, contentStyle); } } function msgbox_(type, title, text, callback, height, width, retry, contentStyle) { - var has_msgbox = msgbox_params != null; + let has_msgbox = msgbox_params != null; if (!has_msgbox && !type) return; - var remember = false; + let remember = false; try { - remember = handler.get_remember(); - } catch(e) {} - msgbox_params = { + remember = handler.xcall("get_remember"); + } catch (e) { } + msgbox_params = { remember: remember, type: type, text: text, title: title, getParams: getMsgboxParams, callback: callback, translate: translate, retry: retry, contentStyle: contentStyle, }; if (has_msgbox) return; - var dialog = { + let dialog = { client: true, parameters: msgbox_params, width: width + (is_xfce ? 50 : 0), height: height + (is_xfce ? 50 : 0), }; - var html = handler.get_msgbox(); + let html = handler.xcall("get_msgbox"); if (html) dialog.html = html; - else dialog.url = self.url("msgbox.html"); - var res = view.dialog(dialog); + else dialog.url = document.url("msgbox.html"); + let res = view.modal(dialog); msgbox_params = null; - stdout.printf("msgbox return, type: %s, res: %s\n", type, res); + console.log(`msgbox return, type: ${type}, res: ${res}`); if (type.indexOf("custom") >= 0) { // } else if (!res) { @@ -273,12 +270,12 @@ function connecting() { handler.msgbox("connecting", "Connecting...", "Connection in progress. Please wait."); } -handler.msgbox = function(type, title, text, retry=0) { - self.timer(30ms, function() { msgbox(type, title, text, null, 180, 500, retry); }); +handler.msgbox = function (type, title, text, retry = 0) { + setTimeout(() => msgbox(type, title, text, null, 180, 500, retry), 30); } var reconnectTimeout = 1; -handler.msgbox_retry = function(type, title, text, hasRetry) { +handler.msgbox_retry = function (type, title, text, hasRetry) { handler.msgbox(type, title, text, hasRetry ? reconnectTimeout : 0); if (hasRetry) { reconnectTimeout *= 2; @@ -287,7 +284,7 @@ handler.msgbox_retry = function(type, title, text, hasRetry) { } } /******************** end of msgbox ****************************************/ - +// TODO Progress function Progress() { var _val; @@ -328,51 +325,52 @@ function Progress() this.value = ""; } -var svg_eye_cross = - - -; +const svg_eye_cross = ( + + +); -class PasswordComponent: Reactor.Component { - this var visible = false; - this var value = ''; - this var name = 'password'; - - function this(params) { - if (params && params.value) { - this.value = params.value; - } - if (params && params.name) { - this.name = params.name; - } +export class PasswordComponent extends Element { + visible = false; + value = ''; + name = 'password'; + + constructor(props) { + if (props && props.value) { + this.value = props.value; + } + if (props && props.name) { + this.name = props.name; + } } - function render() { - return
- - {this.visible ? svg_eye_cross : svg_eye} -
; + render() { + return ( +
+ + {this.visible ? svg_eye_cross : svg_eye} +
); } - event click $(svg) { - var el = this.$(input); - var value = el.value; - var start = el.xcall(#selectionStart) || 0; - var end = el.xcall(#selectionEnd); - this.update({ visible: !this.visible }); - var me = this; - self.timer(30ms, function() { - var el = me.$(input); + ["on click at svg"](svg) { + let el = this.$("input"); + let value = el.value; + // TODO selectionStart/selectionEnd run ok,but always return 0 + let start = el.xcall("selectionStart") || 0; + let end = el.xcall("selectionEnd"); + this.componentUpdate({ visible: !this.visible }); + setTimeout(() => { + let el = this.$("input"); view.focus = el; el.value = value; - el.xcall(#setSelection, start, end); - }); + el.xcall("setSelection", start, end); + }, 30) } } -function isReasonableSize(r) { - var x = r[0]; - var y = r[1]; +export function isReasonableSize(r) { + let x = r[0]; + let y = r[1]; return !(x < -3200 || x > 3200 || y < -3200 || y > 3200); }