Merge pull request 'release/0.1.0.076-alpha' (#1 ) from release/0.1.0.076-alpha into master

Reviewed-on: Ray/BBTimeline#1
Added click and mousedown event
2023-10-08 15:07:53 +00:00 · 2023-10-08 15:57:22 +01:00 · 2023-10-06 01:05:54 +01:00
3 changed files with 261 additions and 86 deletions
--- a/bbtimeline.js
+++ b/bbtimeline.js
@ -264,7 +264,22 @@ class BBTimeline {

      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);
 });
  }

@ -381,7 +396,10 @@ class BBTimeline {
    return result;
  }

-  OnEventClick(sender, e, event) {
+  OnMouseDown(sender, e, event) {
+  }
+
+  OnClick(sender, e, event) {
  }


--- a/bbtimeline.min.js
+++ b/bbtimeline.min.js
--- a/demo-test.html
+++ b/demo-test.html
@ -17,29 +17,71 @@
 </head>
 <body>

+  <div class="row">
+    <div class="column1">
      <canvas id="myCanvas"></canvas>

-<p>
+      <p>
+        <textarea id="memoBox1" readonly></textarea>
+
+      </p>
+    </div>
+    <div class="column2">
+
+      <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="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>
-<p>
-  <button onclick="GetDisplayedDateRange()">Get Displayed Date Range</button>
-  <button onclick="FindEvent()">Find Event</button>
-  <button onclick="FindDatePosition()">Find Date Position</button>
+      </p>
+      <hr />
+
+      <p>
        <button onclick="FindVisibleEvents()">Find Visible Events</button>
-</p>
+        <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>
+
+
+
+
  <style>

 body {
@ -56,117 +98,227 @@ canvas {
  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>

  <script>

 var timeline1 = new BBTimeline("myCanvas");
-timeline1.OnEventClick = function(sender, e, event) {
-  // console.log(e);
+timeline1.OnMouseDown = function(sender, e, event) {
+  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();
-LoadToday();
+SetToday();





-function Clear()
-{
+function Clear() {
  timeline1.Clear(true);
 }

-function LoadDemo()
-{
-  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()
-{
+function ToggleDebug() {
  timeline1.Debug = !timeline1.Debug;
  timeline1.Invalidate(true, true);
 }

-function LoadToday()
-{
-  // const date = timeline1.DateToString(new Date(), "yyyy-MM-dd");
-
-  timeline1.Load("2001-01-01");
+function Refresh() {
+  timeline1.Invalidate(true, true);
 }

-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();
+
+  LogInfo("Go to " + timeline1.ShowDate);
 }

-function LoadNext()
-{
+function GoToNextMonth() {
  timeline1.ShowNext();
+
+  LogInfo("Go to " + timeline1.ShowDate);
 }

-function UpdateLabel()
-{
-  timeline1.UpdateLabel("2001-01-21", "Very Long Event");
+function UpdateLabel() {
+  const visibleMarkers = timeline1.FindVisibleEvents();
+  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()
-{
-  timeline1.UpdateMarker("2001-01-21", "#E68422", "#FAE7D3");
+function UpdateMarker() {
+  const visibleMarkers = timeline1.FindVisibleEvents();
+  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()
-{
-  timeline1.DeleteMarker("2001-01-06");
+function DeleteMarker() {
+  const visibleMarkers = timeline1.FindVisibleEvents();
+  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);
 }

-function GetDisplayedDateRange()
-{
-  alert(timeline1.ShowDate + " - " + timeline1.CalcEndDate());
+function FindVisibleEvents() {
+  const visibleMarkers = timeline1.FindVisibleEvents();
+
+  LogInfo("");
+  LogInfo(JSON.stringify(visibleMarkers));
+  LogInfo("");
 }

-function FindEvent()
-{
-  const result = timeline1.FindEvent("2001-01-26");
+function FindAllEvents() {
+  LogInfo("");
+  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()
 {
-  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>
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