forked from slint-ui/slint
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
119 lines (104 loc) · 4.07 KB
/
index.html
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
<!DOCTYPE html>
<!-- Copyright © SixtyFPS GmbH <[email protected]> -->
<!-- SPDX-License-Identifier: MIT -->
<html>
<!--
This is a static html file used to display the wasm build.
In order to generate the build
- uncomment the #wasm# lines in Cargo.toml
- Run in this directory:
SLINT_STYLE=fluent wasm-pack build --release --out-dir pkg/fluent --target web
SLINT_STYLE=material wasm-pack build --release --out-dir pkg/material --target web
SLINT_STYLE=cupertino wasm-pack build --release --out-dir pkg/cupertino --target web
SLINT_STYLE=cosmic wasm-pack build --release --out-dir pkg/cosmic --target web
-->
<head>
<meta charset="UTF-8">
<title>Slint Widget Gallery Demo (Web Assembly version)</title>
<link rel="stylesheet" href="https://slint.dev/css/demos-v1.css">
</head>
<body>
<h1>Slint Gallery</h1>
<p>This is the <a href="https://slint.dev">Slint</a> UI Widget Gallery Demo compiled to WebAssembly. It
demonstrates
different re-usable graphical
elements.</p>
<div id="spinner" style="position: relative;">
<div class="spinner">Loading...</div>
</div>
<p>Select style
<select id="style-selection">
<option value="fluent">Fluent</option>
<option value="material">Material</option>
<option value="cupertino">Cupertino</option>
<option value="cosmic">Cosmic</option>
</select>
</p>
<div id="canvas-parent"></div>
<p class="links">
<a href="https://github.com/slint-ui/slint/blob/master/examples/gallery/gallery.slint">
View Source Code on GitHub</a> -
<a href="https://slint.dev/editor?load_demo=examples/gallery/gallery.slint">
Open in SlintPad
</a>
</p>
<script type="module">
var galleries = [];
var currentGallery = undefined;
function initGallery(gallery) {
document.getElementById("spinner").hidden = false;
if (currentGallery !== undefined) {
let currentGalleryCanvas = document.getElementById("canvas");
// remove old canvas and unload window
if (currentGalleryCanvas != undefined) {
document.getElementById("canvas-parent").removeChild(currentGalleryCanvas);
}
}
if (galleries[gallery] !== undefined) {
document.getElementById("canvas-parent").appendChild(galleries[gallery]);
document.getElementById("spinner").hidden = true;
} else {
import(gallery).then(module => {
let canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.dataset.slintAutoResizeToPreferred = "true";
currentGallery = gallery;
galleries[gallery] = canvas;
document.getElementById("canvas-parent").appendChild(canvas);
module.default().finally(() => {
document.getElementById("canvas").hidden = false;
document.getElementById("spinner").hidden = true;
});
})
}
}
var styleSelection = document.getElementById("style-selection");
function loadGallery() {
var selectedStyle = ".\/pkg\/" + styleSelection[styleSelection.selectedIndex].value + "\/gallery.js";
initGallery(selectedStyle);
}
styleSelection.onchange = loadGallery;
window.addEventListener('load', () => {
const urlParams = new URLSearchParams(window.location.search);
const style = urlParams.get('style');
if (style) {
document.getElementById('style-selection').value = style.split(',')[0];
} else {
const userAgent = window.navigator.userAgent.toLowerCase();
let defaultStyle = '';
if (userAgent.indexOf('mac') !== -1 || userAgent.indexOf('iphone') !== -1 || userAgent.indexOf('ipad') !== -1) {
defaultStyle = 'cupertino';
} else if (userAgent.indexOf('windows') !== -1) {
defaultStyle = 'fluent';
} else if (userAgent.indexOf('android') !== -1) {
defaultStyle = 'material';
}
if (defaultStyle) {
document.getElementById('style-selection').value = defaultStyle;
}
}
loadGallery();
}, false);
</script>
</body>
</html>