maximizable.ts RawHistoryFolder

1import type { Action } from 'svelte/action';
2interface MaximizableParameters {
3  enabled?: boolean;
4  padding?: number;
5}
6
7interface MaximizableAttributes {
8  onmaximize?: (e: CustomEvent<{ 
9    isMaximized: boolean;
10    width: number;
11    height: number;
12    x: number;
13    y: number;
14  }>) => void;
15}
16
17interface StoredState {
18  width: number;
19  height: number;
20  x: number;
21  y: number;
22}
23
24export const maximizable: Action<HTMLDivElement, MaximizableParameters, MaximizableAttributes> = (node, params = {}) => {
25  const {
26    enabled = true,
27    padding = 0
28  } = params;
29
30  let isMaximized = false;
31  let storedState: StoredState | null = null;
32
33  function maximize() {
34    if (!enabled || isMaximized) return;
35
36    // Store current state
37    storedState = {
38      width: node.offsetWidth,
39      height: node.offsetHeight,
40      x: parseInt(node.style.left) || 0,
41      y: parseInt(node.style.top) || 0
42    };
43
44    // Set maximized state
45    const maxWidth = window.innerWidth - (padding * 2);
46    const maxHeight = window.innerHeight - (padding * 2);
47    
48    node.style.width = `${maxWidth}px`;
49    node.style.height = `${maxHeight}px`;
50    node.style.left = `${padding}px`;
51    node.style.top = `${padding}px`;
52    
53    isMaximized = true;
54
55    node.dispatchEvent(new CustomEvent('maximize', {
56      detail: { 
57        isMaximized: true,
58        width: maxWidth,
59        height: maxHeight,
60        x: padding,
61        y: padding
62      }
63    }));
64  }
65
66  function restore() {
67    if (!enabled || !isMaximized || !storedState) return;
68
69    // Restore previous state
70    node.style.width = `${storedState.width}px`;
71    node.style.height = `${storedState.height}px`;
72    node.style.left = `${storedState.x}px`;
73    node.style.top = `${storedState.y}px`;
74
75    isMaximized = false;
76
77    node.dispatchEvent(new CustomEvent('maximize', {
78      detail: { 
79        isMaximized: false,
80        ...storedState
81      }
82    }));
83  }
84
85  function toggle() {
86    if (isMaximized) {
87      restore();
88    } else {
89      maximize();
90    }
91  }
92
93  // Expose methods to the node
94  Object.assign(node, {
95    maximize,
96    restore,
97    toggleMaximize: toggle,
98    isMaximized: () => isMaximized
99  });
100
101  return {
102    update(newParams: MaximizableParameters) {
103      Object.assign(params, newParams);
104    },
105    destroy() {
106      // Clean up if needed
107    }
108  };
109};