feat: update text settings

papierkorp · Nov 17, 2024 · 74fb18e · 74fb18e
1 parent a850b13
commit 74fb18e
Show file tree

Hide file tree

Showing 4 changed files with 242 additions and 70 deletions.
diff --git a/index.html b/index.html
@@ -98,26 +98,68 @@ <h3 class="text-lg font-semibold mb-4">Text Settings</h3>
 
             <div>
               <label>Font Family</label>
-              <select id="fontSelect">
-                <option value="arial">Arial</option>
-                <option value="helvetica">Helvetica</option>
-                <option value="timesNewRoman">Times New Roman</option>
-                <option value="georgia">Georgia</option>
-                <option value="courierNew">Courier New</option>
-                <option value="verdana">Verdana</option>
+              <select id="fontFamilySelect">
+                <option value="Arial" style="font-family: Arial">Arial</option>
+                <option value="Helvetica" style="font-family: Helvetica">
+                  Helvetica
+                </option>
+                <option
+                  value="Times New Roman"
+                  style="font-family: &quot;Times New Roman&quot;"
+                >
+                  Times New Roman
+                </option>
+                <option value="Georgia" style="font-family: Georgia">
+                  Georgia
+                </option>
+                <option
+                  value="Courier New"
+                  style="font-family: &quot;Courier New&quot;"
+                >
+                  Courier New
+                </option>
+                <option value="Verdana" style="font-family: Verdana">
+                  Verdana
+                </option>
+                <option value="sans-serif" style="font-family: sans-serif">
+                  Sans Serif
+                </option>
+                <option value="serif" style="font-family: serif">Serif</option>
               </select>
             </div>
 
             <div>
-              <label for="textColor">Text Color</label>
-              <input type="color" id="textColor" value="#0000ff" />
+              <label for="fontColor">Text Color</label>
+              <input type="color" id="fontColor" value="#0000ff" />
             </div>
 
             <div>
               <label>Text Alignment</label>
-              <button id="leftAlignmentButton">Left</button>
-              <button id="rightAlignmentButton">Right</button>
-              <button id="centerAlignmentButton">Center</button>
+              <div class="flex gap-2">
+                <input
+                  type="radio"
+                  id="textAlignLeft"
+                  name="textAlign"
+                  value="left"
+                />
+                <label for="textAlignLeft">Left</label>
+
+                <input
+                  type="radio"
+                  id="textAlignCenter"
+                  name="textAlign"
+                  value="center"
+                />
+                <label for="textAlignCenter">Center</label>
+
+                <input
+                  type="radio"
+                  id="textAlignRight"
+                  name="textAlign"
+                  value="right"
+                />
+                <label for="textAlignRight">Right</label>
+              </div>
             </div>
 
             <label>Text Formatting</label>
@@ -155,10 +197,7 @@ <h3 class="text-lg font-semibold mb-4">Text Settings</h3>
           >
             <h3 class="text-lg font-semibold mb-4">Preview</h3>
 
-            <div
-              id="previewSettings"
-              class="relative w-full aspect-square flex items-center justify-center"
-            ></div>
+            <div id="previewSettings"></div>
           </div>
           <div
             id="htmlOutputSettings"

