diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-10-04 23:18:24 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-10-04 23:18:24 +0200 |
commit | 8ec2f441d40ab89b40cc3158f65c914eff497cee (patch) | |
tree | c05638cd570a641234ad5973a1790762e7bc8cca /static/script.ts | |
parent | {.js => .ts} on relavant files. (diff) | |
download | calp-8ec2f441d40ab89b40cc3158f65c914eff497cee.tar.gz calp-8ec2f441d40ab89b40cc3158f65c914eff497cee.tar.xz |
Major typescript work.
Diffstat (limited to '')
-rw-r--r-- | static/script.ts | 193 |
1 files changed, 105 insertions, 88 deletions
diff --git a/static/script.ts b/static/script.ts index 16ff7bbd..8984c19a 100644 --- a/static/script.ts +++ b/static/script.ts @@ -6,6 +6,10 @@ class EventCreator { + event: HTMLElement | false + event_start: { x: number, y: number } + down_on_event: boolean + /* dynamicly created event when dragging */ constructor() { this.event = false; @@ -13,7 +17,7 @@ class EventCreator { this.down_on_event = false; } - create_empty_event () { + create_empty_event() { /* TODO this doesn't clone JS attributes */ // let event = document.getElementById("event-template") @@ -40,7 +44,7 @@ class EventCreator { /* -------------------- */ /* Fix tabs for newly created popup */ - let id = gensym ("__js_event"); + let id = gensym("__js_event"); // TODO remove button? // $("button 2??").onclick = `remove_event(document.getElementById('${id}'))` @@ -65,15 +69,15 @@ class EventCreator { /* -------------------- */ - event.id = id; - popup.id = "popup" + id; + // event.id = id; + // popup.id = "popup" + id; - return [popup, event]; + // return [popup, event]; } - create_event_down (intended_target) { + create_event_down(intended_target: HTMLElement): (e: MouseEvent) => any { let that = this; - return function (e) { + return function(e: MouseEvent) { /* Only trigger event creation stuff on actuall events background, NOT on its children */ that.down_on_event = false; @@ -93,20 +97,23 @@ class EventCreator { (event → [0, 1)), 𝐑, bool → event → () */ - create_event_move(pos_in, round_to=1, wide_element=false) { + 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 (e) { - if (e.buttons != 1 || ! that.down_on_event) return; + 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.event) { + if (!that.event) { /* 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; } + && Math.abs(that.event_start.y - e.clientY) < 5) { return; } /* only allow start of dragging on background */ - if (e.target != this) return; + if (e.target !== this) return; /* only on left click */ if (e.buttons != 1) return; @@ -128,8 +135,8 @@ class EventCreator { */ let time = round_time(pos_in(this, e), round_to); - that.event.dataset.time1 = time; - that.event.dataset.time2 = time; + that.event.dataset.time1 = '' + time; + that.event.dataset.time2 = '' + time; /* ---------------------------------------- */ @@ -151,31 +158,32 @@ class EventCreator { This includes ourselves. */ for (let e of this.children) { - e.style.pointerEvents = "none"; + (e as HTMLElement).style.pointerEvents = "none"; } } let time1 = Number(that.event.dataset.time1); - let time2 = that.event.dataset.time2 = - round_time(pos_in(that.event.parentElement, e), - round_to); + let time2 = round_time( + pos_in(that.event.parentElement!, e), + round_to); + that.event.dataset.time2 = '' + time2 /* ---------------------------------------- */ - let event_container = that.event.closest(".event-container"); + let event_container = that.event.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); + let container_start = parseDate(event_container.dataset.start!); + let container_end = parseDate(event_container.dataset.end!); /* ---------------------------------------- */ /* ms */ - let duration = container_end - container_start; + let duration = container_end.valueOf() - container_start.valueOf(); - let start_in_duration = duration * Math.min(time1,time2); - let end_in_duration = duration * Math.max(time1,time2); + let start_in_duration = duration * Math.min(time1, time2); + let end_in_duration = duration * Math.max(time1, time2); /* 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 @@ -187,37 +195,40 @@ class EventCreator { // console.log(that.event); console.log(d1.format("~L~H:~M"), d2.format("~L~H:~M")); - that.event.redraw({ getProperty: (name) => - ({ dtstart: d1, dtend: d2 })[name]}); + // TODO + // (that.event as Redrawable).redraw({ + // getProperty: (name) => + // ({ dtstart: d1, dtend: d2 })[name] + // }); // that.event.properties.dtstart = d1; // that.event.properties.dtend = d2; } } - create_event_finisher (callback) { + create_event_finisher(callback: ((event: VEvent) => void)) { let that = this; - return function create_event_up (e) { - if (! that.event) return; + return function create_event_up(e: MouseEvent) { + if (!that.event) return; /* Restore pointer events for all existing events. Allow pointer events on our new event */ - for (let e of that.event.parentElement.children) { - e.style.pointerEvents = ""; + for (let e of that.event.parentElement!.children) { + (e as HTMLElement).style.pointerEvents = ""; } // place_in_edit_mode(that.event); let localevent = that.event; - that.event = null; + that.event = false - callback (localevent); + // callback(localevent); } } } - + /* This incarnation of this function only adds the calendar switcher dropdown. All events are already editable by switching to that tab. @@ -259,14 +270,15 @@ class EventCreator { // tab.querySelector("input[name='summary']").focus(); // } - -window.addEventListener('load', function () { +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; const sch = new SmallcalCellHighlight( - document.querySelector('.small-calendar')) + document.querySelector('.small-calendar')!) const timebar = new Timebar(/*start_time, end_time*/); @@ -282,42 +294,45 @@ window.addEventListener('load', function () { if (true && EDIT_MODE) { let eventCreator = new EventCreator; for (let c of document.getElementsByClassName("events")) { - c.onmousedown = eventCreator.create_event_down(c); - c.onmousemove = eventCreator.create_event_move( - (c,e) => e.offsetY / c.clientHeight, + 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.onmouseup = eventCreator.create_event_finisher( - function (event) { - let popupElement = document.getElementById("popup" + event.id); - open_popup(popupElement); + 1 / (24 * 4), false + )); + c.addEventListener('mouseup', eventCreator.create_event_finisher( + function(event: VEvent) { + // let popupElement = document.getElementById("popup" + event.id); + // open_popup(popup_from_event(event)); - popupElement.querySelector("input[name='summary']").focus(); + // popupElement.querySelector("input[name='summary']").focus(); - }); + })); } 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, + (c, e) => e.offsetX / c.clientWidth, /* every day, NOTE should be changed to check interval of longevents */ - 1/7, true + 1 / 7, true ); c.onmouseup = eventCreator.create_event_finisher( - function (event) { - let popupElement = document.getElementById("popup" + event.id); - open_popup(popupElement); + function(event) { + // TODO restore this + // let popupElement = document.getElementById("popup" + event.id); + // open_popup(popupElement); - popupElement.querySelector("input[name='summary']").focus(); + // popupElement.querySelector("input[name='summary']").focus(); - /* This assumes that it's unchecked beforehand. - Preferably we would just ensure that it's checked here, - But we also need to make sure that the proper handlers - are run then */ - popupElement.querySelector("input[name='wholeday']").click(); + // /* This assumes that it's unchecked beforehand. + // Preferably we would just ensure that it's checked here, + // But we also need to make sure that the proper handlers + // are run then */ + // popupElement.querySelector("input[name='wholeday']").click(); }); } @@ -332,7 +347,7 @@ window.addEventListener('load', function () { On mobile they also have the problem that they make the whole page scroll there. */ - el.parentElement.removeAttribute("href"); + el.parentElement!.removeAttribute("href"); let popup = document.getElementById("popup" + el.id); // popup.getElementsByClassName("edit-form")[0].onsubmit = function () { @@ -349,12 +364,12 @@ window.addEventListener('load', function () { } - document.onkeydown = function (evt) { - evt = evt || window.event; - if (! evt.key) return; - if (evt.key.startsWith("Esc")) { - close_all_popups(); - } + document.onkeydown = function(evt) { + evt = evt || window.event; + if (!evt.key) return; + if (evt.key.startsWith("Esc")) { + close_all_popups(); + } } @@ -364,20 +379,21 @@ window.addEventListener('load', function () { form updates. */ - let gotodatebtn = document.querySelector("#jump-to .btn"); + 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']").onchange = function () { - let date = this.valueAsDate.format("~Y-~m-~d"); - console.log(date); - golink.href = date + ".html"; - } + (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"; + } /* ---------------------------------------- */ @@ -386,26 +402,27 @@ window.addEventListener('load', function () { Before init_input_list since we need this listener to be propagated to clones. [CATEGORIES_BIND] */ - 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); - } - } + // 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) { + document.addEventListener('keydown', function(event) { if (event.key == '/') { - let searchbox = document.querySelector('.simplesearch [name=q]') + let searchbox = document.querySelector('.simplesearch [name=q]') as HTMLInputElement // focuses the input, and selects all the text in it searchbox.select(); event.preventDefault(); |