Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Timemarker Color Control - By Group or Individual Markers

Abierto
  • ¿Algo no está bien?
#847 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, webpack
Área
frontend

Línea de trabajo

Empieza en TimeMarker.js, alrededor de la línea 219, y revisa cómo se renderiza el contenido del marcador; después, inspecciona la ruta de compilación DIST de NPM/Webpack. Compara el mapeo de grupos de Option 1 con los ejemplos JSON de group_color de Option 2; la implementación debe admitir el comportamiento documentado de control del color sin depender de cambios no documentados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Screenshot All Media Types

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

Lenguaje dominante
JavaScript
Estrellas
3.2k
Forks
645
Merge medio
3 min
PR fusionados (30 d)
2

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de NUKnightLab/TimelineJS3

Todos los issues de NUKnightLab/TimelineJS3

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.