-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
viewport-size.js
82 lines (75 loc) · 2.11 KB
/
viewport-size.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
export function getViewportSize(options, pswp) {
if (options.getViewportSizeFn) {
const newViewportSize = options.getViewportSizeFn(options, pswp);
if (newViewportSize) {
return newViewportSize;
}
}
return {
x: document.documentElement.clientWidth,
// TODO: height on mobile is very incosistent due to toolbar
// find a way to improve this
//
// document.documentElement.clientHeight - doesn't seem to work well
y: window.innerHeight
};
}
/**
* Parses padding option.
* Supported formats:
*
* // Object
* padding: {
* top: 0,
* bottom: 0,
* left: 0,
* right: 0
* }
*
* // A function that returns the object
* paddingFn: (viewportSize, itemData, index) => {
* return {
* top: 0,
* bottom: 0,
* left: 0,
* right: 0
* };
* }
*
* // Legacy variant
* paddingLeft: 0,
* paddingRight: 0,
* paddingTop: 0,
* paddingBottom: 0,
*
* @param {String} prop 'left', 'top', 'bottom', 'right'
* @param {Object} options PhotoSwipe options
* @param {Object} viewportSize PhotoSwipe viewport size, for example: { x:800, y:600 }
* @param {Object} itemData Data about the slide
* @param {Integer} index Slide index
* @returns {Number}
*/
export function parsePaddingOption(prop, options, viewportSize, itemData, index) {
let paddingValue;
if (options.paddingFn) {
paddingValue = options.paddingFn(viewportSize, itemData, index)[prop];
} else if (options.padding) {
paddingValue = options.padding[prop];
} else {
const legacyPropName = 'padding' + prop[0].toUpperCase() + prop.slice(1);
if (options[legacyPropName]) {
paddingValue = options[legacyPropName];
}
}
return paddingValue || 0;
}
export function getPanAreaSize(options, viewportSize, itemData, index) {
return {
x: viewportSize.x
- parsePaddingOption('left', options, viewportSize, itemData, index)
- parsePaddingOption('right', options, viewportSize, itemData, index),
y: viewportSize.y
- parsePaddingOption('top', options, viewportSize, itemData, index)
- parsePaddingOption('bottom', options, viewportSize, itemData, index)
};
}