-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathmain.htm
131 lines (104 loc) · 3.21 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
130
131
<html
window-frame="extended"
window-resizable="true"
window-width="1920dip"
window-height="800dip"
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;
}
.hbox > * {
margin-top: *;
margin-bottom: *;
}
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>
<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>