Skip to content

Commit

Permalink
[TASK] Zoom images only, hide Parvus controls when zoomed
Browse files Browse the repository at this point in the history 
Related: #42
  • Loading branch information
@deoostfrees
deoostfrees committed Dec 23, 2024
1 parent ad431f6 commit 4a8355a
Show file tree
Hide file tree
Showing 8 changed files with 86 additions and 70 deletions.
17 changes: 9 additions & 8 deletions dist/css/parvus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,6 @@ body:has(.parvus[open]) {
inset: 0;
position: absolute;
}
.parvus__slider[aria-hidden=true] {
display: none;
}
@media screen and (prefers-reduced-motion: no-preference) {
.parvus__slider--animate:not(.parvus__slider--is-dragging) {
transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function);
Expand All @@ -110,7 +107,7 @@ body:has(.parvus[open]) {
block-size: 100%;
display: grid;
inline-size: 100%;
padding-block: 3.75rem 1rem;
padding-block: 1rem;
padding-inline: 1rem;
place-items: center;
}
Expand Down Expand Up @@ -157,10 +154,14 @@ body:has(.parvus[open]) {
inset-block-start: 1rem;
inset-inline: 1rem;
justify-content: space-between;
pointer-events: none;
position: absolute;
view-transition-name: toolbar;
z-index: 8;
}
.parvus__toolbar > * {
pointer-events: auto;
}
.parvus__controls {
display: flex;
gap: 0.5rem;
Expand Down Expand Up @@ -222,19 +223,19 @@ body:has(.parvus[open]) {
.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 {
opacity: 0;
}
.parvus--is-vertical-closing .parvus__counter, .parvus--is-vertical-closing .parvus__btn--close {
.parvus--is-vertical-closing .parvus__counter, .parvus--is-vertical-closing .parvus__btn--close, .parvus--is-zooming .parvus__counter, .parvus--is-zooming .parvus__btn--close {
transform: translateY(-100%);
opacity: 0;
}
.parvus--is-vertical-closing .parvus__btn--previous {
.parvus--is-vertical-closing .parvus__btn--previous, .parvus--is-zooming .parvus__btn--previous {
transform: translate(-100%, -50%);
opacity: 0;
}
.parvus--is-vertical-closing .parvus__btn--next {
.parvus--is-vertical-closing .parvus__btn--next, .parvus--is-zooming .parvus__btn--next {
transform: translate(100%, -50%);
opacity: 0;
}
.parvus--is-vertical-closing .parvus__caption {
.parvus--is-vertical-closing .parvus__caption, .parvus--is-zooming .parvus__caption {
transform: translateY(100%);
opacity: 0;
}
Expand Down
2 changes: 1 addition & 1 deletion dist/css/parvus.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

36 changes: 20 additions & 16 deletions dist/js/parvus.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1098,28 +1098,31 @@ function Parvus(userOptions) {
if (!pointerDown) {
return;
}
const currentImg = GROUPS[activeGroup].sliderElements[currentIndex];
const currentImg = GROUPS[activeGroup].contentElements[currentIndex];

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

// Zoom
if (activePointers.size === 2) {
const points = Array.from(activePointers.values());
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
if (!isPinching) {
pinchStartDistance = distance;
isPinching = true;
baseScale = lastScale;
if (currentImg && currentImg.tagName === 'IMG') {
if (activePointers.size === 2) {
const points = Array.from(activePointers.values());
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
if (!isPinching) {
pinchStartDistance = distance;
isPinching = true;
baseScale = lastScale;
lightbox.classList.add('parvus--is-zooming');
}
currentScale = baseScale * (distance / pinchStartDistance);
currentScale = Math.min(Math.max(1, currentScale), 3);
currentImg.style.transform = `scale(${currentScale})`;
lastScale = currentScale;
return;
}
if (currentScale > 1) {
return;
}
currentScale = baseScale * (distance / pinchStartDistance);
currentScale = Math.min(Math.max(1, currentScale), 3);
currentImg.style.transform = `scale(${currentScale})`;
lastScale = currentScale;
return;
}
if (currentScale > 1) {
return;
}
const {
pageX,
Expand Down Expand Up @@ -1156,6 +1159,7 @@ function Parvus(userOptions) {
baseScale = lastScale;
} else {
pinchStartDistance = 0;
lightbox.classList.remove('parvus--is-zooming');
}
};

Expand Down
2 changes: 1 addition & 1 deletion dist/js/parvus.esm.min.js
View file

Large diffs are not rendered by default.

36 changes: 20 additions & 16 deletions dist/js/parvus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1104,28 +1104,31 @@
if (!pointerDown) {
return;
}
const currentImg = GROUPS[activeGroup].sliderElements[currentIndex];
const currentImg = GROUPS[activeGroup].contentElements[currentIndex];

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

// Zoom
if (activePointers.size === 2) {
const points = Array.from(activePointers.values());
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
if (!isPinching) {
pinchStartDistance = distance;
isPinching = true;
baseScale = lastScale;
if (currentImg && currentImg.tagName === 'IMG') {
if (activePointers.size === 2) {
const points = Array.from(activePointers.values());
const distance = Math.hypot(points[1].clientX - points[0].clientX, points[1].clientY - points[0].clientY);
if (!isPinching) {
pinchStartDistance = distance;
isPinching = true;
baseScale = lastScale;
lightbox.classList.add('parvus--is-zooming');
}
currentScale = baseScale * (distance / pinchStartDistance);
currentScale = Math.min(Math.max(1, currentScale), 3);
currentImg.style.transform = `scale(${currentScale})`;
lastScale = currentScale;
return;
}
if (currentScale > 1) {
return;
}
currentScale = baseScale * (distance / pinchStartDistance);
currentScale = Math.min(Math.max(1, currentScale), 3);
currentImg.style.transform = `scale(${currentScale})`;
lastScale = currentScale;
return;
}
if (currentScale > 1) {
return;
}
const {
pageX,
Expand Down Expand Up @@ -1162,6 +1165,7 @@
baseScale = lastScale;
} else {
pinchStartDistance = 0;
lightbox.classList.remove('parvus--is-zooming');
}
};

Expand Down
2 changes: 1 addition & 1 deletion dist/js/parvus.min.js
View file

Large diffs are not rendered by default.

46 changes: 25 additions & 21 deletions src/js/parvus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1155,37 +1155,40 @@ export default function Parvus (userOptions) {
return
}

const currentImg = GROUPS[activeGroup].sliderElements[currentIndex]
const currentImg = GROUPS[activeGroup].contentElements[currentIndex]

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

// Zoom
if (activePointers.size === 2) {
const points = Array.from(activePointers.values())
const distance = Math.hypot(
points[1].clientX - points[0].clientX,
points[1].clientY - points[0].clientY
)

if (!isPinching) {
pinchStartDistance = distance
isPinching = true
baseScale = lastScale
}
if (currentImg && currentImg.tagName === 'IMG') {
if (activePointers.size === 2) {
const points = Array.from(activePointers.values())
const distance = Math.hypot(
points[1].clientX - points[0].clientX,
points[1].clientY - points[0].clientY
)

if (!isPinching) {
pinchStartDistance = distance
isPinching = true
baseScale = lastScale
lightbox.classList.add('parvus--is-zooming')
}

currentScale = baseScale * (distance / pinchStartDistance)
currentScale = Math.min(Math.max(1, currentScale), 3)
currentScale = baseScale * (distance / pinchStartDistance)
currentScale = Math.min(Math.max(1, currentScale), 3)

currentImg.style.transform = `scale(${currentScale})`
currentImg.style.transform = `scale(${currentScale})`

lastScale = currentScale
lastScale = currentScale

return
}
return
}

if (currentScale > 1) {
return
if (currentScale > 1) {
return
}
}

const { pageX, pageY } = event
Expand Down Expand Up @@ -1227,6 +1230,7 @@ export default function Parvus (userOptions) {
baseScale = lastScale
} else {
pinchStartDistance = 0
lightbox.classList.remove('parvus--is-zooming')
}
}

Expand Down
Loading

0 comments on commit 4a8355a

Please sign in to comment.