Add getHexForColorName and getClosestCSS3ColorNameForHex to utils/color.js

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

package.json

@@ -52,8 +52,10 @@
 		"@nextcloud/vue": "^1.3.1",
 		"calendar-js": "git+https://github.com/georgehrke/calendar-js.git",
 		"cdav-library": "github:nextcloud/cdav-library",
+		"closest-css-color": "^0.1.1",
 		"color-convert": "^2.0.1",
 		"core-js": "^3.6.4",
+		"css-color-names": "^1.0.1",
 		"debounce": "^1.2.0",
 		"jstz": "^2.1.1",
 		"md5": "^2.2.1",

src/fullcalendar/eventSourceFunction.js

@@ -23,6 +23,8 @@ import { translate as t } from '@nextcloud/l10n'
 import {
 	hexToRGB,
 	isLight,
+	generateTextColorForHex,
+	getHexForColorName
 } from '../utils/color.js'
 import logger from '../utils/logger.js'
 
@@ -90,10 +92,13 @@ export function eventSourceFunction(calendarObjects, calendar, start, end, timez
 				},
 			}
 
-			// if (object.color) {
-			// fcEvent.backgroundColor = object.color
-			// fcEvent.textColor = generateTextColorForRGBString(object.color)
-			// }
+			if (calendarObject.color) {
+				const customColor = getHexForColorName(calendarObject.color)
+				if (customColor) {
+					fcEvent.backgroundColor = customColor
+					fcEvent.textColor = generateTextColorForHex(customColor)
+				}
+			}
 
 			fcEvents.push(fcEvent)
 		}

src/utils/color.js

@@ -21,6 +21,8 @@
  */
 import convert from 'color-convert'
 import { uidToColor } from './uidToColor.js'
+import css3Colors from 'css-color-names'
+import closestColor from 'closest-css-color'
 
 /**
  * Detect if a color is light or dark
@@ -104,3 +106,23 @@ export function detectColor(color) {
 	return false
 
 }
+
+/**
+ * Gets the HEX code for a css3 color name
+ *
+ * @param {string} colorName The name of the css3 color
+ * @returns {string|null} string of HEX if valid color, null if not
+ */
+export function getHexForColorName(colorName) {
+	return css3Colors[colorName] || null
+}
+
+/**
+ * Gets the closest css3 color name for a given HEX code
+ *
+ * @param {string} hex The HEX code to get a css3 color name for
+ * @returns {string}
+ */
+export function getClosestCSS3ColorNameForHex(hex) {
+	return closestColor(hex)
+}

tests/javascript/unit/utils/color.test.js

@@ -25,7 +25,9 @@ import {
 	hexToRGB,
 	isLight,
 	uidToHexColor,
-	detectColor
+	detectColor,
+	getHexForColorName,
+	getClosestCSS3ColorNameForHex
 } from '../../../../src/utils/color.js'
 
 describe('utils/color test suite', () => {
@@ -65,4 +67,16 @@ describe('utils/color test suite', () => {
 		expect(detectColor('ffff00AB')).toEqual('#ffff00')
 		expect(detectColor('undefined-color')).toEqual(false)
 	})
+
+	it('should get a hex code for a color-name', () => {
+		expect(getHexForColorName('chocolate')).toEqual('#d2691e')
+		expect(getHexForColorName('darkblue')).toEqual('#00008b')
+		expect(getHexForColorName('foo')).toEqual(null)
+	})
+
+	it('should get the closest css color name for a given hex code', () => {
+		expect(getClosestCSS3ColorNameForHex('#d2691e')).toEqual('chocolate')
+		expect(getClosestCSS3ColorNameForHex('#d2699f')).toEqual('palevioletred')
+		expect(getClosestCSS3ColorNameForHex('#ff0000')).toEqual('red')
+	})
 })