diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2023-09-13 00:01:28 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2023-09-13 00:01:28 +0200 |
commit | a82b6c772089aa46e30c6c89ef48f514294df3cb (patch) | |
tree | e25d9b6fd1fefe8b6ac293a5c0b53293872a8f54 /static/ts/components/popup-element.ts | |
parent | Add basic documentation for lens. (diff) | |
parent | Even more documentation. (diff) | |
download | calp-a82b6c772089aa46e30c6c89ef48f514294df3cb.tar.gz calp-a82b6c772089aa46e30c6c89ef48f514294df3cb.tar.xz |
Merge branch 'next' into datarewrite-structures
Diffstat (limited to '')
-rw-r--r-- | static/ts/components/popup-element.ts (renamed from static/components/popup-element.ts) | 46 |
1 files changed, 41 insertions, 5 deletions
diff --git a/static/components/popup-element.ts b/static/ts/components/popup-element.ts index 458f543c..a1e81f0e 100644 --- a/static/components/popup-element.ts +++ b/static/ts/components/popup-element.ts @@ -1,3 +1,19 @@ +/** + * `<popup-element />` + * + * A (small) floating window containing information, which can be dragged + * arround. Consists of a navigation bar with a few buttons for + * controlling the window, which also works as a drag handle, along with + * an area for contents, which can be resized by the user. + + * Currently tightly coupled to VEvent's, since their color + * profile is derived from their owning events calendar, and they have + * action buttons for the event in their navigation bar. + * + * @category Web Components + * @mergeTarget components + * @module + */ export { PopupElement, setup_popup_element } import { VEvent } from '../vevent' @@ -7,12 +23,19 @@ import { ComponentVEvent } from './vevent' import { remove_event } from '../server_connect' -/* <popup-element /> */ +/** + ### Attributes + - visible + */ class PopupElement extends ComponentVEvent { /* The popup which is the "selected" popup. - /* Makes the popup last hovered over the selected popup, moving it to + * Makes the popup last hovered over the selected popup, moving it to * the top, and allowing global keyboard bindings to affect it. */ + /** + The popup which was most recently interacted with by the user. Used to + move it on top of all others, as well as sending relevant key events there. + */ static activePopup: PopupElement | null = null; constructor(uid?: string) { @@ -67,6 +90,7 @@ class PopupElement extends ComponentVEvent { this.replaceChildren(body); } + /** ['visible'] */ static get observedAttributes() { return ['visible']; } @@ -76,15 +100,22 @@ class PopupElement extends ComponentVEvent { case 'visible': if (newValue !== null) /* Only run resize code when showing the popup */ - this.onVisibilityChange() + this.#onVisibilityChange() break; } } + /** + If the popup is currently visible. + + Adds the `visible` attribute to the component, which must then be handled + through CSS. + */ get visible(): boolean { return this.hasAttribute('visible'); } + /** Set the visibility status of the component. */ set visible(isVisible: boolean) { if (isVisible) { this.setAttribute('visible', 'visible'); @@ -93,7 +124,7 @@ class PopupElement extends ComponentVEvent { } } - private onVisibilityChange() { + #onVisibilityChange() { console.log('here'); /* TODO better way to find root */ @@ -128,6 +159,10 @@ class PopupElement extends ComponentVEvent { el.style.removeProperty('height'); } + /** + Resize the popup window to fill the current viewport (mostly). Is + probably bonud to the maximize button in the navigation bar. + */ maximize() { /* TODO this assumes that popups are direct decendant of their parent, which they really ought to be */ @@ -144,7 +179,8 @@ class PopupElement extends ComponentVEvent { } } -/* Create a new popup element for the given VEvent, and ready it for editing the +/** + Create a new popup element for the given VEvent, and ready it for editing the event. Used when creating event (through the frontend). The return value can safely be ignored. */ |