Add a container around the grid, so we can add other elements to the container.

This commit is contained in:
Ian Gulliver
2015-12-26 18:25:15 -08:00
parent 1afd0cea2d
commit 7c9750ce07

View File

@@ -18,6 +18,7 @@ var BabyStats = function(container) {
this.buildCells_(); this.buildCells_();
this.buildStylesheet_(); this.buildStylesheet_();
this.buildLayout_();
window.addEventListener('resize', this.rebuildIfNeeded_.bind(this)); window.addEventListener('resize', this.rebuildIfNeeded_.bind(this));
@@ -63,6 +64,14 @@ BabyStats.prototype.buildStylesheet_ = function() {
var style = document.createElement('style'); var style = document.createElement('style');
document.head.appendChild(style); document.head.appendChild(style);
style.sheet.insertRule('babyStatsGridContainer {}', 0);
var gridContainer = style.sheet.cssRules[0];
gridContainer.style.position = 'absolute';
gridContainer.style.top = 0;
gridContainer.style.left = 0;
gridContainer.style.bottom = 0;
gridContainer.style.right = 0;
style.sheet.insertRule('babyStatsRow {}', 0); style.sheet.insertRule('babyStatsRow {}', 0);
this.rowRule_ = style.sheet.cssRules[0]; this.rowRule_ = style.sheet.cssRules[0];
this.rowRule_.style.display = 'block'; this.rowRule_.style.display = 'block';
@@ -187,8 +196,8 @@ BabyStats.prototype.onClick_ = function(eventName, overlay) {
* @private * @private
*/ */
BabyStats.prototype.calculateGrid_ = function() { BabyStats.prototype.calculateGrid_ = function() {
var containerWidth = this.container_.offsetWidth; var containerWidth = this.gridContainer_.offsetWidth;
var containerHeight = this.container_.offsetHeight; var containerHeight = this.gridContainer_.offsetHeight;
var numTiles = this.tiles_.length; var numTiles = this.tiles_.length;
var scaleFactor = ((containerHeight / this.tileScaleHeight_) var scaleFactor = ((containerHeight / this.tileScaleHeight_)
@@ -247,12 +256,17 @@ BabyStats.prototype.calculateGrid_ = function() {
}; };
}; };
BabyStats.prototype.buildLayout_ = function() {
this.gridContainer_ = document.createElement('babyStatsGridContainer');
this.container_.appendChild(this.gridContainer_);
};
/** /**
* Construct the grid objects in the DOM. * Construct the grid objects in the DOM.
* @private * @private
*/ */
BabyStats.prototype.buildGrid_ = function() { BabyStats.prototype.buildGrid_ = function() {
this.container_.innerHTML = ''; this.gridContainer_.innerHTML = '';
this.rowRule_.style.height = 100 / this.gridHeightCells_ + '%'; this.rowRule_.style.height = 100 / this.gridHeightCells_ + '%';
this.cellRule_.style.width = 100 / this.gridWidthCells_ + '%'; this.cellRule_.style.width = 100 / this.gridWidthCells_ + '%';
@@ -267,6 +281,6 @@ BabyStats.prototype.buildGrid_ = function() {
i++; i++;
} }
} }
this.container_.appendChild(row); this.gridContainer_.appendChild(row);
} }
}; };