-
Notifications
You must be signed in to change notification settings - Fork 600
/
handleImageAspectRatio.js
50 lines (41 loc) · 1.71 KB
/
handleImageAspectRatio.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import getActiveSlideInfo from './getActiveSlideInfo';
const IMAGE_CLASSES = {
vertical: 'is-vertical-image-type',
square: 'is-square-image-type',
};
const IS_ANALYZED_DATA_ATTR = 'image-ratio-analyzed';
const defineClass = (imageAspectRatio) => {
switch (true) {
case imageAspectRatio > 0.8 && imageAspectRatio <= 1.2:
return IMAGE_CLASSES.square;
case imageAspectRatio > 1.2:
return IMAGE_CLASSES.vertical;
default:
return '';
}
};
const installClass = (imageNode, $slides) => {
if (imageNode.naturalHeight <= 1) return;
const imageAspectRatio = imageNode.naturalHeight / imageNode.naturalWidth;
$slides.each((idx, slide) => $(slide).addClass(defineClass(imageAspectRatio)));
};
export default ({ delegateTarget }, carousel) => {
const {
isAnalyzedSlide,
$slider,
$activeSlide,
$activeSlideImg,
activeSlideImgNode,
} = getActiveSlideInfo(carousel || delegateTarget.slick, IS_ANALYZED_DATA_ATTR);
if (isAnalyzedSlide) return;
const $activeSlideAndClones = $slider.find(`[data-hero-slide=${$activeSlide.data('hero-slide')}]`);
$activeSlideAndClones.each((idx, slide) => $(slide).data(IS_ANALYZED_DATA_ATTR, true));
if ($activeSlide.find('.heroCarousel-content').length) return;
if (activeSlideImgNode.complete) {
if (activeSlideImgNode.naturalHeight === 1) {
$activeSlideAndClones.each((idx, slide) => $(slide).data(IS_ANALYZED_DATA_ATTR, false));
} else if (activeSlideImgNode.naturalHeight > 1) {
installClass(activeSlideImgNode, $activeSlideAndClones);
}
} else $activeSlideImg.on('load', () => installClass(activeSlideImgNode, $activeSlideAndClones));
};