@ulu/frontend 0.1.0-beta.80 → 0.1.0-beta.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/js/ui/resizer.js CHANGED
@@ -1,63 +1,213 @@
1
1
  /**
2
2
  * @module ui/resizer
3
3
  */
4
- // =============================================================================
5
- // Element Resizer
6
- // =============================================================================
7
4
 
8
- // Version: 1.0.1
9
-
10
- // Description: Adds resizing ability to an element (only horizontal currently)
11
-
12
- // Reference: - http://jsfiddle.net/3jMQD/614/
13
-
14
- import { logError } from "../utils/class-logger.js";
5
+ import { createEvent } from "../events/index.js";
6
+ import { logError, log } from "../utils/class-logger.js"; // Assuming this utility exists
15
7
 
16
8
  export class Resizer {
17
9
  static defaults = {
18
10
  debug: false,
19
- overrideMaxWidth: false,
20
- fromLeft: false
11
+ /**
12
+ * Amount to increase size by (ie. pointer movement * multiplier)
13
+ */
14
+ multiplier: 1,
15
+ /**
16
+ * Remove max-width, max-height
17
+ */
18
+ overrideMaxDimensions: false,
19
+ /**
20
+ * @type {"left"|"right"|null}
21
+ * Specifies the horizontal edge from which resizing occurs.
22
+ * `null` means no horizontal resizing.
23
+ * - Default null
24
+ */
25
+ fromX: null,
26
+ /**
27
+ * @type {"top"|"bottom"|null}
28
+ * Specifies the vertical edge from which resizing occurs.
29
+ * - `null` means no vertical resizing.
30
+ * - Default null
31
+ */
32
+ fromY: null
21
33
  };
34
+
35
+ // Declare any runtime populated private fields
36
+ #handlerPointerdown;
37
+
22
38
  /**
23
- *
24
- * @param {Node} container Container to be resize
25
- * @param {Node} control Resize handle element
26
- * @param {Object} options Defualt can be changed on class
27
- * @param {Boolean} options.debug Enable non-essential debugging logs
28
- * @param {Boolean} options.overrideMaxWidth When script is activated by handle remove the elements max-width and allow the width of the resize to exceed the max (default false)
29
- * @param {Boolean} options.fromLeft The script should assume the handle is on the left side of the element
39
+ * @param {Node} container Container to be resized
40
+ * @param {Node} control Resize handle element
41
+ * @param {Object} options Options to configure the resizer.
42
+ * @param {Boolean} options.debug Enable non-essential debugging logs.
43
+ * @param {Boolean} options.overrideMaxDimensions When script is activated by handle, remove the element's max-width/max-height and allow the resize to exceed them (default false).
44
+ * @param {"left"|"right"|null} [options.fromX=null] Horizontal resizing direction.
45
+ * @param {"top"|"bottom"|null} [options.fromY=null] Vertical resizing direction.
30
46
  */
31
47
  constructor(container, control, options) {
32
48
  if (!control || !container) {
33
- logError(this, "Missing required elements 'control' or 'container'");
49
+ logError(this, "Missing required elements: control, container");
50
+ return;
34
51
  }
35
52
  this.options = Object.assign({}, Resizer.defaults, options);
53
+ log(this, "Resolved options", this.options);
54
+
36
55
  this.container = container;
37
56
  this.control = control;
38
- this.handlerMousedown = this.onMousedown.bind(this);
39
- this.control.addEventListener('mousedown', this.handlerMousedown);
57
+ this.debug = this.options.debug; // for logger
58
+
59
+ // Validate and normalize fromX/fromY
60
+ const validX = ["left", "right"];
61
+ const validY = ["top", "bottom"];
62
+
63
+ const { fromX, fromY } = this.options;
64
+
65
+ if (!validX.includes(fromX) && fromX !== null) {
66
+ logError(this, `Invalid fromX: ${ fromX } (left|right|null)`);
67
+ return;
68
+ }
69
+ if (!validY.includes(fromY) && fromY !== null) {
70
+ logError(this, `Invalid fromY: ${ fromY } (top|bottom|null)`);
71
+ return;
72
+ }
73
+
74
+ if (!fromX && !fromY) {
75
+ logError(this, "Invalid fromX/fromY, failed to setup resizer");
76
+ return;
77
+ }
78
+
79
+ // Determine effective resizing directions based on fromX/fromY being non-null
80
+ this.resizeHorizontal = this.options.fromX !== null;
81
+ this.resizeVertical = this.options.fromY !== null;
82
+
83
+ // Bind event handlers
84
+ this.#handlerPointerdown = this.#onPointerdown.bind(this);
85
+
86
+ // Attach event listener
87
+ this.control.addEventListener("pointerdown", this.#handlerPointerdown);
40
88
  }
89
+
90
+ /**
91
+ * Cleans up event listeners to prevent memory leaks.
92
+ */
41
93
  destroy() {
42
- this.control.removeEventListener('mousedown', this.handlerMousedown);
94
+ this.control.removeEventListener("pointerdown", this.#handlerPointerdown);
43
95
  }
44
- onMousedown(e) {
45
- const { overrideMaxWidth, fromLeft } = this.options;
96
+
97
+ /**
98
+ * Handles the pointerdown event on the resize control.
99
+ * @param {PointerEvent} e The pointerdown event.
100
+ * @private
101
+ */
102
+ #onPointerdown(e) {
103
+ e.preventDefault(); // Prevent default browser drag behavior
104
+
105
+ const { overrideMaxDimensions, fromX, fromY, multiplier } = this.options; // Destructure fromX, fromY
46
106
  const doc = document.documentElement;
47
107
  const win = document.defaultView;
48
- const x = e.clientX;
49
- const width = parseInt(win.getComputedStyle(this.container).width, 10);
50
- if (overrideMaxWidth) {
51
- this.container.style.maxWidth = 'none';
108
+ const containerStyle = win.getComputedStyle(this.container);
109
+
110
+ // Initial pointer coordinates
111
+ const startX = e.clientX;
112
+ const startY = e.clientY;
113
+
114
+ // Initial dimensions of the container
115
+ const initialWidth = parseInt(containerStyle.width, 10);
116
+ const initialHeight = parseInt(containerStyle.height, 10);
117
+
118
+ // Set pointer capture on the control element
119
+ this.control.setPointerCapture(e.pointerId);
120
+
121
+ // Optionally remove max-width/max-height to allow unrestricted resizing
122
+ if (overrideMaxDimensions) {
123
+ if (this.resizeHorizontal) {
124
+ this.container.style.maxWidth = "none";
125
+ }
126
+ if (this.resizeVertical) {
127
+ this.container.style.maxHeight = "none";
128
+ }
52
129
  }
53
- const mousemove = event => {
54
- const polarity = fromLeft ? -1 : 1;
55
- this.container.style.width = `${ width + ((event.clientX - x) * polarity) }px`;
130
+
131
+ const initialInfo = {
132
+ event: e,
133
+ startX,
134
+ startY,
135
+ initialWidth,
136
+ initialHeight,
137
+ fromX, // Log fromX and fromY separately
138
+ fromY,
139
+ pointerId: e.pointerId
140
+ };
141
+
142
+ this.dispatchEvent("resizer:start", initialInfo);
143
+ log(this, "Pointerdown initiated/captured.", initialInfo);
144
+
145
+ /**
146
+ * Handles the pointermove event to resize the container.
147
+ * @param {PointerEvent} event The pointermove event.
148
+ */
149
+ const pointermove = (event) => {
150
+ let newWidth = initialWidth;
151
+ let newHeight = initialHeight;
152
+
153
+ const deltaX = event.clientX - startX;
154
+ const deltaY = event.clientY - startY;
155
+
156
+ // Handle horizontal resizing
157
+ if (this.resizeHorizontal) {
158
+ if (fromX === "right") {
159
+ newWidth = (initialWidth + (deltaX * multiplier));
160
+ } else if (fromX === "left") {
161
+ newWidth = (initialWidth - (deltaX * multiplier));
162
+ }
163
+ this.container.style.width = `${ Math.max(0, newWidth) }px`; // Ensure non-negative width
164
+ }
165
+
166
+ // Handle vertical resizing
167
+ if (this.resizeVertical) {
168
+ if (fromY === "bottom") { // Use fromY directly
169
+ newHeight = (initialHeight + (deltaY * multiplier));
170
+ } else if (fromY === "top") { // Use fromY directly
171
+ newHeight = (initialHeight - (deltaY * multiplier));
172
+ }
173
+ this.container.style.height = `${ Math.max(0, newHeight) }px`; // Ensure non-negative height
174
+ }
175
+
176
+ const updateInfo = {
177
+ clientX: event.clientX,
178
+ clientY: event.clientY,
179
+ newWidth,
180
+ newHeight,
181
+ event
182
+ };
183
+
184
+ this.dispatchEvent("resizer:update", updateInfo);
185
+ log(this, "Pointermove.", updateInfo);
56
186
  };
57
- const cleanup = () => {
58
- doc.removeEventListener('mousemove', mousemove, false);
187
+
188
+ /**
189
+ * Cleans up event listeners after the pointerup event.
190
+ * @param {PointerEvent} event The pointerup event.
191
+ */
192
+ const cleanup = (event) => {
193
+ doc.removeEventListener("pointermove", pointermove, false);
194
+ doc.removeEventListener("pointerup", cleanup, { capture: true, once: true });
195
+
196
+ // Release pointer capture from the control element
197
+ this.control.releasePointerCapture(event.pointerId);
198
+ this.dispatchEvent("resizer:end");
199
+
200
+ log(this, "Pointerup cleanup complete. Pointer released.", {
201
+ pointerId: event.pointerId
202
+ });
203
+
59
204
  };
60
- doc.addEventListener('mousemove', mousemove, false);
61
- doc.addEventListener('mouseup', cleanup, { capture: true, once: true });
205
+
206
+ // Attach global event listeners for dragging
207
+ doc.addEventListener("pointermove", pointermove, false);
208
+ doc.addEventListener("pointerup", cleanup, { capture: true, once: true });
209
+ }
210
+ dispatchEvent(type, data) {
211
+ this.container.dispatchEvent(createEvent(type, data));
62
212
  }
63
213
  }
@@ -2,10 +2,10 @@
2
2
  * @module utils/class-logger
3
3
  */
4
4
 
5
- // Goal: minimzing console conditions for nessasary production log statements
5
+ // Goal: minimizing console conditions for nessasary production log statements
6
6
 
7
7
  /**
8
- * Configuration Object
8
+ * Global Configuration Object
9
9
  */
10
10
  const config = {
11
11
  debug: false,
@@ -18,7 +18,7 @@ const hasConsole = "console" in window;
18
18
 
19
19
  // If no context output only if config (global) debug is enabled
20
20
  function allow(context) {
21
- return hasConsole && config.debug && (context?.debug || context == null);
21
+ return hasConsole && config.debug && (context?.debug || context?.options?.debug || context == null);
22
22
  }
23
23
  function getName(context) {
24
24
  return typeof context === "object" && context?.constructor?.name;
@@ -12,6 +12,7 @@ export function configureIcons() {
12
12
  updateSettings({
13
13
  iconClassClose: "fas fa-xmark",
14
14
  iconClassDragX: "fas fa-solid fa-grip-lines-vertical",
15
+ iconClassDragBoth: "fas fa-solid fa-grip", // Not really any good icons for this (no diagonal arrows, etc)
15
16
  iconClassPrevious: "fas fa-solid fa-chevron-left",
16
17
  iconClassNext: "fas fa-solid fa-chevron-right"
17
18
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ulu/frontend",
3
- "version": "0.1.0-beta.80",
3
+ "version": "0.1.0-beta.82",
4
4
  "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
5
5
  "browser": "js/index.js",
6
6
  "main": "index.js",
@@ -377,6 +377,16 @@ $config: (
377
377
  .css-icon--arrow-down {
378
378
  transform: rotate(90deg);
379
379
  }
380
+ .css-icon--drag-both {
381
+ transform: rotate(-45deg);
382
+ &::before {
383
+ transform: translateX(-50%) scale(0.8);
384
+ margin-top: -($stroke-width);
385
+ }
386
+ &::after {
387
+ transform: translateX(-50%) scaleX(0.5) scaleY(0.8);
388
+ }
389
+ }
380
390
 
381
391
  // Active icons
382
392
  .css-icon--plus-to-minus {
@@ -62,6 +62,7 @@ $-fallbacks: (
62
62
  /// @prop {Color} resizer-color [rgb(99, 99, 99)] The type color of the resizer.
63
63
  /// @prop {Color} resizer-color-hover [black] The type color of the resizer when hovered or focused.
64
64
  /// @prop {Dimension} resizer-width [1rem] The width of the resizer.
65
+ /// @prop {Dimension} resizer-center-size [1.65rem] The width/height of the resizer (in bottom right corner) used when position center with resize enabled
65
66
  /// @prop {Color} title-color [white] Type color of the title.
66
67
  /// @prop {CssValue} title-font-weight [bold] Font weight of the title.
67
68
  /// @prop {CssValue} title-font-family [null] Font family for title
@@ -104,6 +105,7 @@ $config: (
104
105
  "resizer-color": rgb(99, 99, 99),
105
106
  "resizer-color-hover": black,
106
107
  "resizer-width": 1.25rem,
108
+ "resizer-center-size" : 1.65rem,
107
109
  "title-color": white,
108
110
  "title-font-weight": bold,
109
111
  "title-font-family" : null,
@@ -239,6 +241,7 @@ $config: (
239
241
  }
240
242
  #{ $prefix }__resizer {
241
243
  position: absolute;
244
+ overflow: hidden;
242
245
  top: 0;
243
246
  bottom: 0;
244
247
  left: 0;
@@ -261,6 +264,16 @@ $config: (
261
264
  left: auto;
262
265
  right: 0;
263
266
  }
267
+ #{ $prefix }--center & {
268
+ left: auto;
269
+ right: 0;
270
+ bottom: 0;
271
+ top: auto;
272
+ height: get("resizer-center-size");
273
+ width: get("resizer-center-size");
274
+ background-color: transparent;
275
+ cursor: nwse-resize;
276
+ }
264
277
  }
265
278
 
266
279
  // Modifiers
@@ -329,15 +342,15 @@ $config: (
329
342
  }
330
343
  }
331
344
  #{ $prefix }--resize {
332
- &#{ $prefix }--center {
333
- resize: both;
334
- }
335
345
  &#{ $prefix }--right {
336
346
  padding-left: get("resizer-width");
337
347
  }
338
348
  &#{ $prefix }--left {
339
349
  padding-right: get("resizer-width");
340
350
  }
351
+ // &#{ $prefix }--center {
352
+ // resize: both;
353
+ // }
341
354
  }
342
355
  #{ $prefix }--body-fills {
343
356
  #{ $prefix }__header {
@@ -1,5 +1,6 @@
1
1
  /**
2
- * Triggers one of our custom events
2
+ * Triggers one of our custom events (page/document level events)
3
+ * - UI components may dispatch their own events, this is just used for system wide events
3
4
  * @param {String} type Type of event to dispatch
4
5
  * @param {Node} context Element to trigger the event from
5
6
  * @example
@@ -10,8 +11,16 @@
10
11
  export function dispatch(type: string, context: Node): void;
11
12
  /**
12
13
  * Namespaced event
14
+ * - Should be used for all ulu script/component events
13
15
  * @param {String} type Type of event to get the actual event name for
14
16
  * @returns {String}
15
17
  */
16
18
  export function getName(type: string): string;
19
+ /**
20
+ * Create ulu namespaced custom event
21
+ * @param {String} type Event base name (not prefixed)
22
+ * @param {any} data Custom data to pass with the event (will be available as `event.detail`)
23
+ * @param {Object} options CustomEvent options default `{ bubbles: true }`. If `detail` is also provided, it will be merged with this options object and will override the 'data' argument for this function
24
+ */
25
+ export function createEvent(type: string, data?: any, options?: any): CustomEvent<any>;
17
26
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/events/index.js"],"names":[],"mappings":"AA6CA;;;;;;;;GAQG;AACH,gDANW,IAAI,QAYd;AAED;;;;GAIG;AACH,8CAEC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/events/index.js"],"names":[],"mappings":"AA6CA;;;;;;;;;GASG;AACH,gDANW,IAAI,QAYd;AAED;;;;;GAKG;AACH,8CAEC;AAED;;;;;GAKG;AACH,iDAHW,GAAG,mCAKb"}
@@ -50,6 +50,10 @@ export type Defaults = {
50
50
  * - The CSS class string for the drag X icon
51
51
  */
52
52
  iconClassDragX: string;
53
+ /**
54
+ * - The CSS class string for the dragging in both directions
55
+ */
56
+ iconClassDragBoth: string;
53
57
  /**
54
58
  * - The CSS class string for the previous icon
55
59
  */
@@ -1 +1 @@
1
- {"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../js/settings.js"],"names":[],"mappings":"AA6BA;;;GAGG;AACH,sCAFa,MAAM,CAIlB;AAED;;;GAGG;AACH,wCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,+BAFa,MAAM,CAIlB;AAED;;;;GAIG;AACH,gCAHW,MAAM,OAShB;AAED;;;;GAIG;AACH,mCAHW,MAAM,oBAKhB;AAED;;;;;;;;;;;GAWG;AACH,yEAOC;;;;;;;;oBAtFa,MAAM;;;;oBACN,MAAM;;;;uBACN,MAAM;;;;mBACN,MAAM;;;;kBACN,MAAM"}
1
+ {"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../js/settings.js"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,sCAFa,MAAM,CAIlB;AAED;;;GAGG;AACH,wCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,+BAFa,MAAM,CAIlB;AAED;;;;GAIG;AACH,gCAHW,MAAM,OAShB;AAED;;;;GAIG;AACH,mCAHW,MAAM,oBAKhB;AAED;;;;;;;;;;;GAWG;AACH,yEAOC;;;;;;;;oBAxFa,MAAM;;;;oBACN,MAAM;;;;uBACN,MAAM;;;;uBACN,MAAM;;;;mBACN,MAAM;;;;kBACN,MAAM"}
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AA4DA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BA8Cd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAKd;AA9KD;;GAEG;AACH,8CAA+C;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAjB3B,oBAAoB"}
1
+ {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../js/ui/dialog.js"],"names":[],"mappings":"AA6DA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BAyFd;AAED;;;;GAIG;AACH,yCAHW,IAAI,OAKd;AAzND;;GAEG;AACH,8CAA+C;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAlB3B,oBAAoB"}
@@ -14,6 +14,7 @@ export function init(): void;
14
14
  */
15
15
  export function buildModal(content: Node, options: any): {
16
16
  modal: Element;
17
+ resizer: Resizer;
17
18
  };
18
19
  /**
19
20
  * Modal Builder Component Initializer
@@ -41,6 +42,7 @@ export namespace defaults {
41
42
  export let footerHtml: any;
42
43
  export let classCloseIcon: any;
43
44
  export let classResizerIcon: any;
45
+ export let classResizerIconBoth: any;
44
46
  export let debug: boolean;
45
47
  export function templateCloseIcon(config: any): string;
46
48
  export function templateResizerIcon(config: any): string;
@@ -152,5 +154,6 @@ export type DefaultModalOptions = {
152
154
  */
153
155
  config: (arg0: object) => string;
154
156
  };
157
+ import { Resizer } from "./resizer.js";
155
158
  import { ComponentInitializer } from "../utils/system.js";
156
159
  //# sourceMappingURL=modal-builder.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAgJA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EA6Dd;AAvND;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;IA8DD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA2CC;;;;;;;;;;;;WA/GW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;gBACN,MAAM;;;;iBACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCA5CD,oBAAoB"}
1
+ {"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAkJA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;;EAsEd;AAlOD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;;IA+DD,uDAGC;IACD,yDAIC;IACD;;;;;OAKG;IACH,0DA2CC;;;;;;;;;;;;WAjHW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;gBACN,MAAM;;;;iBACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;wBAzCd,cAAc;qCAHD,oBAAoB"}
@@ -1,28 +1,55 @@
1
1
  export class Resizer {
2
2
  static defaults: {
3
3
  debug: boolean;
4
- overrideMaxWidth: boolean;
5
- fromLeft: boolean;
4
+ /**
5
+ * Amount to increase size by (ie. pointer movement * multiplier)
6
+ */
7
+ multiplier: number;
8
+ /**
9
+ * Remove max-width, max-height
10
+ */
11
+ overrideMaxDimensions: boolean;
12
+ /**
13
+ * @type {"left"|"right"|null}
14
+ * Specifies the horizontal edge from which resizing occurs.
15
+ * `null` means no horizontal resizing.
16
+ * - Default null
17
+ */
18
+ fromX: "left" | "right" | null;
19
+ /**
20
+ * @type {"top"|"bottom"|null}
21
+ * Specifies the vertical edge from which resizing occurs.
22
+ * - `null` means no vertical resizing.
23
+ * - Default null
24
+ */
25
+ fromY: "top" | "bottom" | null;
6
26
  };
7
27
  /**
8
- *
9
- * @param {Node} container Container to be resize
28
+ * @param {Node} container Container to be resized
10
29
  * @param {Node} control Resize handle element
11
- * @param {Object} options Defualt can be changed on class
12
- * @param {Boolean} options.debug Enable non-essential debugging logs
13
- * @param {Boolean} options.overrideMaxWidth When script is activated by handle remove the elements max-width and allow the width of the resize to exceed the max (default false)
14
- * @param {Boolean} options.fromLeft The script should assume the handle is on the left side of the element
30
+ * @param {Object} options Options to configure the resizer.
31
+ * @param {Boolean} options.debug Enable non-essential debugging logs.
32
+ * @param {Boolean} options.overrideMaxDimensions When script is activated by handle, remove the element's max-width/max-height and allow the resize to exceed them (default false).
33
+ * @param {"left"|"right"|null} [options.fromX=null] Horizontal resizing direction.
34
+ * @param {"top"|"bottom"|null} [options.fromY=null] Vertical resizing direction.
15
35
  */
16
36
  constructor(container: Node, control: Node, options: {
17
37
  debug: boolean;
18
- overrideMaxWidth: boolean;
19
- fromLeft: boolean;
38
+ overrideMaxDimensions: boolean;
39
+ fromX?: "left" | "right" | null;
40
+ fromY?: "top" | "bottom" | null;
20
41
  });
21
42
  options: any;
22
43
  container: Node;
23
44
  control: Node;
24
- handlerMousedown: any;
45
+ debug: any;
46
+ resizeHorizontal: boolean;
47
+ resizeVertical: boolean;
48
+ /**
49
+ * Cleans up event listeners to prevent memory leaks.
50
+ */
25
51
  destroy(): void;
26
- onMousedown(e: any): void;
52
+ dispatchEvent(type: any, data: any): void;
53
+ #private;
27
54
  }
28
55
  //# sourceMappingURL=resizer.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"resizer.d.ts","sourceRoot":"","sources":["../../js/ui/resizer.js"],"names":[],"mappings":"AAeA;IACE;;;;MAIE;IACF;;;;;;;;OAQG;IACH,uBAPW,IAAI,WACJ,IAAI;QAEa,KAAK;QACL,gBAAgB;QAChB,QAAQ;OAWnC;IALC,aAA2D;IAC3D,gBAA0B;IAC1B,cAAsB;IACtB,sBAAmD;IAGrD,gBAEC;IACD,0BAkBC;CACF"}
1
+ {"version":3,"file":"resizer.d.ts","sourceRoot":"","sources":["../../js/ui/resizer.js"],"names":[],"mappings":"AAOA;IACE;;QAEE;;WAEG;;QAEH;;WAEG;;QAEH;;;;;WAKG;eAJO,MAAM,GAAC,OAAO,GAAC,IAAI;QAM7B;;;;;WAKG;eAJO,KAAK,GAAC,QAAQ,GAAC,IAAI;MAM7B;IAKF;;;;;;;;OAQG;IACH,uBARW,IAAI,WACJ,IAAI;QAEa,KAAK;QACL,qBAAqB;QACR,KAAK,GAAnC,MAAM,GAAC,OAAO,GAAC,IAAI;QACW,KAAK,GAAnC,KAAK,GAAC,QAAQ,GAAC,IAAI;OA2C7B;IApCC,aAA2D;IAG3D,gBAA0B;IAC1B,cAAsB;IACtB,WAA+B;IAuB/B,0BAAmD;IACnD,wBAAiD;IASnD;;OAEG;IACH,gBAEC;IAmHD,0CAEC;;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"font-awesome.d.ts","sourceRoot":"","sources":["../../js/utils/font-awesome.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,uCAOC"}
1
+ {"version":3,"file":"font-awesome.d.ts","sourceRoot":"","sources":["../../js/utils/font-awesome.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,uCAQC"}