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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
import { VIEW, find_block } from './globals'
import { PopupElement } from './components/popup-element'
import { uid } from './types'
export {
event_from_popup, popup_from_event, close_popup,
close_all_popups, open_popup, toggle_popup, activePopup,
find_popup
}
/* TODO rewrite most of this */
/* event component => coresponding popup component */
function event_from_popup(popup: Element): HTMLElement | null {
// return document.getElementById(popup.id.substr(5))
let el = popup.closest('[data-uid]')
if (!el) return null;
let uid = (el as HTMLElement).dataset.uid
if (!uid) return null;
return find_block(uid)
}
/* popup component => coresponding event component */
function popup_from_event(event: Element): HTMLElement | null {
// return document.getElementById("popup" + event.id);
// return find_popup(event.closest('[data-uid]').dataset.uid)
let el = event.closest('[data-uid]')
if (!el) return null;
let uid = (el as HTMLElement).dataset.uid
if (!uid) return null;
return find_popup(uid)
}
/* hides given popup */
function close_popup(popup: Element): void {
popup.classList.remove("visible");
}
/* hides all popups */
function close_all_popups() {
for (let popup of document.querySelectorAll("popup-element.visible")) {
close_popup(popup);
}
}
function find_popup(uid: uid): HTMLElement | null {
// for (let el of vcal_objects[uid].registered) {
// if (el.tagName === 'popup-element') {
// return el;
// }
// }
// throw 'Popup not fonud';
return document.querySelector(`popup-element[data-uid="${uid}"]`)
}
/* open given popup */
function open_popup(popup: HTMLElement) {
popup.classList.add("visible");
let element = event_from_popup(popup);
// let root = document.body;
let root;
switch (VIEW) {
case 'week':
root = document.getElementsByClassName("days")[0];
break;
case 'month':
default:
root = document.body;
break;
}
/* start <X, Y> sets offset between top left corner
of event in calendar and popup. 10, 10 soo old
event is still visible */
let offsetX = 10, offsetY = 10;
while (element !== root && element !== null) {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
element = element.offsetParent as HTMLElement;
}
popup.style.left = offsetX + "px";
popup.style.top = offsetY + "px";
}
/* toggles open/closed status of popup given by id */
function toggle_popup(popup: HTMLElement) {
// let popup = document.getElementById(popup_id);
if (popup.classList.contains("visible")) {
close_popup(popup);
} else {
open_popup(popup);
}
}
/* Code for managing "selected" popup */
/* Makes the popup last hovered over the selected popup, moving it to
* the top, and allowing global keyboard bindings to affect it. */
let activePopup: PopupElement | undefined;
for (let popup of document.querySelectorAll('popup-element')) {
/* TODO possibly only change "active" element after a fraction of
* a second, for example when moving between tabs */
popup.addEventListener('mouseover', function() {
/* This is ever so slightly inefficient,
but it really dosen't mammet */
for (let other of
document.querySelectorAll('popup-element')) {
/* TODO get this from somewhere */
/* Currently it's manually copied from the stylesheet */
((other as PopupElement).style as any)['z-index'] = 1000;
}
((popup as PopupElement).style as any)['z-index'] += 1;
activePopup = popup as PopupElement
});
}
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,
})[event.code];
if (i === undefined) return
if (!activePopup) return;
let element: HTMLLabelElement | undefined = activePopup.querySelectorAll(".tab > label")[i] as HTMLLabelElement;
if (!element) return;
element.click();
});
/* END Code for managing "selected" popup */
|
