-
Notifications
You must be signed in to change notification settings - Fork 4
/
main.htm
129 lines (103 loc) · 3.28 KB
/
main.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html
window-frame="extended"
window-resizable="true"
window-width="750dip"
window-height="1024dip"
window-state="maximized"
window-icon="images/seastar.svg"
window-blurbehind="light"
theme="light">
<head>
<title>sciter demo</title>
<style>
@import url(node_modules/sciter-logger/src/logger.css);
@import url(css/controls.css);
@import url(css/window.css);
.hbox {
margin-right: 1em;
flow: horizontal;
border-spacing: 0.5em;
vertical-align: middle;
}
plaintext#logger {
height: 10%;
}
</style>
<script type="module">
import Logger from "node_modules/sciter-logger/src/logger.js";
import Utils from "node_modules/sciter-utils/src/utils.js";
// capture unhandled exceptions
Logger.capture();
// initialize logger
Logger.init();
// attach logger to console
Logger.attach();
document.on("ready", (event, element) => {
// ignore iframe ready event
if (element.parentElement)
return;
// redirect logger output to plaintext
Logger.plaintext(document.$("plaintext#logger"));
// log sciter version
console.debug(Utils.sciterInfo());
// add support for F5 reload
Utils.addReloadWindow();
// close window on escape key press
Utils.closeWindowOnEscape(Window.this);
// center window on screen
Utils.centerWindow(Window.this, "screen");
// bring window to front and set input focus
Window.this.activate(true);
console.debug(isStrict() ? "strict js" : "loose js");
console.debug("Document ready - OK");
});
document.on("input", "form#config", (event_, form) => {
// set document light/dark mode
document.attributes.theme = form.value.mode;
// get frame
const frame = document.$("frame");
// set frame theme
frame.attributes["content-style"] = form.value.theme;
// reload frame
const url = frame.frame.document.url();
frame.frame.loadFile(url);
// set frame theme UI size
frame.frame.document.attributes["ui-size"] = form.value.size;
});
/**
* Test if strict javascript is used
* @returns {boolean} true if strict, false otherwise
* @note https://stackoverflow.com/a/18916788/10126479
*/
function isStrict() {
return eval("var __temp = null"), (typeof __temp === "undefined");
}
</script>
</head>
<include src="window.htm" media="sciter" />
<body>
<p> This is a sciter demo app based on multiple examples. </p>
<form #config .hbox>
<div .hbox>
Theme:
<select|dropdown(theme)>
<option value="default" value="css/themes/default-unisex.css" selected>default</option>
<option value="flat" value="css/themes/windows-flat.css">Windows Flat</option>
<option value="material" value="css/themes/android-material.css">Android/Material</option>
</select>
</div>
<div .hbox>
Mode:
<button|radio(mode) checked value="light">Light</button>
<button|radio(mode) value="dark">Dark</button>
</div>
<div .hbox>
Size:
<button|radio(size) checked value="normal">Normal</button>
<button|radio(size) value="compact">Compact</button>
</div>
</form>
<frame src="elements.htm" content-style="css/themes/default-unisex.css" />
<plaintext #logger readonly />
</body>
</html>