stylescape
Version:
Stylescape is a visual identity framework developed by Scape Agency.
105 lines • 3.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageCompareSlider = void 0;
class ImageCompareSlider {
constructor(container) {
this.isActive = false;
this.container = container;
this.slider = container.querySelector(".image__compare--slider");
this.overlay = container.querySelector(".image__compare--overlay");
this.baseImage = container.querySelector("img.image__compare--image:not(.image__compare--overlay)");
if (!this.container ||
!this.slider ||
!this.overlay ||
!this.baseImage) {
console.warn(`ImageCompareSlider skipped: required elements not found in`, container);
return;
}
this.checkAndInject(this.baseImage);
this.checkAndInject(this.overlay);
this.initEvents();
this.slideMove(this.container.offsetWidth / 2);
}
checkAndInject(image) {
const side = image.dataset.darkSide;
if (!side)
return;
const inject = () => {
this.isImageBright(image)
.then((isBright) => {
if (!isBright)
return;
const el = document.createElement("div");
el.className = `dark--${side}`;
this.slider.appendChild(el);
const arrow = this.slider.querySelector(`.arrow--${side}`);
if (arrow) {
arrow.style.borderColor = "var(--color_text_primary)";
}
})
.catch((err) => {
console.warn("Brightness check failed:", err);
});
};
if (image.complete && image.naturalWidth > 0) {
inject();
}
else {
image.onload = () => {
if (image.naturalWidth > 0)
inject();
};
}
}
isImageBright(image) {
return new Promise((resolve) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx)
return resolve(false);
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx.drawImage(image, 0, 0);
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
let r = 0, g = 0, b = 0, count = 0;
const step = 4 * 20;
for (let i = 0; i < data.length; i += step) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
count++;
}
const avg = (r + g + b) / (3 * count);
resolve(avg > 160);
});
}
initEvents() {
this.slider.addEventListener("mousedown", () => (this.isActive = true));
window.addEventListener("mouseup", () => (this.isActive = false));
window.addEventListener("mousemove", (e) => {
if (this.isActive)
this.slideMove(e.clientX);
});
this.slider.addEventListener("touchstart", () => (this.isActive = true));
window.addEventListener("touchend", () => (this.isActive = false));
window.addEventListener("touchmove", (e) => {
if (this.isActive)
this.slideMove(e.touches[0].clientX);
});
}
slideMove(x) {
const bounds = this.container.getBoundingClientRect();
let pos = x - bounds.left;
pos = Math.max(0, Math.min(pos, bounds.width));
this.overlay.style.width = `${pos}px`;
this.slider.style.left = `${pos}px`;
}
static initAll(selector = ".image__compare") {
const containers = document.querySelectorAll(selector);
containers.forEach((container) => {
new ImageCompareSlider(container);
});
}
}
exports.ImageCompareSlider = ImageCompareSlider;
//# sourceMappingURL=ImageCompareSlider.js.map