diff --git a/js/generateHTML.js b/js/generateHTML.js
@@ -9,32 +9,74 @@ function createSectionElement(section, sectionName) {
   element.style.justifyContent = "center";
   element.style.overflow = "hidden";
   element.style.position = "absolute";
-
-  // const textElement = document.createElement("p");
   element.style.margin = "0";
   element.style.padding = "5px";
   element.style.textAlign = "center";
   element.style.wordWrap = "break-word";
-  element.style.fontWeight = section.textSettings.bold ? "bold" : "";
-  element.style.fontStyle = section.textSettings.italic ? "italic" : "";
-  element.style.textDecoration = section.textSettings.underline
-    ? "underline"
-    : "";
-
-  element.style.textDecoration = section.textSettings.strikethrough
-    ? "line-through"
-    : "";
 
-  element.style.fontSize = section.textSettings.fontsize + "px";
-
-  if (sectionName === "card") {
-    element.className =
-      "transform-gpu origin-top-left w-[500px] h-[500px] max-w-full max-h-full aspect-square";
+  if (sectionName !== "card") {
+    const cardSettings = state.sections.card.textSettings;
+
+    element.style.fontWeight =
+      section.textSettings.bold !== undefined
+        ? section.textSettings.bold
+          ? "bold"
+          : "normal"
+        : cardSettings.bold
+          ? "bold"
+          : "normal";
+
+    element.style.fontStyle =
+      section.textSettings.italic !== undefined
+        ? section.textSettings.italic
+          ? "italic"
+          : "normal"
+        : cardSettings.italic
+          ? "italic"
+          : "normal";
+
+    let textDecoration = [];
+    if (
+      section.textSettings.underline !== undefined
+        ? section.textSettings.underline
+        : cardSettings.underline
+    ) {
+      textDecoration.push("underline");
+    }
+    if (
+      section.textSettings.strikethrough !== undefined
+        ? section.textSettings.strikethrough
+        : cardSettings.strikethrough
+    ) {
+      textDecoration.push("line-through");
+    }
+    element.style.textDecoration = textDecoration.join(" ");
+
+    element.style.fontSize =
+      (section.textSettings.fontsize || cardSettings.fontsize) + "px";
+    element.style.fontFamily =
+      section.textSettings.fontFamily || cardSettings.fontFamily;
+    element.style.color =
+      section.textSettings.fontColor || cardSettings.fontColor;
+    element.style.textAlign =
+      section.textSettings.textAlign || cardSettings.textAlign;
   } else {
+    element.style.fontWeight = section.textSettings.bold ? "bold" : "normal";
+    element.style.fontStyle = section.textSettings.italic ? "italic" : "normal";
+    let textDecoration = [];
+    if (section.textSettings.underline) textDecoration.push("underline");
+    if (section.textSettings.strikethrough) textDecoration.push("line-through");
+    element.style.textDecoration = textDecoration.join(" ");
+    element.style.fontSize = section.textSettings.fontsize + "px";
+    element.style.fontFamily = section.textSettings.fontFamily;
+    element.style.color = section.textSettings.fontColor;
+    element.style.textAlign = section.textSettings.textAlign;
+  }
+
+  if (sectionName !== "card") {
     element.textContent = section.contentSettings.content;
   }
 
-  // element.appendChild(textElement);
   return element;
 }
 
@@ -94,31 +136,55 @@ export function generateHTML() {
   preview.innerHTML = "";
   preview.appendChild(card);
 
-  // scalePreview();
+  requestAnimationFrame(scalePreview);
+}
+
+function scalePreview() {
+  const previewContainer = document.getElementById("previewContainer");
+  const preview = document.getElementById("previewSettings");
+  const card = preview.firstChild;
+
+  if (!previewContainer || !preview || !card) return;
+
+  // Reset any existing transforms
+  preview.style.transform = "";
+  card.style.transform = "";
+
+  const containerWidth = previewContainer.clientWidth;
+  const containerHeight = previewContainer.clientHeight;
+  const cardWidth = parseInt(state.sections.card.contentSettings.width);
+  const cardHeight = parseInt(state.sections.card.contentSettings.height);
+
+  // Add padding to container dimensions
+  const paddingX = 32; // Increased padding for better visibility
+  const paddingY = 60; // Increased padding for better visibility
+  const availableWidth = containerWidth - paddingX;
+  const availableHeight = containerHeight - paddingY;
+
+  const scaleX = availableWidth / cardWidth;
+  const scaleY = availableHeight / cardHeight;
+  const scale = Math.min(scaleX, scaleY, 1);
+
+  // Center the preview in the container
+  const scaledWidth = cardWidth * scale;
+  const scaledHeight = cardHeight * scale;
+
+  // Calculate position to center
+  const translateX = Math.max(0, (availableWidth - scaledWidth) / 2);
+  const translateY = Math.max(0, (availableHeight - scaledHeight) / 2);
+
+  // Set up the preview container
+  preview.style.position = "relative";
+  preview.style.width = `${cardWidth}px`;
+  preview.style.height = `${cardHeight}px`;
+  preview.style.transformOrigin = "0 0";
+
+  // Apply transformations in correct order
+  const transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+  preview.style.transform = transform;
 }
 
-// function scalePreview() {
-//   const previewContainer = document.getElementById('previewContainer');
-//   const preview = document.getElementById('preview');
-//   const card = preview.firstChild;
-
-//   if (!previewContainer || !preview || !card) return;
-
-//   const containerWidth = previewContainer.clientWidth;
-//   const containerHeight = previewContainer.clientHeight;
-//   const cardWidth = parseInt(state.sections.card.dimensions.width);
-//   const cardHeight = parseInt(state.sections.card.dimensions.height);
-//   const scaleX = containerWidth / cardWidth;
-//   const scaleY = containerHeight / cardHeight;
-//   const scale = Math.min(scaleX, scaleY, 1); // Don't scale up, only down if necessary
-
-//   card.style.transform = `scale(${scale})`;
-//   card.style.transformOrigin = 'top left';
-
-//   const translateX = (containerWidth - cardWidth * scale) / 2;
-//   const translateY = (containerHeight - cardHeight * scale) / 2;
-//   preview.style.position = 'relative';
-//   preview.style.width = `${cardWidth}px`;
-//   preview.style.height = `${cardHeight}px`;
-//   preview.style.transform = `translate(${translateX}px, ${translateY}px)`;
-// }
+// Add window resize listener to handle container size changes
+window.addEventListener("resize", () => {
+  requestAnimationFrame(scalePreview);
+});
diff --git a/js/main.js b/js/main.js
@@ -56,6 +56,36 @@ const allElements = [
     inputType: "checkbox",
     stateKey: ["textSettings", "strikethrough"],
   },
+  {
+    elementID: "fontFamilySelect",
+    eventType: "change",
+    inputType: "select",
+    stateKey: ["textSettings", "fontFamily"],
+  },
+  {
+    elementID: "fontColor",
+    eventType: "input",
+    inputType: "color",
+    stateKey: ["textSettings", "fontColor"],
+  },
+  {
+    elementID: "textAlignLeft",
+    eventType: "change",
+    inputType: "radio",
+    stateKey: ["textSettings", "textAlign"],
+  },
+  {
+    elementID: "textAlignCenter",
+    eventType: "change",
+    inputType: "radio",
+    stateKey: ["textSettings", "textAlign"],
+  },
+  {
+    elementID: "textAlignRight",
+    eventType: "change",
+    inputType: "radio",
+    stateKey: ["textSettings", "textAlign"],
+  },
 ];
 
 function initialize() {
@@ -76,14 +106,34 @@ function initialize() {
     const element = document.getElementById(elem.elementID);
     if (element) {
       element.addEventListener(elem.eventType, function () {
-        let newValue =
-          elem.inputType === "checkbox" ? this.checked : this.value;
+        console.log("ELEMENTELEMENTELEMENTELEMENT: ", element);
+        let newValue;
+        if (elem.inputType === "radio") {
+          newValue = this.value;
+        } else if (elem.inputType === "checkbox") {
+          newValue = this.checked;
+        } else {
+          newValue = this.value;
+        }
 
-        let target = state.sections[state.selectedSection];
-        for (let i = 0; i < elem.stateKey.length - 1; i++) {
-          target = target[elem.stateKey[i]];
+        if (
+          (state.selectedSection === "card" && element.id == !"widthSlider") ||
+          element.id == !"heightSlider"
+        ) {
+          Object.keys(state.sections).forEach((sectionKey) => {
+            let target = state.sections[sectionKey];
+            for (let i = 0; i < elem.stateKey.length - 1; i++) {
+              target = target[elem.stateKey[i]];
+            }
+            target[elem.stateKey[elem.stateKey.length - 1]] = newValue;
+          });
+        } else {
+          let target = state.sections[state.selectedSection];
+          for (let i = 0; i < elem.stateKey.length - 1; i++) {
+            target = target[elem.stateKey[i]];
+          }
+          target[elem.stateKey[elem.stateKey.length - 1]] = newValue;
         }
-        target[elem.stateKey[elem.stateKey.length - 1]] = newValue;
 
         generateHTML();
         updateUIElements();
@@ -106,25 +156,38 @@ function initialize() {
 
 function updateUIElements() {
   const currentSection = state.sections[state.selectedSection];
+  const cardSection = state.sections.card;
 
   for (const elem of allElements) {
     const element = document.getElementById(elem.elementID);
     const elementValue = document.getElementById(elem.elementID + "Value");
     if (!element) continue;
 
-    let value = currentSection;
+    let sectionValue = currentSection;
     for (const key of elem.stateKey) {
-      value = value[key];
+      sectionValue = sectionValue?.[key];
+    }
+
+    let value = sectionValue;
+    if (
+      (sectionValue === undefined || sectionValue === "") &&
+      state.selectedSection !== "card"
+    ) {
+      let cardValue = cardSection;
+      for (const key of elem.stateKey) {
+        cardValue = cardValue?.[key];
+      }
+      value = cardValue;
     }
 
     if (elem.inputType === "checkbox") {
-      element.checked = value;
+      element.checked = value ?? false;
     } else {
-      element.value = value;
+      element.value = value ?? "";
     }
 
     if (elementValue) {
-      elementValue.textContent = value;
+      elementValue.textContent = value ?? "";
     }
 
     if (elem.inputType === "textarea") {

diff --git a/js/state.js b/js/state.js
@@ -12,6 +12,10 @@ const stateTemplate = {
         bold: false,
         italic: false,
         underline: false,
+        fontsize: "16",
+        fontFamily: "Arial",
+        fontColor: "#000000",
+        textAlign: "center",
       },
       borderSettings: {},
     },