feat: Adds background color parameter (#91)

DenverCoder1 · web-flow · commit ec1b57775041 · 2022-03-08T20:36:31.000+02:00
diff --git a/README.md b/README.md
@@ -61,18 +61,19 @@ Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issue
 
 ## 🔧 Options
 
-|  Parameter  |                                 Details                                      |  Type   |               Example               |
-| :---------: | :--------------------------------------------------------------------------: | :-----: | :---------------------------------: |
-|   `lines`   |      Text to display with lines separated by `;` and `+` for spaces          | string  | `First+line;Second+line;Third+line` |
-|  `center`   |   `true` to center text or `false` for left aligned (default: `false`)       | boolean |          `true` or `false`          |
-|  `vCenter`  | `true` to center vertically or `false`(default) to align above the center    | boolean |          `true` or `false`          |
-|  `height`   |            Height of the output SVG in pixels (default: `50`)                | integer |         Any positive number         |
-|   `width`   |            Width of the output SVG in pixels (default: `400`)                | integer |         Any positive number         |
-|   `font`    |                    Font family (default: `monospace`)                        | string  |     Any font from Google Fonts      |
-|   `size`    |                   Font size in pixels (default: `20`)                        | integer |         Any positive number         |
-|   `color`   |                  Color of the text (default: `36BCF7`)                       | string  |  Hex code without # (eg. `00ff00`)  |
-| `multiline` | `true` to wrap lines or `false` to retype on one line (default: `false`)     | boolean |          `true` or `false`          |
-|  `duration` | Duration of the printing of a single line in milliseconds (default: `5000`)  | integer |         Any positive number         |
+|  Parameter   |                                   Details                                   |  Type   |               Example               |
+| :----------: | :-------------------------------------------------------------------------: | :-----: | :---------------------------------: |
+|   `lines`    |       Text to display with lines separated by `;` and `+` for spaces        | string  | `First+line;Second+line;Third+line` |
+|   `height`   |             Height of the output SVG in pixels (default: `50`)              | integer |         Any positive number         |
+|   `width`    |             Width of the output SVG in pixels (default: `400`)              | integer |         Any positive number         |
+|    `size`    |                     Font size in pixels (default: `20`)                     | integer |         Any positive number         |
+|    `font`    |                     Font family (default: `monospace`)                      | string  |     Any font from Google Fonts      |
+|   `color`    |                    Color of the text (default: `36BCF7`)                    | string  |  Hex code without # (eg. `F724A9`)  |
+| `background` |             Background color of the text (default: `00000000`)              | string  |  Hex code without # (eg. `FEFF4C`)  |
+|   `center`   |    `true` to center text or `false` for left aligned (default: `false`)     | boolean |          `true` or `false`          |
+|  `vCenter`   |  `true` to center vertically or `false`(default) to align above the center  | boolean |          `true` or `false`          |
+| `multiline`  |  `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |          `true` or `false`          |
+|  `duration`  | Duration of the printing of a single line in milliseconds (default: `5000`) | integer |         Any positive number         |
 
 ## 📤 Deploying it on your own
 
@@ -83,7 +84,7 @@ Doing this can lead to better uptime and more control over customization (you ca
 You can deploy the PHP files on any website server with PHP installed or as a Heroku app.
 
 ### Step-by-step instructions for deploying to Heroku
-  
+
 1. Sign in to **Heroku** or create a new account at <https://heroku.com>
 2. Click the "Deploy to Heroku" button below
 
@@ -113,8 +114,8 @@ Make sure your request is meaningful and you have tested the app locally before
 
 #### Requirements
 
-- [PHP 7](https://www.apachefriends.org/index.html)
-- [Composer](https://getcomposer.org)
+-   [PHP 7](https://www.apachefriends.org/index.html)
+-   [Composer](https://getcomposer.org)
 
 #### Linux
 
@@ -177,7 +178,11 @@ composer test
 ---
 
 Made with ❤️ and PHP
+
 <!-- markdownlint-disable MD033 -->
+
 <a href="https://heroku.com/"><img alt="Powered by Heroku" title="Powered by Heroku" src="https://img.shields.io/badge/-Powered%20by%20Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white"/></a>
+
 <!-- markdownlint-enable MD033 -->
+
 This project uses [Twemoji](https://github.com/twitter/twemoji), published under the [CC-BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)
diff --git a/src/demo/index.php b/src/demo/index.php
@@ -9,7 +9,10 @@
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-48CYVH0XEF"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
         gtag('js', new Date());
         gtag('config', 'G-48CYVH0XEF');
     </script>
@@ -33,73 +36,69 @@ function gtag() { dataLayer.push(arguments); }
     <!-- GitHub badges/links section -->
     <div class="github">
         <!-- GitHub Sponsors -->
-        <a class="github-button" href="https://github.com/sponsors/denvercoder1"
-            data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-heart"
-            data-size="large" aria-label="Sponsor @denvercoder1 on GitHub">Sponsor</a>
+        <a class="github-button" href="https://github.com/sponsors/denvercoder1" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @denvercoder1 on GitHub">Sponsor</a>
         <!-- View on GitHub -->
-        <a class="github-button" href="https://github.com/denvercoder1/readme-typing-svg"
-            data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large"
-            aria-label="View denvercoder1/readme-typing-svg on GitHub">View on GitHub</a>
+        <a class="github-button" href="https://github.com/denvercoder1/readme-typing-svg" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" aria-label="View denvercoder1/readme-typing-svg on GitHub">View on GitHub</a>
         <!-- GitHub Star -->
-        <a class="github-button" href="https://github.com/denvercoder1/readme-typing-svg"
-            data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star"
-            data-size="large" data-show-count="true" aria-label="Star denvercoder1/readme-typing-svg on GitHub">Star</a>
+        <a class="github-button" href="https://github.com/denvercoder1/readme-typing-svg" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star denvercoder1/readme-typing-svg on GitHub">Star</a>
     </div>
 
     <div class="container">
         <div class="properties">
             <h2>Add your text</h2>
-            <form class="parameters three-columns lines"><!-- Lines are added in JavaScript --></form>
+            <form class="parameters three-columns lines">
+                <!-- Lines are added in JavaScript -->
+            </form>
             <button class="add-line btn" onclick="return preview.addLine();">+ Add line</button>
 
             <h2>Options</h2>
             <form class="parameters two-columns options">
                 <label for="font">Font</label>
-                <input class="param" type="text" id="font" name="font" placeholder="monospace" value="monospace"
-                    pattern="^[A-Za-z0-9\- ]*$" title="Font from Google Fonts. Only letters, numbers, and spaces.">
-
-                <label for="color">Font color</label>
-                <input class="param jscolor jscolor-active" id="color" name="background"
-                    data-jscolor="{ format: 'hex' }" value="#36BCF7">
+                <input class="param" type="text" id="font" name="font" alt="Font name" placeholder="monospace" value="monospace" pattern="^[A-Za-z0-9\- ]*$" title="Font from Google Fonts. Only letters, numbers, and spaces.">
 
                 <label for="size">Font size</label>
-                <input class="param" type="number" id="size" name="size" placeholder="20" value="20">
+                <input class="param" type="number" id="size" name="size" alt="Font size" placeholder="20" value="20">
 
                 <label for="duration">Print duration (ms per line)</label>
-                <input class="param" type="number" id="duration" name="duration" placeholder="5000" value="5000">
+                <input class="param" type="number" id="duration" name="duration" alt="Print duration (ms)" placeholder="5000" value="5000">
+
+                <label for="color">Font color</label>
+                <input class="param jscolor jscolor-active" id="color" name="color" alt="Font color" data-jscolor="{ format: 'hexa' }" value="#36BCF7">
+
+                <label for="background">Background color</label>
+                <input class="param jscolor jscolor-active" id="background" name="background" alt="Background color" data-jscolor="{ format: 'hexa' }" value="#00000000">
 
                 <label for="center">Horizontally Centered</label>
-                <select class="param" id="center" name="center" value="false">
+                <select class="param" id="center" name="center" alt="Horizontally Centered" value="false">
                     <option>false</option>
                     <option>true</option>
                 </select>
 
                 <label for="vCenter">Vertically Centered</label>
-                <select class="param" id="vCenter" name="vCenter" value="false">
+                <select class="param" id="vCenter" name="vCenter" alt="Vertically Centered" value="false">
                     <option>false</option>
                     <option>true</option>
                 </select>
 
                 <label for="multiline">Multiline</label>
-                <select class="param" id="multiline" name="multiline" value="false">
+                <select class="param" id="multiline" name="multiline" alt="Multiline" value="false">
                     <option value="false">Type sentences on one line</option>
                     <option value="true">Each sentence on a new line</option>
                 </select>
 
-                <label for="dimensions">W ✕ H</label>
+                <label for="dimensions" title="Width ✕ Height">W ✕ H</label>
                 <span id="dimensions">
-                    <input class="param inline" type="number" id="width" name="width" placeholder="400" value="400">
+                    <input class="param inline" type="number" id="width" name="width" alt="Width (px)" placeholder="400" value="400">
                     <label>✕</label>
-                    <input class="param inline" type="number" id="height" name="height" placeholder="50" value="50">
+                    <input class="param inline" type="number" id="height" name="height" alt="Height (px)" placeholder="50" value="50">
                 </span>
             </form>
         </div>
 
         <div class="output">
             <h2>Preview</h2>
 
-            <img alt="Readme Typing SVG" src="/?lines=The+five+boxing+wizards+jump+quickly"
-                onload="this.classList.remove('loading')" onerror="this.classList.remove('loading')" />
+            <img alt="Readme Typing SVG" src="/?lines=The+five+boxing+wizards+jump+quickly" onload="this.classList.remove('loading')" onerror="this.classList.remove('loading')" />
             <div class="loader">Loading...</div>
 
             <label class="show-border">
@@ -123,4 +122,4 @@ function gtag() { dataLayer.push(arguments); }
     </a>
 </body>
 
-</html>
+</html>
diff --git a/src/demo/js/script.js b/src/demo/js/script.js
@@ -3,6 +3,7 @@ let preview = {
   defaults: {
     font: "monospace",
     color: "36BCF7",
+    background: "00000000",
     size: "20",
     center: "false",
     vCenter: "false",
@@ -30,7 +31,7 @@ let preview = {
         let obj = acc;
         let value = next.value;
         // remove hash from any colors and remove "FF" if full opacity
-        value = value.replace(/#([A-Fa-f0-9]{6})(F|f){2}$/, "$1");
+        value = value.replace(/^#([A-Fa-f0-9]{6})(?:[Ff]{2})?/, "$1");
         // add value to reduction accumulator
         obj[next.id] = value;
         return obj;
diff --git a/src/models/RendererModel.php b/src/models/RendererModel.php
@@ -1,4 +1,6 @@
-<?php declare (strict_types = 1);
+<?php
+
+declare(strict_types=1);
 
 /**
  * Model for SVG outputs
@@ -14,12 +16,15 @@ class RendererModel
     /** @var string $color Font color */
     public $color;
 
+    /** @var string $background Background color */
+    public $background;
+
     /** @var int $size Font size */
     public $size;
 
     /** @var bool $center Whether or not to center text horizontally */
     public $center;
-    
+
     /** @var bool $vCenter Whether or not to center text vertically */
     public $vCenter;
 
@@ -48,6 +53,7 @@ class RendererModel
     private $DEFAULTS = array(
         "font" => "monospace",
         "color" => "#36BCF7",
+        "background" => "#00000000",
         "size" => "20",
         "center" => "false",
         "vCenter" => "false",
@@ -70,7 +76,8 @@ public function __construct($template, $params, $database)
         $this->database = $database;
         $this->lines = $this->checkLines($params["lines"] ?? "");
         $this->font = $this->checkFont($params["font"] ?? $this->DEFAULTS["font"]);
-        $this->color = $this->checkColor($params["color"] ?? $this->DEFAULTS["color"]);
+        $this->color = $this->checkColor($params["color"] ?? $this->DEFAULTS["color"], "color");
+        $this->background = $this->checkColor($params["background"] ?? $this->DEFAULTS["background"], "background");
         $this->size = $this->checkNumber($params["size"] ?? $this->DEFAULTS["size"], "Font size");
         $this->center = $this->checkBoolean($params["center"] ?? $this->DEFAULTS["center"]);
         $this->vCenter = $this->checkBoolean($params["vCenter"] ?? $this->DEFAULTS["vCenter"]);
@@ -114,14 +121,15 @@ private function checkFont($font)
      * Validate font color and return valid string
      *
      * @param string $color Color parameter
+     * @param string $field Field name for displaying in case of error
      * @return string Sanitized color with preceding hash symbol
      */
-    private function checkColor($color)
+    private function checkColor($color, $field)
     {
         $sanitized = (string) preg_replace("/[^0-9A-Fa-f]/", "", $color);
         // if color is not a valid length, use the default
         if (!in_array(strlen($sanitized), [3, 4, 6, 8])) {
-            return $this->DEFAULTS["color"];
+            return $this->DEFAULTS[$field];
         }
         // return sanitized color
         return "#" . $sanitized;
diff --git a/src/templates/main.php b/src/templates/main.php
@@ -2,6 +2,7 @@
 <svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'
     viewBox='0 0 <?php echo "$width $height" ?>'
+    style='background-color: <?php echo $background ?>;'
     width='<?php echo $width ?>px' height='<?php echo $height ?>px'>
 
     <?php echo preg_replace("/\n/", "\n\t", $fontCSS); ?>
diff --git a/src/views/RendererView.php b/src/views/RendererView.php
@@ -30,6 +30,7 @@ public function render()
             "lines" => $this->model->lines,
             "font" => $this->model->font,
             "color" => $this->model->color,
+            "background" => $this->model->background,
             "size" => $this->model->size,
             "center" => $this->model->center,
             "vCenter" => $this->model->vCenter,
diff --git a/tests/OptionsTest.php b/tests/OptionsTest.php
@@ -66,6 +66,32 @@ public function testInvalidFontColor(): void
         $this->assertEquals("#36BCF7", $model->color);
     }
 
+    /**
+     * Test valid background color
+     */
+    public function testValidBackgroundColor(): void
+    {
+        $params = array(
+            "lines" => "text",
+            "background" => "00000033",
+        );
+        $model = new RendererModel("src/templates/main.php", $params, self::$database);
+        $this->assertEquals("#00000033", $model->background);
+    }
+
+    /**
+     * Test invalid background color
+     */
+    public function testInvalidBackgroundColor(): void
+    {
+        $params = array(
+            "lines" => "text",
+            "background" => "00000",
+        );
+        $model = new RendererModel("src/templates/main.php", $params, self::$database);
+        $this->assertEquals("#00000000", $model->background);
+    }
+
     /**
      * Test valid font size
      */
diff --git a/tests/svg/test_fonts.svg b/tests/svg/test_fonts.svg
@@ -2,6 +2,7 @@
 <svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'
     viewBox='0 0 400 50'
+    style='background-color: #00000000;'
     width='400px' height='50px'>
 
     <style>
diff --git a/tests/svg/test_multiline.svg b/tests/svg/test_multiline.svg
@@ -2,6 +2,7 @@
 <svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'
     viewBox='0 0 380 200'
+    style='background-color: #00000000;'
     width='380px' height='200px'>
 
     
diff --git a/tests/svg/test_normal.svg b/tests/svg/test_normal.svg
@@ -2,6 +2,7 @@
 <svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'
     viewBox='0 0 380 50'
+    style='background-color: #00000000;'
     width='380px' height='50px'>
 
     
diff --git a/tests/svg/test_normal_vertical_alignment.svg b/tests/svg/test_normal_vertical_alignment.svg
@@ -2,6 +2,7 @@
 <svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'
     viewBox='0 0 380 50'
+    style='background-color: #00000000;'
     width='380px' height='50px'>
 
     
