Lamp page updates moving code
This commit is contained in:
Dan
parent
a05e9bf10b
commit
8faf555629
11 changed files with 1013 additions and 879 deletions
386
assets/js/adoptables/lavalamp-adoptable.js
Normal file
386
assets/js/adoptables/lavalamp-adoptable.js
Normal file
|
|
@ -0,0 +1,386 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
const previewContainers = {
|
||||
flex: document.getElementById("lavalamp-preview-flex"),
|
||||
small: document.getElementById("lavalamp-preview-100"),
|
||||
large: document.getElementById("lavalamp-preview-200"),
|
||||
};
|
||||
const bgColor1Input = document.getElementById("bg-color-1");
|
||||
const bgColor2Input = document.getElementById("bg-color-2");
|
||||
const blobColor1Input = document.getElementById("blob-color-1");
|
||||
const blobColor2Input = document.getElementById("blob-color-2");
|
||||
const caseColorInput = document.getElementById("case-color");
|
||||
const blobCountInput = document.getElementById("blob-count");
|
||||
const speedInput = document.getElementById("speed");
|
||||
const blobSizeInput = document.getElementById("blob-size");
|
||||
const pixelateInput = document.getElementById("pixelate");
|
||||
const pixelSizeInput = document.getElementById("pixel-size");
|
||||
const pixelSizeGroup = document.getElementById("pixel-size-group");
|
||||
const blobCountValue = document.getElementById("blob-count-value");
|
||||
const speedValue = document.getElementById("speed-value");
|
||||
const blobSizeValue = document.getElementById("blob-size-value");
|
||||
const pixelSizeValue = document.getElementById("pixel-size-value");
|
||||
const getCodeBtn = document.getElementById("get-code-btn");
|
||||
const embedCodeSection = document.getElementById("embed-code-section");
|
||||
const embedCodeDisplay = document.getElementById("embed-code-display");
|
||||
const copyCodeBtn = document.getElementById("copy-code-btn");
|
||||
const copyStatus = document.getElementById("copy-status");
|
||||
|
||||
let lampInstances = {
|
||||
flex: { lampElements: {}, blobs: [] },
|
||||
small: { lampElements: {}, blobs: [] },
|
||||
large: { lampElements: {}, blobs: [] },
|
||||
};
|
||||
|
||||
// Initialize the preview lamps
|
||||
function initPreview() {
|
||||
Object.keys(previewContainers).forEach((key, index) => {
|
||||
const previewContainer = previewContainers[key];
|
||||
const gooFilterId = `goo-preview-${key}`;
|
||||
|
||||
// Create SVG filters
|
||||
const svg = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg",
|
||||
"svg",
|
||||
);
|
||||
svg.style.position = "absolute";
|
||||
svg.style.width = "0";
|
||||
svg.style.height = "0";
|
||||
const pixelateFilterId = `pixelate-preview-${key}`;
|
||||
svg.innerHTML = `
|
||||
<defs>
|
||||
<filter id="${gooFilterId}">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
|
||||
<feColorMatrix
|
||||
in="blur"
|
||||
mode="matrix"
|
||||
values="
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
0 0 0 18 -7"
|
||||
result="goo"
|
||||
/>
|
||||
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
|
||||
</filter>
|
||||
<filter id="${pixelateFilterId}" x="0%" y="0%" width="100%" height="100%">
|
||||
<feFlood x="0" y="0" height="1" width="1"/>
|
||||
<feComposite width="4" height="4" class="pixelate-composite"/>
|
||||
<feTile result="a"/>
|
||||
<feComposite in="SourceGraphic" in2="a" operator="in"/>
|
||||
<feMorphology operator="dilate" radius="2" class="pixelate-morphology"/>
|
||||
</filter>
|
||||
</defs>
|
||||
`;
|
||||
|
||||
const container = document.createElement("div");
|
||||
container.className = "lavalamp-adoptable";
|
||||
container.style.width = "100%";
|
||||
container.style.height = "100%";
|
||||
|
||||
const lampCap = document.createElement("div");
|
||||
lampCap.className = "lamp-cap";
|
||||
|
||||
const lampBody = document.createElement("div");
|
||||
lampBody.className = "lamp-body";
|
||||
|
||||
const blobsContainer = document.createElement("div");
|
||||
blobsContainer.className = "blobs-container";
|
||||
// Initially set the goo filter, will be adjusted after layout
|
||||
blobsContainer.style.filter = `url(#${gooFilterId})`;
|
||||
|
||||
const lampBase = document.createElement("div");
|
||||
lampBase.className = "lamp-base";
|
||||
|
||||
lampBody.appendChild(blobsContainer);
|
||||
container.appendChild(svg);
|
||||
container.appendChild(lampCap);
|
||||
container.appendChild(lampBody);
|
||||
container.appendChild(lampBase);
|
||||
previewContainer.appendChild(container);
|
||||
|
||||
lampInstances[key].lampElements = {
|
||||
container,
|
||||
lampCap,
|
||||
lampBody,
|
||||
lampBase,
|
||||
blobsContainer,
|
||||
svg,
|
||||
pixelateFilterId,
|
||||
};
|
||||
});
|
||||
|
||||
// Apply initial styles
|
||||
updatePreview();
|
||||
|
||||
// Adjust goo filter for small lamps after layout
|
||||
adjustGooFilters();
|
||||
}
|
||||
|
||||
// Adjust goo filters based on container width (matches embedded script logic)
|
||||
function adjustGooFilters() {
|
||||
Object.keys(lampInstances).forEach((key) => {
|
||||
const instance = lampInstances[key];
|
||||
const { lampElements } = instance;
|
||||
|
||||
if (!lampElements.lampBody) return;
|
||||
|
||||
const containerWidth = lampElements.lampBody.offsetWidth;
|
||||
});
|
||||
}
|
||||
|
||||
// Create a blob element for a specific instance
|
||||
function createBlob(lampBody, lampHeight) {
|
||||
const blob = document.createElement("div");
|
||||
blob.className = "blob";
|
||||
|
||||
const containerWidth = lampBody.offsetWidth;
|
||||
const containerHeight = lampHeight || lampBody.offsetHeight;
|
||||
|
||||
const blobSizeMultiplier = parseFloat(blobSizeInput.value);
|
||||
const size =
|
||||
(Math.random() * 0.15 + 0.25) * containerWidth * blobSizeMultiplier;
|
||||
const duration = (Math.random() * 8 + 12) / parseFloat(speedInput.value);
|
||||
|
||||
const maxX = containerWidth - size;
|
||||
const startX = Math.random() * maxX;
|
||||
|
||||
blob.style.width = `${size}px`;
|
||||
blob.style.height = `${size}px`;
|
||||
blob.style.left = `${startX}px`;
|
||||
blob.style.bottom = "10px";
|
||||
blob.style.position = "absolute";
|
||||
|
||||
blob.style.setProperty("--duration", `${duration}s`);
|
||||
blob.style.setProperty("--start-x", "0px");
|
||||
blob.style.setProperty("--start-y", "0px");
|
||||
blob.style.setProperty(
|
||||
"--mid1-x",
|
||||
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid1-y",
|
||||
`${-(Math.random() * 0.15 + 0.25) * containerHeight}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid2-x",
|
||||
`${(Math.random() * 0.4 - 0.2) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid2-y",
|
||||
`${-(Math.random() * 0.2 + 0.5) * containerHeight}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid3-x",
|
||||
`${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--mid3-y",
|
||||
`${-(Math.random() * 0.15 + 0.8) * containerHeight}px`,
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--scale1",
|
||||
(Math.random() * 0.3 + 1.0).toFixed(2),
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--scale2",
|
||||
(Math.random() * 0.3 + 0.85).toFixed(2),
|
||||
);
|
||||
blob.style.setProperty(
|
||||
"--scale3",
|
||||
(Math.random() * 0.3 + 0.95).toFixed(2),
|
||||
);
|
||||
blob.style.animationDelay = `${Math.random() * -20}s`;
|
||||
|
||||
return blob;
|
||||
}
|
||||
|
||||
// Update blob count for all instances
|
||||
function updateBlobCount() {
|
||||
const count = parseInt(blobCountInput.value);
|
||||
|
||||
Object.keys(lampInstances).forEach((key) => {
|
||||
const instance = lampInstances[key];
|
||||
const { lampElements, blobs } = instance;
|
||||
|
||||
if (!lampElements.blobsContainer) return;
|
||||
|
||||
while (blobs.length > count) {
|
||||
const blob = blobs.pop();
|
||||
lampElements.blobsContainer.removeChild(blob);
|
||||
}
|
||||
while (blobs.length < count) {
|
||||
const blob = createBlob(lampElements.lampBody);
|
||||
updateBlobColors(blob);
|
||||
blobs.push(blob);
|
||||
lampElements.blobsContainer.appendChild(blob);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update blob colors
|
||||
function updateBlobColors(blob) {
|
||||
const color1 = blobColor1Input.value;
|
||||
const color2 = blobColor2Input.value;
|
||||
blob.style.background = `radial-gradient(circle at 30% 30%, ${color1}, ${color2})`;
|
||||
}
|
||||
|
||||
// Adjust brightness helper
|
||||
function adjustBrightness(color, percent) {
|
||||
const num = parseInt(color.replace("#", ""), 16);
|
||||
const amt = Math.round(2.55 * percent);
|
||||
const R = (num >> 16) + amt;
|
||||
const G = ((num >> 8) & 0x00ff) + amt;
|
||||
const B = (num & 0x0000ff) + amt;
|
||||
return (
|
||||
"#" +
|
||||
(
|
||||
0x1000000 +
|
||||
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
|
||||
(G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
|
||||
(B < 255 ? (B < 1 ? 0 : B) : 255)
|
||||
)
|
||||
.toString(16)
|
||||
.slice(1)
|
||||
);
|
||||
}
|
||||
|
||||
// Update the preview for all instances
|
||||
function updatePreview() {
|
||||
Object.keys(lampInstances).forEach((key) => {
|
||||
const instance = lampInstances[key];
|
||||
const { lampElements, blobs } = instance;
|
||||
|
||||
if (!lampElements.lampBody) return;
|
||||
|
||||
// Update background gradient
|
||||
lampElements.lampBody.style.background = `linear-gradient(180deg, ${bgColor1Input.value} 0%, ${bgColor2Input.value} 100%)`;
|
||||
|
||||
// Update cap and base color
|
||||
const baseColor = caseColorInput.value;
|
||||
lampElements.lampCap.style.background = `linear-gradient(180deg, ${adjustBrightness(baseColor, 40)} 0%, ${baseColor} 50%, ${adjustBrightness(baseColor, -20)} 100%)`;
|
||||
lampElements.lampBase.style.background = `linear-gradient(180deg, ${baseColor} 0%, ${adjustBrightness(baseColor, -20)} 40%, ${adjustBrightness(baseColor, -40)} 100%)`;
|
||||
lampElements.lampBase.style.borderTop = `1px solid ${adjustBrightness(bgColor2Input.value, -30)}`;
|
||||
|
||||
// Update all blob colors
|
||||
blobs.forEach((blob) => updateBlobColors(blob));
|
||||
});
|
||||
|
||||
// Update blob count
|
||||
updateBlobCount();
|
||||
}
|
||||
|
||||
// Update pixelation filters for all instances
|
||||
function updatePixelation() {
|
||||
const isPixelated = pixelateInput.checked;
|
||||
const pixelSize = parseInt(pixelSizeInput.value);
|
||||
|
||||
Object.keys(lampInstances).forEach((key) => {
|
||||
const instance = lampInstances[key];
|
||||
const { lampElements } = instance;
|
||||
|
||||
if (isPixelated) {
|
||||
// Update the filter in the SVG
|
||||
const filter = lampElements.svg.querySelector(
|
||||
`#${lampElements.pixelateFilterId}`,
|
||||
);
|
||||
const composite = filter.querySelector("feComposite[width]");
|
||||
const morphology = filter.querySelector("feMorphology");
|
||||
|
||||
composite.setAttribute("width", pixelSize);
|
||||
composite.setAttribute("height", pixelSize);
|
||||
morphology.setAttribute("radius", Math.floor(pixelSize / 2));
|
||||
|
||||
// Apply filter to container
|
||||
lampElements.container.style.filter = `url(#${lampElements.pixelateFilterId})`;
|
||||
} else {
|
||||
// Remove filter
|
||||
lampElements.container.style.filter = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Generate embed code
|
||||
function generateEmbedCode() {
|
||||
const siteUrl = window.location.origin;
|
||||
let pixelateAttrs = "";
|
||||
if (pixelateInput.checked) {
|
||||
pixelateAttrs = '\n data-pixelate="true"';
|
||||
if (parseInt(pixelSizeInput.value) !== 4) {
|
||||
pixelateAttrs += `\n data-pixel-size="${pixelSizeInput.value}"`;
|
||||
}
|
||||
}
|
||||
return `<script src="${siteUrl}/js/adoptables/lavalamp.js"
|
||||
data-bg-color-1="${bgColor1Input.value}"
|
||||
data-bg-color-2="${bgColor2Input.value}"
|
||||
data-blob-color-1="${blobColor1Input.value}"
|
||||
data-blob-color-2="${blobColor2Input.value}"
|
||||
data-case-color="${caseColorInput.value}"
|
||||
data-blob-count="${blobCountInput.value}"
|
||||
data-speed="${speedInput.value}"
|
||||
data-blob-size="${blobSizeInput.value}"${pixelateAttrs}><\/script>`;
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
bgColor1Input.addEventListener("input", updatePreview);
|
||||
bgColor2Input.addEventListener("input", updatePreview);
|
||||
blobColor1Input.addEventListener("input", updatePreview);
|
||||
blobColor2Input.addEventListener("input", updatePreview);
|
||||
caseColorInput.addEventListener("input", updatePreview);
|
||||
|
||||
blobCountInput.addEventListener("input", function () {
|
||||
blobCountValue.textContent = this.value;
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
speedInput.addEventListener("input", function () {
|
||||
speedValue.textContent = parseFloat(this.value).toFixed(1);
|
||||
// Speed changes require recreating blobs for all instances
|
||||
Object.keys(lampInstances).forEach((key) => {
|
||||
const instance = lampInstances[key];
|
||||
instance.blobs.forEach((blob) =>
|
||||
instance.lampElements.blobsContainer.removeChild(blob),
|
||||
);
|
||||
instance.blobs = [];
|
||||
});
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
blobSizeInput.addEventListener("input", function () {
|
||||
blobSizeValue.textContent = parseFloat(this.value).toFixed(1);
|
||||
// Size changes require recreating blobs for all instances
|
||||
Object.keys(lampInstances).forEach((key) => {
|
||||
const instance = lampInstances[key];
|
||||
instance.blobs.forEach((blob) =>
|
||||
instance.lampElements.blobsContainer.removeChild(blob),
|
||||
);
|
||||
instance.blobs = [];
|
||||
});
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
pixelateInput.addEventListener("change", function () {
|
||||
// Show/hide pixel size slider
|
||||
if (this.checked) {
|
||||
pixelSizeGroup.style.display = "block";
|
||||
} else {
|
||||
pixelSizeGroup.style.display = "none";
|
||||
}
|
||||
updatePixelation();
|
||||
});
|
||||
|
||||
pixelSizeInput.addEventListener("input", function () {
|
||||
pixelSizeValue.textContent = this.value;
|
||||
updatePixelation();
|
||||
});
|
||||
|
||||
getCodeBtn.addEventListener("click", function () {
|
||||
embedCodeDisplay.textContent = generateEmbedCode();
|
||||
embedCodeSection.style.display = "block";
|
||||
embedCodeSection.scrollIntoView({ behavior: "smooth" });
|
||||
});
|
||||
|
||||
// Initialize
|
||||
initPreview();
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue