diff options
-rw-r--r-- | static/components/popup-element.ts | 54 | ||||
-rw-r--r-- | static/components/vevent-block.ts | 4 | ||||
-rw-r--r-- | static/globals.ts | 5 | ||||
-rw-r--r-- | static/popup.ts | 49 |
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 */ |