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

Add the page flip, and fix some pointers.

Browse Source
This commit is contained in:
Ian Gulliver
2015-12-30 18:35:40 -08:00
parent 957d2fa9d3
commit 37389dd45c
1 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
static/babystats.js
View File

@@ -134,6 +134,18 @@ BabyStats.prototype.onLoginClick_ = function() {
}; };
/**
* @private
*/
BabyStats.prototype.onFlipClick_ = function() {
if (this.flipperRule_.style.transform) {
this.flipperRule_.style.transform = null;
} else {
this.flipperRule_.style.transform = 'rotateY(180deg)';
}
};
/** /**
* @param {Event} e * @param {Event} e
* @private * @private
@@ -256,6 +268,7 @@ BabyStats.prototype.rebuildIfNeeded_ = function(e) {
BabyStats.prototype.setTransitions_ = function() { BabyStats.prototype.setTransitions_ = function() {
this.gridOverlayRule_.style.transition = '0.4s'; this.gridOverlayRule_.style.transition = '0.4s';
this.cellOverlayRule_.style.transition = '0.4s'; this.cellOverlayRule_.style.transition = '0.4s';
this.flipperRule_.style.transition = '1.0s';
}; };
@@ -272,6 +285,16 @@ BabyStats.prototype.buildStylesheet_ = function() {
var containerRule = style.sheet.cssRules[0]; var containerRule = style.sheet.cssRules[0];
containerRule.style.backgroundColor = 'white'; containerRule.style.backgroundColor = 'white';
style.sheet.insertRule('.babyStatsFlip {}', 0);
var flip = style.sheet.cssRules[0];
flip.style.position = 'absolute';
flip.style.top = 0;
flip.style.left = 0;
flip.style.height = '32px';
flip.style.width = '32px';
flip.style.margin = '4px';
flip.style.cursor = 'pointer';
style.sheet.insertRule('babyStatsFlipper {}', 0); style.sheet.insertRule('babyStatsFlipper {}', 0);
this.flipperRule_ = style.sheet.cssRules[0]; this.flipperRule_ = style.sheet.cssRules[0];
this.flipperRule_.style.position = 'absolute'; this.flipperRule_.style.position = 'absolute';
@@ -279,7 +302,6 @@ BabyStats.prototype.buildStylesheet_ = function() {
this.flipperRule_.style.left = 0; this.flipperRule_.style.left = 0;
this.flipperRule_.style.bottom = 0; this.flipperRule_.style.bottom = 0;
this.flipperRule_.style.right = 0; this.flipperRule_.style.right = 0;
this.flipperRule_.style.transition = '0.6s';
this.flipperRule_.style.transformStyle = 'preserve-3d'; this.flipperRule_.style.transformStyle = 'preserve-3d';
style.sheet.insertRule('babyStatsFlipperFront {}', 0); style.sheet.insertRule('babyStatsFlipperFront {}', 0);
@@ -329,6 +351,7 @@ BabyStats.prototype.buildStylesheet_ = function() {
this.loginRule_.style.height = '32px'; this.loginRule_.style.height = '32px';
this.loginRule_.style.width = '32px'; this.loginRule_.style.width = '32px';
this.loginRule_.style.margin = '4px'; this.loginRule_.style.margin = '4px';
this.loginRule_.style.cursor = 'pointer';
this.loginRule_.style.visibility = 'hidden'; this.loginRule_.style.visibility = 'hidden';
style.sheet.insertRule('babyStatsGridOverlay {}', 0); style.sheet.insertRule('babyStatsGridOverlay {}', 0);
@@ -363,7 +386,7 @@ BabyStats.prototype.buildStylesheet_ = function() {
actionButton.style.fontSize = '3vmin'; actionButton.style.fontSize = '3vmin';
actionButton.style.fontWeight = 'normal'; actionButton.style.fontWeight = 'normal';
actionButton.style.textShadow = 'none'; actionButton.style.textShadow = 'none';
actionButton.style.cursor = 'default'; actionButton.style.cursor = 'pointer';
actionButton.style.webkitUserSelect = 'none'; actionButton.style.webkitUserSelect = 'none';
actionButton.style.mozUserSelect = 'none'; actionButton.style.mozUserSelect = 'none';
actionButton.style.userSelect = 'none'; actionButton.style.userSelect = 'none';
@@ -389,7 +412,7 @@ BabyStats.prototype.buildStylesheet_ = function() {
this.cellRule_.style.webkitUserSelect = 'none'; this.cellRule_.style.webkitUserSelect = 'none';
this.cellRule_.style.mozUserSelect = 'none'; this.cellRule_.style.mozUserSelect = 'none';
this.cellRule_.style.userSelect = 'none'; this.cellRule_.style.userSelect = 'none';
this.cellRule_.style.cursor = 'default'; this.cellRule_.style.cursor = 'pointer';
style.sheet.insertRule('babyStatsCellStatus {}', 0); style.sheet.insertRule('babyStatsCellStatus {}', 0);
var statusBox = style.sheet.cssRules[0]; var statusBox = style.sheet.cssRules[0];
@@ -642,6 +665,12 @@ BabyStats.prototype.buildLayout_ = function() {
this.gridOverlay_ = document.createElement('babyStatsGridOverlay'); this.gridOverlay_ = document.createElement('babyStatsGridOverlay');
front.appendChild(this.gridOverlay_); front.appendChild(this.gridOverlay_);
var flip = document.createElement('img');
this.addCSSClass_(flip, 'babyStatsFlip');
flip.src = '/static/flip.svg';
flip.addEventListener('click', this.onFlipClick_.bind(this));
this.container_.appendChild(flip);
this.checkOverlay_(); this.checkOverlay_();
}; };