mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-01 16:17:25 +00:00
119 lines
4.1 KiB
HTML
119 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> -->
|
|
<!-- 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>
|