misc/babystats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading screen.

Browse Source
This commit is contained in:
Ian Gulliver
2015-12-30 16:04:30 -08:00
parent 6b2be9f260
commit 945e8866e7
2 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
static/babystats.html
View File

@@ -10,7 +10,8 @@
<link rel="stylesheet" href="/static/babystats.css">
</head>
<body>
<div id="container"></div>
<div id="container" style="background-size: contain; background-position: center; background-image: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E %3Cg transform='rotate(0 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23430a39;%23bc1550'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(72 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23bc1550;%23e87f02'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(144 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23e87f02;%23f5c700'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(216 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%23f5c700;%2388990f'/%3E %3C/circle%3E %3C/g%3E%3Cg transform='rotate(288 50 50)'%3E %3Ccircle r='5' cx='30' cy='50'%3E %3CanimateTransform attributeName='transform' type='translate' begin='0s' repeatCount='indefinite' dur='1s' values='0 0;13.819660112501051 -19.02113032590307' keyTimes='0;1'/%3E %3Canimate attributeName='fill' dur='1s' begin='0s' repeatCount='indefinite' keyTimes='0;1' values='%2388990f;%23430a39'/%3E %3C/circle%3E %3C/g%3E%3C/svg%3E&quot;);">
</div>
<script>
new BabyStats(document.getElementById('container'));
</script>

77
static/babystats.js
View File

@@ -98,6 +98,10 @@ BabyStats.prototype.onChatReady_ = function(chat) {
this.chat_.addEventListener('request', this.checkOverlay_.bind(this));
this.chat_.addEventListener('request_denied', this.checkOverlay_.bind(this));
this.chat_.addEventListener('acl_change', this.checkOverlay_.bind(this));
// Cheap hack to get the DOM to render by yielding before we turn on
// transitions.
window.setTimeout(this.setTransitions_.bind(this), 0);
};
@@ -244,6 +248,16 @@ BabyStats.prototype.rebuildIfNeeded_ = function(e) {
};
/**
* Only set transitions once loaded.
* @private
*/
BabyStats.prototype.setTransitions_ = function() {
this.gridOverlayRule_.style.transition = '0.4s';
this.cellOverlayRule_.style.transition = '0.4s';
};
/**
* Construct our stylesheet and insert it into the DOM.
* @private
@@ -283,22 +297,21 @@ BabyStats.prototype.buildStylesheet_ = function() {
this.loginRule_.style.visibility = 'hidden';
style.sheet.insertRule('babyStatsGridOverlay {}', 0);
var gridOverlay = style.sheet.cssRules[0];
gridOverlay.style.display = 'flex';
gridOverlay.style.position = 'absolute';
gridOverlay.style.top = '80px';
gridOverlay.style.left = 0;
gridOverlay.style.bottom = 0;
gridOverlay.style.right = 0;
gridOverlay.style.alignItems = 'center';
gridOverlay.style.flexDirection = 'column';
gridOverlay.style.justifyContent = 'center';
gridOverlay.style.backgroundColor = 'rgba(255,255,255,0.7)';
gridOverlay.style.color = 'rgb(189,21,80)';
gridOverlay.style.textShadow = '0 0 2px rgb(248,202,0)';
gridOverlay.style.fontSize = '6vmin';
gridOverlay.style.fontWeight = 'bold';
gridOverlay.style.transition = '0.4s';
this.gridOverlayRule_ = style.sheet.cssRules[0];
this.gridOverlayRule_.style.display = 'flex';
this.gridOverlayRule_.style.position = 'absolute';
this.gridOverlayRule_.style.top = '80px';
this.gridOverlayRule_.style.left = 0;
this.gridOverlayRule_.style.bottom = 0;
this.gridOverlayRule_.style.right = 0;
this.gridOverlayRule_.style.alignItems = 'center';
this.gridOverlayRule_.style.flexDirection = 'column';
this.gridOverlayRule_.style.justifyContent = 'center';
this.gridOverlayRule_.style.backgroundColor = 'rgba(255,255,255,0.7)';
this.gridOverlayRule_.style.color = 'rgb(189,21,80)';
this.gridOverlayRule_.style.textShadow = '0 0 2px rgb(248,202,0)';
this.gridOverlayRule_.style.fontSize = '6vmin';
this.gridOverlayRule_.style.fontWeight = 'bold';
style.sheet.insertRule('babyStatsActionButton {}', 0);
var actionButton = style.sheet.cssRules[0];
@@ -380,21 +393,20 @@ BabyStats.prototype.buildStylesheet_ = function() {
contents.style.borderRadius = '15px';
style.sheet.insertRule('babyStatsCellOverlay {}', 0);
var contents = style.sheet.cssRules[0];
contents.style.display = 'flex';
contents.style.position = 'absolute';
contents.style.alignItems = 'center';
contents.style.justifyContent = 'center';
contents.style.margin = '5px';
contents.style.height = 'calc(100% - 10px)';
contents.style.width = 'calc(100% - 10px)';
contents.style.fontSize = '20vmin';
contents.style.fontWeight = 'bold';
contents.style.backgroundColor = 'rgb(255,255,255)';
contents.style.color = 'rgb(189,21,80)';
contents.style.borderRadius = '15px';
contents.style.opacity = 0.0;
contents.style.transition = '0.4s';
this.cellOverlayRule_ = style.sheet.cssRules[0];
this.cellOverlayRule_.style.display = 'flex';
this.cellOverlayRule_.style.position = 'absolute';
this.cellOverlayRule_.style.alignItems = 'center';
this.cellOverlayRule_.style.justifyContent = 'center';
this.cellOverlayRule_.style.margin = '5px';
this.cellOverlayRule_.style.height = 'calc(100% - 10px)';
this.cellOverlayRule_.style.width = 'calc(100% - 10px)';
this.cellOverlayRule_.style.fontSize = '20vmin';
this.cellOverlayRule_.style.fontWeight = 'bold';
this.cellOverlayRule_.style.backgroundColor = 'rgb(255,255,255)';
this.cellOverlayRule_.style.color = 'rgb(189,21,80)';
this.cellOverlayRule_.style.borderRadius = '15px';
this.cellOverlayRule_.style.opacity = 0.0;
style.sheet.insertRule('.babyStatsContainer {}', 0);
var containerRule = style.sheet.cssRules[0];
@@ -559,6 +571,9 @@ BabyStats.prototype.calculateGrid_ = function() {
* @private
*/
BabyStats.prototype.buildLayout_ = function() {
// Allows loading screen to be embedded in the style tag.
this.container_.removeAttribute('style');
this.childName_ = document.createElement('input');
this.addCSSClass_(this.childName_, 'babyStatsChildName');
this.childName_.placeholder = 'Child name';