1 files changed, 218 insertions, 0 deletions
diff --git a/static/script.ts b/static/script.ts
new file mode 100644
index 00000000..895b0081
--- /dev/null
+++ b/static/script.ts
@@ -0,0 +1,218 @@
+import { VEvent, xml_to_vcal } from './vevent'
+import { SmallcalCellHighlight, Timebar } from './clock'
+import { makeElement } from './lib'
+import { vcal_objects, event_calendar_mapping } from './globals'
+import { EventCreator } from './event-creator'
+import { PopupElement, setup_popup_element } from './components/popup-element'
+import { initialize_components } from './elements'
+
+/*
+  calp specific stuff
+*/
+
+window.addEventListener('load', function() {
+
+    /*
+      TODO possibly check here that both window.EDIT_MODE and window.VIEW have
+      defined values.
+     */
+
+    // let json_objects_el = document.getElementById('json-objects');
+    let div = document.getElementById('xcal-data')!;
+    let vevents = div.firstElementChild!.children;
+
+    for (let vevent of vevents) {
+        let ev = xml_to_vcal(vevent);
+        vcal_objects.set(ev.getProperty('uid'), ev)
+    }
+
+
+    let div2 = document.getElementById('calendar-event-mapping')!;
+    for (let calendar of div2.children) {
+        let calendar_name = calendar.getAttribute('key')!;
+        for (let child of calendar.children) {
+            let uid = child.textContent;
+            if (!uid) {
+                throw "UID required"
+            }
+            event_calendar_mapping.set(uid, calendar_name);
+            let obj = vcal_objects.get(uid);
+            if (obj) obj.calendar = calendar_name
+        }
+    }
+
+    initialize_components();
+
+    /* A full redraw here is WAY to slow */
+    // for (let [_, obj] of vcal_objects) {
+    //     for (let registered of obj.registered) {
+    //         registered.redraw(obj);
+    //     }
+    // }
+
+
+
+    // let start_time = document.querySelector("meta[name='start-time']").content;
+    // let end_time = document.querySelector("meta[name='end-time']").content;
+
+    const sch = new SmallcalCellHighlight(
+        document.querySelector('.small-calendar')!)
+
+    const timebar = new Timebar(/*start_time, end_time*/);
+
+    timebar.update(new Date);
+    sch.update(new Date);
+    window.setInterval(() => {
+        let d = new Date;
+        timebar.update(d);
+        sch.update(d);
+    }, 1000 * 60);
+
+    /* Is event creation active? */
+    if (true && window.EDIT_MODE) {
+        let eventCreator = new EventCreator;
+        for (let c of document.getElementsByClassName("events")) {
+            if (!(c instanceof HTMLElement)) continue;
+            c.addEventListener('mousedown', eventCreator.create_event_down(c));
+            c.addEventListener('mousemove', eventCreator.create_event_move(
+                (c, e) => e.offsetY / c.clientHeight,
+                /* every quarter, every hour */
+                1 / (24 * 4), false
+            ));
+            c.addEventListener('mouseup', eventCreator.create_event_finisher(
+                function(ev: VEvent) {
+                    let uid = ev.getProperty('uid');
+                    vcal_objects.set(uid, ev);
+                    setup_popup_element(ev);
+                }));
+        }
+
+        for (let c of document.getElementsByClassName("longevents")) {
+            if (!(c instanceof HTMLElement)) continue;
+            c.onmousedown = eventCreator.create_event_down(c);
+            c.onmousemove = eventCreator.create_event_move(
+                (c, e) => e.offsetX / c.clientWidth,
+                /* every day, NOTE should be changed to check
+                   interval of longevents */
+                1 / 7, true
+            );
+            c.onmouseup = eventCreator.create_event_finisher(
+                function(ev: VEvent) {
+                    let uid = ev.getProperty('uid');
+                    vcal_objects.set(uid, ev);
+                    setup_popup_element(ev);
+                });
+        }
+    }
+
+    for (let el of document.getElementsByClassName("event")) {
+        /* Popup script replaces need for anchors to events.
+           On mobile they also have the problem that they make
+           the whole page scroll there.
+        */
+        el.parentElement!.removeAttribute("href");
+
+        let popup = document.getElementById("popup" + el.id);
+        // popup.getElementsByClassName("edit-form")[0].onsubmit = function () {
+        //     create_event(el);
+        //     return false; /* stop default */
+        // }
+
+        /* Bind all vcomponent properties into javascript. */
+        // if (el.closest(".longevents")) {
+        //     new VComponent(el, true);
+        // } else {
+        //     new VComponent(el, false);
+        // }
+
+    }
+
+    document.onkeydown = function(evt) {
+        evt = evt || window.event;
+        if (!evt.key) return;
+        if (evt.key.startsWith("Esc")) {
+            for (let popup of document.querySelectorAll("popup-element[visible]")) {
+                popup.removeAttribute('visible')
+            }
+        }
+    }
+
+
+    /* Replace backend-driven [today] link with frontend, with one that
+       gets correctly set in the frontend. Similarly, update the go to
+       specific date button into a link which updates wheneven the date
+       form updates.
+    */
+
+    let gotodatebtn = document.querySelector("#jump-to .btn")!;
+    let target_href = (new Date).format("~Y-~m-~d") + ".html";
+    let golink = makeElement('a', {
+        className: 'btn',
+        href: target_href,
+        innerHTML: gotodatebtn.innerHTML,
+    }) as HTMLAnchorElement
+    gotodatebtn.replaceWith(golink);
+
+    (document.querySelector("#jump-to input[name='date']") as HTMLInputElement)
+        .onchange = function() {
+            let date = (this as HTMLInputElement).valueAsDate!.format("~Y-~m-~d");
+            console.log(date);
+            golink.href = date + ".html";
+        }
+
+    /* ---------------------------------------- */
+
+    /* needs to be called AFTER bind_properties, but BEFORE init_input_list
+       After bind_properties since that initializes categories to a possible field
+       Before init_input_list since we need this listener to be propagated to clones.
+       [CATEGORIES_BIND]
+    */
+    // TODO fix this
+    // for (let lst of document.querySelectorAll(".input-list[data-property='categories']")) {
+    //     let f = function() {
+    //         console.log(lst, lst.closest('.popup-container'));
+    //         let event = event_from_popup(lst.closest('.popup-container'))
+    //         event.properties.categories = lst.get_value();
+    //     };
+
+    //     for (let inp of lst.querySelectorAll('input')) {
+    //         inp.addEventListener('input', f);
+    //     }
+    // }
+
+    // init_arbitary_kv();
+
+    // init_input_list();
+
+    document.addEventListener('keydown', function(event) {
+        /* Physical key position, names are what that key would
+           be in QWERTY */
+        let i = ({
+            'KeyQ': 0,
+            'KeyW': 1,
+            'KeyE': 2,
+            'KeyR': 3,
+            'KeyT': 4,
+            'KeyY': 5,
+        })[event.code];
+        if (i === undefined) return
+        if (!PopupElement.activePopup) return;
+        let element = PopupElement
+            .activePopup
+            .querySelectorAll("[role=tab]")[i] as HTMLInputElement | undefined
+        if (!element) return;
+        /* don't switch tab if event was fired while writing */
+        if ('value' in (event.target as any)) return;
+        element.click();
+    });
+
+    document.addEventListener('keydown', function(event) {
+        if (event.key !== '/') return;
+        if ('value' in (event.target as any)) return;
+
+        let searchbox = document.querySelector('.simplesearch [name=q]') as HTMLInputElement
+        // focuses the input, and selects all the text in it
+        searchbox.select();
+        event.preventDefault();
+    });
+})