Skip to content

fix(demo): Change submit button text to say Open Permalink #308

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 6 commits into from
Aug 11, 2022
Merged

fix(demo): Change submit button text to say Open Permalink #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f7c53f5
fix(demo): Change submit button text to say Open Permalink
DenverCoder1 Aug 11, 2022
5ce995e
fix: disable copy button when no username
DenverCoder1 Aug 11, 2022
9f3be09
undo formatting
DenverCoder1 Aug 11, 2022
84b339f
style: format document
DenverCoder1 Aug 11, 2022
e861c2e
refactor: fix warnings
DenverCoder1 Aug 11, 2022
e7b98a0
style: fix styling
DenverCoder1 Aug 11, 2022
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
17 changes: 9 additions & 8 deletions src/demo/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
// Get the keys of the first value in the translations array
$LOCALES = array_keys($TRANSLATIONS);

$darkmode = $_COOKIE["darkmode"] ?? null;

/**
* Convert a camelCase string to a skewer-case string
* @param string $str The camelCase string
Expand Down Expand Up @@ -58,7 +60,7 @@ function gtag() {
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>

<body <?php echo ($_COOKIE["darkmode"] ?? null) == "on" ? 'data-theme="dark"' : ""; ?>>
<body <?php echo $darkmode === "on" ? 'data-theme="dark"' : ""; ?>>
<h1>🔥 GitHub Readme Streak Stats</h1>

<!-- GitHub badges/links section -->
Expand All @@ -76,10 +78,10 @@ function gtag() {
<h2>Properties</h2>
<form class="parameters">
<label for="user">Username<span title="required">*</span></label>
<input class="param" type="text" id="user" name="user" placeholder="DenverCoder1" required pattern="^[A-Za-z\d-]{0,39}[A-Za-z\d]$" title="Up to 40 letters or hyphens but not ending with hyphen">
<input class="param" type="text" id="user" name="user" placeholder="DenverCoder1" pattern="^[A-Za-z\d-]{0,39}[A-Za-z\d]$" title="Up to 40 letters or hyphens but not ending with hyphen">

<label for="theme">Theme</label>
<select class="param" id="theme" name="theme" placeholder="default">
<select class="param" id="theme" name="theme">
<?php foreach ($THEMES as $theme => $options): ?>
<?php
$dataAttrs = "";
Expand All @@ -97,7 +99,7 @@ function gtag() {
</select>

<label for="hide_border">Hide Border</label>
<select class="param" id="hide_border" name="hide_border" placeholder="false">
<select class="param" id="hide_border" name="hide_border">
<option>false</option>
<option>true</option>
</select>
Expand Down Expand Up @@ -127,7 +129,7 @@ function gtag() {
<summary>⚙ Advanced Options</summary>
<div class="content parameters">
<label for="theme">Add Property</label>
<select id="properties" name="properties" placeholder="background">
<select id="properties" name="properties">
<?php foreach ($THEMES["default"] as $option => $color): ?>
<option><?php echo $option; ?></option>
<?php endforeach; ?>
Expand All @@ -136,10 +138,9 @@ function gtag() {
</div>
<button class="btn" type="button" onclick='return preview.exportPhp()'>Export to PHP</button>
<textarea id="exportedPhp" hidden></textarea>

</details>

<input class="btn" type="submit" value="Submit">
<input class="btn" type="submit" value="Open Permalink">
</form>
</div>

Expand All @@ -162,7 +163,7 @@ function gtag() {
</div>

<a href="javascript:toggleTheme()" class="darkmode" title="toggle dark mode">
<i class="<?php echo ($_COOKIE["darkmode"] ?? null) == "on" ? "gg-sun" : "gg-moon"; ?>"></i>
<i class="<?php echo $darkmode === "on" ? "gg-sun" : "gg-moon"; ?>"></i>
</a>
</body>

Expand Down
7 changes: 3 additions & 4 deletions src/demo/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,9 @@ const preview = {
// get parameter values from all .param elements
const params = this.objectFromElements(document.querySelectorAll(".param"));
// convert parameters to query string
const encode = encodeURIComponent;
const query = Object.keys(params)
.filter((key) => params[key] !== this.defaults[key])
.map((key) => encode(key) + "=" + encode(params[key]))
.map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
.join("&");
// generate links and markdown
const imageURL = `${window.location.origin}?${query}`;
Expand All @@ -35,7 +34,7 @@ const preview = {
document.querySelector(".md code").innerText = md;
// disable copy button if username is invalid
const copyButton = document.querySelector(".copy-button");
copyButton.disabled = Boolean(document.querySelectorAll("#user:invalid").length);
copyButton.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
},

/**
Expand Down Expand Up @@ -154,7 +153,7 @@ const preview = {
const params = { ...defaultParams, ...advancedParams };
// convert parameters to PHP code
const mappings = Object.keys(params)
.map((key) => ` "${key}" => "#${params[key]}",`)
.map((key) => ` "${key}" => "#${params[key]}",`)
.join("\n");
const output = `[\n${mappings}\n]`;
// set the textarea value to the output
Expand Down