From 410404cfdd54c083b6609fd52334e02d320145d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 10 Nov 2021 01:40:22 +0100 Subject: Re-modularize javascript. This moves almost everything out of globals.ts, into sepparate files. Things are still slightly to tightly coupled. But that is worked on. --- static/event-creator.ts | 179 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 static/event-creator.ts (limited to 'static/event-creator.ts') diff --git a/static/event-creator.ts b/static/event-creator.ts new file mode 100644 index 00000000..cf3468ce --- /dev/null +++ b/static/event-creator.ts @@ -0,0 +1,179 @@ +export { EventCreator } + +import { VEvent } from './vevent' +import { v4 as uuid } from 'uuid' +import { ComponentBlock } from './components/vevent-block' +import { round_time } from './lib' +import { parseDate } from './lib' + +class EventCreator { + + /* Event which we are trying to create */ + ev: VEvent | null = null; + + /* Graphical block for event. Only here so we can find its siblings, + and update pointer events accordingly */ + event: Element | null = null; + + event_start: { x: number, y: number } = { x: NaN, y: NaN } + down_on_event: boolean = false + timeStart: number = 0 + + create_event_down(intended_target: HTMLElement): (e: MouseEvent) => any { + let that = this; + return function(e: MouseEvent) { + /* Only trigger event creation stuff on actuall events background, + NOT on its children */ + that.down_on_event = false; + if (e.target != intended_target) return; + that.down_on_event = true; + + that.event_start.x = e.clientX; + that.event_start.y = e.clientY; + } + } + + /* + round_to: what start and end times should round to when dragging, in fractionsb + of the width of the containing container. + + TODO limit this to only continue when on the intended event_container. + + (event → [0, 1)), 𝐑, bool → event → () + */ + create_event_move( + pos_in: ((c: HTMLElement, e: MouseEvent) => number), + round_to: number = 1, + wide_element: boolean = false + ): ((e: MouseEvent) => any) { + let that = this; + return function(this: HTMLElement, e: MouseEvent) { + if (e.buttons != 1 || !that.down_on_event) return; + + /* Create event when we start moving the mouse. */ + if (!that.ev) { + /* Small deadzone so tiny click and drags aren't registered */ + if (Math.abs(that.event_start.x - e.clientX) < 10 + && Math.abs(that.event_start.y - e.clientY) < 5) { return; } + + /* only allow start of dragging on background */ + if (e.target !== this) return; + + /* only on left click */ + if (e.buttons != 1) return; + + // let [popup, event] = that.create_empty_event(); + // that.event = event; + that.ev = new VEvent(); + that.ev.setProperty('summary', 'Created Event'); + that.ev.setProperty('uid', uuid()) + + // let ev_block = document.createElement('vevent-block') as ComponentBlock; + let ev_block = new ComponentBlock(that.ev.getProperty('uid')); + that.event = ev_block; + that.ev.register(ev_block); + + /* TODO better solution to add popup to DOM */ + // document.getElementsByTagName("main")[0].append(popup); + + /* [0, 1) -- where are we in the container */ + /* Ronud to force steps of quarters */ + /* NOTE for in-day events a floor here work better, while for + all day events I want a round, but which has the tip over point + around 0.7 instead of 0.5. + It might also be an idea to subtract a tiny bit from the short events + mouse position, since I feel I always get to late starts. + */ + + // that.event.dataset.time1 = '' + time; + // that.event.dataset.time2 = '' + time; + + /* ---------------------------------------- */ + + this.appendChild(ev_block); + + /* requires that event is child of an '.event-container'. */ + // new VComponent( + // event, + // wide_element=wide_element); + // bind_properties(event, wide_element); + + /* requires that dtstart and dtend properties are initialized */ + + /* ---------------------------------------- */ + + /* Makes all current events transparent when dragging over them. + Without this weird stuff happens when moving over them + + This includes ourselves. + */ + for (let e of this.children) { + (e as HTMLElement).style.pointerEvents = "none"; + } + + that.timeStart = round_time(pos_in(this, e), round_to); + } + + let time = round_time(pos_in(this, e), round_to); + + // let time1 = Number(that.event.dataset.time1); + // let time2 = round_time( + // pos_in(that.event.parentElement!, e), + // round_to); + // that.event.dataset.time2 = '' + time2 + + /* ---------------------------------------- */ + + let event_container = this.closest(".event-container") as HTMLElement; + + /* These two are in UTC */ + let container_start = parseDate(event_container.dataset.start!); + let container_end = parseDate(event_container.dataset.end!); + + /* ---------------------------------------- */ + + /* ms */ + let duration = container_end.valueOf() - container_start.valueOf(); + + let start_in_duration = duration * Math.min(that.timeStart, time); + let end_in_duration = duration * Math.max(that.timeStart, time); + + /* Notice that these are converted to UTC, since the intervals are given + in utc, and I only really care about local time (which a specific local + timezone doesn't give me) + */ + /* TODO Should these inherit UTC from container_*? */ + let d1 = new Date(container_start.getTime() + start_in_duration) + let d2 = new Date(container_start.getTime() + end_in_duration) + + /* TODO these writes should preferably be grouped, + to save a redraw for all registered listeners */ + that.ev.setProperty('dtstart', d1); + that.ev.setProperty('dtend', d2); + + // console.log(that.event); + // console.log(d1.format("~L~H:~M"), d2.format("~L~H:~M")); + } + } + + create_event_finisher(callback: ((ev: VEvent) => void)) { + let that = this; + return function create_event_up(e: MouseEvent) { + if (!that.ev) return; + + /* Restore pointer events for all existing events. + Allow pointer events on our new event + */ + for (let e of (that.event as Element).parentElement!.children) { + (e as HTMLElement).style.pointerEvents = ""; + } + + let localevent = that.ev; + that.ev = null + that.event = null; + + callback(localevent); + + } + } +} -- cgit v1.2.3 From ec9f95e5929ad7fd86909002b851e3fa71d2a46b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 15 Nov 2021 01:32:29 +0100 Subject: Fix calendar for popup. --- static/event-creator.ts | 2 ++ 1 file changed, 2 insertions(+) (limited to 'static/event-creator.ts') diff --git a/static/event-creator.ts b/static/event-creator.ts index cf3468ce..74ba4235 100644 --- a/static/event-creator.ts +++ b/static/event-creator.ts @@ -67,9 +67,11 @@ class EventCreator { that.ev = new VEvent(); that.ev.setProperty('summary', 'Created Event'); that.ev.setProperty('uid', uuid()) + that.ev.calendar = btoa('Calendar'); // let ev_block = document.createElement('vevent-block') as ComponentBlock; let ev_block = new ComponentBlock(that.ev.getProperty('uid')); + ev_block.classList.add('generated'); that.event = ev_block; that.ev.register(ev_block); -- cgit v1.2.3 From e8216ceb2cb5c61ef6fd6d6f6c9151511d01d8e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 15 Nov 2021 01:39:46 +0100 Subject: Propagate default-calendar from backend to frontend. --- static/event-creator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/event-creator.ts') diff --git a/static/event-creator.ts b/static/event-creator.ts index 74ba4235..97ffbd62 100644 --- a/static/event-creator.ts +++ b/static/event-creator.ts @@ -67,7 +67,7 @@ class EventCreator { that.ev = new VEvent(); that.ev.setProperty('summary', 'Created Event'); that.ev.setProperty('uid', uuid()) - that.ev.calendar = btoa('Calendar'); + that.ev.calendar = window.default_calendar; // let ev_block = document.createElement('vevent-block') as ComponentBlock; let ev_block = new ComponentBlock(that.ev.getProperty('uid')); -- cgit v1.2.3 From e5d682702f6954ebab946ca0eb67ab22f465f6ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Thu, 18 Nov 2021 21:40:19 +0100 Subject: Add setProperties, add type info to setProperty. --- static/event-creator.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'static/event-creator.ts') diff --git a/static/event-creator.ts b/static/event-creator.ts index 97ffbd62..6be94a9d 100644 --- a/static/event-creator.ts +++ b/static/event-creator.ts @@ -3,8 +3,8 @@ export { EventCreator } import { VEvent } from './vevent' import { v4 as uuid } from 'uuid' import { ComponentBlock } from './components/vevent-block' -import { round_time } from './lib' -import { parseDate } from './lib' +import { round_time, parseDate } from './lib' +import { ical_type } from './types' class EventCreator { @@ -148,10 +148,11 @@ class EventCreator { let d1 = new Date(container_start.getTime() + start_in_duration) let d2 = new Date(container_start.getTime() + end_in_duration) - /* TODO these writes should preferably be grouped, - to save a redraw for all registered listeners */ - that.ev.setProperty('dtstart', d1); - that.ev.setProperty('dtend', d2); + let type: ical_type = wide_element ? 'date' : 'date-time'; + that.ev.setProperties([ + ['dtstart', d1, type], + ['dtend', d2, type], + ]); // console.log(that.event); // console.log(d1.format("~L~H:~M"), d2.format("~L~H:~M")); -- cgit v1.2.3 From 5211cea181bbdf9c5296f09806c3735197bc2042 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 00:13:15 +0100 Subject: Close popup on event creation. --- static/event-creator.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'static/event-creator.ts') diff --git a/static/event-creator.ts b/static/event-creator.ts index 6be94a9d..3459dba1 100644 --- a/static/event-creator.ts +++ b/static/event-creator.ts @@ -65,7 +65,6 @@ class EventCreator { // let [popup, event] = that.create_empty_event(); // that.event = event; that.ev = new VEvent(); - that.ev.setProperty('summary', 'Created Event'); that.ev.setProperty('uid', uuid()) that.ev.calendar = window.default_calendar; -- cgit v1.2.3