416 lines
9.5 KiB
JavaScript
416 lines
9.5 KiB
JavaScript
/**
|
|
* BBTimeline
|
|
* @version v0.1.1.121 beta (2023/10/18 2058)
|
|
*/
|
|
class BBTimeline {
|
|
constructor(el) {
|
|
const a = this;
|
|
|
|
a.Container = document.getElementById(el);
|
|
a.Padding = {
|
|
Left: 20,
|
|
Top: 20,
|
|
Right: 20,
|
|
Bottom: 0
|
|
};
|
|
a.Size = {
|
|
W: a.Container.innerWidth || a.Container.clientWidth,
|
|
H: a.Container.innerHeight || a.Container.clientHeight
|
|
};
|
|
a.Layer = {
|
|
Background: null,
|
|
Flourish: null,
|
|
Markers: null
|
|
};
|
|
|
|
a.DateParsePattern = "yyyy-MM-dd";
|
|
|
|
a.Axis = {
|
|
LineColour1: "#CFCFCF",
|
|
LineWidth: 1,
|
|
Font: "8pt Arial",
|
|
LabelColour: "#000000",
|
|
LabelSpacing: 6,
|
|
X: {
|
|
NoPartPerDay: 4,
|
|
HourLineSpace: 6,
|
|
HourLineHeight: 10,
|
|
HourLineColour: "#A6A6A6",
|
|
DayLineHeight: 20,
|
|
DayLineColour: "#282828"
|
|
}
|
|
};
|
|
|
|
a.Marker = {
|
|
BorderColour: "#3A5D9C",
|
|
BorderWidth: 2,
|
|
BackColour: "#D4DEEF",
|
|
Width: 10,
|
|
ForeColour: "#3A5D9C",
|
|
Font: "9pt Arial",
|
|
CollisionMargin: 8,
|
|
Line: {
|
|
Colour: "#A6A6A6",
|
|
Width: 1,
|
|
}
|
|
};
|
|
|
|
a.HotTrack = {
|
|
Colour: "#1D7F1D"
|
|
};
|
|
|
|
a.Events = [];
|
|
a.StartDate = a.DateToInternalString(new Date());
|
|
a.ShowDate = a.StartDate;
|
|
|
|
a.Enabled = false;
|
|
a.Debug = false;
|
|
a.EnableHotTracking = true;
|
|
|
|
a.initialiseComponents();
|
|
}
|
|
|
|
|
|
get CTX() {
|
|
return a.Layer.Markers.CTX;
|
|
}
|
|
|
|
get NewEvent() {
|
|
const a = this;
|
|
|
|
return {
|
|
Date: "",
|
|
Label: "",
|
|
Position: { X: 0, Y: 0 },
|
|
Events: [],
|
|
HitBox: null,
|
|
BorderColour: a.Marker.BorderColour,
|
|
BackColour: a.Marker.BackColour
|
|
};
|
|
}
|
|
|
|
get NewEventItem() {
|
|
return {
|
|
Title: "",
|
|
Description: "",
|
|
Link: "",
|
|
Tag: null
|
|
};
|
|
}
|
|
|
|
get VisibleDays() {
|
|
const a = this;
|
|
const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
|
|
|
|
return Math.floor(clientWidth / (a.Axis.X.NoPartPerDay * a.Axis.X.HourLineSpace));
|
|
}
|
|
|
|
get VisibleStartDate() {
|
|
const a = this;
|
|
|
|
return a.ConvertToDate(a.ShowDate);
|
|
}
|
|
|
|
get VisibleEndDate() {
|
|
const a = this;
|
|
|
|
let date = a.ConvertToDate(a.ShowDate);
|
|
date.setDate(date.getDate() + a.VisibleDays);
|
|
|
|
// Minus one for lead up
|
|
date.setDate(date.getDate() - 1);
|
|
|
|
return a.DateToString(date, a.DateParsePattern);
|
|
}
|
|
|
|
get VisibleEvents() {
|
|
const a = this;
|
|
let result = [];
|
|
|
|
a.Layer.Background.XAxisPositions.forEach(function (e) {
|
|
const event = a.FindEvent(e.Date);
|
|
if (event == null) {
|
|
return;
|
|
}
|
|
|
|
// Set offsetX on current view
|
|
event.Position.X = e.X;
|
|
|
|
result.push(event);
|
|
});
|
|
|
|
return result;
|
|
}
|
|
|
|
|
|
AddEvent(date, label, options) {
|
|
const a = this;
|
|
|
|
const _options = Object.assign(a.NewEventItem, options);
|
|
|
|
let event = a.FindEvent(date);
|
|
if (event == null) {
|
|
let newEvent = a.NewEvent;
|
|
newEvent.Date = date;
|
|
|
|
a.Events.push(newEvent);
|
|
|
|
event = a.FindEvent(date);
|
|
}
|
|
|
|
if (label != null) {
|
|
event.Label = label;
|
|
}
|
|
|
|
event.Events.push(_options);
|
|
}
|
|
|
|
Clear() {
|
|
const a = this;
|
|
|
|
a.Layer.Background.Clear();
|
|
a.Layer.Flourish.Clear();
|
|
a.Layer.Markers.Clear();
|
|
|
|
a.StartDate = a.DateToInternalString(new Date());
|
|
a.ShowDate = a.StartDate;
|
|
a.Enabled = false;
|
|
a.Events = [];
|
|
}
|
|
|
|
DeleteMarker(date)
|
|
{
|
|
const a = this;
|
|
|
|
for (let i=0; i<a.Events.length; i++) {
|
|
if (a.Events[i].Date != date) {
|
|
continue;
|
|
}
|
|
|
|
a.Events.splice(i, 1);
|
|
}
|
|
}
|
|
|
|
FindDatePosition(date) {
|
|
const a = this;
|
|
const points = a.Layer.Background.XAxisPositions;
|
|
|
|
for (let i=0; i<points.length; i++) {
|
|
if (points[i].Date == date){
|
|
return points[i];
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
FindEvent(date) {
|
|
const a = this;
|
|
|
|
for (let i=0; i<a.Events.length; i++) {
|
|
if (a.Events[i].Date == date) {
|
|
return a.Events[i];
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
FindEventsByCoords(x, y) {
|
|
const a = this;
|
|
|
|
for (let i=0; i<a.Events.length; i++) {
|
|
const e = a.Events[i].HitBox;
|
|
if (a.Events[i].HitBox == null) {
|
|
continue;
|
|
}
|
|
|
|
const x2 = (e.X + e.W);
|
|
const y2 = (e.Y + e.H);
|
|
|
|
if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
|
|
return a.Events[i];
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
Load(startDate) {
|
|
const a = this;
|
|
|
|
a.StartDate = startDate;
|
|
|
|
a.Show(startDate);
|
|
}
|
|
|
|
Show(date) {
|
|
const a = this;
|
|
|
|
if (a.ConvertToDate(date) < a.ConvertToDate(a.StartDate)) {
|
|
date = a.StartDate;
|
|
}
|
|
|
|
a.ShowDate = date;
|
|
a.Enabled = true;
|
|
|
|
a.Invalidate(true, true);
|
|
}
|
|
|
|
ShowNext() {
|
|
const a = this;
|
|
|
|
let date = a.VisibleStartDate;
|
|
date.setDate(date.getDate() + (a.VisibleDays - 1));
|
|
|
|
a.Show(a.DateToInternalString(date));
|
|
}
|
|
|
|
ShowPrevious() {
|
|
const a = this;
|
|
|
|
let date = a.VisibleStartDate;
|
|
date.setDate(date.getDate() - (a.VisibleDays - 1));
|
|
|
|
a.Show(a.DateToInternalString(date));
|
|
}
|
|
|
|
UpdateLabel(date, label) {
|
|
const a = this;
|
|
|
|
let event = a.FindEvent(date);
|
|
if (event == null) {
|
|
return;
|
|
}
|
|
|
|
event.Label = label;
|
|
|
|
a.Invalidate(false, true);
|
|
}
|
|
|
|
UpdateMarker(date, borderColour, backColour) {
|
|
const a = this;
|
|
|
|
let event = a.FindEvent(date);
|
|
if (event == null) {
|
|
return;
|
|
}
|
|
|
|
event.BorderColour = borderColour;
|
|
event.BackColour = backColour;
|
|
|
|
a.Invalidate(false, true);
|
|
}
|
|
|
|
Invalidate(redrawAxis, redrawMarkers) {
|
|
const a = this;
|
|
|
|
if (redrawAxis) {
|
|
a.Layer.Background.Invalidate();
|
|
}
|
|
|
|
a.Layer.Flourish.Clear();
|
|
|
|
if (redrawMarkers) {
|
|
a.Layer.Markers.Invalidate();
|
|
}
|
|
|
|
}
|
|
|
|
DateToString(date, pattern) {
|
|
let result = pattern;
|
|
|
|
result = result.replace("fffffff", date.getMilliseconds().toString().padStart(7, '0'));
|
|
result = result.replace("ffffff", date.getMilliseconds().toString().padStart(6, '0'));
|
|
result = result.replace("fffff", date.getMilliseconds().toString().padStart(5, '0'));
|
|
result = result.replace("yyyy", date.getFullYear().toString().padStart(4, '0'));
|
|
result = result.replace("MMMM", "{1}");
|
|
result = result.replace("dddd", "{2}");
|
|
result = result.replace("ffff", date.getMilliseconds().toString().padStart(4, '0'));
|
|
result = result.replace("yyy", date.getFullYear().toString().padStart(3, '0'));
|
|
result = result.replace("MMM", "{3}");
|
|
result = result.replace("ddd", "{4}");
|
|
result = result.replace("fff", date.getMilliseconds().toString().padStart(3, '0'));
|
|
result = result.replace("zzz", "");
|
|
result = result.replace("yy", date.getFullYear().toString().slice(-2));
|
|
result = result.replace("MM", (date.getMonth() + 1).toString().padStart(2, '0'));
|
|
result = result.replace("dd", date.getDate().toString().padStart(2, '0'));
|
|
result = result.replace("HH", date.getHours().toString().padStart(2, '0'));
|
|
result = result.replace("hh", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString().padStart(2, '0'));
|
|
result = result.replace("mm", date.getMinutes().toString().padStart(2, '0'));
|
|
result = result.replace("ss", date.getSeconds().toString().padStart(2, '0'));
|
|
result = result.replace("ff", date.getMilliseconds().toString().padStart(2, '0'));
|
|
result = result.replace("tt", "{5}");
|
|
result = result.replace("zz", "");
|
|
result = result.replace("y", date.getFullYear().toString());
|
|
result = result.replace("M", (date.getMonth() + 1).toString());
|
|
result = result.replace("d", date.getDate().toString());
|
|
result = result.replace("H", date.getHours().toString());
|
|
result = result.replace("h", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString());
|
|
result = result.replace("m", date.getMinutes().toString());
|
|
result = result.replace("s", date.getSeconds().toString());
|
|
result = result.replace("z", "");
|
|
result = result.replace("t", "{6}");
|
|
result = result.replace("Z", "");
|
|
|
|
result = result.replace("{1}", date.toLocaleString('default', { month: 'long' }));
|
|
result = result.replace("{2}", date.toLocaleString('default', { weekday: 'long' }));
|
|
result = result.replace("{3}", date.toLocaleString('default', { month: 'short' }));
|
|
result = result.replace("{4}", date.toLocaleString('default', { weekday: 'short' }));
|
|
result = result.replace("{5}", (date.getHours() >= 12 ? "PM" : "AM"));
|
|
result = result.replace("{6}", (date.getHours() >= 12 ? "P" : "A"));
|
|
|
|
return result;
|
|
}
|
|
|
|
DateToInternalString(date) {
|
|
const a = this;
|
|
|
|
return a.DateToString(date, a.DateParsePattern);
|
|
}
|
|
|
|
DrawHotTracking(x) {
|
|
const a = this;
|
|
|
|
if (x < 0) {
|
|
a.Layer.Flourish.Clear();
|
|
} else {
|
|
a.Layer.Flourish.DrawVerticalLine(x);
|
|
}
|
|
}
|
|
|
|
ConvertToDate(value) {
|
|
return new Date(Date.parse(value));
|
|
}
|
|
|
|
HasInterception(rect, point) {
|
|
const x2 = (rect.X + rect.W);
|
|
const y2 = (rect.Y + rect.H);
|
|
|
|
return ((point.X >= rect.X) && (point.X <= x2) && (point.Y >= rect.Y) && (point.Y <= y2));
|
|
}
|
|
|
|
|
|
OnMouseDown(sender, e, event) { /* delegate */ }
|
|
|
|
OnMouseMove(sender, e, event) { /* delegate */ }
|
|
|
|
OnClick(sender, e, event) { /* delegate */ }
|
|
|
|
OnDblClick(sender, e, event) { /* delegate */ }
|
|
|
|
|
|
initialiseComponents() {
|
|
const a = this;
|
|
|
|
a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
|
|
|
|
const canvasList = a.Container.getElementsByTagName("canvas");
|
|
|
|
a.Layer.Background = new BBTimelineBackgroundCanvas(a, canvasList[0]);
|
|
a.Layer.Flourish = new BBTimelineFlourishCanvas(a, canvasList[1]);
|
|
a.Layer.Markers = new BBTimelineForegroundCanvas(a, canvasList[2]);
|
|
|
|
}
|
|
|
|
} |