Timemarker Color Control - By Group or Individual Markers

[Coral-66]

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 Change Time Line Color #842 may addressed by this workaround

[JoeGermuska]

Thanks for your interest in helping users of TimelineJS.

For probably obvious reasons, no solution based on option #1 could be added to our code base, as it is fundamentally specific to a single timeline's set of groups.

For option #2, I don't understand how it's different from just using the background color consistently, which wouldn't require any code change.

I could imagine a separate part of the JSON that was a group-label-to-background mapping, and then some code that said "when rending a slide, if the slide doesn't have its own background, but it has a group, look at the group mapping for a possible shared background." I wouldn't be enthusiastic about adding this to the codebase, because there are potentially many different style changes people might want to apply to groups beyond the background color...

[Coral-66]

Thanks for comment, prime reason for posting issue was to share some work I was undertaking.

Agree your point re option 1, It is specific to individual TimeLines.
My understanding is that TimeLinesJS is currently not being developed, if this were to change, perhaps a 'Lookup Table' pointed to by a new 'option parameter' would allow for an easier extension to the code rather than changing the Googlespeadsheet

With regard to option 2, my understanding is that 'background color' relates to the slide background not the marker.
The single line change does support 'group-label-to-MARKER-background-mapping' , having the same color for each group facilitates the type of customisation achieved by option 1 (as illustrated by the image in original post.)
Agree your point regarding styling issues which is why I added the caution in my original post (Further Comment point 1)