aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--static/components/popup-element.ts54
-rw-r--r--static/components/vevent-block.ts4
-rw-r--r--static/globals.ts5
-rw-r--r--static/popup.ts49
4 files changed, 65 insertions, 47 deletions
diff --git a/static/components/popup-element.ts b/static/components/popup-element.ts
index 3225fa52..bad7476a 100644
--- a/static/components/popup-element.ts
+++ b/static/components/popup-element.ts
@@ -3,7 +3,7 @@ export { PopupElement }
import { gensym } from '../lib'
import { VEvent } from '../vevent'
import { bind_popup_control } from '../dragable'
-import { close_popup } from '../popup'
+import { close_popup, event_from_popup } from '../popup'
import { ComponentVEvent } from './vevent'
import { TabElement } from './tab-element'
@@ -14,11 +14,13 @@ class PopupElement extends ComponentVEvent {
tabgroup_id: string
tabcount: number
+ isVisible: boolean = false;
+
constructor(uid?: string) {
super(uid);
- /* TODO populate remaining */
- // this.id = 'popup' + this.dataset.uid
+ /* TODO populate remaining (??) */
+
this.tabgroup_id = gensym();
this.tabcount = 0
}
@@ -26,8 +28,9 @@ class PopupElement extends ComponentVEvent {
redraw(data: VEvent) {
// console.warn('IMPLEMENT ME');
- if (data._calendar) {
- this.dataset.calendar = data._calendar;
+ console.log('popup', data.calendar);
+ if (data.calendar) {
+ this.dataset.calendar = data.calendar;
}
/* TODO is there any case where we want to propagate the draw to any of
@@ -75,6 +78,47 @@ class PopupElement extends ComponentVEvent {
this.replaceChildren(body);
}
+ static get observedAttributes() {
+ return ['visible'];
+ }
+
+ get visible(): boolean {
+ return this.isVisible;
+ }
+
+ set visible(isVisible: boolean) {
+ this.isVisible = isVisible;
+ if (this.isVisible) {
+ this.classList.add('visible');
+ } else {
+ this.classList.remove('visible');
+ }
+
+ let root;
+ switch (window.VIEW) {
+ case 'week':
+ root = document.getElementsByClassName("days")[0];
+ break;
+ case 'month':
+ default:
+ root = document.body;
+ break;
+ }
+
+ let element = event_from_popup(this) as HTMLElement;
+ /* 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;
+ }
+ this.style.left = offsetX + "px";
+ this.style.top = offsetY + "px";
+ }
+
addTab(tab: TabElement) {
let tabgroup = this.getElementsByClassName('tabgroup')![0]!
tabgroup.append(tab);
diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts
index 439ba20e..8c6d11cf 100644
--- a/static/components/vevent-block.ts
+++ b/static/components/vevent-block.ts
@@ -56,8 +56,8 @@ class ComponentBlock extends ComponentVEvent {
}
}
- if (data._calendar) {
- this.dataset.calendar = data._calendar;
+ if (data.calendar) {
+ this.dataset.calendar = data.calendar;
}
}
}
diff --git a/static/globals.ts b/static/globals.ts
index b0871aa2..7ccfb3d2 100644
--- a/static/globals.ts
+++ b/static/globals.ts
@@ -5,6 +5,7 @@ export {
import { VEvent } from './vevent'
import { uid } from './types'
+import { ComponentBlock } from './components/vevent-block'
const vcal_objects: Map<uid, VEvent> = new Map;
const event_calendar_mapping: Map<uid, string> = new Map;
@@ -18,14 +19,14 @@ declare global {
}
window.vcal_objects = vcal_objects;
-function find_block(uid: uid): HTMLElement | null {
+function find_block(uid: uid): ComponentBlock | null {
let obj = vcal_objects.get(uid)
if (obj === undefined) {
return null;
}
for (let el of obj.registered) {
if (el.tagName === 'vevent-block') {
- return el;
+ return el as ComponentBlock;
}
}
// throw 'Popup not fonud';
diff --git a/static/popup.ts b/static/popup.ts
index 908787ae..1635fab2 100644
--- a/static/popup.ts
+++ b/static/popup.ts
@@ -1,5 +1,6 @@
import { find_block } from './globals'
import { PopupElement } from './components/popup-element'
+import { ComponentBlock } from './components/vevent-block'
import { uid } from './types'
export {
@@ -11,7 +12,7 @@ export {
/* TODO rewrite most of this */
/* event component => coresponding popup component */
-function event_from_popup(popup: Element): HTMLElement | null {
+function event_from_popup(popup: PopupElement): ComponentBlock | null {
// return document.getElementById(popup.id.substr(5))
let el = popup.closest('[data-uid]')
if (!el) return null;
@@ -21,7 +22,7 @@ function event_from_popup(popup: Element): HTMLElement | null {
}
/* popup component => coresponding event component */
-function popup_from_event(event: Element): HTMLElement | null {
+function popup_from_event(event: ComponentBlock): PopupElement | null {
// return document.getElementById("popup" + event.id);
// return find_popup(event.closest('[data-uid]').dataset.uid)
let el = event.closest('[data-uid]')
@@ -32,19 +33,19 @@ function popup_from_event(event: Element): HTMLElement | null {
}
/* hides given popup */
-function close_popup(popup: Element): void {
- popup.classList.remove("visible");
+function close_popup(popup: PopupElement): void {
+ popup.visible = false;
}
/* hides all popups */
function close_all_popups() {
for (let popup of document.querySelectorAll("popup-element.visible")) {
- close_popup(popup);
+ close_popup(popup as PopupElement)
}
}
-function find_popup(uid: uid): HTMLElement | null {
+function find_popup(uid: uid): PopupElement | null {
// for (let el of vcal_objects[uid].registered) {
// if (el.tagName === 'popup-element') {
// return el;
@@ -55,41 +56,13 @@ function find_popup(uid: uid): HTMLElement | null {
}
/* 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 (window.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";
+function open_popup(popup: PopupElement) {
+ popup.visible = true;
}
/* 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);
- }
+function toggle_popup(popup: PopupElement) {
+ popup.visible = !popup.visible;
}
/* Code for managing "selected" popup */
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-01 22:56:17 +0200