diff --git a/static/babystats.js b/static/babystats.js index 43db752..228d566 100644 --- a/static/babystats.js +++ b/static/babystats.js @@ -18,6 +18,7 @@ var BabyStats = function(container) { this.buildCells_(); this.buildStylesheet_(); + this.buildLayout_(); window.addEventListener('resize', this.rebuildIfNeeded_.bind(this)); @@ -63,6 +64,14 @@ BabyStats.prototype.buildStylesheet_ = function() { var style = document.createElement('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); this.rowRule_ = style.sheet.cssRules[0]; this.rowRule_.style.display = 'block'; @@ -187,8 +196,8 @@ BabyStats.prototype.onClick_ = function(eventName, overlay) { * @private */ BabyStats.prototype.calculateGrid_ = function() { - var containerWidth = this.container_.offsetWidth; - var containerHeight = this.container_.offsetHeight; + var containerWidth = this.gridContainer_.offsetWidth; + var containerHeight = this.gridContainer_.offsetHeight; var numTiles = this.tiles_.length; 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. * @private */ BabyStats.prototype.buildGrid_ = function() { - this.container_.innerHTML = ''; + this.gridContainer_.innerHTML = ''; this.rowRule_.style.height = 100 / this.gridHeightCells_ + '%'; this.cellRule_.style.width = 100 / this.gridWidthCells_ + '%'; @@ -267,6 +281,6 @@ BabyStats.prototype.buildGrid_ = function() { i++; } } - this.container_.appendChild(row); + this.gridContainer_.appendChild(row); } };