Skip to content

feat: Add button for exporting a theme from the demo site #176

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 9 commits into from
Oct 8, 2021
Merged

feat: Add button for exporting a theme from the demo site #176

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
61bf22b
JS array to PHP, output in console
komen205 Oct 5, 2021
f184892
Update src/demo/js/script.js
komen205 Oct 7, 2021
2b1f03b
Improvements
komen205 Oct 7, 2021
fd1c7b6
Merge branch 'Add-button-for-exporting-a-theme-from-the-demo-si' of h…
komen205 Oct 7, 2021
337294e
Update src/demo/js/script.js
komen205 Oct 8, 2021
f225940
Update src/demo/js/script.js
komen205 Oct 8, 2021
11eed5d
Css textarea
komen205 Oct 8, 2021
cd7440d
Merge branch 'Add-button-for-exporting-a-theme-from-the-demo-si' of h…
komen205 Oct 8, 2021
2b448ad
Remove display:block
DenverCoder1 Oct 8, 2021
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
2 changes: 2 additions & 0 deletions src/demo/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@ function gtag() { dataLayer.push(arguments); }
<button class="plus btn" onclick="return preview.addProperty();">+</button>
</div>
</details>
<button class="btn" type="button" onclick='return exportPhp()'>button</button>
<textarea id="test"></textarea>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can go inside the advanced panel and you can make the textarea hidden until the export button is actually clicked.


<input class="btn" type="submit" value="Submit">
</form>
Expand Down
57 changes: 52 additions & 5 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 @@ let preview = {
let obj = { ...acc };
let value = next.value;

if (value.indexOf('#') >= 0) {
if (value.indexOf("#") >= 0) {
// if the value is colour, remove the hash sign
value = value.replace(/#/g, "");
if (value.length > 6) {
Expand Down Expand Up @@ -72,9 +72,9 @@ let preview = {
label.setAttribute("data-property", property);
// color picker
const jscolorConfig = {
format: 'hexa',
onChange: 'pickerChange(this, "'+property+'")',
onInput: 'pickerChange(this, "'+property+'")'
format: "hexa",
onChange: 'pickerChange(this, "' + property + '")',
onInput: 'pickerChange(this, "' + property + '")',
};
const input = document.createElement("input");
input.className = "param jscolor";
Expand Down Expand Up @@ -179,8 +179,55 @@ window.addEventListener(
},
false
);
function exportPhp() {
let properties = [
"border",
"stroke",
"ring",
"fire",
"currStreakNum",
"sideNums",
"currStreakLabel",
"sideLabels",
"dates",
"background",
];
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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")

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;
},
{}
);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"));

var exportPhp = {};

for (const [key, val] of Object.entries(array)) {
if (properties.includes(key) > 0) {
exportPhp[key] = val;
}
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the above changes, this is unnecessary


const output =
"[\n" +
Object.keys(exportPhp)
.map((key) => `\t"${key}" => "#${exportPhp[key]}",\n`)
.join("") +
"]";
document.getElementById('test').value = output;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume the "test" and "button" text are temporary, but I'll mention anyway, they should be made more descriptive.

console.log(output);
}

function checkColor(color, input){
function checkColor(color, input) {
if (color.length == 9 && color.slice(-2) == "FF") {
// if color has hex alpha value -> remove it
document.getElementById(input).value = color.slice(0, -2);
Expand Down