Skip to content
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

feat(demo): add png/json preview to demo site and refactor #457

Merged
merged 5 commits into from
Feb 18, 2023
Merged

feat(demo): add png/json preview to demo site and refactor #457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab450e5
feat: add png/json preview to demo site and refactor
DenverCoder1 Feb 16, 2023
5d47fb6
refactor variable placement
DenverCoder1 Feb 16, 2023
7b9a69d
hide json box from start
DenverCoder1 Feb 16, 2023
6695c68
Update script.js
DenverCoder1 Feb 18, 2023
7daaa4f
Update script.js
DenverCoder1 Feb 18, 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
8 changes: 6 additions & 2 deletions src/demo/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,10 +205,13 @@ input:focus:invalid {

.advanced .parameters {
margin-top: 8px;
}

.advanced .color-properties {
grid-template-columns: auto 1fr auto;
}

.advanced .parameters label:first-of-type {
.advanced .color-properties label:first-of-type {
font-weight: bold;
}

Expand Down Expand Up @@ -239,7 +242,8 @@ input:focus:invalid {
border-left: 4px solid var(--yellow);
}

.output .md {
.output .md,
.output .json {
background: var(--border);
border-radius: 6px;
padding: 12px 16px;
Expand Down
26 changes: 15 additions & 11 deletions src/demo/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,19 @@ function gtag() {
</script>
<title>GitHub Readme Streak Stats Demo</title>
<link href="https://css.gg/css?=|moon|sun" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/toggle-dark.css">
<link rel="stylesheet" href="./css/style.css?v=<?= filemtime("./css/style.css") ?>">
<link rel="stylesheet" href="./css/toggle-dark.css?v=<?= filemtime("./css/toggle-dark.css") ?>">

<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="mask-icon" href="icon.svg" color="#fb8c00">

<script type="text/javascript" src="./js/script.js" defer></script>
<script type="text/javascript" src="./js/accordion.js" defer></script>
<script type="text/javascript" src="./js/toggle-dark.js" defer></script>
<script type="text/javascript" src="./js/jscolor.min.js" defer></script>
<script type="text/javascript" src="./js/script.js?v=<?= filemtime("./js/script.js") ?>" defer></script>
<script type="text/javascript" src="./js/accordion.js?v=<?= filemtime("./js/accordion.js") ?>" defer></script>
<script type="text/javascript" src="./js/toggle-dark.js?v=<?= filemtime("./js/toggle-dark.js") ?>" defer></script>
<script type="text/javascript" src="./js/jscolor.min.js?v=<?= filemtime("./js/jscolor.min.js") ?>" defer></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>

Expand Down Expand Up @@ -137,15 +137,16 @@ 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>
<label for="type">Output Type</label>
<select class="param" id="type" name="type">
<option value="svg">SVG</option>
<option value="png">PNG</option>
<option value="json">JSON</option>
</select>

<details class="advanced">
<summary>⚙ Advanced Options</summary>
<div class="content parameters">
<div class="content color-properties parameters">
<label for="theme">Add Property</label>
<select id="properties" name="properties">
<?php foreach ($THEMES["default"] as $option => $color): ?>
Expand All @@ -167,6 +168,9 @@ function gtag() {
<div class="top">
<h2>Preview</h2>
<img alt="GitHub Readme Streak Stats" src="preview.php?user=" />
<div class="json" style="display: none;">
<pre></pre>
</div>
<p class="warning">
Note: The stats above are just examples and not from your GitHub profile.
</p>
Expand Down
36 changes: 24 additions & 12 deletions src/demo/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const preview = {
locale: "en",
border_radius: "4.5",
mode: "daily",
disable_animations: "false",
type: "svg",
},

/**
Expand All @@ -29,12 +29,23 @@ const preview = {
// generate links and markdown
const imageURL = `${window.location.origin}?${query}`;
const demoImageURL = `preview.php?${query}`;
const repoLink = "https://git.io/streak-stats";
const md = `[![GitHub Streak](${imageURL})](${repoLink})`;
// update image preview
document.querySelector(".output img").src = demoImageURL;
// update markdown
document.querySelector(".md code").innerText = md;
// update preview
if (params.type !== "json") {
const repoLink = "https://git.io/streak-stats";
const md = `[![GitHub Streak](${imageURL})](${repoLink})`;
document.querySelector(".output img").src = demoImageURL;
document.querySelector(".md code").innerText = md;
document.querySelector(".output img").style.display = "block";
document.querySelector(".output .json").style.display = "none";
} else {
document.querySelector(".output img").style.display = "none";
document.querySelector(".output .json").style.display = "block";
fetch(demoImageURL)
.then((response) => response.json())
.then((data) => (document.querySelector(".output .json pre").innerText = JSON.stringify(data, null, 2)))
.catch(console.error);
document.querySelector(".md code").innerText = imageURL;
}
// disable copy button if username is invalid
const copyButton = document.querySelector(".copy-button");
copyButton.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
Expand Down Expand Up @@ -87,12 +98,12 @@ const preview = {
minus.innerText = "−";
minus.setAttribute("data-property", propertyName);
// add elements
const parent = document.querySelector(".advanced .parameters");
const parent = document.querySelector(".advanced .color-properties");
parent.appendChild(label);
parent.appendChild(input);
parent.appendChild(minus);

//initialise jscolor on element
// initialise jscolor on element
jscolor.install(parent);

// check initial color value
Expand All @@ -108,7 +119,7 @@ const preview = {
* @param {string} property - the name of the property to remove
*/
removeProperty(property) {
const parent = document.querySelector(".advanced .parameters");
const parent = document.querySelector(".advanced .color-properties");
const selectElement = document.querySelector("#properties");
// remove all elements for given property
parent.querySelectorAll(`[data-property="${property}"]`).forEach((x) => parent.removeChild(x));
Expand All @@ -124,7 +135,7 @@ const preview = {
* Removes all properties from the advanced section
*/
removeAllProperties() {
const parent = document.querySelector(".advanced .parameters");
const parent = document.querySelector(".advanced .color-properties");
const activeProperties = parent.querySelectorAll("[data-property]");
// select active and unique property names
const propertyNames = Array.prototype.map
Expand Down Expand Up @@ -199,6 +210,8 @@ const preview = {
pickerChange(picker, input) {
// color was changed by picker - check it
this.checkColor(picker.toHEXAString(), input);
// update preview
this.update();
},
};

Expand Down Expand Up @@ -242,7 +255,6 @@ window.addEventListener(
// refresh preview on interactions with the page
const refresh = () => preview.update();
document.addEventListener("keyup", refresh, false);
document.addEventListener("click", refresh, false);
[...document.querySelectorAll("select:not(#properties)")].forEach((element) => {
element.addEventListener("change", refresh, false);
});
Expand Down