assets/customizer-colors.js - Code Metrics - Inspection of "Mykola/css variables" - flyntwp/flynt - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — master (#258)

unknown

created 2020-10-15 10:16 UTC

assets/customizer-colors.js D

↳ Parent: Project

Complexity

Total Complexity	58
Complexity/F	1.35

Size

Lines of Code	183
Function Count	43

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	58
eloc	102
mnd	15
bc	15
fnc	43
dl	0
loc	183
rs	4.5599
bpm	0.3488
cpm	1.3488
noi	7
c	0
b	0
f	0

2 Functions

Rating	Name	Duplication	Size	Complexity
D	customizer-colors.js ➔ lightenDarkenColor	0	32	12
A	customizer-colors.js ➔ hexToRgbA	0	11	3

How to fix Complexity

/* globals wp */
import $ from 'jquery'

function hexToRgbA (hex, alpha) {
  let c
  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
function isBig(a) {
    if (a > 5000) {
        return "yes";
    }
}

console.log(isBig(5001)); //returns yes
console.log(isBig(42)); //returns undefined
    c = hex.substring(1).split('')
    if (c.length === 3) {
      c = [c[0], c[0], c[1], c[1], c[2], c[2]]
    }
    c = '0x' + c.join('')
    return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha + ')'
  }
}

function lightenDarkenColor (hex, amount) {
  let usePound = false

  if (hex[0] === '#') {
    hex = hex.slice(1)
    usePound = true
  }

  let R = parseInt(hex.substring(0, 2), 16)
  let G = parseInt(hex.substring(2, 4), 16)
  let B = parseInt(hex.substring(4, 6), 16)

  const positivePercent = amount - (amount * 2)
  R = Math.round(R * (1 - positivePercent))
  G = Math.round(G * (1 - positivePercent))
  B = Math.round(B * (1 - positivePercent))

  if (R > 255) R = 255
if (a > 0)
    b = 42;
  else if (R < 0) R = 0
if (a > 0)
    b = 42;

  if (G > 255) G = 255
if (a > 0)
    b = 42;
  else if (G < 0) G = 0
if (a > 0)
    b = 42;

  if (B > 255) B = 255
if (a > 0)
    b = 42;
  else if (B < 0) B = 0
if (a > 0)
    b = 42;

  const RR = ((R.toString(16).length === 1) ? '0' + R.toString(16) : R.toString(16))
  const GG = ((G.toString(16).length === 1) ? '0' + G.toString(16) : G.toString(16))
  const BB = ((B.toString(16).length === 1) ? '0' + B.toString(16) : B.toString(16))

  return (usePound ? '#' : '') + RR + GG + BB
}

const alphaColorAmount = 0.4
const darkenColorAmount = -0.1 // -0.1 darken value approximately equals scss darken 5%

$(document).ready(function () {
  // Default / Theme Reset
  wp.customize('theme_colors_accent-default', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-accent-default', newval)
      $(':root.html').css('--theme-color-accent-alpha-default', hexToRgbA(newval, alphaColorAmount))
      $(':root.html').css('--theme-color-accent-hover-default', lightenDarkenColor(newval, darkenColorAmount))
    })
  })

  wp.customize('theme_colors_text-default', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-text', newval)
    })
  })

  wp.customize('theme_colors_headline-default', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-headline', newval)
    })
  })

  wp.customize('theme_colors_border-default', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-border', newval)
    })
  })

  wp.customize('theme_colors_background-default', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-background', newval)
    })
  })

  // Theme Light
  wp.customize('theme_colors_accent-light', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-accent-light', newval)
      $(':root.html').css('--theme-color-accent-alpha-light', newval ? hexToRgbA(newval, alphaColorAmount) : 'var(--theme-color-accent-alpha-default)')
      $(':root.html').css('--theme-color-accent-hover-light', newval ? lightenDarkenColor(newval, darkenColorAmount) : 'var(--theme-color-accent-hover-default)')
    })
  })

  wp.customize('theme_colors_text-light', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-text-light', newval)
    })
  })

  wp.customize('theme_colors_headline-light', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-headline-light', newval)
    })
  })

  wp.customize('theme_colors_border-light', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-border-light', newval)
    })
  })

  wp.customize('theme_colors_background-light', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-background-light', newval)
    })
  })

  // Theme Dark
  wp.customize('theme_colors_accent-dark', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-accent-dark', newval)
      $(':root.html').css('--theme-color-accent-alpha-dark', hexToRgbA(newval, alphaColorAmount))
      $(':root.html').css('--theme-color-accent-hover-dark', lightenDarkenColor(newval, darkenColorAmount))
    })
  })

  wp.customize('theme_colors_text-dark', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-text-dark', newval)
    })
  })

  wp.customize('theme_colors_headline-dark', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-headline-dark', newval)
    })
  })

  wp.customize('theme_colors_border-dark', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-border-dark', newval)
    })
  })

  wp.customize('theme_colors_background-dark', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-background-dark', newval)
    })
  })

  // Theme Hero
  wp.customize('theme_colors_accent-hero', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-accent-hero', newval)
      $(':root.html').css('--theme-color-accent-alpha-hero', hexToRgbA(newval, alphaColorAmount))
      $(':root.html').css('--theme-color-accent-hover-hero', lightenDarkenColor(newval, darkenColorAmount))
    })
  })

  wp.customize('theme_colors_text-hero', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-text-hero', newval)
    })
  })

  wp.customize('theme_colors_headline-hero', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-headline-hero', newval)
    })
  })

  wp.customize('theme_colors_border-hero', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-border-hero', newval)
    })
  })

  wp.customize('theme_colors_background-hero', function (value) {
    value.bind(function (newval) {
      $(':root.html').css('--theme-color-background-hero', newval)
    })
  })
})


