web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add the loading screen in the HTML so that it is displayed before JS is loaded

Browse Source
This commit is contained in:
yflory
2017-03-08 18:05:15 +01:00
parent 404fa378e6
commit 459b18c97b
6 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
www/code/index.html
View File

@@ -11,6 +11,7 @@
data-main-favicon="/customize/main-favicon.png" data-main-favicon="/customize/main-favicon.png"
data-alt-favicon="/customize/alt-favicon.png" data-alt-favicon="/customize/alt-favicon.png"
id="favicon" /> id="favicon" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/customize/main.css" /> <link rel="stylesheet" href="/customize/main.css" />
<style> <style>
html, body { html, body {
@@ -45,5 +46,14 @@
<div id="iframe-container"> <div id="iframe-container">
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script> <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
</div> </div>
<div id="loading">
<div class="loadingContainer">
<img class="cryptofist" src="/customize/cryptofist_small.png" />
<div class="spinnerContainer">
<span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
</div>
<p data-localization="loading"></p>
</div>
</div>
</body> </body>
</html> </html>

31
www/common/cryptpad-common.js
View File

@@ -883,26 +883,27 @@ define([
return Messages.tips[keys[rdm]]; return Messages.tips[keys[rdm]];
}; };
common.addLoadingScreen = function (loadingText) { common.addLoadingScreen = function (loadingText) {
var $loading, $container;
if ($('#' + LOADING).length) { if ($('#' + LOADING).length) {
$('#' + LOADING).show(); $loading = $('#' + LOADING).show();
return; if (loadingText) {
$('#' + LOADING).find('p').text(loadingText);
}
$container = $loading.find('.loadingContainer');
} else {
var $loading = $('<div>', {id: LOADING});
$container = $('<div>', {'class': 'loadingContainer'});
$container.append('<img class="cryptofist" src="/customize/cryptofist_small.png" />');
var $spinner = $('<div>', {'class': 'spinnerContainer'});
var loadingSpinner = common.spinner($spinner).show();
var $text = $('<p>').text(loadingText || Messages.loading);
$container.append($spinner).append($text);
$loading.append($container);
$('body').append($loading);
} }
var $loading = $('<div>', {id: LOADING});
var $container = $('<div>', {'class': 'loadingContainer'});
$container.append('<img class="cryptofist" src="/customize/cryptofist_small.png" />');
var $spinner = $('<div>', {'class': 'spinnerContainer'});
var loadingSpinner = common.spinner($spinner).show();
var $text = $('<p>').text(loadingText || Messages.loading);
$container.append($spinner).append($text);
$loading.append($container);
$('body').append($loading);
if (Messages.tips) { if (Messages.tips) {
var $loadingTip = $('<div>', {'id': 'loadingTip'}); var $loadingTip = $('<div>', {'id': 'loadingTip'});
var $tip = $('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip); var $tip = $('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip);
console.log($('body').height());
console.log($container.height());
console.log($('body'));
console.log($container);
$loadingTip.css({ $loadingTip.css({
'top': $('body').height()/2 + $container.height()/2 + 20 + 'px' 'top': $('body').height()/2 + $container.height()/2 + 20 + 'px'
}); });

10
www/drive/index.html
View File

@@ -9,6 +9,7 @@
data-main-favicon="/customize/main-favicon.png" data-main-favicon="/customize/main-favicon.png"
data-alt-favicon="/customize/alt-favicon.png" data-alt-favicon="/customize/alt-favicon.png"
id="favicon" /> id="favicon" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/customize/main.css" /> <link rel="stylesheet" href="/customize/main.css" />
<script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script> <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
<style> <style>
@@ -33,5 +34,14 @@
</head> </head>
<body> <body>
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script> <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
<div id="loading">
<div class="loadingContainer">
<img class="cryptofist" src="/customize/cryptofist_small.png" />
<div class="spinnerContainer">
<span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
</div>
<p data-localization="loading"></p>
</div>
</div>
</body> </body>
</html> </html>

10
www/pad/index.html
View File

@@ -4,6 +4,7 @@
<title>CryptPad</title> <title>CryptPad</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" <link rel="icon" type="image/png"
href="/customize/main-favicon.png" href="/customize/main-favicon.png"
data-main-favicon="/customize/main-favicon.png" data-main-favicon="/customize/main-favicon.png"
@@ -56,5 +57,14 @@
</head> </head>
<body> <body>
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script> <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
<div id="loading">
<div class="loadingContainer">
<img class="cryptofist" src="/customize/cryptofist_small.png" />
<div class="spinnerContainer">
<span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
</div>
<p data-localization="loading"></p>
</div>
</div>
</body> </body>
</html> </html>

10
www/poll/index.html
View File

@@ -143,3 +143,13 @@
<button data-localization-title="poll_commit" id="commit"><span class="fa fa-check"></span></button> <button data-localization-title="poll_commit" id="commit"><span class="fa fa-check"></span></button>
</div> </div>
</div> </div>
<div id="loading">
<div class="loadingContainer">
<img class="cryptofist" src="/customize/cryptofist_small.png" />
<div class="spinnerContainer">
<span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
</div>
<p data-localization="loading"></p>
</div>
</div>

10
www/slide/index.html
View File

@@ -10,6 +10,7 @@
data-main-favicon="/customize/main-favicon.png" data-main-favicon="/customize/main-favicon.png"
data-alt-favicon="/customize/alt-favicon.png" data-alt-favicon="/customize/alt-favicon.png"
id="favicon" /> id="favicon" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/customize/main.css" /> <link rel="stylesheet" href="/customize/main.css" />
<style> <style>
html, body { html, body {
@@ -48,5 +49,14 @@
<div id="iframe-container"> <div id="iframe-container">
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script> <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
</div> </div>
<div id="loading">
<div class="loadingContainer">
<img class="cryptofist" src="/customize/cryptofist_small.png" />
<div class="spinnerContainer">
<span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
</div>
<p data-localization="loading"></p>
</div>
</div>
</body> </body>
</html> </html>