mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 13:30:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add a jostle hint to the website main carousel

Browse source
This commit is contained in:
Keavon Chambers 2023-08-25 23:56:07 -07:00
parent 89b269cf55
commit 817f1d8ce7
2 changed files with 53 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

16
website/content/_index.md
View file

@ -64,21 +64,21 @@ js = ["/image-interaction.js", "/fundraising.js", "/video-embed.js"]
</div>
<!-- ▛ SCREENSHOTS ▜ -->
<section id="screenshots" class="carousel window-size-1" data-carousel>
<section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
<div class="carousel-slide">
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #1" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" data-carousel-image />
</div>
<div class="carousel-slide torn left">
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
</div>
<div class="carousel-slide torn right">
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
</div>
<div class="screenshot-details">
<div class="carousel-controls">
@ -103,7 +103,7 @@ js = ["/image-interaction.js", "/fundraising.js", "/video-embed.js"]
<em>Valley of Spires</em> — <a href="https://editor.graphite.rs/#demo/valley-of-spires">Open this artwork</a> to explore it yourself.
</p>
<p data-carousel-description>
Design mockup for the work-in-progress node graph raster editing pipeline. Some raster nodes shown here are not implemented yet.
Design mockup for the work-in-progress node graph raster editing pipeline. Some UI concepts and raster nodes shown here are not implemented yet.
</p>
<p data-carousel-description>
Design mockup for the work-in-progress viewport raster editing workflow. Some features shown here are not implemented yet.

46
website/static/js/image-interaction.js
View file

@ -21,8 +21,10 @@ function initializeCarousel() {
const directionNext = carouselContainer.querySelector("[data-carousel-next]");
const dots = carouselContainer.querySelectorAll("[data-carousel-dot]");
const descriptions = carouselContainer.querySelectorAll("[data-carousel-description]");
const performJostleHint = carouselContainer.hasAttribute("data-carousel-jostle-hint");
const dragLastClientX = undefined;
const velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
const jostleNoLongerNeeded = false;
const carousel = {
carouselContainer,
@ -33,6 +35,7 @@ function initializeCarousel() {
descriptions,
dragLastClientX,
velocityDeltaWindow,
jostleNoLongerNeeded,
};
carousels.push(carousel);
@ -47,6 +50,42 @@ function initializeCarousel() {
slideTo(carousel, index, true);
})
);
// Jostle hint is a feature to briefly shift the carousel by a bit as a hint to users that it can be interacted with
if (performJostleHint) {
window.addEventListener("load", () => {
new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio === 1 && currentTransform(carousel) === 0 && !carousel.jostleNoLongerNeeded) {
const JOSTLE_TIME = 1000;
const MAX_JOSTLE_DISTANCE = -10;
let startTime;
const buildUp = (timeStep) => {
if (carousel.jostleNoLongerNeeded) return;
if (!startTime) startTime = timeStep;
const elapsedTime = timeStep - startTime;
const easeOutCirc = (x) => Math.sqrt(1 - Math.pow(x - 1, 2));
const movementFactor = easeOutCirc(Math.min(1, elapsedTime / JOSTLE_TIME));
setCurrentTransform(carousel, movementFactor * MAX_JOSTLE_DISTANCE, "%", false, true);
if (elapsedTime < JOSTLE_TIME) {
requestAnimationFrame(buildUp);
} else {
carousel.jostleNoLongerNeeded = true;
slideTo(carousel, 0, true);
}
};
requestAnimationFrame(buildUp);
};
});
}, { threshold: 1 })
.observe(directionPrev);
});
}
});
}
@ -81,11 +120,16 @@ function currentTransform(carousel) {
return Number(currentTransformMatrix.split(",")[4] || "0");
}
function setCurrentTransform(carousel, x, unit, smooth) {
function setCurrentTransform(carousel, x, unit, smooth, doNotTerminateJostle = false) {
const xInitial = currentTransform(carousel);
Array.from(carousel.images).forEach((image) => {
image.style.transitionTimingFunction = smooth ? "ease-in-out" : "cubic-bezier(0, 0, 0.2, 1)";
image.style.transform = `translateX(${x}${unit})`;
});
// If the user caused the carousel to move, we can assume they know how to use it and don't need the jostle hint anymore
if (!doNotTerminateJostle && x !== xInitial) carousel.jostleNoLongerNeeded = true;
}
function currentClosestImageIndex(carousel) {