Skip to content

Commit 11060ca

Browse files
estelleestelle
committed
prettier
1 parent 64f0647 commit 11060ca

File tree

1 file changed

+190
-165
lines changed

1 file changed

+190
-165
lines changed

‎modules/colors.html‎

Lines changed: 190 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -4,178 +4,203 @@
44
<meta charset="utf-8" />
55
<title>Color picker</title>
66
<style>
7-
dialog {
8-
border: 1px solid;
9-
border-radius: 5px;
10-
box-shadow: 3px 3px 10px rgb( 0 0 0 / 0.2);
11-
background-color: white;
12-
font-family: segue, arial, helvetica, sans-serif;
13-
margin-top: 5vh;
14-
}
15-
table {
16-
width: 100%;
17-
}
18-
td,
19-
th {
20-
padding: 3px 15px;
21-
}
22-
th {
23-
background-color: #ededed;
24-
}
25-
td {
26-
background-color: #dedede;
27-
font-family: monospace;
28-
}
29-
body {
30-
background: linear-gradient(-90deg, transparent 0 50%, white 50% 100%),
31-
conic-gradient(black 0 90deg, transparent 90deg 180deg, black 180deg 270deg, transparent 270deg 360deg);
32-
background-size: 100% 100%, 20px 20px;
33-
padding: 0;
34-
margin: 0;
35-
}
36-
div {
37-
width: 100vw;
38-
height: 100vh;
39-
}
7+
dialog {
8+
border: 1px solid;
9+
border-radius: 5px;
10+
box-shadow: 3px 3px 10px rgb(0 0 0 / 0.2);
11+
background-color: white;
12+
font-family: segue, arial, helvetica, sans-serif;
13+
margin-top: 5vh;
14+
}
15+
table {
16+
width: 100%;
17+
}
18+
td,
19+
th {
20+
padding: 3px 15px;
21+
}
22+
th {
23+
background-color: #ededed;
24+
}
25+
td {
26+
background-color: #dedede;
27+
font-family: monospace;
28+
}
29+
body {
30+
background: linear-gradient(-90deg, transparent 0 38%, 47%, rgb(0 0 0 / 0.7) 50%, white 50% 100%),
31+
conic-gradient(
32+
black 0 90deg,
33+
transparent 90deg 180deg,
34+
black 180deg 270deg,
35+
transparent 270deg 360deg
36+
);
37+
background-size: 100% 100%, 20px 20px;
38+
padding: 0;
39+
margin: 0;
40+
}
41+
div {
42+
width: 100vw;
43+
height: 100vh;
44+
}
4045
</style>
4146
</head>
42-
<body>
47+
<body>
4348
<div>
44-
<dialog>
49+
<dialog>
4550
<table>
46-
<caption>Current color values:</caption>
51+
<caption>
52+
Current color values:
53+
</caption>
4754
<tbody>
48-
<tr id="RGB"><th>RGB</th><td></td></tr>
49-
<tr id="HEX"><th>HEX</th><td></td></tr>
50-
<tr id="HSL"><th>HSL</th><td></td></tr>
51-
<tr id="HWB"><th>HWB</th><td></td></tr>
55+
<tr id="RGB">
56+
<th>RGB</th>
57+
<td></td>
58+
</tr>
59+
<tr id="HEX">
60+
<th>HEX</th>
61+
<td></td>
62+
</tr>
63+
<tr id="HSL">
64+
<th>HSL</th>
65+
<td></td>
66+
</tr>
67+
<tr id="HWB">
68+
<th>HWB</th>
69+
<td></td>
70+
</tr>
5271
</tbody>
5372
</table>
54-
55-
<p><label for="color">Select a color: </label><input type="color" id="color" value="#bada55"/></p>
56-
<p><label for="opacity">Select an opacity: </label><input type="range" id="opacity" value="1" min="0" max="1" step="0.1"/>
73+
74+
<p>
75+
<label for="color">Select a color: </label
76+
><input type="color" id="color" value="#bada55" />
77+
</p>
78+
<p>
79+
<label for="opacity">Select an opacity: </label
80+
><input
81+
type="range"
82+
id="opacity"
83+
value="1"
84+
min="0"
85+
max="1"
86+
step="0.1"
87+
/>
88+
</p>
5789
</dialog>
5890
</div>
59-
<script>
60-
const colorPicker = document.getElementById( "color" );
61-
const opacityPicker = document.getElementById( "opacity" );
62-
63-
document.addEventListener( "readystatechange", () => {
64-
document.querySelector( "dialog" ).show();
65-
createColor();
66-
});
67-
68-
colorPicker.addEventListener( "change", () => {
69-
createColor();
70-
});
71-
72-
opacityPicker.addEventListener( "change", () => {
73-
createColor();
74-
});
75-
76-
function createColor() {
77-
const currentColor = colorPicker.value;
78-
const currentOpacity = opacityPicker.value;
79-
setBackgroundColor( currentColor, currentOpacity );
80-
createHEX( currentColor, currentOpacity );
81-
createRGB( currentColor, currentOpacity );
82-
}
83-
84-
function createHEX ( color, opacity ) {
85-
const cell = document.querySelector( "#HEX td" );
86-
if ( opacity == 1 ) {
87-
cell.textContent = color;
88-
} else {
89-
cell.textContent = color + hexOpacity( opacity );
90-
}
91-
}
92-
93-
function createRGB ( color, opacity ) {
94-
const cell = document.querySelector( "#RGB td" );
95-
color = color.substring( 1, 6 );
96-
const hexArray = color.match( /.{1,2}/g );
97-
const R = parseInt( hexArray[0], 16 );
98-
const G = parseInt( hexArray[1], 16 );
99-
const B = parseInt( hexArray[2], 16 );
100-
101-
if( opacity == 1 ) {
102-
cell.textContent = `rgb(${R} ${G} ${B})`;
103-
} else {
104-
cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`;
105-
}
106-
createHSL( R, G, B, opacity );
107-
}
108-
109-
function createHSL ( r, g, b, opacity ) {
110-
const cell = document.querySelector( "#HSL td" );
111-
r = r / 255,
112-
g = g / 255,
113-
b = b / 255,
114-
cmin = Math.min( r, g, b ),
115-
cmax = Math.max( r, g, b ),
116-
delta = cmax - cmin,
117-
h = 0,
118-
s = 0,
119-
l = 0;
120-
121-
if ( delta == 0 )
122-
h = 0;
123-
else if ( cmax == r )
124-
h = (( g - b ) / delta ) % 6;
125-
else if ( cmax == g )
126-
h = ( b - r ) / delta + 2;
127-
else
128-
h = ( r - g ) / delta + 4;
129-
130-
h = Math.round( h * 60 );
131-
132-
if ( h < 0 )
133-
h += 360;
134-
135-
l = ( cmax + cmin ) / 2;
136-
s = delta == 0 ? 0 : delta / ( 1 - Math.abs( 2 * l - 1 ));
137-
s = +( s * 100 ).toFixed( 1 );
138-
l = +( l * 100 ).toFixed( 1 );
139-
140-
if( opacity == 1 ) {
141-
cell.textContent = `hsl(${h} ${s}% ${l}%)`;
142-
} else {
143-
cell.textContent = `hsl(${h} ${s}% ${l}% / ${opacity})`
144-
}
145-
createHWB( h, s, l, opacity );
146-
}
147-
148-
function createHWB ( h, s, l, opacity ) {
149-
const cell = document.querySelector( "#HWB td" );
150-
const hsv = s * ( l < 50 ? l : 100 - l ) / 100;
151-
const W = hsv === 0 ? 0 : 2 * hsv / ( l + hsv ) * 100;
152-
const B = l + hsv;
153-
if( opacity == 1 ) {
154-
cell.textContent = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}%)`;
155-
}
156-
else {
157-
cell.textContent = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}% / ${opacity})`;
158-
}
159-
}
160-
161-
function setBackgroundColor ( color, opacity ) {
162-
const body = document.querySelector( "div" );
163-
if( opacity != 1 ) {
164-
color = color + "" + hexOpacity( opacity );
165-
}
166-
body.style.backgroundColor = color;
167-
opacityPicker.style.accentColor = color;
168-
colorPicker.style.accentColor = color;
169-
}
170-
171-
function hexOpacity( opacity ) {
172-
if( opacity > 0 ){
173-
return Math.floor( opacity * 255 ).toString( 16 );
174-
}
175-
else {
176-
return "00";
177-
}
178-
}
179-
</script>
180-
</body>
91+
<script>
92+
const colorPicker = document.getElementById("color");
93+
const opacityPicker = document.getElementById("opacity");
94+
95+
document.addEventListener("readystatechange", () => {
96+
document.querySelector("dialog").show();
97+
createColor();
98+
});
99+
100+
colorPicker.addEventListener("change", () => {
101+
createColor();
102+
});
103+
104+
opacityPicker.addEventListener("change", () => {
105+
createColor();
106+
});
107+
108+
function createColor() {
109+
const currentColor = colorPicker.value;
110+
const currentOpacity = opacityPicker.value * 1;
111+
setBackgroundColor(currentColor, currentOpacity);
112+
createHEX(currentColor, currentOpacity);
113+
createRGB(currentColor, currentOpacity);
114+
}
115+
116+
function createHEX(color, opacity) {
117+
const cell = document.querySelector("#HEX td");
118+
if (opacity === 1) {
119+
cell.textContent = color;
120+
} else {
121+
cell.textContent = color + hexOpacity(opacity);
122+
}
123+
}
124+
125+
function createRGB(color, opacity) {
126+
const cell = document.querySelector("#RGB td");
127+
color = color.substring(1, 6);
128+
const hexArray = color.match(/.{1,2}/g);
129+
const R = parseInt(hexArray[0], 16);
130+
const G = parseInt(hexArray[1], 16);
131+
const B = parseInt(hexArray[2], 16);
132+
133+
if (opacity == 1) {
134+
cell.textContent = `rgb(${R} ${G} ${B})`;
135+
} else {
136+
cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`;
137+
}
138+
createHSL(R, G, B, opacity);
139+
}
140+
141+
function createHSL(r, g, b, opacity) {
142+
const cell = document.querySelector("#HSL td");
143+
(r = r / 255), (g = g / 255), (b = b / 255);
144+
const cmin = Math.min(r, g, b);
145+
const cmax = Math.max(r, g, b);
146+
const delta = cmax - cmin;
147+
let h = 0,
148+
s = 0,
149+
l = 0;
150+
151+
if (delta == 0) h = 0;
152+
else if (cmax == r) h = ((g - b) / delta) % 6;
153+
else if (cmax == g) h = (b - r) / delta + 2;
154+
else h = (r - g) / delta + 4;
155+
156+
h = Math.round(h * 60);
157+
158+
if (h < 0) h += 360;
159+
160+
l = (cmax + cmin) / 2;
161+
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
162+
s = +(s * 100).toFixed(1);
163+
l = +(l * 100).toFixed(1);
164+
165+
if (opacity == 1) {
166+
cell.textContent = `hsl(${h} ${s}% ${l}%)`;
167+
} else {
168+
cell.textContent = `hsl(${h} ${s}% ${l}% / ${opacity})`;
169+
}
170+
createHWB(h, s, l, opacity);
171+
}
172+
173+
function createHWB(h, s, l, opacity) {
174+
const cell = document.querySelector("#HWB td");
175+
const hsv = (s * (l < 50 ? l : 100 - l)) / 100;
176+
const W = hsv === 0 ? 0 : ((2 * hsv) / (l + hsv)) * 100;
177+
const B = l + hsv;
178+
if (opacity === 1) {
179+
cell.textContent = `hwb(${h} ${W.toFixed(1)}% ${B.toFixed(1)}%)`;
180+
} else {
181+
cell.textContent = `hwb(${h} ${W.toFixed(1)}% ${B.toFixed(
182+
1
183+
)}% / ${opacity})`;
184+
}
185+
}
186+
187+
function setBackgroundColor(color, opacity) {
188+
const body = document.querySelector("div");
189+
if (opacity !== 1) {
190+
color = color + "" + hexOpacity(opacity);
191+
}
192+
body.style.backgroundColor = color;
193+
opacityPicker.style.accentColor = color;
194+
colorPicker.style.accentColor = color;
195+
}
196+
197+
function hexOpacity(opacity) {
198+
if (opacity > 0) {
199+
return Math.floor(opacity * 255).toString(16);
200+
} else {
201+
return "00";
202+
}
203+
}
204+
</script>
205+
</body>
181206
</html>

0 commit comments

Comments
 (0)