Ray/literyzjs-timeline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Ray:71313757e8c663fb095c6712e2b78ea34cb58810
Branches Tags
Ray:master
Ray:release/0.2.0.121
Ray:release/0.1.1.277-alpha
Ray:release/0.1.1.121
Ray:release/0.1.0.089-beta
Ray:release/0.1.0.076-alpha
..
compare: Ray:a8a9c802be7a018aca1db966e839ee0d1a5a8ddf
Branches Tags
Ray:master
Ray:release/0.2.0.121
Ray:release/0.1.1.277-alpha
Ray:release/0.1.1.121
Ray:release/0.1.0.089-beta
Ray:release/0.1.0.076-alpha

3 Commits
71313757e8 ... a8a9c802be

Author SHA1 Message Date
Ray
a8a9c802be Merge pull request 'release/0.1.0.076-alpha' (#1) from release/0.1.0.076-alpha into master 
Reviewed-on: Ray/BBTimeline#1
 2023-10-08 15:07:53 +00:00
Ray
0adf438a62 Added click and mousedown event 
Added minified JS file
 2023-10-08 15:57:22 +01:00
Ray
59a2fec639 Changed demo to be interactive 2023-10-06 01:05:54 +01:00
3 changed files with 261 additions and 86 deletions
Show Stats Expand all files Collapse all files

22
bbtimeline.js
View File

@ -264,8 +264,23 @@ class BBTimeline {
if (a.Debug) console.log(event); if (a.Debug) console.log(event);
a.OnEventClick(this, e, event); a.OnMouseDown(this, e, event);
}); });
a.ctx.canvas.addEventListener('click', function (e) {
if (!a.Enabled) {
return;
}
var event = a.FindEventsByCoords(e.offsetX, e.offsetY);
if (event == null) {
return;
}
if (a.Debug) console.log(event);
a.OnClick(this, e, event);
});
} }
Invalidate(redrawAxis, redrawMarkers) { Invalidate(redrawAxis, redrawMarkers) {
@ -381,7 +396,10 @@ class BBTimeline {
return result; return result;
} }
OnEventClick(sender, e, event) { OnMouseDown(sender, e, event) {
}
OnClick(sender, e, event) {
} }

5
bbtimeline.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

320
demo-test.html
View File

@ -17,29 +17,71 @@
</head> </head>
<body> <body>
<canvas id="myCanvas"></canvas> <div class="row">
<div class="column1">
<canvas id="myCanvas"></canvas>
<p>
<textarea id="memoBox1" readonly></textarea>
</p>
</div>
<div class="column2">
<p>
<button onclick="Clear()">Clear</button>
<button onclick="ToggleDebug()">Toggle Debug</button>
<button onclick="Refresh()">Refresh</button>
</p>
<hr />
<p>
<button onclick="SetToday()">Set Today</button>
</p>
<hr />
<p>
<button onclick="GenerateRandomMarker()">Add/Generate Random Marker</button>
</p>
<hr />
<p>
<button onclick="GoToToday()">Show Start Date</button>
<button onclick="GoToPreviousMonth()">Show Previous Month</button>
<button onclick="GoToNextMonth()">Show Next Month</button>
</p>
<hr />
<p>
<button onclick="UpdateLabel()">Rename Marker</button>
<button onclick="UpdateMarker()">Change Marker Style</button>
<button onclick="DeleteMarker()">Delete Marker</button>
</p>
<hr />
<p>
<button onclick="FindVisibleEvents()">Find Visible Events</button>
<button onclick="FindAllEvents()">Find All Events</button>
</p>
<hr />
<p>
<input type="date" id="textbox1" />
<button onclick="FindEvent()">Find Event (By Date)</button>
</p>
<p>
<input type="date" id="textbox2" />
<button onclick="FindDatePosition()">Find Date Position (If Visible)</button>
</p>
<hr />
</div>
</div>
<p>
<button onclick="Clear()">Clear</button>
<button onclick="LoadDemo()">Load Demo Events</button>
<button onclick="ToggleDebug()">Toggle Debug</button>
</p>
<p>
<button onclick="LoadToday()">Show Start Date</button>
<button onclick="LoadPrevious()">Show Previous Month</button>
<button onclick="LoadNext()">Show Next Month</button>
</p>
<p>
<button onclick="UpdateLabel()">Update Label</button>
<button onclick="UpdateMarker()">Update Marker</button>
<button onclick="DeleteMarker()">Delete Marker</button>
</p>
<p>
<button onclick="GetDisplayedDateRange()">Get Displayed Date Range</button>
<button onclick="FindEvent()">Find Event</button>
<button onclick="FindDatePosition()">Find Date Position</button>
<button onclick="FindVisibleEvents()">Find Visible Events</button>
</p>
<style> <style>
body { body {
@ -56,117 +98,227 @@ canvas {
margin: 0; margin: 0;
} }
textarea {
border-style: solid;
border-width: 1px;
border-color: #000000;
min-height: calc(100vh - 500px);
padding: 10px;
width: 100%;
}
.column1 {
flex: 70%;
padding: 20px;
}
.column2 {
flex: 30%;
padding: 20px;
}
.row {
display: flex;
}
</style> </style>
<script> <script>
var timeline1 = new BBTimeline("myCanvas"); var timeline1 = new BBTimeline("myCanvas");
timeline1.OnEventClick = function(sender, e, event) { timeline1.OnMouseDown = function(sender, e, event) {
// console.log(e); LogInfo("");
LogInfo("OnMouseDown");
LogInfo(JSON.stringify(sender));
LogInfo(JSON.stringify(e));
LogInfo(JSON.stringify(event));
LogInfo("");
}
timeline1.OnClick = function(sender, e, event) {
LogInfo("");
LogInfo("OnClick");
LogInfo(JSON.stringify(sender));
LogInfo(JSON.stringify(e));
LogInfo(JSON.stringify(event));
LogInfo("");
} }
LoadDemo(); SetToday();
LoadToday();
function Clear() function Clear() {
{
timeline1.Clear(true); timeline1.Clear(true);
} }
function LoadDemo() function ToggleDebug() {
{
timeline1.AddEvent("2001-01-05", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-06", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-06", null, { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-16", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-06", "Event 2", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-06", null, { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-20", "Very Long Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-21", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-23", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-01-26", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-02-05", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-02-07", "Event", { Title: Math.random(), Description: Math.random() });
LoadToday();
timeline1.Invalidate(false, true);
}
function ToggleDebug()
{
timeline1.Debug = !timeline1.Debug; timeline1.Debug = !timeline1.Debug;
timeline1.Invalidate(true, true); timeline1.Invalidate(true, true);
} }
function LoadToday() function Refresh() {
{ timeline1.Invalidate(true, true);
// const date = timeline1.DateToString(new Date(), "yyyy-MM-dd");
timeline1.Load("2001-01-01");
} }
function LoadPrevious() function SetToday() {
{ const msPerDay = 1000 * 60 * 60 * 24;
const startDate = timeline1.DateToString(new Date(), "yyyy-MM-dd");
timeline1.Load(startDate);
const endDate = timeline1.CalcEndDate();
const noDays = Math.floor((timeline1.ConvertToDate(endDate) - timeline1.ConvertToDate(startDate)) / msPerDay);
LogInfo("Set start date to today (" + startDate + ")");
LogInfo("Show " + startDate + " to " + endDate + " (" + noDays + " days)");
}
function GenerateRandomMarker() {
const msPerDay = 1000 * 60 * 60 * 24;
const endDate = timeline1.CalcEndDate();
const noDays = Math.floor((timeline1.ConvertToDate(endDate) - timeline1.ConvertToDate(timeline1.ShowDate)) / msPerDay);
let randomDay = GetRandy(1, (noDays - 1));
let date = timeline1.ConvertToDate(timeline1.ShowDate);
date.setDate(date.getDate() + randomDay);
const markerDate = timeline1.DateToString(date, timeline1.DateParsePattern);
const markerName = "Random Marker #" + GetRandy(10000, 99999);
timeline1.AddEvent(markerDate, markerName, { Title: markerName, Description: "This is a randomly generated marker" });
timeline1.Invalidate(false, true);
LogInfo("Add marker (" + markerDate + ")");
}
function GoToToday() {
timeline1.Show(timeline1.StartDate);
LogInfo("Go to " + timeline1.ShowDate);
}
function GoToPreviousMonth() {
timeline1.ShowPrevious(); timeline1.ShowPrevious();
LogInfo("Go to " + timeline1.ShowDate);
} }
function LoadNext() function GoToNextMonth() {
{
timeline1.ShowNext(); timeline1.ShowNext();
LogInfo("Go to " + timeline1.ShowDate);
} }
function UpdateLabel() function UpdateLabel() {
{ const visibleMarkers = timeline1.FindVisibleEvents();
timeline1.UpdateLabel("2001-01-21", "Very Long Event"); if (visibleMarkers.length <= 0) {
LogInfo("No visible markers");
return;
}
const randy = GetRandy(0, (visibleMarkers.length - 1));
const newMarkerName = "Renamed Random Marker #" + GetRandy(10000, 99999);
LogInfo("Renamed marker #" + randy + " [" + visibleMarkers[randy].Label + "] to [" + newMarkerName + "]");
timeline1.UpdateLabel(visibleMarkers[randy].Date, newMarkerName);
} }
function UpdateMarker() function UpdateMarker() {
{ const visibleMarkers = timeline1.FindVisibleEvents();
timeline1.UpdateMarker("2001-01-21", "#E68422", "#FAE7D3"); if (visibleMarkers.length <= 0) {
LogInfo("No visible markers");
return;
}
const randy = GetRandy(0, (visibleMarkers.length - 1));
LogInfo("Change marker style #" + randy + " [" + visibleMarkers[randy].Label + "]");
timeline1.UpdateMarker(visibleMarkers[randy].Date, "#E68422", "#FAE7D3");
} }
function DeleteMarker() function DeleteMarker() {
{ const visibleMarkers = timeline1.FindVisibleEvents();
timeline1.DeleteMarker("2001-01-06"); if (visibleMarkers.length <= 0) {
LogInfo("No visible markers");
return;
}
const randy = GetRandy(0, (visibleMarkers.length - 1));
LogInfo("Delete marker #" + randy + " [" + visibleMarkers[randy].Label + "]");
timeline1.DeleteMarker(visibleMarkers[randy].Date);
timeline1.Invalidate(false, true); timeline1.Invalidate(false, true);
} }
function GetDisplayedDateRange() function FindVisibleEvents() {
{ const visibleMarkers = timeline1.FindVisibleEvents();
alert(timeline1.ShowDate + " - " + timeline1.CalcEndDate());
LogInfo("");
LogInfo(JSON.stringify(visibleMarkers));
LogInfo("");
} }
function FindEvent() function FindAllEvents() {
{ LogInfo("");
const result = timeline1.FindEvent("2001-01-26"); LogInfo(JSON.stringify(timeline1.Events));
LogInfo("");
}
console.log(result); function FindEvent() {
const date = document.getElementById("textbox1").value;
if (date == null) {
LogInfo("No marker found");
return;
}
alert(JSON.stringify(result)); const marker = timeline1.FindEvent(date);
if (marker == null) {
LogInfo("No marker found");
return;
}
LogInfo("");
LogInfo(JSON.stringify(marker));
LogInfo("");
} }
function FindDatePosition() function FindDatePosition()
{ {
const result = timeline1.FindDatePosition("2001-01-26"); const date = document.getElementById("textbox2").value;
if (date == null) {
LogInfo("No date position found");
return;
}
console.log(result); const marker = timeline1.FindDatePosition(date);
if (marker == null) {
LogInfo("No marker position found");
return;
}
alert(JSON.stringify(result)); LogInfo("");
LogInfo(JSON.stringify(marker));
LogInfo("");
} }
function FindVisibleEvents()
function LogInfo(value)
{ {
const result = timeline1.FindVisibleEvents() document.getElementById("memoBox1").value += value + "\n";
}
console.log(result); function GetRandy(min, max)
{
let rand = Math.random();
rand = Math.floor(rand * (max - min));
rand = rand + min;
alert(JSON.stringify(result)); return rand;
} }
</script> </script>