|
1 | | -window.enableDetailsPaneResizer = () => { |
2 | | - const detailsPane = document.getElementById("details-pane"); |
3 | | - const resizer = document.getElementById("details-resizer"); |
| 1 | +(() => { |
| 2 | + const detailsPaneState = { |
| 3 | + activeDocumentListeners: [], |
| 4 | + controller: null, |
| 5 | + dotNetRef: null |
| 6 | + }; |
4 | 7 |
|
5 | | - if (detailsPane == null || resizer == null) { return; } |
| 8 | + function trackDetailsDocumentListener(event, handler) { |
| 9 | + const entry = { event, handler }; |
| 10 | + const options = detailsPaneState.controller ? { signal: detailsPaneState.controller.signal } : undefined; |
| 11 | + document.addEventListener(event, handler, options); |
| 12 | + detailsPaneState.activeDocumentListeners.push(entry); |
6 | 13 |
|
7 | | - let y, h = 0; |
| 14 | + return () => { |
| 15 | + document.removeEventListener(event, handler); |
| 16 | + const i = detailsPaneState.activeDocumentListeners.indexOf(entry); |
| 17 | + if (i !== -1) { |
| 18 | + detailsPaneState.activeDocumentListeners.splice(i, 1); |
| 19 | + } |
| 20 | + }; |
| 21 | + } |
8 | 22 |
|
9 | | - const mouseMoveHandler = function(e) { |
10 | | - const distance = e.clientY - y; |
| 23 | + window.enableDetailsPaneResizer = (dotNetRef, savedHeight) => { |
| 24 | + window.disposeDetailsPaneResizer(); |
11 | 25 |
|
12 | | - detailsPane.style.height = `${h - distance}px`; |
13 | | - }; |
| 26 | + const detailsPane = document.getElementById("details-pane"); |
| 27 | + const resizer = document.getElementById("details-resizer"); |
14 | 28 |
|
15 | | - const mouseUpHandler = function() { |
16 | | - document.removeEventListener("mousemove", mouseMoveHandler); |
17 | | - document.removeEventListener("mouseup", mouseUpHandler); |
18 | | - }; |
| 29 | + if (detailsPane == null || resizer == null) { |
| 30 | + return; |
| 31 | + } |
| 32 | + |
| 33 | + // Apply persisted height (if any) before user interaction. CSS supplies |
| 34 | + // the default height when no saved value exists. Clamp so a height saved |
| 35 | + // on a larger window can't overwhelm a smaller viewport on next launch. |
| 36 | + if (savedHeight && savedHeight > 0) { |
| 37 | + const maxHeight = Math.max(60, Math.floor(window.innerHeight * 0.8)); |
| 38 | + detailsPane.style.height = `${Math.min(savedHeight, maxHeight)}px`; |
| 39 | + } |
| 40 | + |
| 41 | + detailsPaneState.dotNetRef = dotNetRef; |
| 42 | + detailsPaneState.controller = new AbortController(); |
| 43 | + const signal = detailsPaneState.controller.signal; |
| 44 | + |
| 45 | + let y = 0; |
| 46 | + let h = 0; |
| 47 | + let untrackMove = null; |
| 48 | + let untrackUp = null; |
| 49 | + |
| 50 | + const mouseMoveHandler = function(e) { |
| 51 | + const distance = e.clientY - y; |
| 52 | + // Match the column-resize minimum (avoids the pane vanishing entirely |
| 53 | + // and being un-grabbable). CSS min-height still applies on top. |
| 54 | + const newHeight = Math.max(30, h - distance); |
| 55 | + |
| 56 | + detailsPane.style.height = `${newHeight}px`; |
| 57 | + }; |
19 | 58 |
|
20 | | - const mouseDownHandler = function(e) { |
21 | | - y = e.clientY; |
| 59 | + const mouseUpHandler = function() { |
| 60 | + if (untrackMove) { untrackMove(); untrackMove = null; } |
| 61 | + if (untrackUp) { untrackUp(); untrackUp = null; } |
22 | 62 |
|
23 | | - const styles = window.getComputedStyle(detailsPane); |
24 | | - h = parseInt(styles.height, 10); |
| 63 | + const ref = detailsPaneState.dotNetRef; |
25 | 64 |
|
26 | | - document.addEventListener("mousemove", mouseMoveHandler); |
27 | | - document.addEventListener("mouseup", mouseUpHandler); |
| 65 | + if (ref && detailsPane.isConnected) { |
| 66 | + const newHeight = parseInt(window.getComputedStyle(detailsPane).height, 10); |
| 67 | + // Catch rejection in case the .NET object was disposed mid-drag. |
| 68 | + ref.invokeMethodAsync("OnDetailsPaneHeightChanged", newHeight).catch(() => { }); |
| 69 | + } |
| 70 | + }; |
| 71 | + |
| 72 | + const mouseDownHandler = function(e) { |
| 73 | + // Only respond to primary (left) button so right-click context menus |
| 74 | + // and middle-click are not intercepted. |
| 75 | + if (e.button !== 0) { return; } |
| 76 | + |
| 77 | + y = e.clientY; |
| 78 | + |
| 79 | + const styles = window.getComputedStyle(detailsPane); |
| 80 | + h = parseInt(styles.height, 10); |
| 81 | + |
| 82 | + untrackMove = trackDetailsDocumentListener("mousemove", mouseMoveHandler); |
| 83 | + untrackUp = trackDetailsDocumentListener("mouseup", mouseUpHandler); |
| 84 | + }; |
| 85 | + |
| 86 | + resizer.addEventListener("mousedown", mouseDownHandler, { signal }); |
28 | 87 | }; |
29 | 88 |
|
30 | | - resizer.addEventListener("mousedown", mouseDownHandler); |
31 | | -}; |
| 89 | + window.disposeDetailsPaneResizer = () => { |
| 90 | + if (detailsPaneState.controller) { |
| 91 | + detailsPaneState.controller.abort(); |
| 92 | + detailsPaneState.controller = null; |
| 93 | + } |
| 94 | + |
| 95 | + for (const { event, handler } of detailsPaneState.activeDocumentListeners) { |
| 96 | + document.removeEventListener(event, handler); |
| 97 | + } |
| 98 | + |
| 99 | + detailsPaneState.activeDocumentListeners = []; |
| 100 | + detailsPaneState.dotNetRef = null; |
| 101 | + }; |
| 102 | +})(); |
0 commit comments