Merge pull request #1 from splintersuidman/aankondigingnieuw

Voeg nieuwe template voor aankondigingen toe
roodjong · Jun 27, 2024 · e1fcd54 · e1fcd54
2 parents 0576661 + 4f0a054
commit e1fcd54
Show file tree

Hide file tree

Showing 9 changed files with 416 additions and 2 deletions.
diff --git a/AankondigingNieuw.html b/AankondigingNieuw.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style/style.css">
+  <title>Image Editor</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+</head>
+<body>
+  <main>
+  <canvas id="canvas"></canvas>
+  <div id="controls">
+    <p>Sleep het plaatje en de ondertitel om te verplaatsen.</p>
+    <p>Laad het niet in? Vreemd lettertype? Herlaad de pagina/upload de file opnieuw, het werkt 90% of the time all the time.</p>
+    <p class="blink_text">Zorg dat het plaatje dat je gebruikt rechtenvrij is! Anders kan dit de vereniging vele duizenden euros kosten!</p>
+    <label name="imageInput">Upload plaatje</label>
+    <input type="file" id="imageInput" accept="image/*">
+    <div class="labelInputPair">
+      <label name="imageSize">Grootte achtergrond:</label>
+      <input type="range" id="imageSize" min="0" max="10" step="0.01" value="1">
+    </div>
+    <div class="labelInputPair">
+      <label name="titelText">Titel:</label>
+      <textarea id="titelText">Jouw titel&#13;hier</textarea>
+    </div>
+    <div class="labelInputPair">
+      <label name="titelSize">Grootte titel:</label>
+      <input type="range" id="titelSize" min="50" max="500" step="1" value="150">
+    </div>
+    <!-- <div class="labelInputPair"> -->
+    <!--   <label name="groepsnaam">Groepsnaam:</label> -->
+    <!--   <textarea type="text" id="groepsnaam">socialistische&#13;jongeren</textarea> -->
+    <!-- </div> -->
+    <br>
+    <button id="downloadButton" onclick="download('Aankondiging')">Download</button>
+  </div>
+  </main>
+
+  <script src="js/shared.js"></script>
+  <script src="js/abstractLayer.js"></script>
+  <script src="js/text.js"></script>
+  <script src="js/rect.js"></script>
+  <script src="js/textbox.js"></script>
+  <script src="js/resizable.js"></script>
+  <script src="js/imgWrapper.js"></script>
+  <script src="js/aankondigingnieuw.js"></script>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -9,8 +9,9 @@
 <body>
     <h1 id="indextitel">Kies je template</h1>
     <div id="indexmain">
+    <a href="AankondigingNieuw.html"><img src="media/AankondigingNieuw.jpg"></a>
     <a href="Aankondiging.html"><img src="media/Aankondiging.jpg"></a>
     <a href="Tekstbericht.html"><img src="media/Tekstbericht.jpg"></a>
     <a href="SocialistenAankondiging.html"><img src="media/socialistenEvenement.jpg"></a>
     </div>
-</body>
+</body>
diff --git a/js/aankondigingnieuw.js b/js/aankondigingnieuw.js
@@ -0,0 +1,85 @@
+const templateWidth = 2000;
+const templateHeight = 2000;
+canvas.width = templateWidth;
+canvas.height = templateHeight;
+
+const backgroundImage = new DraggableResizableObject(canvas, "imageSize", document.createElement('img'), 0, 0, 0, 0);
+backgroundImage.makeDraggable(canvas);
+
+const topText = new TextBoxDrawable({
+    font: "Bebas Neue",
+    linespacing: 0.4,
+    color: "white",
+    backgroundColor: "#C2000B",
+    allCaps: true,
+    context,
+    xPosition: 50,
+    yPosition: 1650,
+    maxWidth:1940,
+    maxHeight:400,
+    inputID:"titelText",
+    doCenter: true,
+    doDynamicSize: false,
+    fontSize: 120,
+    shadowEnable: true
+});
+topText.makeDraggable();
+
+const bottomRect = new RectangleDrawable({
+    color: "white",
+    xPosition: 0,
+    yPosition: templateHeight - 300,
+    width: templateWidth,
+    height: 300
+});
+
+const topTextSizeSlider = document.getElementById("titelSize");
+topText.setFont(size=topTextSizeSlider.value);
+topTextSizeSlider.addEventListener("input", _ => topText.setFont(topTextSizeSlider.value));
+
+const logo = new ImgWrapper("templateImages/AankondigingNieuw/logo140x140.png");
+logo.setPosition(templateWidth - 400, templateHeight - 200);
+
+const rood = new TextDrawable({
+    font: "BebasNeueSEEB",
+    linespacing: 0,
+    color: "black",
+    xPosition: templateWidth - 400 + 140 + 12.5,
+    yPosition: templateHeight - 175,
+    text: "ROOD",
+    doDynamicSize: false,
+    fontSize: 64,
+    doCenter: false,
+    useDynamicLineHeight: false,
+    letterSpacing: 0, context
+});
+
+const groepsnaam = new TextDrawable({
+    font: "BebasNeue",
+    linespacing: 0,
+    color: "black",
+    allCaps: false,
+    context,
+    textBaseline: "alphabetic",
+    xPosition: templateWidth - 400 + 140 + 12.5 + 2,
+    yPosition: templateHeight - 95,
+    doDynamicSize: false,
+    fontSize: 32,
+    doCenter: false,
+    text: "socialistische\njongeren",
+    useDynamicLineHeight: false
+});
+
+// TODO: make ‘groepsnaam’ editable with right sizing
+// let groepsnaam = new TextDrawable({font: "BebasNeue", linespacing: 0, color: "black", allCaps : false, context, textBaseline: "alphabetic",
+//     xPosition: templateWidth - 400 + 140 + 12.5 + 2, yPosition: templateHeight - 85, doDynamicSize: false, fontSize: 42, doCenter: false, inputID: "groepsnaam", useDynamicLineHeight: false});
+
+// Define layers here
+let layers = [
+    backgroundImage, 
+    bottomRect,
+    groepsnaam,
+    logo,
+    rood,
+    topText,
+];
diff --git a/js/imgWrapper.js b/js/imgWrapper.js
@@ -26,4 +26,4 @@ class ImgWrapper extends abstractLayer{
         context.drawImage(this.img, this.position.x, this.position.y, this.img.width, this.img.height);
         context.globalCompositeOperation = oldSetting;
     }
-}
+}
diff --git a/js/rect.js b/js/rect.js
@@ -0,0 +1,26 @@
+class RectangleDrawable extends abstractLayer {
+    constructor({xPosition, yPosition, width, height, color}) {
+        super();
+
+        this.color = color;
+        this.position = { x: xPosition, y: yPosition };
+        this.size = { width, height };
+    }
+
+    getPosition() {
+        return this.position;
+    }
+
+    getVisibleDimensions() {
+        return { x: this.position.x, y: this.position.y, width: this.size.width, height: this.size.height };
+    }
+
+    setPositionInternal(x, y) {
+        this.position = { x, y };
+    }
+
+    internalDraw(context) {
+        context.fillStyle = this.color;
+        context.fillRect(this.position.x, this.position.y, this.size.width, this.size.height);
+    }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,4 +26,4 @@ class ImgWrapper extends abstractLayer{ @@
             context.drawImage(this.img, this.position.x, this.position.y, this.img.width, this.img.height);
             context.globalCompositeOperation = oldSetting;
         }
-    }
+    }