slint/examples/gallery/index.html at master · moolight-seashell/slint · GitHub

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!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;

    // Get Noto CJK font URL from GitHub for the detected language
    function getNotoFontUrl(lang) {
      const langCode = lang.split('-')[0].toLowerCase();

      // Direct URLs to OTF files from Noto CJK GitHub repository (using raw.githubusercontent.com for CORS)
      const fontMap = {
        'ja': 'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/OTF/Japanese/NotoSansCJKjp-Regular.otf',
        // 'zh': 'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/OTF/SimplifiedChinese/NotoSansCJKsc-Regular.otf',
        // 'ko': 'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/OTF/Korean/NotoSansCJKkr-Regular.otf',
      };

      return fontMap[langCode];
    }

    // Fetch font from GitHub
    async function fetchFont(fontUrl) {
      const fontResponse = await fetch(fontUrl);
      if (!fontResponse.ok) {
        throw new Error(`HTTP ${fontResponse.status}: ${fontResponse.statusText}`);
      }
      return await fontResponse.arrayBuffer();
    }

    // Load font for the detected language
    async function loadFontForLanguage(module, lang) {
      const fontUrl = getNotoFontUrl(lang);

      if (fontUrl) {
        try {
          const fontData = await fetchFont(fontUrl);
          const uint8Array = new Uint8Array(fontData);
          const result = await module.load_font_from_bytes(uint8Array, lang);
        } catch (error) {
          console.error(`Failed to load font for language ${lang}:`, error);
        }
      }
    }

    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(async module => {
          let canvas = document.createElement("canvas");
          canvas.id = "canvas";
          canvas.dataset.slintAutoResizeToPreferred = "true";
          currentGallery = gallery;
          galleries[gallery] = canvas;

          document.getElementById("canvas-parent").appendChild(canvas);

          // Initialize WASM module first
          await module.default();

          // Detect browser language and load appropriate font
          const browserLang = (navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en';
          await loadFontForLanguage(module, browserLang);

          // Start the application
          module.main();

          document.getElementById("canvas").hidden = false;
          document.getElementById("spinner").hidden = true;
        }).catch(error => {
          console.error('Failed to initialize gallery:', error);
          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];
      }
      loadGallery();
    }, false);
  </script>
</body>

</html>