73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
const filter = document.querySelector(".banner");
|
|
const filterContainer = document.querySelector(".container");
|
|
|
|
const bannerX = document.querySelector(".banner").offsetLeft;
|
|
|
|
interact(filter)
|
|
.resizable({
|
|
edges: {
|
|
top: false,
|
|
bottom: false,
|
|
left: true,
|
|
right: false
|
|
}
|
|
})
|
|
.on("resizemove", (event) => {
|
|
let { x, y } = event.target.dataset;
|
|
x = parseFloat(x) || 0;
|
|
y = parseFloat(y) || 0;
|
|
|
|
Object.assign(event.target.style, {
|
|
width: `${event.rect.width}px`,
|
|
height: `${event.rect.height}px`,
|
|
transform: `translate(${event.deltaRect.left}px, ${event.deltaRect.top}px)`
|
|
});
|
|
|
|
Object.assign(event.target.dataset, { x, y });
|
|
});
|
|
|
|
const backgroundButtons = document.querySelectorAll(".background");
|
|
|
|
backgroundButtons.forEach((button) => {
|
|
button.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
|
|
filterContainer.style.backgroundBlendMode = button.classList[1];
|
|
backgroundButtons.forEach((backgroundButton) =>
|
|
backgroundButton.classList.remove("active")
|
|
);
|
|
button.classList.add("active");
|
|
});
|
|
});
|
|
|
|
const mixButtons = document.querySelectorAll(".mix");
|
|
|
|
mixButtons.forEach((button) => {
|
|
button.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
|
|
filter.style.mixBlendMode = button.classList[1];
|
|
mixButtons.forEach((mixButton) => mixButton.classList.remove("active"));
|
|
button.classList.add("active");
|
|
});
|
|
});
|
|
|
|
const colorUpdateButton = document.querySelector(".colorUpdate");
|
|
const colorUpdateInput = document.querySelector(".colorUpdateInput");
|
|
|
|
colorUpdateButton.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
console.log(colorUpdateInput.value);
|
|
filterContainer.style.backgroundColor = colorUpdateInput.value;
|
|
colorUpdateInput.value = "";
|
|
});
|
|
|
|
const backgroundUpdateButton = document.querySelector(".urlUpdate");
|
|
const backgroundUpdateInput = document.querySelector(".backgroundUpdateInput");
|
|
|
|
backgroundUpdateButton.addEventListener("click", function (e) {
|
|
e.preventDefault();
|
|
|
|
filterContainer.style.background = `url(${backgroundUpdateInput.value})`;
|
|
backgroundUpdateInput.value = "";
|
|
}); |