Add a container around the grid, so we can add other elements to the container.
This commit is contained in:
@@ -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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user