feat: Add button for exporting a theme from the demo site #176
Conversation
|
I closed #152 because I deleted the branch, lets work on this one. |
src/demo/js/script.js
Outdated
| let properties = [ | ||
| "border", | ||
| "stroke", | ||
| "ring", | ||
| "fire", | ||
| "currStreakNum", | ||
| "sideNums", | ||
| "currStreakLabel", | ||
| "sideLabels", | ||
| "dates", | ||
| "background", | ||
| ]; |
There was a problem hiding this comment.
Instead of listing them here, can just use a more specific query when creating the mapping below
Eg.
document.querySelectorAll(".advanced .param.jscolor")instead of
document.querySelectorAll(".param")
src/demo/js/script.js
Outdated
| let array = Array.from(document.querySelectorAll(".param")).reduce( | ||
| (acc, next) => { | ||
| let obj = { ...acc }; | ||
| let value = next.value; | ||
| if (value.indexOf("#") >= 0) { | ||
| // if the value is colour, remove the hash sign | ||
| value = value.replace(/#/g, ""); | ||
| if (value.length > 6) { | ||
| // if the value is in hexa and opacity is 1, remove FF | ||
| value = value.replace(/(F|f){2}$/, ""); | ||
| } | ||
| } | ||
| obj[next.id] = value; | ||
| return obj; | ||
| }, | ||
| {} | ||
| ); |
There was a problem hiding this comment.
This is same code from line 10, if it's used twice, it should be extracted to a function to use in both places.
Eg.
function objectFromElements(elements) {
// create a key value mapping of parameter values from all elements in a Node list
return Array.from(elements).reduce((acc, next) => {
let obj = { ...acc };
let value = next.value;
if (value.indexOf("#") >= 0) {
// if the value is colour, remove the hash sign
value = value.replace(/#/g, "");
if (value.length > 6) {
// if the value is in hexa and opacity is 1, remove FF
value = value.replace(/(F|f){2}$/, "");
}
}
obj[next.id] = value;
return obj;
}, {});
}// line 10
const params = objectFromElements(document.querySelectorAll(".param"));
// here
const params = objectFromElements(document.querySelectorAll(".advanced .param.jscolor"));
src/demo/js/script.js
Outdated
| var exportPhp = {}; | ||
|
|
||
| for (const [key, val] of Object.entries(array)) { | ||
| if (properties.includes(key) > 0) { | ||
| exportPhp[key] = val; | ||
| } | ||
| } |
There was a problem hiding this comment.
Using the above changes, this is unnecessary
src/demo/js/script.js
Outdated
| .map((key) => `\t"${key}" => "#${exportPhp[key]}",\n`) | ||
| .join("") + | ||
| "]"; | ||
| document.getElementById('test').value = output; |
There was a problem hiding this comment.
I assume the "test" and "button" text are temporary, but I'll mention anyway, they should be made more descriptive.
src/demo/index.php
Outdated
| <button class="btn" type="button" onclick='return exportPhp()'>button</button> | ||
| <textarea id="test"></textarea> |
There was a problem hiding this comment.
This can go inside the advanced panel and you can make the textarea hidden until the export button is actually clicked.
Co-authored-by: Jonah Lawrence <[email protected]>
…ttps://github.com/komen205/github-readme-streak-stats into Add-button-for-exporting-a-theme-from-the-demo-si
|
What a much simpler solution. 👍 💯 |
Co-authored-by: Jonah Lawrence <[email protected]>
Co-authored-by: Jonah Lawrence <[email protected]>
…ttps://github.com/komen205/github-readme-streak-stats into Add-button-for-exporting-a-theme-from-the-demo-si
|
Looks great! 🎉 Thanks again for your contributions! |
DenverCoder1
changed the title
Description
Hey! I created this working solution, please let me know if it's appropriated. This is not a final solution.
I created json_decode.php file so JS sends the properties json and php exports it to the text area.
It was the only working solution that I could make it work.
HTML and CSS is not final, please let me know where you want me to export it.
Let me know what changes I can make and if I'm going the right path.
Fixes #144
Type of change
How Has This Been Tested?
composer testChecklist:
Screenshots