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.

1 files changed, 33 insertions, 164 deletions

diff --git a/static/script.ts b/static/script.ts
index 21685ee9..b9336165 100644
--- a/static/script.ts
+++ b/static/script.ts
@@ -1,191 +1,60 @@
 import { close_all_popups } from './popup'
-import { VEvent } from './vevent'
+import { VEvent, xml_to_vcal } from './vevent'
 import { SmallcalCellHighlight, Timebar } from './clock'
-import { makeElement, parseDate, round_time } from './lib'
-import { vcal_objects, ComponentBlock, PopupElement } from './globals'
+import { makeElement } from './lib'
+import { vcal_objects, event_calendar_mapping, EDIT_MODE } from './globals'
 import { open_popup } from './popup'
-
-import { v4 as uuid } from 'uuid'
+import { EventCreator } from './event-creator'
+import { PopupElement } from './components/popup-element'
+import { initialize_components } from './elements'
 
 /*
   calp specific stuff
 */
 
-class EventCreator {
-
-    /* Event which we are trying to create */
-    ev: VEvent | null = null;
+window.addEventListener('load', function() {
 
-    /* Graphical block for event. Only here so we can find its siblings,
-       and update pointer events accordingly */
-    event: Element | null = null;
+    // let json_objects_el = document.getElementById('json-objects');
+    let div = document.getElementById('xcal-data')!;
+    let vevents = div.firstElementChild!.children;
 
-    event_start: { x: number, y: number } = { x: NaN, y: NaN }
-    down_on_event: boolean = false
-    timeStart: number = 0
+    for (let vevent of vevents) {
+        let ev = xml_to_vcal(vevent);
+        vcal_objects.set(ev.getProperty('uid'), ev)
+    }
 
-    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;
+    let div2 = document.getElementById('calendar-event-mapping')!;
+    for (let calendar of div2.children) {
+        for (let child of calendar.children) {
+            event_calendar_mapping.set(
+                child.innerHTML, calendar.getAttribute('key')!);
         }
     }
 
     /*
-      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 → ()
+      - .popup
+      - .block
+      - .list
      */
-    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"));
+    /*
+    let vevent_els = document.getElementsByClassName('vevent')
+    for (let el of vevent_els) {
+        try {
+            vcal_objects[el.dataset.uid].register(el);
+        } catch {
+            console.error("Invalid something, uid = ", el.dataset.uid,
+                          "el = ", el
+                         );
         }
     }
+    */
 
-    create_event_finisher(callback: ((ev: VEvent) => void)) {
-        let that = this;
-        return function create_event_up(e: MouseEvent) {
-            if (!that.ev) return;
+    initialize_components();
 
-            /* 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);
 
-        }
-    }
-}
-
-declare let EDIT_MODE: boolean
-
-window.addEventListener('load', function() {
     // let start_time = document.querySelector("meta[name='start-time']").content;
     // let end_time = document.querySelector("meta[name='end-time']").content;