Timemarker Color Control - By Group or Individual Markers

A subject covered by various posts including myself in post #798. (Worked for release 3.8.21)
Wishing to bring my Timelines up to the current level (3.9.3) proved a challenge using CSS / Less.js / Mixin.less , paritcularly as I have no experience of Less.js/Mixins.less. Going back to basics provided a solution which can be used to customise the marker color for groups and/or individual markers.

Two options are described below, Option 1 requires no change to Timelines produced using the Google Spreadsheet option OR the JSON file option. Option 2 is for JSON file based TimeLines, it has a single line of code and requires only 1 build of Timeline.js

Both options require the use of NPM/Webpack to implement the code (Use 'DIST' option in NPM Scripts)
The code is presented below and in inserted in TimeMarker.js after line 219 (see copy below)
The basic principle of the change uses HTML/CSS inline styling to implement the color required

OPTION 1 - No change to existing Googlesheets or JSON file based TimeLines

The code required is that below the comment.
The code requires to be customised for group names (Video, Audio etc. in example.)
Similarly the color for each group should be entered, either 'named color' or hex code or rgba style
The timemarker default color is specified as 'yellow' in example, this is applied to markers not incuded in a group. (or all markers if a group is incorrectly entered (Case sensitive)

` /* Group Colour workaround
/* =======================*/

/* Basic Code = works for Google Sheets & JSON file as documented */
/* Requires re-build of code for each change */

var caseGroup = this.data.group
this._el.content_container.style.background = 'yellow'
switch(caseGroup){
	case 'Video':
		this._el.content_container.style.background = 'blue'
	break
	case 'Audio' :
		this._el.content_container.style.background = 'green'
	break
	case 'HTML' :
		this._el.content_container.style.background = 'red'
	break
	case 'Image' :
		this._el.content_container.style.background = '#ab25e9'
	break
}`

Option 2 - JSON file based TimeLines

The single line of code is added after line 219 (as above) and the Timeline.js is built using NPM/Webpack (Use 'DIST' option in NPM Scripts). All further customisation is within the JSON file, an entry is created with the key name 'group_color' and is required after each key name 'group' (See Example below)

this._el.content_container.style.background = this.data.group_color

JSON file extract

"display_date": "9th January 2024",
"text": {
"headline": "Update NPM Versions etc.",
"text": "Update all node versions (ncu -u (etc)) and correct Webpack Configuration files"
},
"group": "Group02",
"group_color": "purple"

The 'group_color' can be entered as a 'named color', hex code or rgba style.
NOTE: It is possible to style each marker differently, the software you use for JSON file creation may offer some support with this (Copy/Paste etc.) (I use MS-EXCEL (2010) for TimeLine Development and JSON file creation)

The image below was produced using Option 1

Further Comment

1. Using the above 'CSS Inline Styling' has precedence over styling within the Knightlab Package and can result in undesired results, for example marker text color being similar to marker colour ie. unreadable. (Text could be 'Inline Styled)

2. Only some basic technical knowledge is required to implement/use the code. Further development to integrate the code as an optional upgrade to the Knightlab Package in beyond my expertise.

3. The issue/request for help at #842 may addressed by this workaround

Start in TimeMarker.js around line 219 and review how marker content is rendered, then inspect the NPM/Webpack DIST build path. Compare the Option 1 group mapping and Option 2 JSON group_color examples; completion should support the documented color-control behavior without relying on undocumented changes.