Skip to content

Commit

Permalink
feat: Add disable_animations parameter (#452)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DenverCoder1
DenverCoder1 authored Feb 15, 2023
1 parent 601aa02 commit fa7ea77
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 27 deletions.
41 changes: 21 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,26 +43,27 @@ The `user` field is the only required option. All other fields are optional.

If the `theme` parameter is specified, any color customizations specified will be applied on top of the theme, overriding the theme's values.

| Parameter | Details | Example |
| :---------------: | :---------------------------------------------: | :-----------------------------------------------------------------------: |
| `user` | GitHub username to show stats for | `DenverCoder1` |
| `theme` | The theme to apply (Default: `default`) | `dark`, `radical`, etc. [🎨➜](./docs/themes.md) |
| `hide_border` | Make the border transparent (Default: `false`) | `true` or `false` |
| `border_radius` | Set the roundness of the edges (Default: `4.5`) | Number `0` (sharp corners) to `248` (ellipse) |
| `background` | Background color | **hex code** without `#` or **css color** |
| `border` | Border color | **hex code** without `#` or **css color** |
| `stroke` | Stroke line color between sections | **hex code** without `#` or **css color** |
| `ring` | Color of the ring around the current streak | **hex code** without `#` or **css color** |
| `fire` | Color of the fire in the ring | **hex code** without `#` or **css color** |
| `currStreakNum` | Current streak number | **hex code** without `#` or **css color** |
| `sideNums` | Total and longest streak numbers | **hex code** without `#` or **css color** |
| `currStreakLabel` | Current streak label | **hex code** without `#` or **css color** |
| `sideLabels` | Total and longest streak labels | **hex code** without `#` or **css color** |
| `dates` | Date range text color | **hex code** without `#` or **css color** |
| `date_format` | Date format pattern or empty for locale format | See note below on [📅 Date Formats](#-date-formats) |
| `locale` | Locale for labels and numbers (Default: `en`) | ISO 639-1 code - See [🗪 Locales](#-locales) |
| `type` | Output format (Default: `svg`) | Current options: `svg`, `png` or `json` |
| `mode` | Streak mode (Default: `daily`) | `daily` (contribute daily) or `weekly` (contribute once per Sun-Sat week) |
| Parameter | Details | Example |
| :------------------: | :---------------------------------------------: | :-----------------------------------------------------------------------: |
| `user` | GitHub username to show stats for | `DenverCoder1` |
| `theme` | The theme to apply (Default: `default`) | `dark`, `radical`, etc. [🎨➜](./docs/themes.md) |
| `hide_border` | Make the border transparent (Default: `false`) | `true` or `false` |
| `border_radius` | Set the roundness of the edges (Default: `4.5`) | Number `0` (sharp corners) to `248` (ellipse) |
| `background` | Background color | **hex code** without `#` or **css color** |
| `border` | Border color | **hex code** without `#` or **css color** |
| `stroke` | Stroke line color between sections | **hex code** without `#` or **css color** |
| `ring` | Color of the ring around the current streak | **hex code** without `#` or **css color** |
| `fire` | Color of the fire in the ring | **hex code** without `#` or **css color** |
| `currStreakNum` | Current streak number | **hex code** without `#` or **css color** |
| `sideNums` | Total and longest streak numbers | **hex code** without `#` or **css color** |
| `currStreakLabel` | Current streak label | **hex code** without `#` or **css color** |
| `sideLabels` | Total and longest streak labels | **hex code** without `#` or **css color** |
| `dates` | Date range text color | **hex code** without `#` or **css color** |
| `date_format` | Date format pattern or empty for locale format | See note below on [📅 Date Formats](#-date-formats) |
| `locale` | Locale for labels and numbers (Default: `en`) | ISO 639-1 code - See [🗪 Locales](#-locales) |
| `type` | Output format (Default: `svg`) | Current options: `svg`, `png` or `json` |
| `mode` | Streak mode (Default: `daily`) | `daily` (contribute daily) or `weekly` (contribute once per Sun-Sat week) |
| `disable_animations` | Disable SVG animations (Default: `false`) | `true` or `false` |

### 🖌 Themes

Expand Down
33 changes: 26 additions & 7 deletions src/card.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,6 +476,22 @@ function generateErrorCard(string $message, array $params = null): string
";
}

/**
* Remove animations from SVG
*
* @param string $svg The SVG for the card as a string
* @return string The SVG without animations
*/
function removeAnimations(string $svg): string
{
$svg = preg_replace("/(<style>\X*?<\/style>)/m", "", $svg);
$svg = preg_replace("/(opacity: 0;)/m", "opacity: 1;", $svg);
$svg = preg_replace("/(animation: fadein[^;'\"]+)/m", "opacity: 1;", $svg);
$svg = preg_replace("/(animation: currstreak[^;'\"]+)/m", "font-size: 28px;", $svg);
$svg = preg_replace("/<a \X*?>(\X*?)<\/a>/m", '\1', $svg);
return $svg;
}

/**
* Converts an SVG card to a PNG image
*
Expand All @@ -488,11 +504,7 @@ function convertSvgToPng(string $svg): string
$svg = trim($svg);

// remove style and animations
$svg = preg_replace("/(<style>\X*?<\/style>)/m", "", $svg);
$svg = preg_replace("/(opacity: 0;)/m", "opacity: 1;", $svg);
$svg = preg_replace("/(animation: fadein[^;'\"]+)/m", "opacity: 1;", $svg);
$svg = preg_replace("/(animation: currstreak[^;'\"]+)/m", "font-size: 28px;", $svg);
$svg = preg_replace("/<a \X*?>(\X*?)<\/a>/m", '\1', $svg);
$svg = removeAnimations($svg);

// replace all fully transparent colors in fill or stroke with "none"
// this is a workaround for what seems to be a bug in inkscape where rgba alpha values are ignored
Expand Down Expand Up @@ -530,11 +542,14 @@ function convertSvgToPng(string $svg): string
* Return headers and response based on type
*
* @param string|array $output The stats (array) or error message (string) to display
* @param array<string,string>|NULL $params Request parameters
* @return array The Content-Type header and the response body, and status code in case of an error
*/
function generateOutput(string|array $output): array
function generateOutput(string|array $output, array $params = null): array
{
$requestedType = $_REQUEST["type"] ?? "svg";
$params = $params ?? $_REQUEST;

$requestedType = $params["type"] ?? "svg";

// output JSON data
if ($requestedType === "json") {
Expand Down Expand Up @@ -563,6 +578,10 @@ function generateOutput(string|array $output): array
];
}
}
// remove animations if disable_animations is set
if (isset($params["disable_animations"]) && $params["disable_animations"] == "true") {
$svg = removeAnimations($svg);
}
// output SVG card
return [
"contentType" => "image/svg+xml",
Expand Down
6 changes: 6 additions & 0 deletions src/demo/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,12 @@ function gtag() {
<option value="weekly">Weekly</option>
</select>

<label for="disable_animations">Disable Animations</label>
<select class="param" id="hide-border" name="disable_animations">
<option>false</option>
<option>true</option>
</select>

<details class="advanced">
<summary>⚙ Advanced Options</summary>
<div class="content parameters">
Expand Down
1 change: 1 addition & 0 deletions src/demo/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const preview = {
locale: "en",
border_radius: "4.5",
mode: "daily",
disable_animations: "false",
},

/**
Expand Down
16 changes: 16 additions & 0 deletions tests/RenderTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,4 +134,20 @@ public function testSplitLines(): void
splitLines("19 de dez. de 2021 - 14 de mar.", 24, 0)
);
}

/**
* Test disable_animations parameter
*/
public function testDisableAnimations(): void
{
$this->testParams["disable_animations"] = "true";
// Check that the card is rendered as expected
$response = generateOutput($this->testStats, $this->testParams);
$render = $response["body"];
$this->assertStringNotContainsString("opacity: 0;", $render);
$this->assertStringContainsString("opacity: 1;", $render);
$this->assertStringContainsString("font-size: 28px;", $render);
$this->assertStringNotContainsString("animation:", $render);
$this->assertStringNotContainsString("<style>", $render);
}
}

0 comments on commit fa7ea77

Please sign in to comment.