vwiebe/joplin-plugin-gtd-calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated hoverCard rendering logic

Browse Source
This commit is contained in:
Franco Speziali 2022-03-17 15:53:20 +01:00
parent 12e3c5653f
commit cf5cfecbc8
4 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/EventGroupingHtmlRenderer/DayRenderer.ts
View File

@ -9,7 +9,7 @@ export default class DayRenderer extends Renderer {
protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement { protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement {
const html = document.createElement("span"); const html = document.createElement("span");
html.className = "event"; html.className = "icon";
const dayInMonth = eventDate.getDate(); const dayInMonth = eventDate.getDate();

2
src/EventGroupingHtmlRenderer/MonthRenderer.ts
View File

@ -9,7 +9,7 @@ export default class MonthRenderer extends Renderer {
protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement { protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement {
const html = document.createElement("span"); const html = document.createElement("span");
html.className = "event"; html.className = "icon";
// unlike getDate(), getMonth is 0 based // unlike getDate(), getMonth is 0 based
const month = eventDate.getMonth() + 1; const month = eventDate.getMonth() + 1;

28
src/EventGroupingHtmlRenderer/Renderer.ts
View File

@ -1,3 +1,4 @@
import { format } from "date-fns";
import { generateRandomColor } from "../utilities"; import { generateRandomColor } from "../utilities";
import EventGrouping from "../EventGrouping"; import EventGrouping from "../EventGrouping";
import { Event } from "../types"; import { Event } from "../types";
@ -52,8 +53,17 @@ export default abstract class Renderer {
} }
protected renderHoverCard(events: Event[]): HTMLDivElement { protected renderHoverCard(events: Event[]): HTMLDivElement {
const htmlHoverCard = document.createElement("div"); const html = document.createElement("div");
htmlHoverCard.className = "hover-card"; html.className = "hover-card";
const htmlMonthYear = document.createElement("p");
htmlMonthYear.className = "month-year";
htmlMonthYear.textContent = events[0].date.toLocaleDateString(undefined, {
year: "numeric",
month: "long",
});
html.appendChild(htmlMonthYear);
const cardDetails = events.map((event) => { const cardDetails = events.map((event) => {
if (!event) { if (!event) {
@ -61,23 +71,27 @@ export default abstract class Renderer {
} }
const htmlEvent = document.createElement("div"); const htmlEvent = document.createElement("div");
const htmlDateText = document.createElement("p"); htmlEvent.className = "event";
htmlDateText.textContent = event.date.toLocaleDateString(); const htmlEventDate = document.createElement("p");
htmlEventDate.className = "date";
htmlEventDate.textContent = format(event.date, "EEEE do");
const htmlEventTitle = document.createElement("p"); const htmlEventTitle = document.createElement("p");
htmlEventTitle.className = "title";
htmlEventTitle.textContent = event.title; htmlEventTitle.textContent = event.title;
const htmlEventText = document.createElement("p"); const htmlEventText = document.createElement("p");
htmlEventText.className = "text";
htmlEventText.textContent = event.text; htmlEventText.textContent = event.text;
htmlEvent.appendChild(htmlDateText); htmlEvent.appendChild(htmlEventDate);
htmlEvent.appendChild(htmlEventTitle); htmlEvent.appendChild(htmlEventTitle);
htmlEvent.appendChild(htmlEventText); htmlEvent.appendChild(htmlEventText);
return htmlEvent; return htmlEvent;
}); });
cardDetails.forEach((cardDetail) => htmlHoverCard.appendChild(cardDetail)); cardDetails.forEach((cardDetail) => html.appendChild(cardDetail));
return htmlHoverCard; return html;
} }
protected renderIcon(event: Event | undefined): HTMLSpanElement { protected renderIcon(event: Event | undefined): HTMLSpanElement {

2
src/EventGroupingHtmlRenderer/WeekRenderer.ts
View File

@ -10,7 +10,7 @@ export default class WeekRenderer extends Renderer {
protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement { protected renderDateAsIcon(eventDate, groupIndex): HTMLSpanElement {
const html = document.createElement("span"); const html = document.createElement("span");
html.className = "event"; html.className = "icon";
const week = getWeek(eventDate); const week = getWeek(eventDate);