1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
export { PopupElement }
import { gensym } from '../lib'
import { VEvent } from '../vevent'
import { bind_popup_control } from '../dragable'
import { close_popup } from '../popup'
import { ComponentVEvent } from './vevent'
import { TabElement } from './tab-element'
/* <popup-element /> */
class PopupElement extends ComponentVEvent {
tabgroup_id: string
tabcount: number
constructor(uid?: string) {
super(uid);
/* TODO populate remaining */
// this.id = 'popup' + this.dataset.uid
this.tabgroup_id = gensym();
this.tabcount = 0
}
redraw(data: VEvent) {
// console.warn('IMPLEMENT ME');
if (data._calendar) {
this.dataset.calendar = data._calendar;
}
/* TODO is there any case where we want to propagate the draw to any of
our tabs? or are all our tabs independent? */
}
connectedCallback() {
let template: HTMLTemplateElement = document.getElementById('popup-template') as HTMLTemplateElement
let body = (template.content.cloneNode(true) as DocumentFragment).firstElementChild!;
let uid = this.uid;
// console.log(uid);
body.getElementsByClassName('populate-with-uid')
.forEach((e) => e.setAttribute('data-uid', uid));
/* tabs */
// for (let tab of body.querySelectorAll(".tabgroup .tab")) {
// }
window.setTimeout(() => {
// let tabs = this.querySelector('tab-element')!
// .shadowRoot!
// .querySelectorAll('label')
// console.log(tabs);
// console.log(this.getElementsByTagName('tab-element'))
for (let tab of this.getElementsByTagName('tab-element')) {
// console.log(tab_container);
// let tab = tab_container.shadowRoot!;
// tab.documentElement.style.setProperty('--i', i);
popuplateTab(tab as TabElement, this.tabgroup_id, this.tabcount)
this.tabcount += 1
}
(this.querySelector('tab-element label') as HTMLInputElement).click()
});
/* end tabs */
/* nav bar */
let nav = body.getElementsByClassName("popup-control")[0] as HTMLElement;
bind_popup_control(nav);
let btn = body.querySelector('.popup-control .close-tooltip') as HTMLButtonElement
btn.addEventListener('click', () => close_popup(this));
/* end nav bar */
this.replaceChildren(body);
}
addTab(tab: TabElement) {
let tabgroup = this.getElementsByClassName('tabgroup')![0]!
tabgroup.append(tab);
popuplateTab(tab, this.tabgroup_id, this.tabcount)
this.tabcount += 1
}
}
function popuplateTab(tab: HTMLElement, tabgroup: string, index: number) {
// console.log(tab);
let new_id = gensym();
let input = tab.querySelector('input[type="radio"]') as HTMLInputElement;
let label = tab.querySelector("label")!
tab.style.setProperty('--tab-index', '' + index);
/* TODO this throws a number of errors, but somehow still works...? */
if (input !== null) {
input.name = tabgroup
input.id = new_id;
}
if (label !== null) {
label.setAttribute('for', new_id);
}
}
|
