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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
/*
GoToSocial
Copyright (C) GoToSocial Authors admin@gotosocial.org
SPDX-License-Identifier: AGPL-3.0-or-later
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
Code in this file adapted from:
https://github.com/vovayatsyuk/photoswipe-object-position (MIT License).
*/
function getCroppedBoundsOffset(position, imageSize, thumbSize, zoomLevel) {
const float = parseFloat(position);
return position.indexOf('%') > 0
? (thumbSize - imageSize * zoomLevel) * float / 100
: float;
}
function getCroppedZoomPan(position, min, max) {
const float = parseFloat(position);
return position.indexOf('%') > 0 ? min + (max - min) * float / 100 : float;
}
function getThumbnail(el) {
return el.querySelector('img');
}
function getObjectPosition(el) {
return getComputedStyle(el).getPropertyValue('object-position').split(' ');
}
export default class ObjectPosition {
constructor(lightbox) {
/**
* Make pan adjustments if large image doesn't fit the viewport.
*
* Examples:
* 1. When thumb object-position is 50% 0 (top part is initially visible)
* make sure you'll see the top part of the large image as well.
* 2. When thumb object-position is 50% 100% (bottom part is initially visible)
* make sure you'll see the bottom part of the large image as well.
*/
lightbox.on('initialZoomPan', (event) => {
const slide = event.slide;
if (!slide.data.element) {
// No thumbnail
// image set.
return;
}
const thumbnailImg = getThumbnail(slide.data.element);
if (!thumbnailImg) {
// No thumbnail
// image set.
return;
}
const [positionX, positionY] = getObjectPosition(thumbnailImg);
if (positionX !== '50%' && slide.pan.x < 0) {
slide.pan.x = getCroppedZoomPan(positionX, slide.bounds.min.x, slide.bounds.max.x);
}
if (positionY !== '50%' && slide.pan.y < 0) {
slide.pan.y = getCroppedZoomPan(positionY, slide.bounds.min.y, slide.bounds.max.y);
}
});
/**
* Fix opening animation when thumb object-position is not 50% 50%.
* https://github.com/dimsemenov/PhotoSwipe/pull/1868
*/
lightbox.addFilter('thumbBounds', (thumbBounds, itemData) => {
if (!itemData.element) {
// No thumbnail
// image set.
return;
}
const thumbnailImg = getThumbnail(itemData.element);
if (!thumbnailImg) {
// No thumbnail
// image set.
return;
}
const thumbAreaRect = thumbnailImg.getBoundingClientRect();
const fillZoomLevel = thumbBounds.w / itemData.width;
const [positionX, positionY] = getObjectPosition(thumbnailImg);
if (positionX !== '50%') {
const offsetX = getCroppedBoundsOffset(positionX, itemData.width, thumbAreaRect.width, fillZoomLevel);
thumbBounds.x = thumbAreaRect.left + offsetX;
thumbBounds.innerRect.x = offsetX;
}
if (positionY !== '50%') {
const offsetY = getCroppedBoundsOffset(positionY, itemData.height, thumbAreaRect.height, fillZoomLevel);
thumbBounds.y = thumbAreaRect.top + offsetY;
thumbBounds.innerRect.y = offsetY;
}
return thumbBounds;
});
}
}
|
