128 lines
4.4 KiB
JavaScript
128 lines
4.4 KiB
JavaScript
const PRODUCT_NAME = "{{PRODUCT_NAME}}", // Gizmo die Eidechse
|
|
PRODUCT_VARIANT = "{{PRODUCT_VARIANT}}", // Farbe Grün/Blau/Orange or Stil Standard
|
|
PRODUCT_COLOR_CHARACTERISTICS = "{{PRODUCT_COLOR_CHARACTERISTICS}}", // (Glänzend)
|
|
PRODUCT_ID = "{{PRODUCT_ID}}", // #32420
|
|
LABEL_PAPER_POSITION = "{{LABEL_PAPER_POSITION}}"; // could be a number between 1 and 12 or combination like 1,3,7
|
|
|
|
const labelPaperPosition = LABEL_PAPER_POSITION.split(",");
|
|
|
|
/*
|
|
const PRODUCT_NAME = "Gizmo die Eidechse",
|
|
PRODUCT_VARIANT = "Farbe Grün/Blau/Orange",
|
|
PRODUCT_COLOR_CHARACTERISTICS = "(Glänzend)",
|
|
PRODUCT_ID = "#32420"; */
|
|
|
|
window.onload = () => {
|
|
for (let i = 1; i <= 12; i++) {
|
|
let labels = document.getElementById("labels");
|
|
|
|
/* CONTAINER */
|
|
|
|
const label = document.createElement("div");
|
|
label.className = "label";
|
|
|
|
if (labelPaperPosition.indexOf(i.toString()) !== -1) {
|
|
/* FIRST */
|
|
|
|
const backgroundImage = document.createElement("div");
|
|
backgroundImage.className = "background-image";
|
|
|
|
const content = document.createElement("div");
|
|
content.className = "content";
|
|
|
|
const productName = PRODUCT_NAME.split("_");
|
|
|
|
const productNameFirst = document.createElement("h1");
|
|
productNameFirst.innerHTML = productName[0];
|
|
|
|
const productNameRemainingPart = document.createElement("h1");
|
|
productNameRemainingPart.innerHTML = productName[1];
|
|
productNameRemainingPart.style = "margin: 0";
|
|
|
|
const productVariant = document.createElement("p");
|
|
productVariant.innerHTML = PRODUCT_VARIANT;
|
|
productVariant.className = "product-variant";
|
|
|
|
const productColorCharacteristics = document.createElement("p");
|
|
productColorCharacteristics.innerHTML =
|
|
PRODUCT_COLOR_CHARACTERISTICS == ""
|
|
? "\u200B" // /* Zero-Width Space needed for product variants like Standard which have no color characteristics */
|
|
: PRODUCT_COLOR_CHARACTERISTICS;
|
|
productColorCharacteristics.className = "product-variant";
|
|
|
|
const productId = document.createElement("p");
|
|
productId.innerHTML = PRODUCT_ID;
|
|
productId.className = "product-id";
|
|
|
|
content.appendChild(productNameFirst);
|
|
content.appendChild(productNameRemainingPart);
|
|
content.appendChild(productVariant);
|
|
content.appendChild(productColorCharacteristics);
|
|
content.appendChild(productId);
|
|
|
|
/* container */
|
|
|
|
const container = document.createElement("div");
|
|
container.className = "container";
|
|
|
|
const childrenImg = document.createElement("img");
|
|
childrenImg.src = "../../groupsData/shx-product-label/children.png";
|
|
childrenImg.alt = "children";
|
|
childrenImg.className = "children";
|
|
|
|
const manufacturerInfo = document.createElement("div");
|
|
manufacturerInfo.className = "manufacturer-info";
|
|
|
|
const manufacturer = document.createElement("p");
|
|
manufacturer.innerHTML = "Hersteller:";
|
|
|
|
const manufacturer2 = document.createElement("p");
|
|
manufacturer2.innerHTML = "Jan Umbach";
|
|
|
|
const manufacturer3 = document.createElement("p");
|
|
manufacturer3.innerHTML = "Tannenwäldchen 10";
|
|
|
|
const manufacturer4 = document.createElement("p");
|
|
manufacturer4.innerHTML = "D-34212 Melsungen";
|
|
|
|
manufacturerInfo.appendChild(manufacturer);
|
|
manufacturerInfo.appendChild(manufacturer2);
|
|
manufacturerInfo.appendChild(manufacturer3);
|
|
manufacturerInfo.appendChild(manufacturer4);
|
|
|
|
const ceImg = document.createElement("img");
|
|
ceImg.src = "../../groupsData/shx-product-label/ce.svg";
|
|
ceImg.alt = "ce";
|
|
ceImg.className = "ce";
|
|
|
|
container.appendChild(childrenImg);
|
|
container.appendChild(manufacturerInfo);
|
|
container.appendChild(ceImg);
|
|
|
|
content.appendChild(container);
|
|
|
|
label.appendChild(backgroundImage);
|
|
label.appendChild(content);
|
|
}
|
|
|
|
labels.appendChild(label);
|
|
}
|
|
|
|
function adjustFontSize() {
|
|
const container = document.getElementsByClassName("product-variant")[0];
|
|
const text = document.getElementById("text");
|
|
const containerWidth = container.offsetWidth;
|
|
let fontSize = 100; // Startgröße in Prozent
|
|
text.style.fontSize = fontSize + "%";
|
|
|
|
// Reduziere die Schriftgröße, bis der Text in den Container passt
|
|
while (text.offsetWidth > containerWidth && fontSize > 1) {
|
|
fontSize--;
|
|
text.style.fontSize = fontSize + "%";
|
|
}
|
|
}
|
|
|
|
window.onload = adjustFontSize;
|
|
window.onresize = adjustFontSize;
|
|
};
|