Skip to content

Commit 4a8355a

Browse files
deoostfreesdeoostfrees
committed
[TASK] Zoom images only, hide Parvus controls when zoomed
Related: #42
1 parent ad431f6 commit 4a8355a

File tree

8 files changed

+86
-70
lines changed

8 files changed

+86
-70
lines changed

‎dist/css/parvus.css

+9-8
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,6 @@ body:has(.parvus[open]) {
9191
inset: 0;
9292
position: absolute;
9393
}
94-
.parvus__slider[aria-hidden=true] {
95-
display: none;
96-
}
9794
@media screen and (prefers-reduced-motion: no-preference) {
9895
.parvus__slider--animate:not(.parvus__slider--is-dragging) {
9996
transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function);
@@ -110,7 +107,7 @@ body:has(.parvus[open]) {
110107
block-size: 100%;
111108
display: grid;
112109
inline-size: 100%;
113-
padding-block: 3.75rem 1rem;
110+
padding-block: 1rem;
114111
padding-inline: 1rem;
115112
place-items: center;
116113
}
@@ -157,10 +154,14 @@ body:has(.parvus[open]) {
157154
inset-block-start: 1rem;
158155
inset-inline: 1rem;
159156
justify-content: space-between;
157+
pointer-events: none;
160158
position: absolute;
161159
view-transition-name: toolbar;
162160
z-index: 8;
163161
}
162+
.parvus__toolbar > * {
163+
pointer-events: auto;
164+
}
164165
.parvus__controls {
165166
display: flex;
166167
gap: 0.5rem;
@@ -222,19 +223,19 @@ body:has(.parvus[open]) {
222223
.parvus--is-opening .parvus__overlay, .parvus--is-opening .parvus__counter, .parvus--is-opening .parvus__btn--close, .parvus--is-opening .parvus__btn--previous, .parvus--is-opening .parvus__btn--next, .parvus--is-opening .parvus__caption, .parvus--is-closing .parvus__overlay, .parvus--is-closing .parvus__counter, .parvus--is-closing .parvus__btn--close, .parvus--is-closing .parvus__btn--previous, .parvus--is-closing .parvus__btn--next, .parvus--is-closing .parvus__caption {
223224
opacity: 0;
224225
}
225-
.parvus--is-vertical-closing .parvus__counter, .parvus--is-vertical-closing .parvus__btn--close {
226+
.parvus--is-vertical-closing .parvus__counter, .parvus--is-vertical-closing .parvus__btn--close, .parvus--is-zooming .parvus__counter, .parvus--is-zooming .parvus__btn--close {
226227
transform: translateY(-100%);
227228
opacity: 0;
228229
}
229-
.parvus--is-vertical-closing .parvus__btn--previous {
230+
.parvus--is-vertical-closing .parvus__btn--previous, .parvus--is-zooming .parvus__btn--previous {
230231
transform: translate(-100%, -50%);
231232
opacity: 0;
232233
}
233-
.parvus--is-vertical-closing .parvus__btn--next {
234+
.parvus--is-vertical-closing .parvus__btn--next, .parvus--is-zooming .parvus__btn--next {
234235
transform: translate(100%, -50%);
235236
opacity: 0;
236237
}
237-
.parvus--is-vertical-closing .parvus__caption {
238+
.parvus--is-vertical-closing .parvus__caption, .parvus--is-zooming .parvus__caption {
238239
transform: translateY(100%);
239240
opacity: 0;
240241
}

‎dist/css/parvus.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/parvus.esm.js

+20-16
Original file line numberDiff line numberDiff line change
@@ -1098,28 +1098,31 @@ function Parvus(userOptions) {
10981098
if (!pointerDown) {
10991099
return;
11001100
}
1101-
const currentImg = GROUPS[activeGroup].sliderElements[currentIndex];
1101+
const currentImg = GROUPS[activeGroup].contentElements[currentIndex];
11021102

11031103
// Update pointer position
11041104
activePointers.set(event.pointerId, event);
11051105

11061106
// Zoom
1107-
if (activePointers.size === 2) {
1108-
const points = Array.from(activePointers.values());
1109-
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
1110-
if (!isPinching) {
1111-
pinchStartDistance = distance;
1112-
isPinching = true;
1113-
baseScale = lastScale;
1107+
if (currentImg && currentImg.tagName === 'IMG') {
1108+
if (activePointers.size === 2) {
1109+
const points = Array.from(activePointers.values());
1110+
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
1111+
if (!isPinching) {
1112+
pinchStartDistance = distance;
1113+
isPinching = true;
1114+
baseScale = lastScale;
1115+
lightbox.classList.add('parvus--is-zooming');
1116+
}
1117+
currentScale = baseScale * (distance / pinchStartDistance);
1118+
currentScale = Math.min(Math.max(1, currentScale), 3);
1119+
currentImg.style.transform = `scale(${currentScale})`;
1120+
lastScale = currentScale;
1121+
return;
1122+
}
1123+
if (currentScale > 1) {
1124+
return;
11141125
}
1115-
currentScale = baseScale * (distance / pinchStartDistance);
1116-
currentScale = Math.min(Math.max(1, currentScale), 3);
1117-
currentImg.style.transform = `scale(${currentScale})`;
1118-
lastScale = currentScale;
1119-
return;
1120-
}
1121-
if (currentScale > 1) {
1122-
return;
11231126
}
11241127
const {
11251128
pageX,
@@ -1156,6 +1159,7 @@ function Parvus(userOptions) {
11561159
baseScale = lastScale;
11571160
} else {
11581161
pinchStartDistance = 0;
1162+
lightbox.classList.remove('parvus--is-zooming');
11591163
}
11601164
};
11611165

‎dist/js/parvus.esm.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/parvus.js

+20-16
Original file line numberDiff line numberDiff line change
@@ -1104,28 +1104,31 @@
11041104
if (!pointerDown) {
11051105
return;
11061106
}
1107-
const currentImg = GROUPS[activeGroup].sliderElements[currentIndex];
1107+
const currentImg = GROUPS[activeGroup].contentElements[currentIndex];
11081108

11091109
// Update pointer position
11101110
activePointers.set(event.pointerId, event);
11111111

11121112
// Zoom
1113-
if (activePointers.size === 2) {
1114-
const points = Array.from(activePointers.values());
1115-
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
1116-
if (!isPinching) {
1117-
pinchStartDistance = distance;
1118-
isPinching = true;
1119-
baseScale = lastScale;
1113+
if (currentImg && currentImg.tagName === 'IMG') {
1114+
if (activePointers.size === 2) {
1115+
const points = Array.from(activePointers.values());
1116+
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
1117+
if (!isPinching) {
1118+
pinchStartDistance = distance;
1119+
isPinching = true;
1120+
baseScale = lastScale;
1121+
lightbox.classList.add('parvus--is-zooming');
1122+
}
1123+
currentScale = baseScale * (distance / pinchStartDistance);
1124+
currentScale = Math.min(Math.max(1, currentScale), 3);
1125+
currentImg.style.transform = `scale(${currentScale})`;
1126+
lastScale = currentScale;
1127+
return;
1128+
}
1129+
if (currentScale > 1) {
1130+
return;
11201131
}
1121-
currentScale = baseScale * (distance / pinchStartDistance);
1122-
currentScale = Math.min(Math.max(1, currentScale), 3);
1123-
currentImg.style.transform = `scale(${currentScale})`;
1124-
lastScale = currentScale;
1125-
return;
1126-
}
1127-
if (currentScale > 1) {
1128-
return;
11291132
}
11301133
const {
11311134
pageX,
@@ -1162,6 +1165,7 @@
11621165
baseScale = lastScale;
11631166
} else {
11641167
pinchStartDistance = 0;
1168+
lightbox.classList.remove('parvus--is-zooming');
11651169
}
11661170
};
11671171

‎dist/js/parvus.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/parvus.js

+25-21
Original file line numberDiff line numberDiff line change
@@ -1155,37 +1155,40 @@ export default function Parvus (userOptions) {
11551155
return
11561156
}
11571157

1158-
const currentImg = GROUPS[activeGroup].sliderElements[currentIndex]
1158+
const currentImg = GROUPS[activeGroup].contentElements[currentIndex]
11591159

11601160
// Update pointer position
11611161
activePointers.set(event.pointerId, event)
11621162

11631163
// Zoom
1164-
if (activePointers.size === 2) {
1165-
const points = Array.from(activePointers.values())
1166-
const distance = Math.hypot(
1167-
points[1].clientX - points[0].clientX,
1168-
points[1].clientY - points[0].clientY
1169-
)
1170-
1171-
if (!isPinching) {
1172-
pinchStartDistance = distance
1173-
isPinching = true
1174-
baseScale = lastScale
1175-
}
1164+
if (currentImg && currentImg.tagName === 'IMG') {
1165+
if (activePointers.size === 2) {
1166+
const points = Array.from(activePointers.values())
1167+
const distance = Math.hypot(
1168+
points[1].clientX - points[0].clientX,
1169+
points[1].clientY - points[0].clientY
1170+
)
1171+
1172+
if (!isPinching) {
1173+
pinchStartDistance = distance
1174+
isPinching = true
1175+
baseScale = lastScale
1176+
lightbox.classList.add('parvus--is-zooming')
1177+
}
11761178

1177-
currentScale = baseScale * (distance / pinchStartDistance)
1178-
currentScale = Math.min(Math.max(1, currentScale), 3)
1179+
currentScale = baseScale * (distance / pinchStartDistance)
1180+
currentScale = Math.min(Math.max(1, currentScale), 3)
11791181

1180-
currentImg.style.transform = `scale(${currentScale})`
1182+
currentImg.style.transform = `scale(${currentScale})`
11811183

1182-
lastScale = currentScale
1184+
lastScale = currentScale
11831185

1184-
return
1185-
}
1186+
return
1187+
}
11861188

1187-
if (currentScale > 1) {
1188-
return
1189+
if (currentScale > 1) {
1190+
return
1191+
}
11891192
}
11901193

11911194
const { pageX, pageY } = event
@@ -1227,6 +1230,7 @@ export default function Parvus (userOptions) {
12271230
baseScale = lastScale
12281231
} else {
12291232
pinchStartDistance = 0
1233+
lightbox.classList.remove('parvus--is-zooming')
12301234
}
12311235
}
12321236

0 commit comments

Comments
 (0)