From 6d2e3034fe9d2d9d19b1e78e688a6f09131cd291 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontatk@kuba-orlik.name>
Date: Sun, 2 Jan 2022 20:41:44 +0100
Subject: [PATCH] Add overflow mode

---
 generator.html | 111 ++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 87 insertions(+), 24 deletions(-)
diff --git a/generator.html b/generator.html
index 7771a7e..fcb02da 100644
--- a/generator.html
+++ b/generator.html
@@ -7,9 +7,49 @@
       * {
         font-family: sans-serif;
       }
+
+      #container.overflow {
+        display: grid !important;
+        grid-template-columns:
+          1fr calc(
+            (
+                var(--width) / var(--height) * var(--overflow-height) - 2 *
+                  var(--padding)
+              ) * var(--scale)
+          )
+          1fr;
+        width: calc(var(--scale) * var(--overflow-width)) !important;
+        height: calc(var(--scale) * var(--overflow-height)) !important;
+        grid-template-rows: 1fr 10fr;
+        background-color: var(--yellow);
+      }
+
+      #container.overflow #text_box {
+        grid-column: 2;
+      }
+
+      #container.overflow #image_box {
+        grid-column: 1/4;
+      }
+
+      #text_box {
+        background-color: white;
+        padding-top: var(--padding);
+      }
     </style>
   </head>
-  <body style="--yellow: #ffee2c; --scale: 2; --padding: 20px; display: flex">
+  <body
+    style="
+      --yellow: #ffee2c;
+      --scale: 2;
+      --padding: 20px;
+      --width: 100px;
+      --height: 100px;
+      --overflow-width: 150px;
+      --overflow--height: 150px;
+      display: flex;
+    "
+  >
     <section style="margin-right: 20px">
       <h1>Generator kart na social media</h1>
       <textarea id="text" style="width: 600px; height: 120px">
@@ -24,6 +64,11 @@ Treść komunikatu</textarea
         <option value="2" selected>2x</option>
         <option value="3">3x</option>
       </select>
+      <input type="checkbox" id="overflow" onchange="reoverflow()" /><label
+        for="overflow"
+      >
+        Tryb overflow
+      </label>
     </section>
     <section>
       <h2>Twitter</h2>
@@ -32,14 +77,13 @@ Treść komunikatu</textarea
         style="
           box-sizing: border-box;
           border: calc(var(--padding) * var(--scale)) solid var(--yellow);
-          padding: calc(var(--padding) * var(--scale))
-            calc(var(--padding) * var(--scale)) 0
-            calc(var(--padding) * var(--scale));
           display: flex;
           flex-flow: column;
+          width: calc(var(--scale) * var(--width));
+          height: calc(var(--scale) * var(--height));
         "
       >
-        <div>
+        <div id="text_box">
           <img
             src="./logo.png"
             width="80"
@@ -49,8 +93,7 @@ Treść komunikatu</textarea
               height: calc(var(--scale) * 80px);
               width: calc(var(--scale) * 80px);
               padding-right: var(--padding);
-              margin-top: calc(-1 * var(--scale) * var(--padding));
-              margin-left: calc(-1 * var(--scale) * var(--padding));
+              margin-top: calc(-1 * var(--padding));
             "
           />
           <p
@@ -61,13 +104,8 @@ Treść komunikatu</textarea
           </p>
         </div>
         <div
-          style="
-            flex-grow: 1;
-            position: relative;
-            overflow: hidden;
-            margin-left: calc(-1 * var(--scale) * var(--padding));
-            margin-right: calc(-1 * var(--scale) * var(--padding));
-          "
+          id="image_box"
+          style="flex-grow: 1; position: relative; overflow: hidden"
         >
           <div
             id="image_blur"
@@ -97,11 +135,24 @@ Treść komunikatu</textarea
     </section>
   </body>
   <script>
+    const body = document.querySelector("body");
     const sizes = {
-      "Twitter - 1 zdjęcie": [512, 313],
-      "Twitter - 2 zdjęcia": [377, 434],
-      "LinkedIn - 1 zdjęcie": [540, 346],
-      "LinkedIn - 2 zdjęcia": [270, 552],
+      "Twitter - 1 zdjęcie": {
+        thumbnail_size: [512, 313],
+        overflow_size: [1024, 768],
+      },
+      "Twitter - 2 zdjęcia": {
+        thumbnail_size: [377, 434],
+        overflow_size: [1024, 768],
+      },
+      "LinkedIn - 1 zdjęcie": {
+        thumbnail_size: [540, 346],
+        overflow_size: [733, 723],
+      },
+      "LinkedIn - 2 zdjęcia": {
+        thumbnail_size: [270, 552],
+        overflow_size: [733, 723],
+      },
     };
 
     for (const value of Object.keys(sizes)) {
@@ -132,12 +183,13 @@ Treść komunikatu</textarea
     };
 
     const resize = () => {
-      const scale = parseInt(
-        document.querySelector("body").style.getPropertyValue("--scale")
-      );
-      const [width, height] = sizes[size.value];
-      container.style.width = scale * width + "px";
-      container.style.height = scale * height + "px";
+      const scale = parseInt(body.style.getPropertyValue("--scale"));
+      const [width, height] = sizes[size.value].thumbnail_size;
+      const [overflow_width, overflow_height] = sizes[size.value].overflow_size;
+      body.style.setProperty("--width", width + "px");
+      body.style.setProperty("--height", height + "px");
+      body.style.setProperty("--overflow-width", overflow_width + "px");
+      body.style.setProperty("--overflow-height", overflow_height + "px");
     };
 
     function rescale() {
@@ -147,12 +199,23 @@ Treść komunikatu</textarea
       resize();
     }
 
+    function reoverflow() {
+      const should_overflow = overflow.checked;
+      if (should_overflow) {
+        container.classList.add("overflow");
+      } else {
+        container.classList.remove("overflow");
+      }
+    }
+
     refreshText();
     refreshImage();
     resize();
     rescale();
+    reoverflow();
 
     text.oninput = refreshText;
     file.onchange = refreshImage;
+    /* [1014, 723] -- linked in */
   </script>
 </html>
