Skip to content

feat: Add disable_animations parameter #452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 15, 2023
Merged

feat: Add disable_animations parameter #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d4e158
feat: Add `disable_animations` parameter
DenverCoder1 Feb 14, 2023
ed5c747
refactor, remove unrelated changes
DenverCoder1 Feb 14, 2023
5b4379f
Merge branch 'main' into feat/disable-animations
DenverCoder1 Feb 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 21 additions & 20 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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);
}
}