aboutsummaryrefslogtreecommitdiff
path: root/static/components
diff options
context:
space:
mode:
Diffstat (limited to 'static/components')
-rw-r--r--static/components/date-time-input.ts2
-rw-r--r--static/components/input-list.ts2
-rw-r--r--static/components/popup-element.ts7
-rw-r--r--static/components/slider.ts18
-rw-r--r--static/components/vevent-block.ts2
-rw-r--r--static/components/vevent-description.ts11
-rw-r--r--static/components/vevent-edit.ts46
-rw-r--r--static/components/vevent.ts4
8 files changed, 44 insertions, 48 deletions
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-description.ts b/static/components/vevent-description.ts
index 463725f1..b44185e7 100644
--- a/static/components/vevent-description.ts
+++ b/static/components/vevent-description.ts
@@ -2,7 +2,7 @@ export { ComponentDescription }
import { VEvent } from '../vevent'
import { ComponentVEvent } from './vevent'
-import { formatters } from '../formatters'
+import { format } from '../formatters'
/*
<vevent-description />
@@ -23,14 +23,7 @@ class ComponentDescription extends ComponentVEvent {
for (let el of body.querySelectorAll('[data-property]')) {
if (!(el instanceof HTMLElement)) continue;
- let p = el.dataset.property!;
- let d;
- if ((d = data.getProperty(p))) {
- let key = p.toLowerCase();
- let f = formatters.get(key);
- if (f) f(el, data, d);
- else window.formatters.get('default')!(el, data, d);
- }
+ format(el, data, el.dataset.property!);
}
let repeating = body.getElementsByClassName('repeating')[0] as HTMLElement
diff --git a/static/components/vevent-edit.ts b/static/components/vevent-edit.ts
index bf72678c..e3b5d105 100644
--- a/static/components/vevent-edit.ts
+++ b/static/components/vevent-edit.ts
@@ -25,31 +25,22 @@ class ComponentEdit extends ComponentVEvent {
let body = frag.firstElementChild!
this.replaceChildren(body);
+ let data = vcal_objects.get(this.uid)
+ if (!data) {
+ throw `Data missing for uid ${this.dataset.uid}.`
+ }
+
for (let el of this.querySelectorAll('[data-label]')) {
let label = document.createElement('label');
let id = el.id || gensym('input');
el.id = id;
label.htmlFor = id;
label.textContent = (el as HTMLElement).dataset.label!;
+ el.parentElement!.insertBefore(label, el);
}
- }
-
- connectedCallback() {
-
- /* Edit tab is rendered here. It's left blank server-side, since
- it only makes sense to have something here if we have javascript */
-
- let data = vcal_objects.get(this.uid)
-
- if (!data) {
- throw `Data missing for uid ${this.dataset.uid}.`
- }
-
-
- // 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,21 +48,19 @@ 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;
});
}
- this.redraw(data);
// 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 +72,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)
@@ -135,6 +123,22 @@ class ComponentEdit extends ComponentVEvent {
});
}
+ connectedCallback() {
+
+ /* Edit tab is rendered here. It's left blank server-side, since
+ it only makes sense to have something here if we have javascript */
+
+ let data = vcal_objects.get(this.uid)
+
+ if (!data) {
+ throw `Data missing for uid ${this.dataset.uid}.`
+ }
+
+ this.redraw(data);
+
+ // return;
+ }
+
redraw(data: VEvent) {
/* We only update our fields, instead of reinstansiating
ourselves from the template, in hope that it's faster */
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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-03 15:11:46 +0200