1			/* globals wp */
2			import $ from 'jquery'
3
4			function hexToRgbA (hex, alpha) {
5			let c
6			if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
			0 ignored issues – show Complexity Best Practice introduced 2020-08-03 14:18 UTC by Report Bug Copy Issue Report There is no return statement if `^#([A-Fa-f0-9]{3}){1,2}$.test(hex)` is `false`. Are you sure this is correct? If so, consider adding `return;` explicitly. This check looks for functions where a `return` statement is found in some execution paths, but not in all. Consider this little piece of code function isBig(a) { if (a > 5000) { return "yes"; } } console.log(isBig(5001)); //returns yes console.log(isBig(42)); //returns undefined The function `isBig` will only return a specific value when its parameter is bigger than 5000. In any other case, it will implicitly return `undefined`. This behaviour may not be what you had intended. In any case, you can add a `return undefined` to the other execution path to make the return value explicit. Loading history...
7			c = hex.substring(1).split('')
8			if (c.length === 3) {
9			c = [c[0], c[0], c[1], c[1], c[2], c[2]]
10			}
11			c = '0x' + c.join('')
12			return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha + ')'
13			}
14			}
15
16			function lightenDarkenColor (hex, amount) {
17			let usePound = false
18
19			if (hex[0] === '#') {
20			hex = hex.slice(1)
21			usePound = true
22			}
23
24			let R = parseInt(hex.substring(0, 2), 16)
25			let G = parseInt(hex.substring(2, 4), 16)
26			let B = parseInt(hex.substring(4, 6), 16)
27
28			const positivePercent = amount - (amount * 2)
29			R = Math.round(R * (1 - positivePercent))
30			G = Math.round(G * (1 - positivePercent))
31			B = Math.round(B * (1 - positivePercent))
32
33			if (R > 255) R = 255
			0 ignored issues – show Coding Style Best Practice introduced 2020-09-14 09:04 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
34			else if (R < 0) R = 0
			0 ignored issues – show Coding Style Best Practice introduced 2020-09-14 09:04 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
35
36			if (G > 255) G = 255
			0 ignored issues – show Coding Style Best Practice introduced 2020-09-14 09:04 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
37			else if (G < 0) G = 0
			0 ignored issues – show Coding Style Best Practice introduced 2020-09-14 09:04 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
38
39			if (B > 255) B = 255
			0 ignored issues – show Coding Style Best Practice introduced 2020-09-14 09:04 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
40			else if (B < 0) B = 0
			0 ignored issues – show Coding Style Best Practice introduced 2020-09-14 09:04 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
41
42			const RR = ((R.toString(16).length === 1) ? '0' + R.toString(16) : R.toString(16))
43			const GG = ((G.toString(16).length === 1) ? '0' + G.toString(16) : G.toString(16))
44			const BB = ((B.toString(16).length === 1) ? '0' + B.toString(16) : B.toString(16))
45
46			return (usePound ? '#' : '') + RR + GG + BB
47			}
48
49			const alphaColorAmount = 0.4
50			const darkenColorAmount = -0.1 // -0.1 darken value approximately equals scss darken 5%
51
52			$(document).ready(function () {
53			// Default / Theme Reset
54			wp.customize('theme_colors_accent-default', function (value) {
55			value.bind(function (newval) {
56			$(':root.html').css('--theme-color-accent-default', newval)
57			$(':root.html').css('--theme-color-accent-alpha-default', hexToRgbA(newval, alphaColorAmount))
58			$(':root.html').css('--theme-color-accent-hover-default', lightenDarkenColor(newval, darkenColorAmount))
59			})
60			})
61
62			wp.customize('theme_colors_text-default', function (value) {
63			value.bind(function (newval) {
64			$(':root.html').css('--theme-color-text', newval)
65			})
66			})
67
68			wp.customize('theme_colors_headline-default', function (value) {
69			value.bind(function (newval) {
70			$(':root.html').css('--theme-color-headline', newval)
71			})
72			})
73
74			wp.customize('theme_colors_border-default', function (value) {
75			value.bind(function (newval) {
76			$(':root.html').css('--theme-color-border', newval)
77			})
78			})
79
80			wp.customize('theme_colors_background-default', function (value) {
81			value.bind(function (newval) {
82			$(':root.html').css('--theme-color-background', newval)
83			})
84			})
85
86			// Theme Light
87			wp.customize('theme_colors_accent-light', function (value) {
88			value.bind(function (newval) {
89			$(':root.html').css('--theme-color-accent-light', newval)
90			$(':root.html').css('--theme-color-accent-alpha-light', newval ? hexToRgbA(newval, alphaColorAmount) : 'var(--theme-color-accent-alpha-default)')
91			$(':root.html').css('--theme-color-accent-hover-light', newval ? lightenDarkenColor(newval, darkenColorAmount) : 'var(--theme-color-accent-hover-default)')
92			})
93			})
94
95			wp.customize('theme_colors_text-light', function (value) {
96			value.bind(function (newval) {
97			$(':root.html').css('--theme-color-text-light', newval)
98			})
99			})
100
101			wp.customize('theme_colors_headline-light', function (value) {
102			value.bind(function (newval) {
103			$(':root.html').css('--theme-color-headline-light', newval)
104			})
105			})
106
107			wp.customize('theme_colors_border-light', function (value) {
108			value.bind(function (newval) {
109			$(':root.html').css('--theme-color-border-light', newval)
110			})
111			})
112
113			wp.customize('theme_colors_background-light', function (value) {
114			value.bind(function (newval) {
115			$(':root.html').css('--theme-color-background-light', newval)
116			})
117			})
118
119			// Theme Dark
120			wp.customize('theme_colors_accent-dark', function (value) {
121			value.bind(function (newval) {
122			$(':root.html').css('--theme-color-accent-dark', newval)
123			$(':root.html').css('--theme-color-accent-alpha-dark', hexToRgbA(newval, alphaColorAmount))
124			$(':root.html').css('--theme-color-accent-hover-dark', lightenDarkenColor(newval, darkenColorAmount))
125			})
126			})
127
128			wp.customize('theme_colors_text-dark', function (value) {
129			value.bind(function (newval) {
130			$(':root.html').css('--theme-color-text-dark', newval)
131			})
132			})
133
134			wp.customize('theme_colors_headline-dark', function (value) {
135			value.bind(function (newval) {
136			$(':root.html').css('--theme-color-headline-dark', newval)
137			})
138			})
139
140			wp.customize('theme_colors_border-dark', function (value) {
141			value.bind(function (newval) {
142			$(':root.html').css('--theme-color-border-dark', newval)
143			})
144			})
145
146			wp.customize('theme_colors_background-dark', function (value) {
147			value.bind(function (newval) {
148			$(':root.html').css('--theme-color-background-dark', newval)
149			})
150			})
151
152			// Theme Hero
153			wp.customize('theme_colors_accent-hero', function (value) {
154			value.bind(function (newval) {
155			$(':root.html').css('--theme-color-accent-hero', newval)
156			$(':root.html').css('--theme-color-accent-alpha-hero', hexToRgbA(newval, alphaColorAmount))
157			$(':root.html').css('--theme-color-accent-hover-hero', lightenDarkenColor(newval, darkenColorAmount))
158			})
159			})
160
161			wp.customize('theme_colors_text-hero', function (value) {
162			value.bind(function (newval) {
163			$(':root.html').css('--theme-color-text-hero', newval)
164			})
165			})
166
167			wp.customize('theme_colors_headline-hero', function (value) {
168			value.bind(function (newval) {
169			$(':root.html').css('--theme-color-headline-hero', newval)
170			})
171			})
172
173			wp.customize('theme_colors_border-hero', function (value) {
174			value.bind(function (newval) {
175			$(':root.html').css('--theme-color-border-hero', newval)
176			})
177			})
178
179			wp.customize('theme_colors_background-hero', function (value) {
180			value.bind(function (newval) {
181			$(':root.html').css('--theme-color-background-hero', newval)
182			})
183			})
184			})
185

flyntwp / flynt

Pull Request — master (#258)

assets/customizer-colors.js D

Complexity

Size

Duplication

Importance

2 Functions

How to fix Complexity

Complexity

Duplication Side-by-Side

Filter issues like