Skip to content

Commit 67263b2

Browse files
DenverCoder1DenverCoder1
authored
refactor: fix several code quality recommendations (#249)
1 parent 299385f commit 67263b2

File tree

6 files changed

+186
-129
lines changed

6 files changed

+186
-129
lines changed

‎.deepsource.toml

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
version = 1
22

3+
test_patterns = [
4+
"tests/**"
5+
]
6+
7+
exclude_patterns = [
8+
"vendor/**",
9+
"*.min.js"
10+
]
11+
312
[[analyzers]]
413
name = "php"
514
enabled = true
615

7-
[[analyzers]]
8-
name = "shell"
9-
enabled = true
16+
[analyzers.meta]
17+
skip_doc_coverage = ["class", "magic"]
1018

1119
[[analyzers]]
1220
name = "javascript"
13-
enabled = true
21+
enabled = true

‎src/demo/index.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ function gtag() {
105105
</select>
106106
<button class="plus btn" onclick="return preview.addProperty();">+</button>
107107
</div>
108-
<button class="btn" type="button" onclick='return exportPhp()'>Export to PHP</button>
108+
<button class="btn" type="button" onclick='return preview.exportPhp()'>Export to PHP</button>
109109
<textarea id="exportedPhp" hidden></textarea>
110110

111111
</details>

‎src/demo/js/accordion.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ class Accordion {
1313
this.isClosing = false;
1414
// Store if the element is expanding
1515
this.isExpanding = false;
16+
}
17+
18+
init() {
1619
// Detect user clicks on the summary element
1720
this.summary.addEventListener("click", (e) => this.onClick(e));
1821
}
@@ -75,9 +78,7 @@ class Accordion {
7578
// Get the current fixed height of the element
7679
const startHeight = `${this.el.offsetHeight}px`;
7780
// Calculate the open height of the element (summary height + content height)
78-
const endHeight = `${
79-
this.summary.offsetHeight + this.content.offsetHeight
80-
}px`;
81+
const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
8182
// If there is already an animation running
8283
if (this.animation) {
8384
// Cancel the current animation
@@ -114,5 +115,6 @@ class Accordion {
114115
}
115116

116117
document.querySelectorAll("details").forEach((el) => {
117-
new Accordion(el);
118+
const accordion = new Accordion(el);
119+
accordion.init();
118120
});

‎src/demo/js/script.js

Lines changed: 116 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
1-
let preview = {
2-
// default values
1+
/*global jscolor*/
2+
/*eslint no-undef: "error"*/
3+
4+
const preview = {
5+
/**
6+
* Default values - if set to these values, the params do not need to appear in the query string
7+
*/
38
defaults: {
49
theme: "default",
510
hide_border: "false",
611
date_format: "",
712
locale: "en",
813
},
9-
// update the preview
10-
update: function () {
11-
// get parameter values from all .param elements
12-
13-
const params = objectFromElements(document.querySelectorAll(".param"))
1414

15+
/**
16+
* Update the preview with the current parameters
17+
*/
18+
update() {
19+
// get parameter values from all .param elements
20+
const params = this.objectFromElements(document.querySelectorAll(".param"));
1521
// convert parameters to query string
1622
const encode = encodeURIComponent;
1723
const query = Object.keys(params)
@@ -29,56 +35,52 @@ let preview = {
2935
document.querySelector(".md code").innerText = md;
3036
// disable copy button if username is invalid
3137
const copyButton = document.querySelector(".copy-button");
32-
copyButton.disabled = !!document.querySelectorAll("#user:invalid").length;
38+
copyButton.disabled = Boolean(document.querySelectorAll("#user:invalid").length);
3339
},
34-
addProperty: function (property, value = "#DD2727FF") {
40+
41+
/**
42+
* Add a property in the advanced section
43+
* @param {string} property - the name of the property, selected element is used if not provided
44+
* @param {string} value - the value to set the property to
45+
* @returns {false} false to prevent the default action
46+
*/
47+
addProperty(property, value = "#DD2727FF") {
3548
const selectElement = document.querySelector("#properties");
3649
// if no property passed, get the currently selected property
37-
if (!property) {
38-
property = selectElement.value;
39-
}
50+
const propertyName = property || selectElement.value;
4051
if (!selectElement.disabled) {
4152
// disable option in menu
42-
Array.prototype.find.call(
43-
selectElement.options,
44-
(o) => o.value == property
45-
).disabled = true;
53+
Array.prototype.find.call(selectElement.options, (o) => o.value === propertyName).disabled = true;
4654
// select first unselected option
47-
const firstAvailable = Array.prototype.find.call(
48-
selectElement.options,
49-
(o) => !o.disabled
50-
);
55+
const firstAvailable = Array.prototype.find.call(selectElement.options, (o) => !o.disabled);
5156
if (firstAvailable) {
5257
firstAvailable.selected = true;
5358
} else {
5459
selectElement.disabled = true;
5560
}
5661
// label
5762
const label = document.createElement("label");
58-
label.innerText = property;
59-
label.setAttribute("data-property", property);
63+
label.innerText = propertyName;
64+
label.setAttribute("data-property", propertyName);
6065
// color picker
6166
const jscolorConfig = {
6267
format: "hexa",
63-
onChange: 'pickerChange(this, "' + property + '")',
64-
onInput: 'pickerChange(this, "' + property + '")',
68+
onChange: `preview.pickerChange(this, '${propertyName}')`,
69+
onInput: `preview.pickerChange(this, '${propertyName}')`,
6570
};
6671
const input = document.createElement("input");
6772
input.className = "param jscolor";
68-
input.id = property;
69-
input.name = property;
70-
input.setAttribute("data-property", property);
73+
input.id = propertyName;
74+
input.name = propertyName;
75+
input.setAttribute("data-property", propertyName);
7176
input.setAttribute("data-jscolor", JSON.stringify(jscolorConfig));
7277
input.value = value;
7378
// removal button
7479
const minus = document.createElement("button");
7580
minus.className = "minus btn";
76-
minus.setAttribute(
77-
"onclick",
78-
"return preview.removeProperty(this.getAttribute('data-property'));"
79-
);
81+
minus.setAttribute("onclick", "return preview.removeProperty(this.getAttribute('data-property'));");
8082
minus.innerText = "−";
81-
minus.setAttribute("data-property", property);
83+
minus.setAttribute("data-property", propertyName);
8284
// add elements
8385
const parent = document.querySelector(".advanced .parameters");
8486
parent.appendChild(label);
@@ -89,35 +91,99 @@ let preview = {
8991
jscolor.install(parent);
9092

9193
// check initial color value
92-
checkColor(value, property);
94+
this.checkColor(value, propertyName);
9395

9496
// update and exit
9597
this.update();
9698
}
9799
return false;
98100
},
99-
removeProperty: function (property) {
101+
102+
/**
103+
* Remove a property from the advanced section
104+
* @param {string} property - the name of the property to remove
105+
* @returns {false} false to prevent the default action
106+
*/
107+
removeProperty(property) {
100108
const parent = document.querySelector(".advanced .parameters");
101109
const selectElement = document.querySelector("#properties");
102110
// remove all elements for given property
103-
parent
104-
.querySelectorAll(`[data-property="${property}"]`)
105-
.forEach((x) => parent.removeChild(x));
111+
parent.querySelectorAll(`[data-property="${property}"]`).forEach((x) => parent.removeChild(x));
106112
// enable option in menu
107-
const option = Array.prototype.find.call(
108-
selectElement.options,
109-
(o) => o.value == property
110-
);
113+
const option = Array.prototype.find.call(selectElement.options, (o) => o.value === property);
111114
selectElement.disabled = false;
112115
option.disabled = false;
113116
// update and exit
114117
this.update();
115118
return false;
116119
},
120+
121+
/**
122+
* Create a key-value mapping of ids to values from all elements in a Node list
123+
* @param {NodeList} elements - the elements to get the values from
124+
* @returns {Object} the key-value mapping
125+
*/
126+
objectFromElements(elements) {
127+
return Array.from(elements).reduce((acc, next) => {
128+
const obj = { ...acc };
129+
let value = next.value;
130+
if (value.indexOf("#") >= 0) {
131+
// if the value is colour, remove the hash sign
132+
value = value.replace(/#/g, "");
133+
if (value.length > 6) {
134+
// if the value is in hexa and opacity is 1, remove FF
135+
value = value.replace(/[Ff]{2}$/, "");
136+
}
137+
}
138+
obj[next.id] = value;
139+
return obj;
140+
}, {});
141+
},
142+
143+
/**
144+
* Export the advanced parameters to PHP code for creating a new theme
145+
*/
146+
exportPhp() {
147+
const params = this.objectFromElements(document.querySelectorAll(".advanced .param.jscolor"));
148+
const mappings = Object.keys(params)
149+
.map((key) => ` "${key}" => "#${params[key]}",`)
150+
.join("\n");
151+
const output = `[\n${mappings}\n]`;
152+
153+
const textarea = document.getElementById("exportedPhp");
154+
textarea.value = output;
155+
textarea.hidden = false;
156+
},
157+
158+
/**
159+
* Remove "FF" from a hex color if opacity is 1
160+
* @param {string} color - the hex color
161+
* @param {string} input - the property name, or id of the element to update
162+
*/
163+
checkColor(color, input) {
164+
if (color.length === 9 && color.slice(-2) === "FF") {
165+
// if color has hex alpha value -> remove it
166+
document.getElementById(input).value = color.slice(0, -2);
167+
}
168+
},
169+
170+
/**
171+
* Check a color when the picker changes
172+
* @param {Object} picker - the JSColor picker object
173+
* @param {string} input - the property name, or id of the element to update
174+
*/
175+
pickerChange(picker, input) {
176+
// color was changed by picker - check it
177+
this.checkColor(picker.toHEXAString(), input);
178+
},
117179
};
118180

119-
let clipboard = {
120-
copy: function (el) {
181+
const clipboard = {
182+
/**
183+
* Copy the content of an element to the clipboard
184+
* @param {Element} el - the element to copy
185+
*/
186+
copy(el) {
121187
// create input box to copy from
122188
const input = document.createElement("input");
123189
input.value = document.querySelector(".md code").innerText;
@@ -134,8 +200,12 @@ let clipboard = {
134200
},
135201
};
136202

137-
let tooltip = {
138-
reset: function (el) {
203+
const tooltip = {
204+
/**
205+
* Reset the tooltip text
206+
* @param {Element} el - the element to reset the tooltip for
207+
*/
208+
reset(el) {
139209
// remove tooltip text
140210
el.removeAttribute("title");
141211
},
@@ -151,7 +221,7 @@ window.addEventListener(
151221
() => {
152222
// set input boxes to match URL parameters
153223
new URLSearchParams(window.location.search).forEach((val, key) => {
154-
let paramInput = document.querySelector(`#${key}`);
224+
const paramInput = document.querySelector(`#${key}`);
155225
if (paramInput) {
156226
// set parameter value
157227
paramInput.value = val;
@@ -166,46 +236,3 @@ window.addEventListener(
166236
},
167237
false
168238
);
169-
function objectFromElements(elements)
170-
{
171-
// create a key value mapping of parameter values from all elements in a Node list
172-
return Array.from(elements).reduce((acc, next) => {
173-
let obj = { ...acc };
174-
let value = next.value;
175-
if (value.indexOf("#") >= 0) {
176-
// if the value is colour, remove the hash sign
177-
value = value.replace(/#/g, "");
178-
if (value.length > 6) {
179-
// if the value is in hexa and opacity is 1, remove FF
180-
value = value.replace(/(F|f){2}$/, "");
181-
}
182-
}
183-
obj[next.id] = value;
184-
return obj;
185-
}, {});
186-
}
187-
function exportPhp() {
188-
let params = objectFromElements(document.querySelectorAll(".advanced .param.jscolor"))
189-
const output =
190-
"[\n" +
191-
Object.keys(params)
192-
.map((key) => ` "${key}" => "#${params[key]}",\n`)
193-
.join("") +
194-
"]";
195-
196-
let textarea = document.getElementById('exportedPhp');
197-
textarea.value = output;
198-
textarea.hidden = false;
199-
}
200-
201-
function checkColor(color, input) {
202-
if (color.length == 9 && color.slice(-2) == "FF") {
203-
// if color has hex alpha value -> remove it
204-
document.getElementById(input).value = color.slice(0, -2);
205-
}
206-
}
207-
208-
function pickerChange(picker, input) {
209-
// color was changed by picker - check it
210-
checkColor(picker.toHEXAString(), input);
211-
}

0 commit comments

Comments
 (0)