diff --git a/src/js/component.js b/src/js/component.js index d821ae0244..ef5e32b27e 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -1091,6 +1091,64 @@ class Component { return parseInt(this.el_['offset' + toTitleCase(widthOrHeight)], 10); } + /** + * Get width or height of computed style + * @param {String} widthOrHeight 'width' or 'height' + * @return {Number|Boolean} The bolean false if nothing was set + * @method currentDimension + */ + currentDimension(widthOrHeight) { + let computedWidthOrHeight = 0; + + if (widthOrHeight !== 'width' && widthOrHeight !== 'height') { + throw new Error('currentDimension only accepts width or height value'); + } + + if (typeof window.getComputedStyle === 'function') { + const computedStyle = window.getComputedStyle(this.el_); + computedWidthOrHeight = computedStyle.getPropertyValue(widthOrHeight) || computedStyle[ widthOrHeight ]; + } else if (this.el_.currentStyle) { + // ie 8 doesn't support computed style, shim it + // return clientWidth or clientHeight instead for better accuracy + const rule = `offset${toTitleCase(widthOrHeight)}`; + computedWidthOrHeight = this.el_[rule]; + } + + // remove 'px' from variable and parse as integer + computedWidthOrHeight = parseFloat(computedWidthOrHeight); + return computedWidthOrHeight; + } + + /** + * Get an object which contains width and height values of computed style + * @return {Object} The dimensions of element + * @method currentDimensions + */ + currentDimensions() { + return { + width: this.currentDimension('width'), + height: this.currentDimension('height') + }; + } + + /** + * Get width of computed style + * @return {Integer} + * @method currentWidth + */ + currentWidth() { + return this.currentDimension('width'); + } + + /** + * Get height of computed style + * @return {Integer} + * @method currentHeight + */ + currentHeight() { + return this.currentDimension('height'); + } + /** * Emit 'tap' events when touch events are supported * This is used to support toggling the controls through a tap on the video. diff --git a/test/unit/component.test.js b/test/unit/component.test.js index 978ac07636..38d7ff0842 100644 --- a/test/unit/component.test.js +++ b/test/unit/component.test.js @@ -572,6 +572,34 @@ test('should change the width and height of a component', function(){ ok(comp.height() === 0, 'forced height was removed'); }); +test('should get the computed dimensions', function(){ + const container = document.createElement('div'); + const comp = new Component(getFakePlayer(), {}); + const el = comp.el(); + const fixture = document.getElementById('qunit-fixture'); + + const computedWidth = '500px'; + const computedHeight = '500px'; + + fixture.appendChild(container); + container.appendChild(el); + // Container of el needs dimensions or the component won't have dimensions + container.style.width = '1000px'; + container.style.height = '1000px'; + + comp.width('50%'); + comp.height('50%'); + + equal(comp.currentWidth() + 'px', computedWidth, 'matches computed width'); + equal(comp.currentHeight() + 'px', computedHeight, 'matches computed height'); + + equal(comp.currentDimension('width') + 'px', computedWidth, 'matches computed width'); + equal(comp.currentDimension('height') + 'px', computedHeight, 'matches computed height'); + + equal(comp.currentDimensions()['width'] + 'px', computedWidth, 'matches computed width'); + equal(comp.currentDimensions()['height'] + 'px', computedHeight, 'matches computed width'); + +}); test('should use a defined content el for appending children', function(){ class CompWithContent extends Component {}