diff --git a/.gitignore b/.gitignore
index daf66790..22089616 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,4 +17,4 @@ build/website
build
*.log
dist
-.vscode
+.vscode
\ No newline at end of file
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 00000000..1119b374
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,7 @@
+deploy_staging:
+ only:
+ - staging
+ script:
+ - yarn
+ - yarn run build
+ - rsync -a --del ./dist/* /app/timeline
diff --git a/docs/Timeline_Technical_Documentation_2022.pdf b/docs/Timeline_Technical_Documentation_2022.pdf
new file mode 100644
index 00000000..becc7c1e
Binary files /dev/null and b/docs/Timeline_Technical_Documentation_2022.pdf differ
diff --git a/docs/Timeline_User_Documentation_2022.pdf b/docs/Timeline_User_Documentation_2022.pdf
new file mode 100644
index 00000000..3bae73a5
Binary files /dev/null and b/docs/Timeline_User_Documentation_2022.pdf differ
diff --git a/package-lock.json b/package-lock.json
index 5d7a773f..7445a458 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@knight-lab/timelinejs",
- "version": "3.8.21",
+ "version": "3.9.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@knight-lab/timelinejs",
- "version": "3.8.21",
+ "version": "3.9.0",
"license": "MPL-2.0",
"dependencies": {
"dompurify": "^2.2.7",
diff --git a/package.json b/package.json
index 4842b4e6..5c646c4f 100644
--- a/package.json
+++ b/package.json
@@ -70,4 +70,4 @@
"url": "https://github.com/JoeGermuska"
}
]
-}
\ No newline at end of file
+}
diff --git a/src/embed/popular_timelines.json b/src/embed/popular_timelines.json
index 654111e5..c11df931 100644
--- a/src/embed/popular_timelines.json
+++ b/src/embed/popular_timelines.json
@@ -5986,4 +5986,4 @@
"pageviews": "13,760(0.01%)",
"uniques": "10,729(0.01%)"
}
-]
\ No newline at end of file
+]
diff --git a/src/js/core/ConfigFactory.js b/src/js/core/ConfigFactory.js
index 9093bbb1..de16c4ba 100644
--- a/src/js/core/ConfigFactory.js
+++ b/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 => {
diff --git a/src/js/core/TimelineConfig.js b/src/js/core/TimelineConfig.js
index c503d98a..e7319c44 100644
--- a/src/js/core/TimelineConfig.js
+++ b/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
}
diff --git a/src/js/date/TLDate.js b/src/js/date/TLDate.js
index de081f7f..c20cb37d 100644
--- a/src/js/date/TLDate.js
+++ b/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,
diff --git a/src/js/dom/DOMUtil.js b/src/js/dom/DOMUtil.js
index 884edbe9..45aab827 100644
--- a/src/js/dom/DOMUtil.js
+++ b/src/js/dom/DOMUtil.js
@@ -22,4 +22,4 @@ export function removeClass(el, name) {
}
return w;
}).replace(/^\s+/, '');
-}
\ No newline at end of file
+}
diff --git a/src/js/media/types/Vimeo.js b/src/js/media/types/Vimeo.js
index 0b1d34b6..d63c710f 100644
--- a/src/js/media/types/Vimeo.js
+++ b/src/js/media/types/Vimeo.js
@@ -60,4 +60,4 @@ export default class Vimeo extends Media {
trace(err);
}
}
-}
\ No newline at end of file
+}
diff --git a/src/js/timenav/AxisHelper.js b/src/js/timenav/AxisHelper.js
index 2a179204..dca8a86c 100644
--- a/src/js/timenav/AxisHelper.js
+++ b/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;
diff --git a/src/js/timenav/TimeAxis.js b/src/js/timenav/TimeAxis.js
index 810cd704..819b12ea 100644
--- a/src/js/timenav/TimeAxis.js
+++ b/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)
\ No newline at end of file
+classMixin(TimeAxis, Events, DOMMixins, I18NMixins)
diff --git a/src/js/timenav/TimeGroup.js b/src/js/timenav/TimeGroup.js
index 229aa8de..e6b66578 100644
--- a/src/js/timenav/TimeGroup.js
+++ b/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 () {
diff --git a/src/js/timenav/TimeMarker.js b/src/js/timenav/TimeMarker.js
index f8a1d5b3..d0b6a251 100644
--- a/src/js/timenav/TimeMarker.js
+++ b/src/js/timenav/TimeMarker.js
@@ -92,7 +92,6 @@ export class TimeMarker {
/* Adding, Hiding, Showing etc
================================================== */
show() {
-
}
hide() {
@@ -159,7 +158,6 @@ export class TimeMarker {
}
getEndTime() {
-
if (this.data.end_date) {
return this.data.end_date.getTime();
} else {
@@ -210,13 +208,12 @@ export class TimeMarker {
setWidth(w) {
if (this.data.end_date) {
this._el.container.style.width = w + "px";
-
if (w > this.options.marker_width_min) {
this._el.content_container.style.width = w + "px";
- this._el.content_container.className = "tl-timemarker-content-container tl-timemarker-content-container-long";
+ this._el.content_container.className = `tl-timemarker-content-container tl-timemarker-content-container-long ${this.data.id}`;
} else {
this._el.content_container.style.width = this.options.marker_width_min + "px";
- this._el.content_container.className = "tl-timemarker-content-container";
+ this._el.content_container.className = `tl-timemarker-content-container ${this.data.id}`;
}
}
@@ -231,43 +228,69 @@ export class TimeMarker {
this._el.timespan.style.height = remainder + "px";
}
- getFormattedDate() {
- if (trim(this.data.display_date).length > 0) {
- return this.data.display_date;
- }
+ getFormattedDate() {
+ if (trim(this.data.display_date).length > 0) {
+ return this.data.display_date;
+ }
- let date_text = "";
- if (this.data.end_date) {
- date_text = " to " + this.data.end_date.getDisplayDate(this.getLanguage());
- }
- if (this.data.start_date) {
- date_text = (date_text ? "from " : "") + this.data.start_date.getDisplayDate(this.getLanguage()) + date_text;
- }
- return date_text;
- }
+
+ let date_text = "";
+ if (this.data.end_date) {
+ date_text = " to " + this.data.end_date.getDisplayDate(this.getLanguage());
+ }
+ if (this.data.start_date) {
+ date_text = (date_text ? "from " : "") + this.data.start_date.getDisplayDate(this.getLanguage()) + date_text;
+ }
+ return date_text;
+ }
/* Events
================================================== */
_onMarkerClick(e) {
- this.fire("markerclick", { unique_id: this.data.unique_id });
+ $(".tl-timemarker-content-container").removeClass('highlighted');
+ $(this._el.content_container).addClass('highlighted');
+ this.fire("markerclick", { unique_id: this.data.unique_id, zoomLevel: this.data.ZoomOnClick ,parent: this.data.childOf });
+
+ this._setHighlight(this.data.parentOf);
+ this._setHighlight(this.data.childOf);
+ this._initiateTooltip(this.data.parentOf);
+ this._initiateTooltip(this.data.childOf);
+
+ //Change opacity if marker has childs or parents
+ if (!this.data.parentOf.includes('') || !this.data.childOf.includes('')) {
+ $(".tl-timemarker-content-container").not('.highlighted').not('.tl-timemarker-active').css('opacity', 0.1);
+ }
}
- _onMarkerKeydown(e) {
- if (/Space|Enter/.test(e.code)) {
- this.fire("markerclick", { unique_id: this.data.unique_id });
- }
- }
+ _onMarkerKeydown(e) {
+ if (/Space|Enter/.test(e.code)) {
+ this.fire("markerclick", { unique_id: this.data.unique_id });
+ }
+ }
- _onMarkerBlur(e) {
- this.fire("markerblur", { unique_id: this.data.unique_id });
- }
+ _onMarkerBlur(e) {
+ this.fire("markerblur", { unique_id: this.data.unique_id });
+ $(".tl-timemarker-content-container").css('opacity', 1);
+ $(".tl-timemarker-content-container").removeClass('highlighted');
+ this._deinitiateTooltip(this.data.parentOf);
+ this._deinitiateTooltip(this.data.childOf);
+ }
/* Private Methods
================================================== */
_initLayout() {
+
// Create Layout
- this._el.container = DOM.create("div", "tl-timemarker");
- this._el.container.setAttribute('tabindex', '-1');
+ let isHidden = this.data.GroupOrder ? 'hidden' : '';
+ let hasChild = this.data.childOf.includes('') ? '' : 'has-child';
+ let hasParent = this.data.parentOf.includes('') ? '' : 'has-parent';
+ let idMarker = this.data.id;
+ idMarker = idMarker.replace(/\s/g, '');
+
+ this._el.container = DOM.create("div", `tl-timemarker ${isHidden}`);
+ this._el.container.setAttribute('tabindex', '-1');
+
+
if (this.data.unique_id) {
this._el.container.id = this.data.unique_id + "-marker";
@@ -275,12 +298,24 @@ export class TimeMarker {
if (this.data.end_date) {
this.has_end_date = true;
- this._el.container.className = 'tl-timemarker tl-timemarker-with-end';
+ this._el.container.className = `tl-timemarker tl-timemarker-with-end`;
+ }
+
+ this._el.timespan = DOM.create("div", `tl-timemarker-timespan ${isHidden}`, this._el.container);
+ this._el.timespan_content = DOM.create("div", `tl-timemarker-timespan-content ${isHidden} `, this._el.timespan);
+ if (this.data.typeOfLink != "") {
+
+ this._el.tooltip = DOM.create("div", `tl-tooltip-hidden tooltip-${this.data.id}`, this._el.timespan);
+ this._el.tooltip.innerHTML = this.data.typeOfLink;
}
- this._el.timespan = DOM.create("div", "tl-timemarker-timespan", this._el.container);
- this._el.timespan_content = DOM.create("div", "tl-timemarker-timespan-content", this._el.timespan);
- this._el.content_container = DOM.create("div", "tl-timemarker-content-container", this._el.container);
+
+ //Add id to marker
+
+ this._el.content_container = DOM.create("div", `tl-timemarker-content-container ${idMarker} ${hasChild} ${hasParent} ${isHidden} `, this._el.container);
+
+ // Handle color
+ this.data.markerColor != "" ? this._el.content_container.style.backgroundColor = this.data.markerColor : "";
this._el.content = DOM.create("div", "tl-timemarker-content", this._el.content_container);
@@ -304,13 +339,14 @@ export class TimeMarker {
var media_type = lookupMediaType(this.data.media).type;
this._el.media = DOM.create("span", "tl-icon-" + media_type, this._el.media_container);
}
-
}
-
// Text
this._el.text = DOM.create("div", "tl-timemarker-text", this._el.content);
this._text = DOM.create("h2", "tl-headline", this._el.text);
+
+ this.data.markerColor ? this._text.style.color = 'white' : this._text.style.color = 'grey';
+
if (this.data.text.headline && this.data.text.headline != "") {
this._text.innerHTML = unlinkify(this.data.text.headline);
} else if (this.data.text.text && this.data.text.text != "") {
@@ -346,7 +382,57 @@ export class TimeMarker {
}
+ // Handle Hierarchy of highlight
+ _setHighlight(data) {
+ //Handle parent
+ var test =[]
+ for (var i = 0; i < data.length; i++) {
+ //remove space
+ var str = data[i].replace(/\s/g, '');
+ test.push(str)
+ $("." + str).addClass("highlighted");
+ }
+
+
+ }
+ _initiateTooltip(data) {
+ if (!Array.isArray(data)) {
+ return;
+ }
+
+ data.forEach(element => {
+ var str = element.replace(/\s/g, '');
+ $("." + str).mouseenter(function () {
+ $(".tooltip-" + str).removeClass('tl-tooltip-hidden').addClass('tl-tooltip');
+ })
+ $("." + str).mouseleave(function () {
+ setTimeout(function () {
+ $(".tooltip-" + str).removeClass('tl-tooltip').addClass('tl-tooltip-hidden');
+ }, 1000);
+ }
+ )
+ });
+
+ }
+
+ _deinitiateTooltip(data) {
+ if (!Array.isArray(data)) {
+ return;
+ }
+
+ data.forEach(element => {
+ data.forEach(element => {
+ var str = element.replace(/\s/g, '');
+ $("." + str).unbind('mouseenter');
+ })
+ });
+ }
+
+
}
+
+
+
classMixin(TimeMarker, I18NMixins, Events, DOMMixins)
diff --git a/src/js/timenav/TimeNav.js b/src/js/timenav/TimeNav.js
index 4d9c90dc..699c27e3 100644
--- a/src/js/timenav/TimeNav.js
+++ b/src/js/timenav/TimeNav.js
@@ -14,7 +14,6 @@ import { Animate } from "../animation/Animate"
import { I18NMixins } from "../language/I18NMixins"
-
export class TimeNav {
constructor(elem, timeline_config, options, language) {
@@ -219,7 +218,11 @@ export class TimeNav {
setZoom(level) {
var zoom_factor = this.options.zoom_sequence[level];
- if (typeof(zoom_factor) == 'number') {
+
+ if (typeof (zoom_factor) == 'number') {
+ if (this.options.scale_factor != zoom_factor) {
+ this._zoomAnim(zoom_factor);
+ }
this.setZoomFactor(zoom_factor);
} else {
console.warn("Invalid zoom level. Please use an index number between 0 and " + (this.options.zoom_sequence.length - 1));
@@ -243,26 +246,60 @@ export class TimeNav {
console.warn("Zoom factor must be greater than zero. Using 0.1");
factor = 0.1;
}
+
+
this.options.scale_factor = factor;
//this._updateDrawTimeline(true);
+
this.goToId(this.current_id, !this._updateDrawTimeline(true), true);
}
+ _zoomAnim(factor) {
+ var loader_background = document.createElement("div");
+ var loader = document.createElement("div");
+ var loader_text = document.createElement("h1");
+ loader_background.className = "loader_background";
+ loader.className = "loader";
+ loader_text.className = "loader_text";
+ loader_text.innerHTML = `Zooming... ${factor}%`;
+ loader_text.appendChild(loader);
+ loader_background.appendChild(loader_text);
+ document.body.appendChild(loader_background);
+
+ //remove after 1 second
+ setTimeout(function () {
+ document.body.removeChild(loader_background);
+ }, 1000);
+ }
+
/* Groups
================================================== */
_createGroups() {
this._groups = [];
var group_labels = this.timescale.getGroupLabels();
+ var group_ordered = this._reorderGroup(group_labels);
if (group_labels) {
this.options.has_groups = true;
- for (var i = 0; i < group_labels.length; i++) {
- this._createGroup(group_labels[i]);
+ for (var i = 0; i < group_ordered.length; i++) {
+ this._createGroup(group_ordered[i]);
}
}
}
+ _reorderGroup(groups) {
+ var group_ordered = [];
+ //sort groups by group_order and set the null on to last
+ for (var i = 0; i < groups.length; i++) {
+ var group = groups[i];
+ if (group.group_order) {
+ group_ordered[group.group_order - 1] = group;
+ }
+ }
+ return group_ordered;
+ }
+
_createGroup(group_label) {
var group = new TimeGroup(group_label);
this._addGroup(group);
@@ -279,7 +316,6 @@ export class TimeNav {
var available_height = (this.options.height - this._el.timeaxis_background.offsetHeight),
group_height = Math.floor((available_height / this.timescale.getNumberOfRows()) - this.options.marker_padding),
group_labels = this.timescale.getGroupLabels();
-
for (var i = 0, group_rows = 0; i < this._groups.length; i++) {
var group_y = Math.floor(group_rows * (group_height + this.options.marker_padding));
var group_hide = false;
@@ -301,8 +337,8 @@ export class TimeNav {
marker.addTo(this._el.marker_item_container);
marker.on('markerclick', this._onMarkerClick, this);
marker.on('added', this._onMarkerAdded, this);
- }
+ }
_createMarker(data, n) {
var marker = new TimeMarker(data, this.options);
this._addMarker(marker);
@@ -601,10 +637,43 @@ export class TimeNav {
this.fire("dateRemoved", this.config);
}
+ _removeBlankSpace(data) {
+ let parents = [];
+ for (var i = 0; i < data.length; i++) {
+ let parent = data[i].replace(/\s/g, '');
+ parents.push(parent);
+ }
+ return parents;
+ }
+
_onMarkerClick(e) {
- // Go to the clicked marker
+ if (e.parent) {
+ let parents = this._removeBlankSpace(e.parent);
+
+ for (var i = 0; i < parents.length; i++) {
+ let index = this._markers.findIndex(x => x.data.id == parents[i]);
+ if(index == -1){
+ //skip loop
+ continue;
+ }
+
+ let childs = this._markers[index].data.parentOf;
+ if (childs.length > 0) {
+ childs.map((child) => {
+ //clear space
+ var str = child.replace(/\s/g, '');
+ $('.' + str).addClass('highlighted');
+ })
+ }
+ }
+ }
this.goToId(e.unique_id);
this.fire("change", { unique_id: e.unique_id });
+
+ if (e.zoomLevel != "") {
+ this.setZoom(e.zoomLevel);
+ }
+
}
_onMarkerBlur(e) {
diff --git a/src/js/timenav/TimeScale.js b/src/js/timenav/TimeScale.js
index 1fc26926..ab015278 100644
--- a/src/js/timenav/TimeScale.js
+++ b/src/js/timenav/TimeScale.js
@@ -41,6 +41,9 @@ export class TimeScale {
this._pixel_width = this._screen_multiplier * this._display_width;
this._group_labels = undefined;
+ this._group_colors = undefined;
+ this._group_orders = undefined;
+
this._positions = [];
this._pixels_per_milli = 0;
@@ -84,14 +87,24 @@ export class TimeScale {
return 200000; // what is the right handling for cosmo dates?
}
+
+ getGroupOrder(){
+ return this._group_orders;
+ }
+ getGroupColor() {
+ return this._row_colors;
+ }
+
getGroupLabels() {
/*
return an array of objects, one per group, in the order (top to bottom) that the groups are expected to appear. Each object will have two properties:
* label (the string as specified in one or more 'group' properties of events in the configuration)
* rows (the number of rows occupied by events associated with the label. )
*/
+
return (this._group_labels || []);
}
+
getScale() {
return this._scale;
@@ -227,9 +240,12 @@ export class TimeScale {
default_marker_width = default_marker_width || 100;
var groups = [];
+ var colors = [];
+ var group_orders = [];
var empty_group = false;
// Set start/end/width; enumerate groups
+
for (var i = 0; i < slides.length; i++) {
var pos_info = {
start: this.getPosition(slides[i].start_date.getTime())
@@ -251,7 +267,13 @@ export class TimeScale {
if (slides[i].group) {
if (groups.indexOf(slides[i].group) < 0) {
+ var colorLigne = slides[i].GroupColor;
+ var group_order = slides[i].GroupOrder;
+ colors.push(colorLigne);
+ group_orders.push(group_order);
groups.push(slides[i].group);
+
+
}
} else {
empty_group = true;
@@ -268,10 +290,12 @@ export class TimeScale {
// Init group info
var group_info = [];
-
+
for (var i = 0; i < groups.length; i++) {
group_info[i] = {
label: groups[i],
+ color: colors[i],
+ order: group_orders[i],
idx: i,
positions: [],
n_rows: 1, // default
@@ -338,13 +362,14 @@ export class TimeScale {
// Set group labels; offset row positions
this._group_labels = [];
-
+
group_info.sort(function(a, b) { return a.idx - b.idx; });
-
for (var i = 0, row_offset = 0; i < group_info.length; i++) {
this._group_labels.push({
label: group_info[i].label,
- rows: group_info[i].n_rows
+ rows: group_info[i].n_rows,
+ color: group_info[i].color,
+ group_order: group_info[i].order
});
for (var j = 0; j < group_info[i].positions.length; j++) {
diff --git a/src/less/Typography.less b/src/less/Typography.less
index 0ed19ffb..0de7edd3 100644
--- a/src/less/Typography.less
+++ b/src/less/Typography.less
@@ -4,7 +4,14 @@
h1, h2, h3, h4, h5, h6 {
color:@color-header-text;
}
-
+ h2:hover{
+ color:white!important;
+ }
+ .highlighted h2{
+ color: white !important;
+ }
+
+
h1, h2, h3 {
font-size: @base-font-size-xlarge;
line-height:@base-font-size-xlarge;
@@ -260,12 +267,13 @@
display:block;
font-family: @font-main;
font-style: italic;
- background-color:@note-color-background;
+ background-color:lighten(@color-dark, 90%);
font-size:@base-font-size;
line-height:@base-font-size+2;
padding:10px;
.border-radius(7px);
color: #8a6d3b;
+ background-color: #fcf8e3;
border: 1px solid #faebcc;
text-shadow: none;
}
diff --git a/src/less/Variables.less b/src/less/Variables.less
index 05177917..f63fbf5c 100644
--- a/src/less/Variables.less
+++ b/src/less/Variables.less
@@ -27,6 +27,7 @@
@color-background: #FFF;
@color-foreground: #333;
@color-dark: #000;
+@color-main: #B17669;
@color-theme: #c34528; //#DA0000;
diff --git a/src/less/slider/TL.Slide.less b/src/less/slider/TL.Slide.less
index 3c2b0e1e..fac8791f 100644
--- a/src/less/slider/TL.Slide.less
+++ b/src/less/slider/TL.Slide.less
@@ -341,3 +341,8 @@
}
}
}
+
+//Custom
+.tl-slidenav-previous,.tl-slidenav-next {
+ z-index: 1050 !important;
+}
diff --git a/src/less/slider/TL.StorySlider.less b/src/less/slider/TL.StorySlider.less
index cfa76bb4..9eb3c0af 100644
--- a/src/less/slider/TL.StorySlider.less
+++ b/src/less/slider/TL.StorySlider.less
@@ -12,7 +12,7 @@
box-sizing:content-box;
//.box-shadow(1px 1px 7px rgba(0,0,0,.30));
- z-index:8;
+ z-index:103 !important;
img, embed, object, video, iframe {
max-width: 100%;
position:relative;
@@ -41,7 +41,7 @@
height: 100%;
//overflow: scroll;
position: relative;
- z-index:5;
+ z-index:500;
.tl-slider-container {
position: absolute;
top: 0px;
diff --git a/src/less/themes/contrast/Variables.less b/src/less/themes/contrast/Variables.less
index 8e2cc027..f56106a8 100644
--- a/src/less/themes/contrast/Variables.less
+++ b/src/less/themes/contrast/Variables.less
@@ -48,6 +48,9 @@
@color-text-credit: #686868;
+@color-tooltip-background: #B17669;
+@color-main: #B17669;
+
/* UI COLOR
================================================== */
@ui-background-color: darken(@color-background, 5);
@@ -81,9 +84,6 @@
@base-spacing: 15px;
@arrow-size: 20px;
-// Note
-@note-color-background: #fcf8e3;
-
// Marker
@time-marker-border-radius: 4px;
@marker-icon-size: 24px;
diff --git a/src/less/themes/dark/TL.Theme.Dark.less b/src/less/themes/dark/TL.Theme.Dark.less
index 601cfca9..32e043c0 100644
--- a/src/less/themes/dark/TL.Theme.Dark.less
+++ b/src/less/themes/dark/TL.Theme.Dark.less
@@ -11,6 +11,6 @@
/* Includes
================================================== */
-@import "Variables.less"; // Variables (easy way to make style changes)
+@import "Variables.less"; // Variables (easy way to make style changes)
@import "../../TL.Timeline.Base.less"; // Base Less File
diff --git a/src/less/themes/dark/Variables.less b/src/less/themes/dark/Variables.less
index 46eca718..de0cff4d 100644
--- a/src/less/themes/dark/Variables.less
+++ b/src/less/themes/dark/Variables.less
@@ -27,7 +27,7 @@
@color-background: #333;
@color-foreground: #CCC;
@color-dark: #FFF;
-
+@color-main: #B17669;
@color-theme: #c34528; //#DA0000;
@color-theme-dark: darken(@color-theme, 15);
@@ -48,6 +48,10 @@
@color-text-credit: #999999;
+@color-tooltip-background: #B17669;
+@color-main: #B17669;
+
+
/* UI COLOR
================================================== */
@ui-background-color: darken(@color-foreground,50);
diff --git a/src/less/timenav/TL.TimeAxis.less b/src/less/timenav/TL.TimeAxis.less
index e783799d..22f22ccd 100644
--- a/src/less/timenav/TL.TimeAxis.less
+++ b/src/less/timenav/TL.TimeAxis.less
@@ -6,7 +6,7 @@
position:absolute;
bottom:0;
left:0;
- background-color:@color-background;
+ background-color: @color-main;
border-top: 1px solid darken(@ui-background-color,5);
z-index:2;
}
@@ -73,9 +73,10 @@
z-index:1;
background-color:@color-background;
.tl-timeaxis-tick {
- font-size:@major-ticks-font-size;
+ font-size:15px;
line-height:@major-ticks-font-size + @tick-padding;
- color:@major-ticks-color;
+ font-family: 'PT Sans Narrow', sans-serif;
+ color:white;
width:@major-ticks-width;
margin-left:-(@major-ticks-width/2);
@@ -99,11 +100,11 @@
.tl-timeaxis-tick {
font-size:@minor-ticks-font-size;
line-height:@minor-ticks-font-size + @tick-padding;
- color:@minor-ticks-color;
+ color:white;
width:@minor-ticks-width;
margin-left:-(@minor-ticks-width/2);
.tl-timeaxis-tick-text {
- opacity:0;
+ opacity:100;
white-space: normal;
padding-left:2px;
padding-right:2px;
diff --git a/src/less/timenav/TL.TimeGroup.less b/src/less/timenav/TL.TimeGroup.less
index 38f0efbe..249353a6 100644
--- a/src/less/timenav/TL.TimeGroup.less
+++ b/src/less/timenav/TL.TimeGroup.less
@@ -18,15 +18,14 @@
-webkit-align-items: center;
-webkit-box-align: center;
-
+
.tl-timegroup-message {
//z-index:6;
- color:darken(@ui-background-color-darker,2);
- text-shadow: @color-background 0px 2px 2px;
+ // color:@color-main;
margin-left:80px;
- //background-color:@ui-background-color;
-
+ background-color:white;
+ z-index: 100;
}
&.tl-timegroup-alternate {
diff --git a/src/less/timenav/TL.TimeMarker.less b/src/less/timenav/TL.TimeMarker.less
index 5481ee4c..924089a4 100644
--- a/src/less/timenav/TL.TimeMarker.less
+++ b/src/less/timenav/TL.TimeMarker.less
@@ -129,6 +129,7 @@
z-index:6;
&:hover {
z-index: 9;
+ opacity: 1 !important;
}
.property-animation(height, @animation-duration-fast, @animation-ease);
.property-animation(width, @animation-duration, @animation-ease);
@@ -164,7 +165,7 @@
overflow:hidden;
font-weight:normal;
margin:0;
- color:@marker-text-color;
+ color: #eae8e8c1 ;
position: relative;
&.tl-headline-fadeout {
&:after {
@@ -372,7 +373,7 @@
.tl-timemarker-content-container {
//background-color:@color-theme;
- background-color:@color-background;
+ background-color: #E8B755 !important;
//color:@color-background;
color:@color-foreground;
z-index:9;
@@ -545,3 +546,47 @@
}
}
+
+//Custom
+
+.highlighted {
+ box-shadow: 0 0 15px #999 !important;
+ border: 1px solid black !important;
+ background-color: grey !important;
+ z-index: 10 !important;
+}
+.highlighted:hover{
+ z-index: 51 !important;
+}
+.hidden{
+ display: none !important;
+}
+
+.has-parent{
+ outline: #2f9d9d solid 3px !important;
+}
+
+.tl-tooltip{
+ position: absolute;
+ text-align: center;
+ z-index: 101 !important;
+ border-bottom-right-radius: 25px;
+ border-top-right-radius: 25px;
+ border: black 1px solid;
+ margin-right: 10px;
+ right: 0;
+ color: white;
+ width: max-content;
+ padding: 1px;
+ padding-left: 20px;
+ padding-right: 20px;
+ background-color:@color-main;
+
+ font-family: "arial";
+ font-size: 13px;
+
+}
+
+.tl-tooltip-hidden{
+ display: none !important;
+}
diff --git a/src/less/timenav/TL.TimeNav.less b/src/less/timenav/TL.TimeNav.less
index 799dfef9..be904a15 100644
--- a/src/less/timenav/TL.TimeNav.less
+++ b/src/less/timenav/TL.TimeNav.less
@@ -115,3 +115,27 @@
}
}
+
+
+//custom
+.loader_background{
+ background-color: #000;
+ opacity: 0.5;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 102;
+}
+
+.loader_text{
+ position: absolute;
+ top: 70%;
+ left: 50%;
+ transform: translate(-50%, -70%);
+ z-index: 104;
+ color: #fff;
+ font-size: 30px;
+ font-weight: bold;
+}
diff --git a/src/less/ui/TL.MenuBar.Button.less b/src/less/ui/TL.MenuBar.Button.less
index 75c86c43..181a2d41 100644
--- a/src/less/ui/TL.MenuBar.Button.less
+++ b/src/less/ui/TL.MenuBar.Button.less
@@ -10,7 +10,7 @@
//padding:12px;
background-color:fadeout(@ui-background-color, 10%);
cursor:pointer;
- padding: 5px 10px 5px 10px;
+ padding: 6px 12px 6px 12px;
display:inline-block;
display:block;
//color:@color-text;
diff --git a/src/template/index.html b/src/template/index.html
index ac93237b..d0369d68 100644
--- a/src/template/index.html
+++ b/src/template/index.html
@@ -2,18 +2,19 @@
Bundled TimelineJS test page
-
- Timeline Development
-
-
-
-
+
-
+