showroom-iframe/index.html at main · Elfsquad/showroom-iframe · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elfsquad</title>
</head>
<body style="margin: 0; padding: 0;">
  <div id="container" style="height: 90vh"></div>
  <img id="screenshot" src="" />
  <div id="requestQuoteData"></div>


  <button id="home">🏠 Home</button>
  <button id="footprint">📐 Footprint</button>
  <button id="takeScreenshot">📸 Screenshot</button>
  <button id="enableConfigurationUpdates">🔄 Enable Configuration Updates</button>
  <button id="disableConfigurationUpdates">🔄 Disable Configuration Updates</button>
  <button id="navigate">🗺️ Navigate</button>

  <div style="display: flex; gap: 10px; margin-top: 10px;">
    <input type="text" id="languageInput" placeholder="Language" />
    <button id="setLanguage">Set Language</button>
  </div>

  <script type="module">
    import { ElfsquadShowroom } from './dist/index.js';

    const elfsquad = new ElfsquadShowroom({
      container: "#container",
      url: "http://localhost:5500/configure/TEST",
    });

    navigate.addEventListener('click', () => {
      console.log('navigate clicked');
      elfsquad.navigateTo('products');
    });

    home.addEventListener('click', () => {
      console.log('home clicked');
      elfsquad.home();
    });

    takeScreenshot.addEventListener('click', () => {
      console.log('screenshot clicked');
      elfsquad.screenshot();
    });

    footprint.addEventListener('click', () => {
      console.log('footprint clicked');
      elfsquad.toggleFootprint();
    });

    enableConfigurationUpdates.addEventListener('click', () => {
      console.log('enable configuration updates clicked');
      elfsquad.enableConfigurationUpdates();
    });

    disableConfigurationUpdates.addEventListener('click', () => {
      console.log('disable configuration updates clicked');
      elfsquad.disableConfigurationUpdates();
    });

    setLanguage.addEventListener('click', () => {
      const language = languageInput.value;
      console.log('set language clicked', language);
      elfsquad.setLanguage(language);
    });

    elfsquad.onScreenshot((data) => {
      screenshot.src = data.image;
    });

    elfsquad.onRequestQuote((data) => {
      requestQuoteData.innerHTML = JSON.stringify(data);
    });

    elfsquad.onConfigurationUpdate((data) => {
      console.log('Configuration updated', data);
    });
  </script>
</body>
</html>