pushed with daily script

papierkorp · Oct 24, 2024 · 62c7fed · 62c7fed
1 parent 54ff875
commit 62c7fed
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 35 deletions.
diff --git a/js/generateHTML.js b/js/generateHTML.js
@@ -2,7 +2,7 @@ import { state } from './state.js';
 
 function createSectionElement(section, sectionName) {
   const element = document.createElement('div');
-  element.style.backgroundColor = section.style.backgroundColor;
+  element.style.backgroundColor = section.contentSettings.backgroundColor;
   element.style.display = 'flex';
   element.style.alignItems = 'center';
   element.style.justifyContent = 'center';
@@ -14,11 +14,11 @@ function createSectionElement(section, sectionName) {
   element.style.padding = '5px';
   element.style.textAlign = 'center';
   element.style.wordWrap = 'break-word';
-  element.style.fontWeight = section.style.textStyle.bold ? 'bold' : '';
-  element.style.fontStyle = section.style.textStyle.italic ? 'italic' : '';
+  element.style.fontWeight = section.textSettings.bold ? 'bold' : '';
+  element.style.fontStyle = section.textSettings.italic ? 'italic' : '';
 
   if (sectionName !== 'card') {
-    element.textContent = section.style.textStyle.content;
+    element.textContent = section.contentSettings.content;
   }
 
   // element.appendChild(textElement);
@@ -29,51 +29,51 @@ export function generateHTML() {
   const preview = document.getElementById('previewSettings');
   const card = createSectionElement(state.sections.card, 'card');
   card.style.position = 'relative';
-  card.style.width = state.sections.card.dimensions.width + 'px';
-  card.style.height = state.sections.card.dimensions.height + 'px';
+  card.style.width = state.sections.card.contentSettings.width + 'px';
+  card.style.height = state.sections.card.contentSettings.height + 'px';
 
-  if (state.sections.top.style.textStyle.content) {
+  if (state.sections.top.contentSettings.content) {
     const top = createSectionElement(state.sections.top, 'top');
     top.style.top = '0';
     top.style.left = '0';
     top.style.width = '100%';
-    top.style.height = state.sections.top.dimensions.height + 'px';
+    top.style.height = state.sections.contentSettings.height + 'px';
     card.appendChild(top);
   }
 
-  if (state.sections.bottom.style.textStyle.content) {
+  if (state.sections.bottom.contentSettings.content) {
     const bottom = createSectionElement(state.sections.bottom, 'bottom');
     bottom.style.bottom = '0';
     bottom.style.left = '0';
     bottom.style.width = '100%';
-    bottom.style.height = state.sections.bottom.dimensions.height + 'px';
+    bottom.style.height = state.sections.bottom.contentSettings.height + 'px';
     card.appendChild(bottom);
   }
 
-  if (state.sections.left.style.textStyle.content) {
+  if (state.sections.left.contentSettings.content) {
     const left = createSectionElement(state.sections.left, 'left');
-    left.style.top = state.sections.top.dimensions.height + 'px';
+    left.style.top = state.sections.top.contentSettings.height + 'px';
     left.style.left = '0';
-    left.style.width = state.sections.left.dimensions.width + 'px';
-    left.style.height = `calc(100% - ${parseInt(state.sections.top.dimensions.height) + parseInt(state.sections.bottom.dimensions.height)}px)`;
+    left.style.width = state.sections.left.contentSettings.width + 'px';
+    left.style.height = `calc(100% - ${parseInt(state.sections.top.contentSettings.height) + parseInt(state.sections.bottom.contentSettings.height)}px)`;
     card.appendChild(left);
   }
 
-  if (state.sections.right.style.textStyle.content) {
+  if (state.sections.right.contentSettings.content) {
     const right = createSectionElement(state.sections.right, 'right');
-    right.style.top = state.sections.top.dimensions.height + 'px';
+    right.style.top = state.sections.top.contentSettings.height + 'px';
     right.style.right = '0';
-    right.style.width = state.sections.right.dimensions.width + 'px';
-    right.style.height = `calc(100% - ${parseInt(state.sections.top.dimensions.height) + parseInt(state.sections.bottom.dimensions.height)}px)`;
+    right.style.width = state.sections.right.contentSettings.width + 'px';
+    right.style.height = `calc(100% - ${parseInt(state.sections.top.contentSettings.height) + parseInt(state.sections.bottom.contentSettings.height)}px)`;
     card.appendChild(right);
   }
 
-  if (state.sections.middle.style.textStyle.content) {
+  if (state.sections.middle.contentSettings.content) {
     const middle = createSectionElement(state.sections.middle, 'middle');
-    middle.style.top = state.sections.top.dimensions.height + 'px';
-    middle.style.left = state.sections.left.dimensions.width + 'px';
-    middle.style.width = `calc(100% - ${parseInt(state.sections.left.dimensions.width) + parseInt(state.sections.right.dimensions.width)}px)`;
-    middle.style.height = `calc(100% - ${parseInt(state.sections.top.dimensions.height) + parseInt(state.sections.bottom.dimensions.height)}px)`;
+    middle.style.top = state.sections.top.contentSettings.height + 'px';
+    middle.style.left = state.sections.left.contentSettings.width + 'px';
+    middle.style.width = `calc(100% - ${parseInt(state.sections.left.contentSettings.width) + parseInt(state.sections.right.contentSettings.width)}px)`;
+    middle.style.height = `calc(100% - ${parseInt(state.sections.top.contentSettings.height) + parseInt(state.sections.bottom.contentSettings.height)}px)`;
     card.appendChild(middle);
   }
 

diff --git a/js/main.js b/js/main.js
@@ -2,21 +2,23 @@ import { state, resetState} from './state.js'
 import {generateHTML} from './generateHTML.js'
 
 const allElements = [
-  { elementID: 'heightSlider', eventType: 'input', inputType: 'range', stateKey: ['dimensions', 'height'] },
-  { elementID: 'widthSlider', eventType: 'input', inputType: 'range', stateKey: ['dimensions', 'width'] },
-  { elementID: 'bgColor', eventType: 'input', inputType: 'color', stateKey: ['style', 'backgroundColor'] },
+  { elementID: 'heightSlider', eventType: 'input', inputType: 'range', stateKey: ['contentSettings', 'height'] },
+  { elementID: 'widthSlider', eventType: 'input', inputType: 'range', stateKey: ['contentSettings', 'width'] },
+  { elementID: 'bgColor', eventType: 'input', inputType: 'color', stateKey: ['contentSettings', 'backgroundColor'] },
   {
     elementID: 'textArea',
     eventType: 'input',
     inputType: 'textarea',
-    stateKey: ['style', 'textStyle', 'content'],
+    stateKey: ['contentSettings', 'content'],
   },
   {
     elementID: 'boldCheckbox',
     eventType: 'change',
     inputType: 'checkbox',
-    stateKey: ['style', 'textStyle', 'bold'],
+    stateKey: ['textSettings', 'bold'],
   },
+  { elementID: 'fontSizeSlider', eventType: 'input', inputType: 'range', stateKey: ['textSettings', 'font-size'] },
+
 ];
 
 function initialize() {

diff --git a/js/state.js b/js/state.js
@@ -2,14 +2,18 @@ const stateTemplate = {
   selectedSection: 'card',
   sections: {
     card: {
-      dimensions: { width: '500', height: '500' },
-      style: {
+      contentSettings: {
+        width: '500',
+        height: '500',
         backgroundColor: '#00ff00',
-        textStyle: {
-          content: 'No text for card, use Middle instead!',
-          bold: false,
-          italic: false,
-        },
+      },
+      textSettings: {
+        content: 'No text for card, use Middle instead!',
+        bold: false,
+        italic: false,
+      },
+      borderSettings: {
+
       },
     },
     top: {