improvements of the display of groups and events

.gitignore

@@ -17,4 +17,4 @@ build/website
 build
 *.log
 dist
-.vscode
+.vscode

.gitlab-ci.yml

@@ -0,0 +1,7 @@
+deploy_staging:
+    only:
+        - staging
+    script:
+        - yarn
+        - yarn run build
+        - rsync -a --del ./dist/* /app/timeline

package.json

@@ -70,4 +70,4 @@
             "url": "https://github.com/JoeGermuska"
         }
     ]
-}
+}

src/embed/popular_timelines.json

@@ -5986,4 +5986,4 @@
         "pageviews": "13,760(0.01%)",
         "uniques": "10,729(0.01%)"
     }
-]
+]

src/js/core/ConfigFactory.js

@@ -59,7 +59,6 @@ function extractEventFromCSVObject(orig_row) {
     Object.keys(orig_row).forEach(k => {
         row[k] = trim(orig_row[k]) // get rid of white-space and reduce all-blank cells to empty strings
     })
-
     var d = {
         media: {
             caption: row['Media Caption'] || '',
@@ -74,8 +73,32 @@ function extractEventFromCSVObject(orig_row) {
         display_date: row['Display Date'] || '', // only in v3 but no problem
         group: row['Group'] || row['Tag'] || '', // small diff between v1 and v3 sheets
         background: interpretBackground(row['Background']), // only in v3 but no problem
-        type: row['Type'] || ''
+
+        id: row['n°ID'] || '',
+        type: row['Type'] || '',
+        categories: row['Categorie'] || '',
+        markerColor: row['MarkerColor'] || '',
+        GroupOrder: row['GroupOrder'] || '',
+        GroupColor: row['GroupColor'] || '',
+        parentOf: row['parentOf'] || '',
+        childOf: row['childOf'] || '',
+        typeOfLink: row['TypeOfLink'] || '',
+        ZoomOnClick: row['ZoomOnClick'] || '',
+    }
+    if(d.parentOf != ''){
+        var parents = d.parentOf.split(/[,;]/);
+        d.parentOf = parents;
+
+
     }
+    if(d.childOf != ''){
+        var children = d.childOf.split(/[,;]/);
+        d.childOf = children;
+
+
+
+    }
+
 
     if (Object.keys(row).includes('Start Date') || Object.keys(row).includes('End Date')) {
         // V1 date handling
@@ -147,7 +170,7 @@ export async function readGoogleAsCSV(url, sheets_proxy) {
     let error = null;
 
     await fetchCSV({
-        url: `${sheets_proxy}${url}`,
+        url: `${url}`,
     }).then(d => {
         rows = d;
     }).catch(error_json => {

src/js/core/TimelineConfig.js

@@ -175,7 +175,6 @@ export class TimelineConfig {
 
         if (typeof(data.start_date) == 'undefined') {
             trace("Missing start date, skipping event")
-            console.log(data)
             return null
         }
 

src/js/date/TLDate.js

@@ -14,35 +14,35 @@ import { mergeData, trim, trace } from "../core/Util"
 
 export const SCALES = [
     // ( name, units_per_tick, flooring function )
-    ["millisecond", 1, function(d) {}],
-    [
-        "second",
-        1000,
-        function(d) {
-            d.setMilliseconds(0);
-        }
-    ],
-    [
-        "minute",
-        1000 * 60,
-        function(d) {
-            d.setSeconds(0);
-        }
-    ],
-    [
-        "hour",
-        1000 * 60 * 60,
-        function(d) {
-            d.setMinutes(0);
-        }
-    ],
-    [
-        "day",
-        1000 * 60 * 60 * 24,
-        function(d) {
-            d.setHours(0);
-        }
-    ],
+    // ["millisecond", 1, function(d) {}],
+    // [
+    //     "second",
+    //     1000,
+    //     function(d) {
+    //         d.setMilliseconds(0);
+    //     }
+    // ],
+    // [
+    //     "minute",
+    //     1000 * 60,
+    //     function(d) {
+    //         d.setSeconds(0);
+    //     }
+    // ],
+    // [
+    //     "hour",
+    //     1000 * 60 * 60,
+    //     function(d) {
+    //         d.setMinutes(0);
+    //     }
+    // ],
+    // [
+    //     "day",
+    //     1000 * 60 * 60 * 24,
+    //     function(d) {
+    //         d.setHours(0);
+    //     }
+    // ],
     [
         "month",
         1000 * 60 * 60 * 24 * 30,

src/js/dom/DOMUtil.js

@@ -22,4 +22,4 @@ export function removeClass(el, name) {
         }
         return w;
     }).replace(/^\s+/, '');
-}
+}

src/js/media/types/Vimeo.js

@@ -60,4 +60,4 @@ export default class Vimeo extends Media {
             trace(err);
         }
     }
-}
+}

src/js/timenav/AxisHelper.js

@@ -32,7 +32,6 @@ class AxisHelper {
     }
 
     _getTicks(timescale, option) {
-
         var factor_scale = timescale._scaled_padding * option.factor;
         var first_tick_time = timescale._earliest - factor_scale;
         var last_tick_time = timescale._latest + factor_scale;

src/js/timenav/TimeAxis.js

@@ -140,7 +140,6 @@ export class TimeAxis {
     _createTickElements(ts_ticks, tick_element, dateformat, ticks_to_skip) {
         tick_element.innerHTML = "";
         var skip_times = {};
-
         var yearZero = new Date(-1, 13, -30);
         skip_times[yearZero.getTime()] = true;
 
@@ -206,7 +205,9 @@ export class TimeAxis {
 
                 // Poition Ticks
                 tick.tick.style.left = timescale.getPosition(tick.date.getMillisecond()) + "px";
-                tick.tick_text.innerHTML = tick.display_date;
+                if (tick.tick_text.innerHTML != tick.display_date){
+                    tick.tick_text.innerHTML = tick.display_date;
+                }
 
                 // Handle density of ticks
                 if (fraction_of_array > 1) {
@@ -273,4 +274,4 @@ export class TimeAxis {
 
 }
 
-classMixin(TimeAxis, Events, DOMMixins, I18NMixins)
+classMixin(TimeAxis, Events, DOMMixins, I18NMixins)

src/js/timenav/TimeGroup.js

@@ -23,7 +23,8 @@ export class TimeGroup {
 		// Data
 		this.data = {
 			label: "",
-			rows: 1
+			rows: 1,
+			color: ""
 		};
 
 
@@ -38,6 +39,8 @@ export class TimeGroup {
 
 		this._initLayout();
 		this._initEvents();
+
+		this._el.container.style.backgroundColor = this.data.color;
 	}
 
 	/*	Public
@@ -83,10 +86,16 @@ export class TimeGroup {
 	_initLayout () {
 
 		// Create Layout
-		this._el.message = DOM.create("div", "tl-timegroup-message", this._el.container);
+		this._el.message = DOM.create("div", "tl-timegroup-message ", this._el.container);
+
+		//set background color and hover
+		this._el.message.style.backgroundColor = this.data.color;
+		this._el.message.style.filter = "brightness(98%)";
+		this._el.message.style.padding = "2px 2px 3px 2";
 		this._el.message.innerHTML = this.data.label;
 
 
+
 	}
 
 	_initEvents () {