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

Show/hide overlay over buttons until names are entered.

Browse Source
This commit is contained in:
Ian Gulliver
2015-12-27 09:18:40 -08:00
parent 6b24e1e97a
commit c66b5f1ed4
1 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/babystats.js
View File

@@ -100,6 +100,16 @@ BabyStats.prototype.buildStylesheet_ = function() {
var focus = style.sheet.cssRules[0]; var focus = style.sheet.cssRules[0];
focus.style.outline = 'none'; focus.style.outline = 'none';
style.sheet.insertRule('babyStatsGridOverlay {}', 0);
var gridOverlay = style.sheet.cssRules[0];
gridOverlay.style.position = 'absolute';
gridOverlay.style.top = '80px';
gridOverlay.style.left = 0;
gridOverlay.style.bottom = 0;
gridOverlay.style.right = 0;
gridOverlay.style.backgroundColor = 'white';
gridOverlay.style.opacity = 0.7;
style.sheet.insertRule('babyStatsGridContainer {}', 0); style.sheet.insertRule('babyStatsGridContainer {}', 0);
var gridContainer = style.sheet.cssRules[0]; var gridContainer = style.sheet.cssRules[0];
gridContainer.style.position = 'absolute'; gridContainer.style.position = 'absolute';
@@ -312,15 +322,33 @@ BabyStats.prototype.buildLayout_ = function() {
this.childName_ = document.createElement('input'); this.childName_ = document.createElement('input');
this.addCSSClass_(this.childName_, 'babyStatsChildName'); this.addCSSClass_(this.childName_, 'babyStatsChildName');
this.childName_.placeholder = 'Child name'; this.childName_.placeholder = 'Child name';
this.childName_.addEventListener('input', this.checkOverlay_.bind(this));
this.container_.appendChild(this.childName_); this.container_.appendChild(this.childName_);
this.yourName_ = document.createElement('input'); this.yourName_ = document.createElement('input');
this.addCSSClass_(this.yourName_, 'babyStatsYourName'); this.addCSSClass_(this.yourName_, 'babyStatsYourName');
this.yourName_.placeholder = 'Your name'; this.yourName_.placeholder = 'Your name';
this.yourName_.addEventListener('input', this.checkOverlay_.bind(this));
this.container_.appendChild(this.yourName_); this.container_.appendChild(this.yourName_);
this.gridContainer_ = document.createElement('babyStatsGridContainer'); this.gridContainer_ = document.createElement('babyStatsGridContainer');
this.container_.appendChild(this.gridContainer_); this.container_.appendChild(this.gridContainer_);
this.gridOverlay_ = document.createElement('babyStatsGridOverlay');
this.container_.appendChild(this.gridOverlay_);
};
/**
* Make the grid overlay visible/hidden based on input field status.
* @private
*/
BabyStats.prototype.checkOverlay_ = function() {
var visibility = 'visible';
if (this.childName_.value && this.yourName_.value) {
visibility = 'hidden';
}
this.gridOverlay_.style.visibility = visibility;
}; };