diff options
Diffstat (limited to 'src/js/utils/style.js')
-rw-r--r-- | src/js/utils/style.js | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/src/js/utils/style.js b/src/js/utils/style.js new file mode 100644 index 00000000..a8eb393b --- /dev/null +++ b/src/js/utils/style.js @@ -0,0 +1,40 @@ +// ========================================================================== +// Style utils +// ========================================================================== + +import is from './is'; + +/* function reduceAspectRatio(width, height) { + const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h)); + const ratio = getRatio(width, height); + return `${width / ratio}:${height / ratio}`; +} */ + +// Set aspect ratio for responsive container +export function setAspectRatio(input) { + let ratio = input; + + if (!is.string(ratio) && !is.nullOrUndefined(this.embed)) { + ({ ratio } = this.embed); + } + + if (!is.string(ratio)) { + ({ ratio } = this.config); + } + + const [x, y] = ratio.split(':').map(Number); + const padding = (100 / x) * y; + + this.elements.wrapper.style.paddingBottom = `${padding}%`; + + // For Vimeo we have an extra <div> to hide the standard controls and UI + if (this.isVimeo && this.supported.ui) { + const height = 240; + const offset = (height - padding) / (height / 50); + this.media.style.transform = `translateY(-${offset}%)`; + } + + return { padding, ratio }; +} + +export default { setAspectRatio }; |