release/0.1.0.076-alpha #1
@ -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
5
bbtimeline.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
320
demo-test.html
320
demo-test.html
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user