“Ubuntu 18.04” information is critical.
On Linux this functionality is not implemented yet.
I’ll add it in next version (if I will manage to find GetLocaleInfoEx equivalent there)
↧
Reply To: Does Sciter support date format attribute?
↧
Reply To: Does Sciter support date format attribute?
I’ll add it in next version (if I will manage to find GetLocaleInfoEx equivalent there)
Even so, I think sciter should at least match the OS locale by default.
↧
↧
Reply To: Does Sciter support date format attribute?
Yes, I’ve implemented support of default OS locale on Linux.
Implementation of arbitrary locale (the lang attribute value) is problematic for now – seems like Linix do not have full locales database by default anywhere.
↧
:focus-within
Hello.
I wonder if there is something similar to the :focus-within pseudo- class available in Sciter?
Example (does not work in Sciter):
<html>
<head>
<style type="text/css">
table {
width: 100%;
}
tr:focus-within {
background: red;
}
td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
</body>
</html>Thank you!
↧
Reply To: :focus-within
Last 10 years this state flag in Sciter is named :owns-focus :
<html>
<head>
<style type="text/css">
table {
width:*;
}
tr:owns-focus {
background: red;
}
td {
padding: 20dip;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
</body>
</html>↧
↧
Reply To: :focus-within
Great. Thank you!
↧
conditionals inside the elem and Array variants of append
Hi.
Appending a html string has the advantage of being able to conditionally add elements.
var omHTML =
" <div class=\"card card-cnp\">" +
" <div class=\"header\">" +
" <h2>";
omHTML += date.nume + " " + date.prenume;
omHTML +=
" </h2>";
if (date.decedat) {
omHTML +=
" <small>Decedat</small>";
}Are there short ways of managing this when appending elems or Arrays?
↧
Reply To: conditionals inside the elem and Array variants of append
I suspect that you are looking for something similar to JSX …
I am thinking about adding similar feature to script parser so something like will be possible:
function generatePresentation() {
return
<div>
<header>
<h2>{this.prefix} {this.postfix}</h2>
if ( this.offline ) <small>Offline</small>
</header>
<ol>
for(var row in this.rows) <li>{row.caption}</li>
</ol>
</div>;
}For now you can just wrap generation of HTML fragments into functions and use that in a loop:
function htmlOf(row) { … return html; }
for(var row in rows)
out += htmlOf(row);↧
Reply To: conditionals inside the elem and Array variants of append
That would be great! Thanks.
↧
↧
Reply To: Systray icon and menu integration
So i’m implementing a systray menu from the main window in the following way:
function self.ready() {
view.trayIcon {
image: self.loadImage(self.url("/tp/logo.png")),
text: "my tray"
};
view.on("trayicon-click", function(evt) {
var menu = View.window({
type: View.POPUP_WINDOW,
url: self.url("/html/trayMenu.html"),
x: 100,
y: 100,
width: 160,
height: 45,
state: View.WINDOW_SHOWN
});
menu << event activate (as) {
if (as == false) {
// close menu
}
}
});
}
view << event activate (as) {
if (as == false) {
// close menu
}
}My question is, how do i close the menu when someone clicks outside of it?
The activate event on menu does not seem to fire when clicking on the main window.
When clicking on other windows activate fires on the main window.
I started implementing a mix of activate events and main window.body on clicks to mimic this, but it seems a buggy mess.
Is there a right way of doing this that just escapes me?
↧
Reply To: Systray icon and menu integration
May I add a sub-question? I simply want some menu style popup only because the main Window is hidden. Like with a right click on many other programs tray icons. Is it needed to use View.window() or is there an option to show some menu directly instead of doing a complete HTML form?
↧
Reply To: Systray icon and menu integration
how do i close the menu when someone clicks outside of it?
When you show the tray window give it the focus. Then
self << event focusout {
// this window has lost the focus - some other window was activated
// so hide this one:
view.state = View.WINDOW_HIDDEN;
}↧
Reply To: Systray icon and menu integration
Like with a right click on many other programs tray icons.
That’s because they usually have no other means other than showing the menu. With Sciter you can do better.
Check how DropBox handles that tray.
Yet, on MacOS there is just a click on tray icon. No differentiation between left/right clicks (on tray icon). Historically MacOS is not right click friendly.
In any case you can easily render menu on window surface :
<html>
<head>
<title>Test</title>
<style>
body {margin:0;}
menu.popup { visibility:visible; }
</style>
<script type="text/tiscript">
function self.ready() {
$(menu).state.focus = true;
}
$(menu) << event focusout {
//view.state = View.WINDOW_HIDDEN; // if that is a tray window
}
</script>
</head>
<body>
<menu.popup>
<li>Foo</li>
<li>Bar</li>
</menu>
</body>
</html>↧
↧
behavior tabs with sciter binary and with go and packfolder
Hi.
I’m trying to use samples/behaviors/tabs.htm. When loaded in the sciter binary, it works fine. When I use packfolder with golang, the behavior feature is missing.
gif: No such behavior <tabs> found
<html>
<head><style>
body {
background-color: #ffffff;
}
.tabs
{
font:system;
behavior:tabs;
overflow:hidden;
width:*;
}
.tabs > .strip /* tab strip */
{
border-bottom: 2px solid #eeeeee;
margin-bottom:-1px;
padding: 2px 2px 0 2px;
flow: horizontal;
}
.tabs > .strip > [panel] /* all tabs, passive by default */
{
text-transform: uppercase;
color: #9e9e9e;
padding: 10px 15px;
margin-bottom:-2px;
max-width: auto; /* not wider than max-intrinsic */
height: *;
}
.tabs > .strip > [panel]:hover /* passive tab */
{
color: #757575;
border-bottom: 2px solid #bdbdbd;
}
.tabs > .strip > [panel]:current /*active tab*/
{
color: #212121;
border-bottom: 2px solid #2196F3;
position:relative;
}
.tabs > [name],
.tabs > [id]
{ display:none; }
.tabs > [name]:expanded,
.tabs > [id]:expanded
{
padding:15px 0;
display:block;
}
</style>
</head>
<body>
<div class="tabs">
<div class="strip" role="page-tab-list"> <!-- our tab strip, can be placed on any side of tab container. -->
<div panel="panel-id1" selected role="page-tab">tab1 caption</div>
<div panel="panel-id2" role="page-tab">tab2 caption</div>
<div panel="panel-id3" role="page-tab">tab3 caption</div>
</div>
<div id="panel-id1"> first panel content
<select name="country">
<OPTION VALUE=1 >Afghanistan</OPTION>
<OPTION VALUE=2 >Albania</OPTION>
<OPTION VALUE=3 >Algeria</OPTION>
<OPTION VALUE=4 >American Samoa</OPTION>
</select>
<p>1</p>
<p>2</p>
</div>
<div id="panel-id2"> second panel content <button>Test1</button>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<div id="panel-id3"> third panel content </div>
</div>
<p>light version of the tab:</p>
</body>
</html> sciterWindow, err = window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect)
if err != nil {
logger.Println(err)
}
sciterWindow.SetResourceArchive(resources)
sciterWindow.LoadFile("this://app/tabs.htm")↧
Reply To: behavior tabs with sciter binary and with go and packfolder
behaviors are native things. In particular behavior:tabs is linked in in sciter binary.
But there is a pure scripting behavior that does the same. Yet, there are two variants of it:
↧
Reply To: behavior tabs with sciter binary and with go and packfolder
OK, thanks!
↧
Nested Sciter HTML components
Tutorial: Learn Sciter’s HTML components in 5 minutes
shows how to pass and use attributes inside Sciter HTML components.
I need to use HTML components like in Vue/React where it’s possible to pass other components inside like:
<SomeCustomComponent>
<AnotherCustomComponent1/>
<AnotherCustomComponent2/>
<div each="item in items">
<div>{item}</div>
</div>
</SomeCustomComponent>I’ve tried:
class ToolbarButton : Element
{
function attached() {
var text = this.attributes["text"] || "?";
var myHtml = this.html
this.$content(<button>{myHtml} {text}</button>);
}
}but the content of myHtml becomes htmlecoded.
How to avoid htmlencoding and what is the way to use custom nested HTML components?
The idea is to use custom components like lego-blocks similarly to React/Vue
↧
↧
Reply To: Systray icon and menu integration
My milage varies on this.
When i post the following files under samples/trayicon:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/tiscript">
function self.ready() {
view.trayIcon {
image: self.loadImage(self.url("i32.png"))
};
view.on("trayicon-click", function(evt) {
View.window({
type: View.POPUP_WINDOW,
url: self.url("tray.html"),
state: View.WINDOW_SHOWN
});
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>and tray.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tray</title>
<style>
body {margin:0;}
menu.popup { visibility:visible; }
</style>
<script type="text/tiscript">
function self.ready() {
$(menu).state.focus = true;
}
$(menu) << event focusout {
stdout.println("focusout " + (new Date()).toString());
view.close()
}
</script>
</head>
<body>
<menu.popup>
<li>Foo</li>
<li>Bar</li>
</menu>
</body>
</html>and run them with scapp or usciter on Linux i get the following results on Linux:
* When the main window is not in focus the tray window is not visible.
* When i click on the taskbar, the desktop or the main app, the tray stays. Clicking another app makes it go away.
On Windows:
* The tray never comes up, probably because focusout has been triggered.
* When using self.timer(100, function(){$(menu).state.focus = true;}); as a work around it works as expected.
On the Mac:
* The tray window comes up but only leaves when i click on itself outside of the menu section.
↧
Reply To: Nested Sciter HTML components
If you have this
<toolbar>
<button>Something with <span>text</span></button>
</toolbar>Then
class ToolbarButton : Element
{
function attached() {
var text = this.attributes["text"] || "?";
this.$(span).text = text;
}
}Or
class ToolbarButton : Element
{
function attached() {
var text = this.attributes["text"] || "?";
this.html += text;
}
}↧
Reply To: Nested Sciter HTML components
Yet, about Vue/React
They are based on diff algorithms (between DOM and virtual DOM). Diffs on trees are known to have worse than polynomial computational complexity. Can be used only for particular assumptions. Use with care to be short.
So it is better to be specific.
If you just can do
this[0].text = text; // set text of first sub element
do it. That has O(0) complexity – fast and does not depend on position of Jupiter in the sky.
↧