Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Timemarker Color Control - By Group or Individual Markers

オープン
  • 何か問題がありますか？
#847 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript, webpack
領域
frontend

調査の方向性

TimeMarker.js の 219 行目付近から始めて、marker の内容がどのようにレンダリングされるかを確認し、その後 NPM/Webpack DIST ビルドパスを調べます。Option 1 のグループマッピングと Option 2 の JSON による group_color の例を比較します。実装では、文書化されていない変更に依存せず、文書化された色制御の動作をサポートする必要があります。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
JavaScript
スター
3.2k
フォーク
645
平均マージ
3分
マージ済み PR（30日）
2

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

NUKnightLab/TimelineJS3 のほかの issue

NUKnightLab/TimelineJS3 の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。