Skip to content

Commit 1d5c408

Browse files
ghsiouxghsioux
committed
use W3S color names instead of hex
1 parent 62597b2 commit 1d5c408

File tree

7 files changed

+424
-144
lines changed

7 files changed

+424
-144
lines changed

‎assets/js/app/app.js

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1092,8 +1092,6 @@ var update_calendar_list = function update_calendar_list(maskbody) {
10921092
// Some values need to be generated
10931093
if (calendar.color === undefined || calendar.color === null) {
10941094
calendar.color = AgenDAVConf.default_calendar_color;
1095-
} else {
1096-
calendar.color = calendar.color.substr(0,7);
10971095
}
10981096
calendar.fg = fg_for_bg(calendar.color);
10991097

@@ -1352,13 +1350,7 @@ var reload_event_source = function reload_event_source(cal) {
13521350
* Returns a foreground color for a given background
13531351
*/
13541352
var fg_for_bg = function fg_for_bg(color) {
1355-
var colr = parseInt(color.substr(1), 16);
1356-
1357-
var is_dark = (colr >>> 16) + // R
1358-
((colr >>> 8) & 0x00ff) + // G
1359-
(colr & 0x0000ff) < 500; // B
1360-
1361-
return (is_dark) ? '#ffffff' : '#000000';
1353+
return colorMapping[color] || '#000000'; // Default to black if color not found
13621354
};
13631355

13641356

‎assets/js/app/colorMapping.js

Lines changed: 354 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,354 @@
1+
// Mapping for all the W3Schools color names
2+
// https://www.w3schools.com/colors/colors_names.asp
3+
4+
// This mapping associates each W3Schools color name with a corresponding text color
5+
// to ensure better readability. The text color is determined based on the relative
6+
// luminance of the background color. If the background color is dark, the text color
7+
// is set to white (#ffffff). If the background color is light, the text color is set
8+
// to black (#000000).
9+
// The algorithm for determining the relative luminance and the text color is provided
10+
// at the end of this file.
11+
window.colorMapping = {
12+
"aliceblue": "#000000",
13+
"antiquewhite": "#000000",
14+
"aqua": "#000000",
15+
"aquamarine": "#000000",
16+
"azure": "#000000",
17+
"beige": "#000000",
18+
"bisque": "#000000",
19+
"black": "#ffffff",
20+
"blanchedalmond": "#000000",
21+
"blue": "#ffffff",
22+
"blueviolet": "#ffffff",
23+
"brown": "#ffffff",
24+
"burlywood": "#000000",
25+
"cadetblue": "#000000",
26+
"chartreuse": "#000000",
27+
"chocolate": "#ffffff",
28+
"coral": "#000000",
29+
"cornflowerblue": "#000000",
30+
"cornsilk": "#000000",
31+
"crimson": "#ffffff",
32+
"cyan": "#000000",
33+
"darkblue": "#ffffff",
34+
"darkcyan": "#ffffff",
35+
"darkgoldenrod": "#ffffff",
36+
"darkgray": "#000000",
37+
"darkgreen": "#ffffff",
38+
"darkgrey": "#000000",
39+
"darkkhaki": "#000000",
40+
"darkmagenta": "#ffffff",
41+
"darkolivegreen": "#ffffff",
42+
"darkorange": "#000000",
43+
"darkorchid": "#ffffff",
44+
"darkred": "#ffffff",
45+
"darksalmon": "#000000",
46+
"darkseagreen": "#000000",
47+
"darkslateblue": "#ffffff",
48+
"darkslategray": "#ffffff",
49+
"darkslategrey": "#ffffff",
50+
"darkturquoise": "#000000",
51+
"darkviolet": "#ffffff",
52+
"deeppink": "#ffffff",
53+
"deepskyblue": "#000000",
54+
"dimgray": "#ffffff",
55+
"dimgrey": "#ffffff",
56+
"dodgerblue": "#ffffff",
57+
"firebrick": "#ffffff",
58+
"floralwhite": "#000000",
59+
"forestgreen": "#ffffff",
60+
"fuchsia": "#ffffff",
61+
"gainsboro": "#000000",
62+
"ghostwhite": "#000000",
63+
"gold": "#000000",
64+
"goldenrod": "#000000",
65+
"gray": "#ffffff",
66+
"green": "#ffffff",
67+
"greenyellow": "#000000",
68+
"grey": "#ffffff",
69+
"honeydew": "#000000",
70+
"hotpink": "#000000",
71+
"indianred": "#ffffff",
72+
"indigo": "#ffffff",
73+
"ivory": "#000000",
74+
"khaki": "#000000",
75+
"lavender": "#000000",
76+
"lavenderblush": "#000000",
77+
"lawngreen": "#000000",
78+
"lemonchiffon": "#000000",
79+
"lightblue": "#000000",
80+
"lightcoral": "#000000",
81+
"lightcyan": "#000000",
82+
"lightgoldenrodyellow": "#000000",
83+
"lightgray": "#000000",
84+
"lightgreen": "#000000",
85+
"lightgrey": "#000000",
86+
"lightpink": "#000000",
87+
"lightsalmon": "#000000",
88+
"lightseagreen": "#000000",
89+
"lightskyblue": "#000000",
90+
"lightslategray": "#ffffff",
91+
"lightslategrey": "#ffffff",
92+
"lightsteelblue": "#000000",
93+
"lightyellow": "#000000",
94+
"lime": "#000000",
95+
"limegreen": "#000000",
96+
"linen": "#000000",
97+
"magenta": "#ffffff",
98+
"maroon": "#ffffff",
99+
"mediumaquamarine": "#000000",
100+
"mediumblue": "#ffffff",
101+
"mediumorchid": "#ffffff",
102+
"mediumpurple": "#ffffff",
103+
"mediumseagreen": "#000000",
104+
"mediumslateblue": "#ffffff",
105+
"mediumspringgreen": "#000000",
106+
"mediumturquoise": "#000000",
107+
"mediumvioletred": "#ffffff",
108+
"midnightblue": "#ffffff",
109+
"mintcream": "#000000",
110+
"mistyrose": "#000000",
111+
"moccasin": "#000000",
112+
"navajowhite": "#000000",
113+
"navy": "#ffffff",
114+
"oldlace": "#000000",
115+
"olive": "#ffffff",
116+
"olivedrab": "#ffffff",
117+
"orange": "#000000",
118+
"orangered": "#ffffff",
119+
"orchid": "#000000",
120+
"palegoldenrod": "#000000",
121+
"palegreen": "#000000",
122+
"paleturquoise": "#000000",
123+
"palevioletred": "#ffffff",
124+
"papayawhip": "#000000",
125+
"peachpuff": "#000000",
126+
"peru": "#000000",
127+
"pink": "#000000",
128+
"plum": "#000000",
129+
"powderblue": "#000000",
130+
"purple": "#ffffff",
131+
"rebeccapurple": "#ffffff",
132+
"red": "#ffffff",
133+
"rosybrown": "#000000",
134+
"royalblue": "#ffffff",
135+
"saddlebrown": "#ffffff",
136+
"salmon": "#000000",
137+
"sandybrown": "#000000",
138+
"seagreen": "#ffffff",
139+
"seashell": "#000000",
140+
"sienna": "#ffffff",
141+
"silver": "#000000",
142+
"skyblue": "#000000",
143+
"slateblue": "#ffffff",
144+
"slategray": "#ffffff",
145+
"slategrey": "#ffffff",
146+
"snow": "#000000",
147+
"springgreen": "#000000",
148+
"steelblue": "#ffffff",
149+
"tan": "#000000",
150+
"teal": "#ffffff",
151+
"thistle": "#000000",
152+
"tomato": "#ffffff",
153+
"turquoise": "#000000",
154+
"violet": "#000000",
155+
"wheat": "#000000",
156+
"white": "#000000",
157+
"whitesmoke": "#000000",
158+
"yellow": "#000000",
159+
"yellowgreen": "#000000"
160+
};
161+
162+
/*
163+
164+
import re
165+
166+
def hex_to_rgb(hex_color):
167+
"""Convert hex color to an RGB tuple."""
168+
hex_color = hex_color.lstrip('#')
169+
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
170+
171+
def relative_luminance(r, g, b):
172+
"""Calculate the relative luminance of an RGB color."""
173+
return 0.2126 * r + 0.7152 * g + 0.0722 * b
174+
175+
def is_dark_color(hex_color, threshold=180):
176+
"""Determine if a color is dark based on its relative luminance."""
177+
r, g, b = hex_to_rgb(hex_color)
178+
luminance = relative_luminance(r, g, b)
179+
return luminance < threshold
180+
181+
def process_markdown_table(md_table):
182+
"""Process a markdown table of colors and generate a JS color mapping."""
183+
lines = md_table.strip().split('\n')
184+
color_dict = {}
185+
186+
for line in lines[2:]:
187+
match = re.match(r'\|\s*(\w+)\s*\|\s*(#[0-9A-Fa-f]{6})\s*\|', line)
188+
if match:
189+
name, hex_code = match.groups()
190+
color_dict[name.lower()] = "#ffffff" if is_dark_color(hex_code) else "#000000"
191+
192+
sorted_colors = dict(sorted(color_dict.items()))
193+
194+
js_output = "window.colorMapping = {\n"
195+
js_output += ",\n".join(f' "{name}": "{hex_code}"' for name, hex_code in sorted_colors.items())
196+
js_output += "\n};"
197+
198+
return js_output
199+
200+
# Example usage
201+
md_input = """
202+
| Color Name | Hex Code |
203+
|------------|----------|
204+
| aliceblue | #F0F8FF |
205+
| antiquewhite | #FAEBD7 |
206+
| aqua | #00FFFF |
207+
| aquamarine | #7FFFD4 |
208+
| azure | #F0FFFF |
209+
| beige | #F5F5DC |
210+
| bisque | #FFE4C4 |
211+
| black | #000000 |
212+
| blanchedalmond | #FFEBCD |
213+
| blue | #0000FF |
214+
| blueviolet | #8A2BE2 |
215+
| brown | #A52A2A |
216+
| burlywood | #DEB887 |
217+
| cadetblue | #5F9EA0 |
218+
| chartreuse | #7FFF00 |
219+
| chocolate | #D2691E |
220+
| coral | #FF7F50 |
221+
| cornflowerblue | #6495ED |
222+
| cornsilk | #FFF8DC |
223+
| crimson | #DC143C |
224+
| cyan | #00FFFF |
225+
| darkblue | #00008B |
226+
| darkcyan | #008B8B |
227+
| darkgoldenrod | #B8860B |
228+
| darkgray | #A9A9A9 |
229+
| darkgrey | #A9A9A9 |
230+
| darkgreen | #006400 |
231+
| darkkhaki | #BDB76B |
232+
| darkmagenta | #8B008B |
233+
| darkolivegreen | #556B2F |
234+
| darkorange | #FF8C00 |
235+
| darkorchid | #9932CC |
236+
| darkred | #8B0000 |
237+
| darksalmon | #E9967A |
238+
| darkseagreen | #8FBC8F |
239+
| darkslateblue | #483D8B |
240+
| darkslategray | #2F4F4F |
241+
| darkslategrey | #2F4F4F |
242+
| darkturquoise | #00CED1 |
243+
| darkviolet | #9400D3 |
244+
| deeppink | #FF1493 |
245+
| deepskyblue | #00BFFF |
246+
| dimgray | #696969 |
247+
| dimgrey | #696969 |
248+
| dodgerblue | #1E90FF |
249+
| firebrick | #B22222 |
250+
| floralwhite | #FFFAF0 |
251+
| forestgreen | #228B22 |
252+
| fuchsia | #FF00FF |
253+
| gainsboro | #DCDCDC |
254+
| ghostwhite | #F8F8FF |
255+
| gold | #FFD700 |
256+
| goldenrod | #DAA520 |
257+
| gray | #808080 |
258+
| grey | #808080 |
259+
| green | #008000 |
260+
| greenyellow | #ADFF2F |
261+
| honeydew | #F0FFF0 |
262+
| hotpink | #FF69B4 |
263+
| indianred | #CD5C5C |
264+
| indigo | #4B0082 |
265+
| ivory | #FFFFF0 |
266+
| khaki | #F0E68C |
267+
| lavender | #E6E6FA |
268+
| lavenderblush | #FFF0F5 |
269+
| lawngreen | #7CFC00 |
270+
| lemonchiffon | #FFFACD |
271+
| lightblue | #ADD8E6 |
272+
| lightcoral | #F08080 |
273+
| lightcyan | #E0FFFF |
274+
| lightgoldenrodyellow | #FAFAD2 |
275+
| lightgray | #D3D3D3 |
276+
| lightgrey | #D3D3D3 |
277+
| lightgreen | #90EE90 |
278+
| lightpink | #FFB6C1 |
279+
| lightsalmon | #FFA07A |
280+
| lightseagreen | #20B2AA |
281+
| lightskyblue | #87CEFA |
282+
| lightslategray | #778899 |
283+
| lightslategrey | #778899 |
284+
| lightsteelblue | #B0C4DE |
285+
| lightyellow | #FFFFE0 |
286+
| lime | #00FF00 |
287+
| limegreen | #32CD32 |
288+
| linen | #FAF0E6 |
289+
| magenta | #FF00FF |
290+
| maroon | #800000 |
291+
| mediumaquamarine | #66CDAA |
292+
| mediumblue | #0000CD |
293+
| mediumorchid | #BA55D3 |
294+
| mediumpurple | #9370DB |
295+
| mediumseagreen | #3CB371 |
296+
| mediumslateblue | #7B68EE |
297+
| mediumspringgreen | #00FA9A |
298+
| mediumturquoise | #48D1CC |
299+
| mediumvioletred | #C71585 |
300+
| midnightblue | #191970 |
301+
| mintcream | #F5FFFA |
302+
| mistyrose | #FFE4E1 |
303+
| moccasin | #FFE4B5 |
304+
| navajowhite | #FFDEAD |
305+
| navy | #000080 |
306+
| oldlace | #FDF5E6 |
307+
| olive | #808000 |
308+
| olivedrab | #6B8E23 |
309+
| orange | #FFA500 |
310+
| orangered | #FF4500 |
311+
| orchid | #DA70D6 |
312+
| palegoldenrod | #EEE8AA |
313+
| palegreen | #98FB98 |
314+
| paleturquoise | #AFEEEE |
315+
| palevioletred | #DB7093 |
316+
| papayawhip | #FFEFD5 |
317+
| peachpuff | #FFDAB9 |
318+
| peru | #CD853F |
319+
| pink | #FFC0CB |
320+
| plum | #DDA0DD |
321+
| powderblue | #B0E0E6 |
322+
| purple | #800080 |
323+
| rebeccapurple | #663399 |
324+
| red | #FF0000 |
325+
| rosybrown | #BC8F8F |
326+
| royalblue | #4169E1 |
327+
| saddlebrown | #8B4513 |
328+
| salmon | #FA8072 |
329+
| sandybrown | #F4A460 |
330+
| seagreen | #2E8B57 |
331+
| seashell | #FFF5EE |
332+
| sienna | #A0522D |
333+
| silver | #C0C0C0 |
334+
| skyblue | #87CEEB |
335+
| slateblue | #6A5ACD |
336+
| slategray | #708090 |
337+
| slategrey | #708090 |
338+
| snow | #FFFAFA |
339+
| springgreen | #00FF7F |
340+
| steelblue | #4682B4 |
341+
| tan | #D2B48C |
342+
| teal | #008080 |
343+
| thistle | #D8BFD8 |
344+
| tomato | #FF6347 |
345+
| turquoise | #40E0D0 |
346+
| violet | #EE82EE |
347+
| wheat | #F5DEB3 |
348+
| white | #FFFFFF |
349+
| whitesmoke | #F5F5F5 |
350+
| yellow | #FFFF00 |
351+
| yellowgreen | #9ACD32 |
352+
"""
353+
354+
*/

0 commit comments

Comments
 (0)