web/packages/web-container/index.html.ejs at 6c738c7f56b90a2382308aead941af9776b024fd · cernbox/web · 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
<!DOCTYPE html>
<html<%- helpers.makeHtmlAttributes(data.attributes.html) %>>
<head>
  <% data.meta.forEach((m) => { %>
    <meta<%- helpers.makeHtmlAttributes(m) %>>
  <% }); %>
  <title><%= data.title %></title>
  <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
  <% Object.keys(data.bundle.css).forEach((s) => { %>
    <link href="<%- data.bundle.css[s] %>" rel="stylesheet">
  <% }); %>
  <script src="js/require.js"></script>
  <style>
    .splash-banner {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 0.5rem;
      height: 100%;
    }
    #splash-loading{
      height: 100%;
    }
    .splash-loading-hide {
      display: none;
    }
    #loading {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 2px solid #4c5f79;
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
      -webkit-animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to { -webkit-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin {
      to { -webkit-transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div id="splash-loading" class="splash-banner splash-loading-hide">
    <div id="loading"></div>
  </div>
  <div id="owncloud"></div>
  <noscript>
    <div class="splash-banner"><h3>Please enable JavaScript</h3></div>
  </noscript>
  <script>
    var loader = document.getElementById('splash-loading')
    var loaderTimer = setTimeout(function () {
      loader.classList.remove('splash-loading-hide')
    }, 1000);

    function displayError() {
      loader.classList.remove('splash-loading-hide')
      loader.innerHTML = "<h3>Oops. Something went wrong.</h3>"
    }

    if (typeof requirejs === 'undefined') {
      displayError()
    } else {
      requirejs.config({
        baseUrl: <%- JSON.stringify(data.roots.js) %>,
        paths: <%- JSON.stringify(data.bundle.js) %>
      })

      requirejs(['web-runtime'], function (runtime) {
        clearTimeout(loaderTimer)
        document.getElementById('splash-loading').classList.add('splash-loading-hide')
        runtime.bootstrap('config.json').then(runtime.renderSuccess).catch(runtime.renderFailure)
      }, function(e) {
        displayError()
        throw e
      })
    }

  </script>
</body>
</html>