From 568ca6a042b3246f0d22d3d9d7c504d7e4c73e68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 1 Aug 2022 20:28:00 +0200 Subject: Minor cleanup in TS files. --- static/components.ts | 40 ++++++++++++++++++++++++++++++++++++ static/components/date-time-input.ts | 2 -- static/components/input-list.ts | 2 -- static/components/popup-element.ts | 7 +++++-- static/components/slider.ts | 18 ++++++++-------- static/components/vevent-block.ts | 2 +- static/components/vevent-edit.ts | 8 +++----- static/components/vevent.ts | 4 ++-- static/elements.ts | 40 ------------------------------------ static/event-creator.ts | 10 ++++----- static/globals.ts | 2 +- static/script.ts | 2 +- static/vevent.ts | 8 ++++---- 13 files changed, 71 insertions(+), 74 deletions(-) create mode 100644 static/components.ts delete mode 100644 static/elements.ts diff --git a/static/components.ts b/static/components.ts new file mode 100644 index 00000000..e5fabba6 --- /dev/null +++ b/static/components.ts @@ -0,0 +1,40 @@ +import { ComponentDescription } from './components/vevent-description' +import { ComponentEdit } from './components/vevent-edit' +import { VEventDL } from './components/vevent-dl' +import { ComponentBlock } from './components/vevent-block' +import { DateTimeInput } from './components/date-time-input' +import { PopupElement } from './components/popup-element' +import { InputList } from './components/input-list' +import { EditRRule } from './components/edit-rrule' +import { TabGroupElement } from './components/tab-group-element' +import { VEventChangelog } from './components/changelog' +import { SliderInput } from './components/slider' +import { DateJump } from './components/date-jump' + +export { initialize_components } + +function initialize_components() { + + + /* These MUST be created AFTER vcal_objcets and event_calendar_mapping are + inistialized, since their constructors assume that that piece of global + state is available */ + customElements.define('vevent-description', ComponentDescription); + customElements.define('vevent-edit', ComponentEdit); + customElements.define('vevent-dl', VEventDL); + customElements.define('vevent-block', ComponentBlock); + customElements.define('vevent-edit-rrule', EditRRule); + + /* date-time-input should be instansiatable any time, but we do it here + becouse why not */ + + customElements.define('date-time-input', DateTimeInput /*, { extends: 'input' } */) + customElements.define('input-list', InputList); + customElements.define('slider-input', SliderInput); + customElements.define('date-jump', DateJump); + + /* These maybe also require that the global maps are initialized */ + customElements.define('popup-element', PopupElement) + customElements.define('tab-group', TabGroupElement) + customElements.define('vevent-changelog', VEventChangelog); +} diff --git a/static/components/date-time-input.ts b/static/components/date-time-input.ts index 005e4190..20e9a505 100644 --- a/static/components/date-time-input.ts +++ b/static/components/date-time-input.ts @@ -68,7 +68,6 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { set value(date: Date) { let [d, t] = date.format("~L~Y-~m-~dT~H:~M").split('T'); - // console.log(d, t); this.date.value = d; this.time.value = t; @@ -98,7 +97,6 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { } set stringValue(new_value: Date | string) { - // console.log('Setting date'); let date, time, dateonly = false; if (new_value instanceof Date) { date = new_value.format("~L~Y-~m-~d"); diff --git a/static/components/input-list.ts b/static/components/input-list.ts index 34696e3e..0afd4999 100644 --- a/static/components/input-list.ts +++ b/static/components/input-list.ts @@ -1,7 +1,5 @@ export { InputList } -/* This file replaces input_list.js */ - /* TODO allow each item to be a larger unit, possibly containing multiple input fields. diff --git a/static/components/popup-element.ts b/static/components/popup-element.ts index 3300f885..458f543c 100644 --- a/static/components/popup-element.ts +++ b/static/components/popup-element.ts @@ -71,10 +71,12 @@ class PopupElement extends ComponentVEvent { return ['visible']; } - attributeChangedCallback(name: string, oldValue?: string, newValue?: string) { + attributeChangedCallback(name: string, _?: string, newValue?: string) { switch (name) { case 'visible': - this.onVisibilityChange() + if (newValue !== null) + /* Only run resize code when showing the popup */ + this.onVisibilityChange() break; } } @@ -92,6 +94,7 @@ class PopupElement extends ComponentVEvent { } private onVisibilityChange() { + console.log('here'); /* TODO better way to find root */ let root; diff --git a/static/components/slider.ts b/static/components/slider.ts index a48d5a40..48abc91b 100644 --- a/static/components/slider.ts +++ b/static/components/slider.ts @@ -24,14 +24,14 @@ class SliderInput extends HTMLElement { constructor(min?: number, max?: number, step?: number, value?: number) { super(); - this.min = min || parseFloat(this.getAttribute('min') || ""+dflt['min']); - this.max = max || parseFloat(this.getAttribute('max') || ""+dflt['max']); - this.step = step || parseFloat(this.getAttribute('step') || ""+dflt['step']); + this.min = min || parseFloat(this.getAttribute('min') || "" + dflt['min']); + this.max = max || parseFloat(this.getAttribute('max') || "" + dflt['max']); + this.step = step || parseFloat(this.getAttribute('step') || "" + dflt['step']); // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value const defaultValue = (this.max < this.min) - ? this.min - : this.min + (this.max - this.min)/2; + ? this.min + : this.min + (this.max - this.min) / 2; this.slider = makeElement('input', { type: 'range', @@ -48,8 +48,8 @@ class SliderInput extends HTMLElement { value: this.value, }) as HTMLInputElement - this.slider.addEventListener('input', (e) => this.propagate(e)); - this.textIn.addEventListener('input', (e) => this.propagate(e)); + this.slider.addEventListener('input', e => this.propagate(e)); + this.textIn.addEventListener('input', e => this.propagate(e)); /* MUST be after sub components are bound */ this.value = "" + (value || this.getAttribute('value') || defaultValue); @@ -64,7 +64,7 @@ class SliderInput extends HTMLElement { return ['min', 'max', 'step'] } - attributeChangedCallback(name: Attribute, _: string|null, to: string|null): void { + attributeChangedCallback(name: Attribute, _?: string, to?: string): void { if (to) { this.slider.setAttribute(name, to); this.textIn.setAttribute(name, to); @@ -72,7 +72,7 @@ class SliderInput extends HTMLElement { this.slider.removeAttribute(name); this.textIn.removeAttribute(name); } - this[name] = parseFloat(to || ""+dflt[name]) + this[name] = parseFloat(to || "" + dflt[name]) } propagate(e: Event) { diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts index 8cf61d30..9bbb8e7e 100644 --- a/static/components/vevent-block.ts +++ b/static/components/vevent-block.ts @@ -91,7 +91,7 @@ class ComponentBlock extends ComponentVEvent { if (data.getProperty('rrule') !== undefined) { let rep = this.getElementsByClassName('repeating') - if (rep && rep.length !== 0) { + if (rep.length !== 0) { (rep[0] as HTMLElement).innerText = '↺' } } diff --git a/static/components/vevent-edit.ts b/static/components/vevent-edit.ts index bf72678c..686ad5e8 100644 --- a/static/components/vevent-edit.ts +++ b/static/components/vevent-edit.ts @@ -49,7 +49,7 @@ class ComponentEdit extends ComponentVEvent { // return; /* Handle calendar dropdown */ - for (let el of this.getElementsByClassName('calendar-selection')) { + for (let el of this.querySelectorAll('select.calendar-selection')) { for (let opt of el.getElementsByTagName('option')) { opt.selected = false; } @@ -57,7 +57,7 @@ class ComponentEdit extends ComponentVEvent { (el as HTMLSelectElement).value = data.calendar; } - el.addEventListener('change', (e) => { + el.addEventListener('change', e => { let v = (e.target as HTMLSelectElement).selectedOptions[0].value let obj = vcal_objects.get(this.uid)! obj.calendar = v; @@ -69,9 +69,8 @@ class ComponentEdit extends ComponentVEvent { // for (let el of this.getElementsByClassName("interactive")) { for (let el of this.querySelectorAll("[data-property]")) { // console.log(el); - el.addEventListener('input', (e) => { + el.addEventListener('input', () => { let obj = vcal_objects.get(this.uid) - // console.log(el, e); if (obj === undefined) { throw 'No object with uid ' + this.uid } @@ -83,7 +82,6 @@ class ComponentEdit extends ComponentVEvent { console.log(el, 'not an HTMLInputElement'); return; } - // console.log(`obj[${el.dataset.property!}] = `, el.value); obj.setProperty( el.dataset.property!, el.value) diff --git a/static/components/vevent.ts b/static/components/vevent.ts index 5852a2ff..7487cbb6 100644 --- a/static/components/vevent.ts +++ b/static/components/vevent.ts @@ -10,12 +10,12 @@ Lacks an accompaning tag, and shouldn't be directly instanciated. */ abstract class ComponentVEvent extends HTMLElement { - template: HTMLTemplateElement | null + template?: HTMLTemplateElement uid: string constructor(uid?: string) { super(); - this.template = document.getElementById(this.tagName.toLowerCase()) as HTMLTemplateElement | null + this.template = document.getElementById(this.tagName.toLowerCase()) as HTMLTemplateElement | undefined let real_uid; diff --git a/static/elements.ts b/static/elements.ts deleted file mode 100644 index e5fabba6..00000000 --- a/static/elements.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { ComponentDescription } from './components/vevent-description' -import { ComponentEdit } from './components/vevent-edit' -import { VEventDL } from './components/vevent-dl' -import { ComponentBlock } from './components/vevent-block' -import { DateTimeInput } from './components/date-time-input' -import { PopupElement } from './components/popup-element' -import { InputList } from './components/input-list' -import { EditRRule } from './components/edit-rrule' -import { TabGroupElement } from './components/tab-group-element' -import { VEventChangelog } from './components/changelog' -import { SliderInput } from './components/slider' -import { DateJump } from './components/date-jump' - -export { initialize_components } - -function initialize_components() { - - - /* These MUST be created AFTER vcal_objcets and event_calendar_mapping are - inistialized, since their constructors assume that that piece of global - state is available */ - customElements.define('vevent-description', ComponentDescription); - customElements.define('vevent-edit', ComponentEdit); - customElements.define('vevent-dl', VEventDL); - customElements.define('vevent-block', ComponentBlock); - customElements.define('vevent-edit-rrule', EditRRule); - - /* date-time-input should be instansiatable any time, but we do it here - becouse why not */ - - customElements.define('date-time-input', DateTimeInput /*, { extends: 'input' } */) - customElements.define('input-list', InputList); - customElements.define('slider-input', SliderInput); - customElements.define('date-jump', DateJump); - - /* These maybe also require that the global maps are initialized */ - customElements.define('popup-element', PopupElement) - customElements.define('tab-group', TabGroupElement) - customElements.define('vevent-changelog', VEventChangelog); -} diff --git a/static/event-creator.ts b/static/event-creator.ts index 0f2c42b4..5e55e64e 100644 --- a/static/event-creator.ts +++ b/static/event-creator.ts @@ -9,11 +9,11 @@ import { ical_type } from './types' class EventCreator { /* Event which we are trying to create */ - ev: VEvent | null = null; + ev?: VEvent /* Graphical block for event. Only here so we can find its siblings, and update pointer events accordingly */ - event: Element | null = null; + event?: Element event_start: { x: number, y: number } = { x: NaN, y: NaN } down_on_event: boolean = false @@ -160,7 +160,7 @@ class EventCreator { create_event_finisher(callback: ((ev: VEvent) => void)) { let that = this; - return function create_event_up(e: MouseEvent) { + return function create_event_up(_: MouseEvent) { if (!that.ev) return; /* Restore pointer events for all existing events. @@ -171,8 +171,8 @@ class EventCreator { } let localevent = that.ev; - that.ev = null - that.event = null; + that.ev = undefined + that.event = undefined; callback(localevent); diff --git a/static/globals.ts b/static/globals.ts index d90a3681..243e15e4 100644 --- a/static/globals.ts +++ b/static/globals.ts @@ -20,7 +20,7 @@ declare global { EDIT_MODE: boolean; default_calendar: string; - addNewEvent: ((e: any) => void); + addNewEvent(): void; } } window.vcal_objects = vcal_objects; diff --git a/static/script.ts b/static/script.ts index ec771773..9238d834 100644 --- a/static/script.ts +++ b/static/script.ts @@ -6,7 +6,7 @@ import { 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' +import { initialize_components } from './components' /* calp specific stuff diff --git a/static/vevent.ts b/static/vevent.ts index 6a2c6f0f..2bd4d3e0 100644 --- a/static/vevent.ts +++ b/static/vevent.ts @@ -9,7 +9,7 @@ export { /* Something which can be redrawn */ interface Redrawable extends HTMLElement { - redraw: ((data: VEvent) => void) + redraw(data: VEvent): void } function isRedrawable(x: HTMLElement): x is Redrawable { @@ -26,7 +26,7 @@ class VEventValue { value: any parameters: Map - constructor(type: ical_type, value: any, parameters = new Map()) { + constructor(type: ical_type, value: any, parameters = new Map) { this.type = type; this.value = value; this.parameters = parameters; @@ -76,7 +76,7 @@ class VEventValue { } } -/* maybe ... */ +/* TODO maybe ... */ class VEventDuration extends VEventValue { } @@ -514,7 +514,7 @@ function xml_to_vcal(xml: Element): VEvent { let property_map: Map = new Map; if (properties) { - property_loop: + /* property_loop: */ for (var i = 0; i < properties.childElementCount; i++) { let tag = properties.childNodes[i]; if (!(tag instanceof Element)) continue; -- cgit v1.2.3