From b247093495c3402dbe7c14e3faeff8475f4e277c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 12 Apr 2019 12:19:48 +1000 Subject: Aspect ratio improvements (fixes #1042, fixes #1366) --- src/js/utils/style.js | 67 ++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 53 insertions(+), 14 deletions(-) (limited to 'src/js/utils/style.js') diff --git a/src/js/utils/style.js b/src/js/utils/style.js index a8eb393b..191e6461 100644 --- a/src/js/utils/style.js +++ b/src/js/utils/style.js @@ -4,26 +4,63 @@ 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}`; -} */ +export function validateRatio(input) { + if (!is.array(input) && (!is.string(input) || !input.includes(':'))) { + return false; + } -// Set aspect ratio for responsive container -export function setAspectRatio(input) { - let ratio = input; + const ratio = is.array(input) ? input : input.split(':'); + + return ratio.map(Number).every(is.number); +} + +export function reduceAspectRatio(ratio) { + if (!is.array(ratio) || !ratio.every(is.number)) { + return null; + } + + const [width, height] = ratio; + const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h)); + const divider = getDivider(width, height); + + return [width / divider, height / divider]; +} - if (!is.string(ratio) && !is.nullOrUndefined(this.embed)) { - ({ ratio } = this.embed); +export function getAspectRatio(input) { + const parse = ratio => { + if (!validateRatio(ratio)) { + return null; + } + + return ratio.split(':').map(Number); + }; + + // Provided ratio + let ratio = parse(input); + + // Get from config + if (ratio === null) { + ratio = parse(this.config.ratio); + } + + // Get from embed + if (ratio === null && !is.empty(this.embed) && is.string(this.embed.ratio)) { + ratio = parse(this.embed.ratio); } - if (!is.string(ratio)) { - ({ ratio } = this.config); + return ratio; +} + +// Set aspect ratio for responsive container +export function setAspectRatio(input) { + if (!this.isVideo) { + return {}; } - const [x, y] = ratio.split(':').map(Number); - const padding = (100 / x) * y; + const ratio = getAspectRatio.call(this, input); + + const [w, h] = is.array(ratio) ? ratio : [0, 0]; + const padding = (100 / w) * h; this.elements.wrapper.style.paddingBottom = `${padding}%`; @@ -32,6 +69,8 @@ export function setAspectRatio(input) { const height = 240; const offset = (height - padding) / (height / 50); this.media.style.transform = `translateY(-${offset}%)`; + } else if (this.isHTML5) { + this.elements.wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null); } return { padding, ratio }; -- cgit v1.2.3 From 7a4a7dece8538b1ff23d9155d882bda01c7940ee Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 25 Apr 2019 12:02:37 +1000 Subject: Ratio improvements --- src/js/utils/style.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'src/js/utils/style.js') diff --git a/src/js/utils/style.js b/src/js/utils/style.js index 191e6461..e51892e5 100644 --- a/src/js/utils/style.js +++ b/src/js/utils/style.js @@ -44,8 +44,14 @@ export function getAspectRatio(input) { } // Get from embed - if (ratio === null && !is.empty(this.embed) && is.string(this.embed.ratio)) { - ratio = parse(this.embed.ratio); + if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) { + ({ ratio } = this.embed); + } + + // Get from HTML5 video + if (ratio === null && this.isHTML5) { + const { videoWidth, videoHeight } = this.media; + ratio = reduceAspectRatio([videoWidth, videoHeight]); } return ratio; -- cgit v1.2.3 From c9055f391b3782d96d16fb6efa4337dc90120635 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 1 Jun 2019 18:45:07 +1000 Subject: Linting changes --- src/js/utils/style.js | 1 - 1 file changed, 1 deletion(-) (limited to 'src/js/utils/style.js') diff --git a/src/js/utils/style.js b/src/js/utils/style.js index e51892e5..6f3069c9 100644 --- a/src/js/utils/style.js +++ b/src/js/utils/style.js @@ -64,7 +64,6 @@ export function setAspectRatio(input) { } const ratio = getAspectRatio.call(this, input); - const [w, h] = is.array(ratio) ? ratio : [0, 0]; const padding = (100 / w) * h; -- cgit v1.2.3 From 97d9228bed639f0c20b1f21468dd3f181af6b262 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 3 Jun 2019 20:13:16 +1000 Subject: Aspect ratio tweaks --- src/js/utils/style.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) (limited to 'src/js/utils/style.js') diff --git a/src/js/utils/style.js b/src/js/utils/style.js index 6f3069c9..941db8f2 100644 --- a/src/js/utils/style.js +++ b/src/js/utils/style.js @@ -27,15 +27,8 @@ export function reduceAspectRatio(ratio) { } export function getAspectRatio(input) { - const parse = ratio => { - if (!validateRatio(ratio)) { - return null; - } - - return ratio.split(':').map(Number); - }; - - // Provided ratio + const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null); + // Try provided ratio let ratio = parse(input); // Get from config -- cgit v1.2.3