From a5c4962f1b3c9b2e4c23a7e3912af2dfcb4f0507 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 12 Dec 2021 23:29:41 +0100 Subject: Merge draggable into popup-element. --- static/components/popup-element.ts | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) (limited to 'static/components/popup-element.ts') diff --git a/static/components/popup-element.ts b/static/components/popup-element.ts index 4d5545fc..35c966ac 100644 --- a/static/components/popup-element.ts +++ b/static/components/popup-element.ts @@ -1,7 +1,6 @@ export { PopupElement, setup_popup_element } import { VEvent } from '../vevent' -import { bind_popup_control } from '../dragable' import { find_block, vcal_objects } from '../globals' import { ComponentVEvent } from './vevent' @@ -160,3 +159,40 @@ function setup_popup_element(ev: VEvent): PopupElement { input.select(); return popup; } + +/* + Given the navbar of a popup, make it dragable. + */ +function bind_popup_control(nav: HTMLElement) { + + // if (!nav.closest('popup-element')) { + // console.log(nav); + // throw TypeError('not a popup container'); + // } + + nav.addEventListener('mousedown', function(e) { + /* Ignore mousedown on children */ + if (e.target != nav) return; + nav.style.cursor = "grabbing"; + nav.dataset.grabbed = "true"; + nav.dataset.grabPoint = e.clientX + ";" + e.clientY; + // let popup = nav.closest(".popup-container"); + let popup = nav.closest("popup-element") as HTMLElement; + nav.dataset.startPoint = popup.offsetLeft + ";" + popup.offsetTop; + }) + window.addEventListener('mousemove', function(e) { + if (nav.dataset.grabbed) { + let [x, y] = nav.dataset.grabPoint!.split(";").map(Number); + let [startX, startY] = nav.dataset.startPoint!.split(";").map(Number); + // let popup = nav.closest(".popup-container"); + let popup = nav.closest("popup-element") as HTMLElement; + + popup.style.left = startX + (e.clientX - x) + "px"; + popup.style.top = startY + (e.clientY - y) + "px"; + } + }); + window.addEventListener('mouseup', function() { + nav.dataset.grabbed = ""; + nav.style.cursor = ""; + }); +} -- cgit v1.2.3