Skip to content

Commit ec1b577

Browse files
DenverCoder1DenverCoder1
authored
feat: Adds background color parameter (#91)
1 parent ef62ee4 commit ec1b577

File tree

11 files changed

+94
-49
lines changed

11 files changed

+94
-49
lines changed

‎README.md‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -61,18 +61,19 @@ Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issue
6161

6262
## 🔧 Options
6363

64-
| Parameter | Details | Type | Example |
65-
| :---------: | :--------------------------------------------------------------------------: | :-----: | :---------------------------------: |
66-
| `lines` | Text to display with lines separated by `;` and `+` for spaces | string | `First+line;Second+line;Third+line` |
67-
| `center` | `true` to center text or `false` for left aligned (default: `false`) | boolean | `true` or `false` |
68-
| `vCenter` | `true` to center vertically or `false`(default) to align above the center | boolean | `true` or `false` |
69-
| `height` | Height of the output SVG in pixels (default: `50`) | integer | Any positive number |
70-
| `width` | Width of the output SVG in pixels (default: `400`) | integer | Any positive number |
71-
| `font` | Font family (default: `monospace`) | string | Any font from Google Fonts |
72-
| `size` | Font size in pixels (default: `20`) | integer | Any positive number |
73-
| `color` | Color of the text (default: `36BCF7`) | string | Hex code without # (eg. `00ff00`) |
74-
| `multiline` | `true` to wrap lines or `false` to retype on one line (default: `false`) | boolean | `true` or `false` |
75-
| `duration` | Duration of the printing of a single line in milliseconds (default: `5000`) | integer | Any positive number |
64+
| Parameter | Details | Type | Example |
65+
| :----------: | :-------------------------------------------------------------------------: | :-----: | :---------------------------------: |
66+
| `lines` | Text to display with lines separated by `;` and `+` for spaces | string | `First+line;Second+line;Third+line` |
67+
| `height` | Height of the output SVG in pixels (default: `50`) | integer | Any positive number |
68+
| `width` | Width of the output SVG in pixels (default: `400`) | integer | Any positive number |
69+
| `size` | Font size in pixels (default: `20`) | integer | Any positive number |
70+
| `font` | Font family (default: `monospace`) | string | Any font from Google Fonts |
71+
| `color` | Color of the text (default: `36BCF7`) | string | Hex code without # (eg. `F724A9`) |
72+
| `background` | Background color of the text (default: `00000000`) | string | Hex code without # (eg. `FEFF4C`) |
73+
| `center` | `true` to center text or `false` for left aligned (default: `false`) | boolean | `true` or `false` |
74+
| `vCenter` | `true` to center vertically or `false`(default) to align above the center | boolean | `true` or `false` |
75+
| `multiline` | `true` to wrap lines or `false` to retype on one line (default: `false`) | boolean | `true` or `false` |
76+
| `duration` | Duration of the printing of a single line in milliseconds (default: `5000`) | integer | Any positive number |
7677

7778
## 📤 Deploying it on your own
7879

@@ -83,7 +84,7 @@ Doing this can lead to better uptime and more control over customization (you ca
8384
You can deploy the PHP files on any website server with PHP installed or as a Heroku app.
8485

8586
### Step-by-step instructions for deploying to Heroku
86-
87+
8788
1. Sign in to **Heroku** or create a new account at <https://heroku.com>
8889
2. Click the "Deploy to Heroku" button below
8990

@@ -113,8 +114,8 @@ Make sure your request is meaningful and you have tested the app locally before
113114

114115
#### Requirements
115116

116-
- [PHP 7](https://www.apachefriends.org/index.html)
117-
- [Composer](https://getcomposer.org)
117+
- [PHP 7](https://www.apachefriends.org/index.html)
118+
- [Composer](https://getcomposer.org)
118119

119120
#### Linux
120121

@@ -177,7 +178,11 @@ composer test
177178
---
178179

179180
Made with ❤️ and PHP
181+
180182
<!-- markdownlint-disable MD033 -->
183+
181184
<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>
185+
182186
<!-- markdownlint-enable MD033 -->
187+
183188
This project uses [Twemoji](https://github.com/twitter/twemoji), published under the [CC-BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)

‎src/demo/index.php‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
<script async src="https://www.googletagmanager.com/gtag/js?id=G-48CYVH0XEF"></script>
1010
<script>
1111
window.dataLayer = window.dataLayer || [];
12-
function gtag() { dataLayer.push(arguments); }
12+
13+
function gtag() {
14+
dataLayer.push(arguments);
15+
}
1316
gtag('js', new Date());
1417
gtag('config', 'G-48CYVH0XEF');
1518
</script>
@@ -33,73 +36,69 @@ function gtag() { dataLayer.push(arguments); }
3336
<!-- GitHub badges/links section -->
3437
<div class="github">
3538
<!-- GitHub Sponsors -->
36-
<a class="github-button" href="https://github.com/sponsors/denvercoder1"
37-
data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-heart"
38-
data-size="large" aria-label="Sponsor @denvercoder1 on GitHub">Sponsor</a>
39+
<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>
3940
<!-- View on GitHub -->
40-
<a class="github-button" href="https://github.com/denvercoder1/readme-typing-svg"
41-
data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large"
42-
aria-label="View denvercoder1/readme-typing-svg on GitHub">View on GitHub</a>
41+
<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>
4342
<!-- GitHub Star -->
44-
<a class="github-button" href="https://github.com/denvercoder1/readme-typing-svg"
45-
data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star"
46-
data-size="large" data-show-count="true" aria-label="Star denvercoder1/readme-typing-svg on GitHub">Star</a>
43+
<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>
4744
</div>
4845

4946
<div class="container">
5047
<div class="properties">
5148
<h2>Add your text</h2>
52-
<form class="parameters three-columns lines"><!-- Lines are added in JavaScript --></form>
49+
<form class="parameters three-columns lines">
50+
<!-- Lines are added in JavaScript -->
51+
</form>
5352
<button class="add-line btn" onclick="return preview.addLine();">+ Add line</button>
5453

5554
<h2>Options</h2>
5655
<form class="parameters two-columns options">
5756
<label for="font">Font</label>
58-
<input class="param" type="text" id="font" name="font" placeholder="monospace" value="monospace"
59-
pattern="^[A-Za-z0-9\- ]*$" title="Font from Google Fonts. Only letters, numbers, and spaces.">
60-
61-
<label for="color">Font color</label>
62-
<input class="param jscolor jscolor-active" id="color" name="background"
63-
data-jscolor="{ format: 'hex' }" value="#36BCF7">
57+
<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.">
6458

6559
<label for="size">Font size</label>
66-
<input class="param" type="number" id="size" name="size" placeholder="20" value="20">
60+
<input class="param" type="number" id="size" name="size" alt="Font size" placeholder="20" value="20">
6761

6862
<label for="duration">Print duration (ms per line)</label>
69-
<input class="param" type="number" id="duration" name="duration" placeholder="5000" value="5000">
63+
<input class="param" type="number" id="duration" name="duration" alt="Print duration (ms)" placeholder="5000" value="5000">
64+
65+
<label for="color">Font color</label>
66+
<input class="param jscolor jscolor-active" id="color" name="color" alt="Font color" data-jscolor="{ format: 'hexa' }" value="#36BCF7">
67+
68+
<label for="background">Background color</label>
69+
<input class="param jscolor jscolor-active" id="background" name="background" alt="Background color" data-jscolor="{ format: 'hexa' }" value="#00000000">
7070

7171
<label for="center">Horizontally Centered</label>
72-
<select class="param" id="center" name="center" value="false">
72+
<select class="param" id="center" name="center" alt="Horizontally Centered" value="false">
7373
<option>false</option>
7474
<option>true</option>
7575
</select>
7676

7777
<label for="vCenter">Vertically Centered</label>
78-
<select class="param" id="vCenter" name="vCenter" value="false">
78+
<select class="param" id="vCenter" name="vCenter" alt="Vertically Centered" value="false">
7979
<option>false</option>
8080
<option>true</option>
8181
</select>
8282

8383
<label for="multiline">Multiline</label>
84-
<select class="param" id="multiline" name="multiline" value="false">
84+
<select class="param" id="multiline" name="multiline" alt="Multiline" value="false">
8585
<option value="false">Type sentences on one line</option>
8686
<option value="true">Each sentence on a new line</option>
8787
</select>
8888

89-
<label for="dimensions">W ✕ H</label>
89+
<label for="dimensions" title="Width ✕ Height">W ✕ H</label>
9090
<span id="dimensions">
91-
<input class="param inline" type="number" id="width" name="width" placeholder="400" value="400">
91+
<input class="param inline" type="number" id="width" name="width" alt="Width (px)" placeholder="400" value="400">
9292
<label>✕</label>
93-
<input class="param inline" type="number" id="height" name="height" placeholder="50" value="50">
93+
<input class="param inline" type="number" id="height" name="height" alt="Height (px)" placeholder="50" value="50">
9494
</span>
9595
</form>
9696
</div>
9797

9898
<div class="output">
9999
<h2>Preview</h2>
100100

101-
<img alt="Readme Typing SVG" src="/?lines=The+five+boxing+wizards+jump+quickly"
102-
onload="this.classList.remove('loading')" onerror="this.classList.remove('loading')" />
101+
<img alt="Readme Typing SVG" src="/?lines=The+five+boxing+wizards+jump+quickly" onload="this.classList.remove('loading')" onerror="this.classList.remove('loading')" />
103102
<div class="loader">Loading...</div>
104103

105104
<label class="show-border">
@@ -123,4 +122,4 @@ function gtag() { dataLayer.push(arguments); }
123122
</a>
124123
</body>
125124

126-
</html>
125+
</html>

‎src/demo/js/script.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ let preview = {
33
defaults: {
44
font: "monospace",
55
color: "36BCF7",
6+
background: "00000000",
67
size: "20",
78
center: "false",
89
vCenter: "false",
@@ -30,7 +31,7 @@ let preview = {
3031
let obj = acc;
3132
let value = next.value;
3233
// remove hash from any colors and remove "FF" if full opacity
33-
value = value.replace(/#([A-Fa-f0-9]{6})(F|f){2}$/, "$1");
34+
value = value.replace(/^#([A-Fa-f0-9]{6})(?:[Ff]{2})?/, "$1");
3435
// add value to reduction accumulator
3536
obj[next.id] = value;
3637
return obj;

‎src/models/RendererModel.php‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<?php declare (strict_types = 1);
1+
<?php
2+
3+
declare(strict_types=1);
24

35
/**
46
* Model for SVG outputs
@@ -14,12 +16,15 @@ class RendererModel
1416
/** @var string $color Font color */
1517
public $color;
1618

19+
/** @var string $background Background color */
20+
public $background;
21+
1722
/** @var int $size Font size */
1823
public $size;
1924

2025
/** @var bool $center Whether or not to center text horizontally */
2126
public $center;
22-
27+
2328
/** @var bool $vCenter Whether or not to center text vertically */
2429
public $vCenter;
2530

@@ -48,6 +53,7 @@ class RendererModel
4853
private $DEFAULTS = array(
4954
"font" => "monospace",
5055
"color" => "#36BCF7",
56+
"background" => "#00000000",
5157
"size" => "20",
5258
"center" => "false",
5359
"vCenter" => "false",
@@ -70,7 +76,8 @@ public function __construct($template, $params, $database)
7076
$this->database = $database;
7177
$this->lines = $this->checkLines($params["lines"] ?? "");
7278
$this->font = $this->checkFont($params["font"] ?? $this->DEFAULTS["font"]);
73-
$this->color = $this->checkColor($params["color"] ?? $this->DEFAULTS["color"]);
79+
$this->color = $this->checkColor($params["color"] ?? $this->DEFAULTS["color"], "color");
80+
$this->background = $this->checkColor($params["background"] ?? $this->DEFAULTS["background"], "background");
7481
$this->size = $this->checkNumber($params["size"] ?? $this->DEFAULTS["size"], "Font size");
7582
$this->center = $this->checkBoolean($params["center"] ?? $this->DEFAULTS["center"]);
7683
$this->vCenter = $this->checkBoolean($params["vCenter"] ?? $this->DEFAULTS["vCenter"]);
@@ -114,14 +121,15 @@ private function checkFont($font)
114121
* Validate font color and return valid string
115122
*
116123
* @param string $color Color parameter
124+
* @param string $field Field name for displaying in case of error
117125
* @return string Sanitized color with preceding hash symbol
118126
*/
119-
private function checkColor($color)
127+
private function checkColor($color, $field)
120128
{
121129
$sanitized = (string) preg_replace("/[^0-9A-Fa-f]/", "", $color);
122130
// if color is not a valid length, use the default
123131
if (!in_array(strlen($sanitized), [3, 4, 6, 8])) {
124-
return $this->DEFAULTS["color"];
132+
return $this->DEFAULTS[$field];
125133
}
126134
// return sanitized color
127135
return "#" . $sanitized;

‎src/templates/main.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<svg xmlns='http://www.w3.org/2000/svg'
33
xmlns:xlink='http://www.w3.org/1999/xlink'
44
viewBox='0 0 <?php echo "$width $height" ?>'
5+
style='background-color: <?php echo $background ?>;'
56
width='<?php echo $width ?>px' height='<?php echo $height ?>px'>
67

78
<?php echo preg_replace("/\n/", "\n\t", $fontCSS); ?>

‎src/views/RendererView.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ public function render()
3030
"lines" => $this->model->lines,
3131
"font" => $this->model->font,
3232
"color" => $this->model->color,
33+
"background" => $this->model->background,
3334
"size" => $this->model->size,
3435
"center" => $this->model->center,
3536
"vCenter" => $this->model->vCenter,

‎tests/OptionsTest.php‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,32 @@ public function testInvalidFontColor(): void
6666
$this->assertEquals("#36BCF7", $model->color);
6767
}
6868

69+
/**
70+
* Test valid background color
71+
*/
72+
public function testValidBackgroundColor(): void
73+
{
74+
$params = array(
75+
"lines" => "text",
76+
"background" => "00000033",
77+
);
78+
$model = new RendererModel("src/templates/main.php", $params, self::$database);
79+
$this->assertEquals("#00000033", $model->background);
80+
}
81+
82+
/**
83+
* Test invalid background color
84+
*/
85+
public function testInvalidBackgroundColor(): void
86+
{
87+
$params = array(
88+
"lines" => "text",
89+
"background" => "00000",
90+
);
91+
$model = new RendererModel("src/templates/main.php", $params, self::$database);
92+
$this->assertEquals("#00000000", $model->background);
93+
}
94+
6995
/**
7096
* Test valid font size
7197
*/

‎tests/svg/test_fonts.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎tests/svg/test_multiline.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎tests/svg/test_normal.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)