jsl-ui 9.28.2 → 9.28.3

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.
Files changed (170) hide show
  1. package/lib/components/IntervalComponent.d.ts +17 -17
  2. package/lib/components/IntervalComponent.js +65 -68
  3. package/lib/components/auto-suggest/AutoSuggestComponent.d.ts +22 -22
  4. package/lib/components/auto-suggest/AutoSuggestComponent.js +47 -49
  5. package/lib/components/button/ButtonComponent.d.ts +18 -18
  6. package/lib/components/button/ButtonComponent.js +29 -46
  7. package/lib/components/checkbox/CheckBoxComponent.d.ts +28 -28
  8. package/lib/components/checkbox/CheckBoxComponent.js +81 -98
  9. package/lib/components/date/DateComponent.d.ts +32 -32
  10. package/lib/components/date/DateComponent.js +89 -106
  11. package/lib/components/date-range/DateRangeComponent.d.ts +35 -35
  12. package/lib/components/date-range/DateRangeComponent.js +123 -136
  13. package/lib/components/date-time/DateTimeComponent.d.ts +15 -15
  14. package/lib/components/date-time/DateTimeComponent.js +39 -53
  15. package/lib/components/dialog/DialogComponent.d.ts +67 -67
  16. package/lib/components/dialog/DialogComponent.js +198 -251
  17. package/lib/components/drop-down/DropDownComponent.d.ts +27 -27
  18. package/lib/components/drop-down/DropDownComponent.js +60 -74
  19. package/lib/components/expander/ExpanderComponent.d.ts +27 -27
  20. package/lib/components/expander/ExpanderComponent.js +89 -90
  21. package/lib/components/form-field/FormComponent.d.ts +12 -12
  22. package/lib/components/form-field/FormComponent.js +23 -26
  23. package/lib/components/form-field/FormFieldComponent.d.ts +39 -39
  24. package/lib/components/form-field/FormFieldComponent.js +138 -140
  25. package/lib/components/grid/GridComponent.d.ts +26 -26
  26. package/lib/components/grid/GridComponent.js +110 -116
  27. package/lib/components/input/InputComponent.d.ts +33 -33
  28. package/lib/components/input/InputComponent.js +126 -147
  29. package/lib/components/loading/LoadingComponent.d.ts +8 -8
  30. package/lib/components/loading/LoadingComponent.js +20 -22
  31. package/lib/components/navigation/NavigationComponent.d.ts +34 -34
  32. package/lib/components/navigation/NavigationComponent.js +45 -70
  33. package/lib/components/notification/Notification.d.ts +19 -19
  34. package/lib/components/notification/Notification.js +65 -69
  35. package/lib/components/number/NumberComponent.d.ts +26 -26
  36. package/lib/components/number/NumberComponent.js +80 -98
  37. package/lib/components/overlay/OverlayComponent.d.ts +27 -27
  38. package/lib/components/overlay/OverlayComponent.js +137 -149
  39. package/lib/components/progress/ProgressComponent.d.ts +18 -18
  40. package/lib/components/progress/ProgressComponent.js +40 -42
  41. package/lib/components/ribbon-menu/RibbonMenuComponent.d.ts +12 -12
  42. package/lib/components/ribbon-menu/RibbonMenuComponent.js +23 -34
  43. package/lib/components/select/SelectComponent.d.ts +79 -79
  44. package/lib/components/select/SelectComponent.js +356 -369
  45. package/lib/components/select/SelectDDAreaComponent.d.ts +32 -32
  46. package/lib/components/select/SelectDDAreaComponent.js +303 -317
  47. package/lib/components/slider/nouislider.d.ts +44 -44
  48. package/lib/components/slider/nouislider.js +2158 -2158
  49. package/lib/components/stack-panel/SplitterComponent.d.ts +21 -21
  50. package/lib/components/stack-panel/SplitterComponent.js +124 -126
  51. package/lib/components/stack-panel/StackPanelComponent.d.ts +20 -20
  52. package/lib/components/stack-panel/StackPanelComponent.js +50 -64
  53. package/lib/components/tabs/TabsComponent.d.ts +40 -40
  54. package/lib/components/tabs/TabsComponent.js +200 -204
  55. package/lib/components/time/TimeComponent.d.ts +29 -29
  56. package/lib/components/time/TimeComponent.js +104 -113
  57. package/lib/components/tree-view/TreeViewComponent.d.ts +23 -23
  58. package/lib/components/tree-view/TreeViewComponent.js +43 -45
  59. package/lib/components/virtual-render/VirtualRenderComponent.d.ts +30 -30
  60. package/lib/components/virtual-render/VirtualRenderComponent.js +92 -104
  61. package/lib/core/culture.d.ts +5 -5
  62. package/lib/core/culture.js +385 -385
  63. package/lib/core/date.d.ts +14 -14
  64. package/lib/core/date.js +346 -350
  65. package/lib/core/helper.d.ts +13 -13
  66. package/lib/core/helper.js +100 -104
  67. package/lib/core/jq.d.ts +37 -37
  68. package/lib/core/jq.js +362 -371
  69. package/lib/core/lang.d.ts +24 -24
  70. package/lib/core/lang.js +24 -28
  71. package/lib/core/numeric.d.ts +7 -7
  72. package/lib/core/numeric.js +139 -143
  73. package/lib/core/polyfills.js +22 -22
  74. package/lib/core.d.ts +6 -6
  75. package/lib/core.js +6 -6
  76. package/lib/grid/filterDialogs/dateRangeFilter.d.ts +7 -7
  77. package/lib/grid/filterDialogs/dateRangeFilter.js +106 -156
  78. package/lib/grid/filterDialogs/excelFilter.d.ts +9 -9
  79. package/lib/grid/filterDialogs/excelFilter.js +250 -316
  80. package/lib/grid/plugins/ext.overlay.d.ts +2 -2
  81. package/lib/grid/plugins/ext.overlay.js +295 -295
  82. package/lib/grid/plugins/slick.cellrangedecorator.d.ts +12 -12
  83. package/lib/grid/plugins/slick.cellrangedecorator.js +68 -68
  84. package/lib/grid/plugins/slick.cellrangeselector.d.ts +1 -1
  85. package/lib/grid/plugins/slick.cellrangeselector.js +144 -144
  86. package/lib/grid/plugins/slick.cellselectionmodel.d.ts +1 -1
  87. package/lib/grid/plugins/slick.cellselectionmodel.js +194 -194
  88. package/lib/grid/plugins/slick.headerbuttons.d.ts +55 -55
  89. package/lib/grid/plugins/slick.headerbuttons.js +156 -156
  90. package/lib/grid/plugins/slick.headermenu.d.ts +74 -74
  91. package/lib/grid/plugins/slick.headermenu.js +260 -260
  92. package/lib/grid/plugins/slick.rowmovemanager.d.ts +18 -18
  93. package/lib/grid/plugins/slick.rowmovemanager.js +249 -249
  94. package/lib/grid/plugins/slick.rowselectionmodel.d.ts +1 -1
  95. package/lib/grid/plugins/slick.rowselectionmodel.js +167 -167
  96. package/lib/grid/slick.core.d.ts +91 -91
  97. package/lib/grid/slick.core.js +574 -574
  98. package/lib/grid/slick.creator.d.ts +81 -81
  99. package/lib/grid/slick.creator.js +726 -726
  100. package/lib/grid/slick.dataview.d.ts +71 -71
  101. package/lib/grid/slick.dataview.js +1069 -1080
  102. package/lib/grid/slick.editors.core.d.ts +4 -4
  103. package/lib/grid/slick.editors.core.js +235 -235
  104. package/lib/grid/slick.editors.date.d.ts +2 -2
  105. package/lib/grid/slick.editors.date.js +125 -125
  106. package/lib/grid/slick.editors.lookup.d.ts +14 -14
  107. package/lib/grid/slick.editors.lookup.js +352 -353
  108. package/lib/grid/slick.editors.nav.d.ts +6 -6
  109. package/lib/grid/slick.editors.nav.js +22 -22
  110. package/lib/grid/slick.formatters.d.ts +17 -17
  111. package/lib/grid/slick.formatters.js +144 -144
  112. package/lib/grid/slick.grid.d.ts +285 -285
  113. package/lib/grid/slick.grid.js +5409 -5412
  114. package/lib/grid/slick.groupitemmetadataprovider.d.ts +39 -39
  115. package/lib/grid/slick.groupitemmetadataprovider.js +165 -165
  116. package/lib/grid/slick.tree.d.ts +33 -33
  117. package/lib/grid/slick.tree.js +208 -220
  118. package/lib/grid.css +1 -705
  119. package/lib/grid.d.ts +13 -13
  120. package/lib/grid.js +13 -13
  121. package/lib/index.css +8 -2195
  122. package/lib/index.css.map +1 -1
  123. package/lib/index.d.ts +56 -55
  124. package/lib/index.js +61 -61
  125. package/lib/index.js.map +1 -1
  126. package/lib/interaction/dataconverter.d.ts +4 -4
  127. package/lib/interaction/dataconverter.js +0 -1
  128. package/lib/interaction/eventhandler.d.ts +13 -13
  129. package/lib/interaction/eventhandler.js +39 -42
  130. package/lib/interaction/moveable.d.ts +39 -39
  131. package/lib/interaction/moveable.js +160 -174
  132. package/lib/interaction/resizable.d.ts +37 -37
  133. package/lib/interaction/resizable.js +109 -123
  134. package/lib/ui/auto.suggest.d.ts +18 -18
  135. package/lib/ui/auto.suggest.js +244 -259
  136. package/lib/ui/date.picker/date-picker-options.d.ts +11 -11
  137. package/lib/ui/date.picker/date-picker-options.js +76 -76
  138. package/lib/ui/date.picker/lib/date-manip.d.ts +74 -74
  139. package/lib/ui/date.picker/lib/date-manip.js +120 -120
  140. package/lib/ui/date.picker/lib/dom.d.ts +23 -23
  141. package/lib/ui/date.picker/lib/dom.js +28 -28
  142. package/lib/ui/date.picker/lib/emitter.d.ts +13 -13
  143. package/lib/ui/date.picker/lib/emitter.js +49 -49
  144. package/lib/ui/date.picker/lib/fns.d.ts +23 -23
  145. package/lib/ui/date.picker/lib/fns.js +39 -43
  146. package/lib/ui/date.picker/mode/base-mode.d.ts +26 -26
  147. package/lib/ui/date.picker/mode/base-mode.js +248 -248
  148. package/lib/ui/date.picker/mode/dropdown-mode.d.ts +28 -28
  149. package/lib/ui/date.picker/mode/dropdown-mode.js +50 -50
  150. package/lib/ui/date.picker/mode/index.d.ts +28 -28
  151. package/lib/ui/date.picker/mode/index.js +18 -18
  152. package/lib/ui/date.picker/mode/modal-mode.d.ts +25 -25
  153. package/lib/ui/date.picker/mode/modal-mode.js +17 -17
  154. package/lib/ui/date.picker/mode/permanent-mode.d.ts +29 -29
  155. package/lib/ui/date.picker/mode/permanent-mode.js +19 -19
  156. package/lib/ui/date.picker/views/day-picker.d.ts +40 -40
  157. package/lib/ui/date.picker/views/day-picker.js +155 -155
  158. package/lib/ui/date.picker/views/month-picker.d.ts +26 -26
  159. package/lib/ui/date.picker/views/month-picker.js +65 -65
  160. package/lib/ui/date.picker/views/year-picker.d.ts +20 -20
  161. package/lib/ui/date.picker/views/year-picker.js +66 -66
  162. package/lib/ui/date.picker.d.ts +66 -66
  163. package/lib/ui/date.picker.js +32 -32
  164. package/lib/ui/dialog.d.ts +22 -22
  165. package/lib/ui/dialog.js +98 -113
  166. package/lib/ui/drop.down.d.ts +52 -52
  167. package/lib/ui/drop.down.js +2112 -2112
  168. package/lib/ui/number.input.d.ts +13 -13
  169. package/lib/ui/number.input.js +56 -67
  170. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- export interface IDataConverter<TData, TUI> {
2
- toUI?: (value: TData) => TUI;
3
- toData?: (value: TUI) => TData;
4
- }
1
+ export interface IDataConverter<TData, TUI> {
2
+ toUI?: (value: TData) => TUI;
3
+ toData?: (value: TUI) => TData;
4
+ }
@@ -1 +0,0 @@
1
- export {};
@@ -1,13 +1,13 @@
1
- export interface IEvent<T, T2 = void> {
2
- subscribe(fnc: (args?: T, args2?: T2) => any): any;
3
- notify(val?: T): any;
4
- }
5
- export declare class EventHandler<T, T2 = void> implements IEvent<T, T2> {
6
- static Create(click: (EventHandler<any, any> | ((p?: any, p2?: any) => any))): EventHandler<any, any>;
7
- private handlers;
8
- constructor(fnc?: (args?: T, args2?: T2) => any);
9
- subscribe(fnc: (args?: T, args2?: T2) => any): void;
10
- notify(val?: T, val2?: T2): void;
11
- count(): number;
12
- unSubscribe(fnc: (args?: T, args2?: T2) => any): void;
13
- }
1
+ export interface IEvent<T, T2 = void> {
2
+ subscribe(fnc: (args?: T, args2?: T2) => any): any;
3
+ notify(val?: T): any;
4
+ }
5
+ export declare class EventHandler<T, T2 = void> implements IEvent<T, T2> {
6
+ static Create(click: (EventHandler<any, any> | ((p?: any, p2?: any) => any))): EventHandler<any, any>;
7
+ private handlers;
8
+ constructor(fnc?: (args?: T, args2?: T2) => any);
9
+ subscribe(fnc: (args?: T, args2?: T2) => any): void;
10
+ notify(val?: T, val2?: T2): void;
11
+ count(): number;
12
+ unSubscribe(fnc: (args?: T, args2?: T2) => any): void;
13
+ }
@@ -1,42 +1,39 @@
1
- var EventHandler = /** @class */ (function () {
2
- function EventHandler(fnc) {
3
- this.handlers = [];
4
- if (fnc != null) {
5
- this.handlers.push(fnc);
6
- }
7
- }
8
- EventHandler.Create = function (click) {
9
- if (click == null) {
10
- return new EventHandler();
11
- }
12
- if (typeof click === "function") {
13
- var res = new EventHandler();
14
- res.subscribe(click);
15
- return res;
16
- }
17
- return click;
18
- };
19
- EventHandler.prototype.subscribe = function (fnc) {
20
- this.handlers.push(fnc);
21
- };
22
- EventHandler.prototype.notify = function (val, val2) {
23
- for (var _i = 0, _a = this.handlers; _i < _a.length; _i++) {
24
- var h = _a[_i];
25
- h(val, val2);
26
- }
27
- };
28
- EventHandler.prototype.count = function () {
29
- return this.handlers.length;
30
- };
31
- EventHandler.prototype.unSubscribe = function (fnc) {
32
- if (this.handlers.indexOf(fnc) >= 0) {
33
- this.handlers.splice(this.handlers.indexOf(fnc), 1);
34
- }
35
- else {
36
- // TODO? throw exception?
37
- console.warn("handler not found in EventHandler.unSubscribe");
38
- }
39
- };
40
- return EventHandler;
41
- }());
42
- export { EventHandler };
1
+ export class EventHandler {
2
+ constructor(fnc) {
3
+ this.handlers = [];
4
+ if (fnc != null) {
5
+ this.handlers.push(fnc);
6
+ }
7
+ }
8
+ static Create(click) {
9
+ if (click == null) {
10
+ return new EventHandler();
11
+ }
12
+ if (typeof click === "function") {
13
+ const res = new EventHandler();
14
+ res.subscribe(click);
15
+ return res;
16
+ }
17
+ return click;
18
+ }
19
+ subscribe(fnc) {
20
+ this.handlers.push(fnc);
21
+ }
22
+ notify(val, val2) {
23
+ for (const h of this.handlers) {
24
+ h(val, val2);
25
+ }
26
+ }
27
+ count() {
28
+ return this.handlers.length;
29
+ }
30
+ unSubscribe(fnc) {
31
+ if (this.handlers.indexOf(fnc) >= 0) {
32
+ this.handlers.splice(this.handlers.indexOf(fnc), 1);
33
+ }
34
+ else {
35
+ // TODO? throw exception?
36
+ console.warn("handler not found in EventHandler.unSubscribe");
37
+ }
38
+ }
39
+ }
@@ -1,39 +1,39 @@
1
- import "./moveable.css";
2
- import "../core/polyfills";
3
- import { EventHandler } from "./eventhandler";
4
- export interface IMoveEventArg {
5
- x: number;
6
- y: number;
7
- target: HTMLElement;
8
- evt: MouseEvent;
9
- cancelEvent: () => void;
10
- }
11
- export interface IMoveableOptions {
12
- moveDelta?: number;
13
- onStart?: EventHandler<IMoveEventArg>;
14
- onStop?: EventHandler<IMoveEventArg>;
15
- onMove?: EventHandler<IMoveEventArg>;
16
- gridX?: number;
17
- gridY?: number;
18
- selector?: string;
19
- handleSelector?: string;
20
- direction?: "x" | "y" | "both";
21
- containInParent?: boolean;
22
- }
23
- export declare class MoveableContainer {
24
- private container;
25
- private options;
26
- private element;
27
- private resizeX;
28
- private resizeY;
29
- private initialX;
30
- private initialY;
31
- private startSize;
32
- constructor(container: HTMLElement, options: IMoveableOptions);
33
- private init;
34
- private mouseDownContainer;
35
- private mouseMove;
36
- private mouseUp;
37
- private extractArg;
38
- }
39
- export declare function Moveable(selector: HTMLElement | string, options?: IMoveableOptions): MoveableContainer;
1
+ import "./moveable.css";
2
+ import "../core/polyfills";
3
+ import { EventHandler } from "./eventhandler";
4
+ export interface IMoveEventArg {
5
+ x: number;
6
+ y: number;
7
+ target: HTMLElement;
8
+ evt: MouseEvent;
9
+ cancelEvent: () => void;
10
+ }
11
+ export interface IMoveableOptions {
12
+ moveDelta?: number;
13
+ onStart?: EventHandler<IMoveEventArg>;
14
+ onStop?: EventHandler<IMoveEventArg>;
15
+ onMove?: EventHandler<IMoveEventArg>;
16
+ gridX?: number;
17
+ gridY?: number;
18
+ selector?: string;
19
+ handleSelector?: string;
20
+ direction?: "x" | "y" | "both";
21
+ containInParent?: boolean;
22
+ }
23
+ export declare class MoveableContainer {
24
+ private container;
25
+ private options;
26
+ private element;
27
+ private resizeX;
28
+ private resizeY;
29
+ private initialX;
30
+ private initialY;
31
+ private startSize;
32
+ constructor(container: HTMLElement, options: IMoveableOptions);
33
+ private init;
34
+ private mouseDownContainer;
35
+ private mouseMove;
36
+ private mouseUp;
37
+ private extractArg;
38
+ }
39
+ export declare function Moveable(selector: HTMLElement | string, options?: IMoveableOptions): MoveableContainer;
@@ -1,174 +1,160 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import "./moveable.css";
13
- import "../core/polyfills";
14
- import { EventHandler } from "./eventhandler";
15
- var defaultOptions = {
16
- onStart: new EventHandler(),
17
- onStop: new EventHandler(),
18
- onMove: new EventHandler(),
19
- direction: "both",
20
- moveDelta: 0,
21
- containInParent: true
22
- };
23
- var MoveableContainer = /** @class */ (function () {
24
- function MoveableContainer(container, options) {
25
- var _this = this;
26
- this.container = container;
27
- this.options = options;
28
- this.resizeX = false;
29
- this.resizeY = false;
30
- this.initialX = null;
31
- this.initialY = null;
32
- this.startSize = { x: null, y: null };
33
- this.mouseDownContainer = function (evt) {
34
- var target = evt.target;
35
- var directChild = target;
36
- while (directChild.parentElement != null && directChild.parentElement !== _this.container) {
37
- if (_this.options.selector != null && directChild.matches(_this.options.selector)) {
38
- break;
39
- }
40
- directChild = directChild.parentElement;
41
- }
42
- if (directChild.parentElement == null) {
43
- return;
44
- }
45
- if (_this.options.selector != null && !directChild.matches(_this.options.selector)) {
46
- return;
47
- }
48
- _this.element = directChild;
49
- var canceled = false;
50
- var args = {
51
- evt: evt,
52
- target: _this.element,
53
- x: _this.element.offsetLeft,
54
- y: _this.element.offsetTop,
55
- cancelEvent: function () { canceled = true; }
56
- };
57
- _this.options.onStart.notify(args);
58
- if (canceled) {
59
- return;
60
- }
61
- evt.preventDefault();
62
- evt.stopPropagation();
63
- evt.stopImmediatePropagation();
64
- _this.initialX = _this.extractArg(evt, "clientX") - _this.element.offsetLeft;
65
- _this.initialY = _this.extractArg(evt, "clientY") - _this.element.offsetTop;
66
- // register event listeners
67
- window.addEventListener("mousemove", _this.mouseMove, false);
68
- window.addEventListener("mouseup", _this.mouseUp, false);
69
- window.addEventListener("touchmove", _this.mouseMove, false);
70
- window.addEventListener("touchend", _this.mouseUp, false);
71
- };
72
- this.mouseMove = function (evt) {
73
- var raiseEvt = false;
74
- var x = 0;
75
- if (_this.resizeX) {
76
- var val = _this.extractArg(evt, "clientX");
77
- if (_this.startSize != null && _this.startSize.x == null) {
78
- _this.startSize.x = val;
79
- }
80
- if (_this.startSize == null || Math.abs(_this.startSize.x - val) >= _this.options.moveDelta) {
81
- //if (!this.options.gridX || Math.round(val) % this.options.gridX === 0) {
82
- x = val - _this.initialX;
83
- if (_this.options.gridX) {
84
- x = Math.round(x / _this.options.gridX) * _this.options.gridX;
85
- }
86
- if (_this.options.containInParent) {
87
- if (x < 0) {
88
- x = 0;
89
- }
90
- var maxX = _this.container.clientWidth - _this.element.offsetWidth;
91
- if (x > maxX) {
92
- x = maxX;
93
- }
94
- }
95
- _this.element.style.left = x + "px";
96
- raiseEvt = true;
97
- _this.startSize = null;
98
- //}
99
- }
100
- }
101
- var y = 0;
102
- if (_this.resizeY) {
103
- var val = _this.extractArg(evt, "clientY");
104
- if (_this.startSize != null && _this.startSize.y == null) {
105
- _this.startSize.y = val;
106
- }
107
- if (_this.startSize == null || Math.abs(_this.startSize.y - val) >= _this.options.moveDelta) {
108
- //if (!this.options.gridY || Math.round(val) % this.options.gridY === 0) {
109
- y = val - _this.initialY;
110
- if (_this.options.gridY) {
111
- y = Math.round(y / _this.options.gridY) * _this.options.gridY;
112
- }
113
- if (_this.options.containInParent) {
114
- if (y < 0) {
115
- y = 0;
116
- }
117
- var maxY = _this.container.clientHeight - _this.element.offsetHeight;
118
- if (y > maxY) {
119
- y = maxY;
120
- }
121
- }
122
- _this.element.style.top = y + "px";
123
- raiseEvt = true;
124
- _this.startSize = null;
125
- //}
126
- }
127
- }
128
- if (raiseEvt) {
129
- _this.options.onMove.notify({
130
- evt: evt,
131
- target: _this.element,
132
- x: x,
133
- y: y,
134
- cancelEvent: function () { }
135
- });
136
- }
137
- };
138
- this.mouseUp = function (evt) {
139
- window.removeEventListener("mousemove", _this.mouseMove, false);
140
- window.removeEventListener("mouseup", _this.mouseUp, false);
141
- window.removeEventListener("touchmove", _this.mouseMove, false);
142
- window.removeEventListener("touchend", _this.mouseUp, false);
143
- _this.options.onStop.notify({
144
- evt: evt,
145
- target: _this.element,
146
- x: _this.element.offsetLeft,
147
- y: _this.element.offsetTop,
148
- cancelEvent: function () { }
149
- });
150
- _this.startSize = { x: null, y: null };
151
- };
152
- if (options.direction === "x" || options.direction === "both") {
153
- this.resizeX = true;
154
- }
155
- if (options.direction === "y" || options.direction === "both") {
156
- this.resizeY = true;
157
- }
158
- this.init();
159
- }
160
- MoveableContainer.prototype.init = function () {
161
- this.container.addEventListener("mousedown", this.mouseDownContainer, false);
162
- this.container.addEventListener("touchstart", this.mouseDownContainer, false);
163
- };
164
- MoveableContainer.prototype.extractArg = function (evt, key) {
165
- return evt[key] != null ? evt[key] : (evt.touches.length > 0 ? evt.touches : evt.changedTouches)[0][key];
166
- };
167
- return MoveableContainer;
168
- }());
169
- export { MoveableContainer };
170
- export function Moveable(selector, options) {
171
- return new MoveableContainer(typeof selector === "string" ?
172
- document.querySelector(selector) :
173
- selector, __assign(__assign({}, defaultOptions), options));
174
- }
1
+ import "./moveable.css";
2
+ import "../core/polyfills";
3
+ import { EventHandler } from "./eventhandler";
4
+ const defaultOptions = {
5
+ onStart: new EventHandler(),
6
+ onStop: new EventHandler(),
7
+ onMove: new EventHandler(),
8
+ direction: "both",
9
+ moveDelta: 0,
10
+ containInParent: true
11
+ };
12
+ export class MoveableContainer {
13
+ constructor(container, options) {
14
+ this.container = container;
15
+ this.options = options;
16
+ this.resizeX = false;
17
+ this.resizeY = false;
18
+ this.initialX = null;
19
+ this.initialY = null;
20
+ this.startSize = { x: null, y: null };
21
+ this.mouseDownContainer = (evt) => {
22
+ const target = evt.target;
23
+ let directChild = target;
24
+ while (directChild.parentElement != null && directChild.parentElement !== this.container) {
25
+ if (this.options.selector != null && directChild.matches(this.options.selector)) {
26
+ break;
27
+ }
28
+ directChild = directChild.parentElement;
29
+ }
30
+ if (directChild.parentElement == null) {
31
+ return;
32
+ }
33
+ if (this.options.selector != null && !directChild.matches(this.options.selector)) {
34
+ return;
35
+ }
36
+ this.element = directChild;
37
+ let canceled = false;
38
+ const args = {
39
+ evt,
40
+ target: this.element,
41
+ x: this.element.offsetLeft,
42
+ y: this.element.offsetTop,
43
+ cancelEvent: () => { canceled = true; }
44
+ };
45
+ this.options.onStart.notify(args);
46
+ if (canceled) {
47
+ return;
48
+ }
49
+ evt.preventDefault();
50
+ evt.stopPropagation();
51
+ evt.stopImmediatePropagation();
52
+ this.initialX = this.extractArg(evt, "clientX") - this.element.offsetLeft;
53
+ this.initialY = this.extractArg(evt, "clientY") - this.element.offsetTop;
54
+ // register event listeners
55
+ window.addEventListener("mousemove", this.mouseMove, false);
56
+ window.addEventListener("mouseup", this.mouseUp, false);
57
+ window.addEventListener("touchmove", this.mouseMove, false);
58
+ window.addEventListener("touchend", this.mouseUp, false);
59
+ };
60
+ this.mouseMove = (evt) => {
61
+ let raiseEvt = false;
62
+ let x = 0;
63
+ if (this.resizeX) {
64
+ const val = this.extractArg(evt, "clientX");
65
+ if (this.startSize != null && this.startSize.x == null) {
66
+ this.startSize.x = val;
67
+ }
68
+ if (this.startSize == null || Math.abs(this.startSize.x - val) >= this.options.moveDelta) {
69
+ //if (!this.options.gridX || Math.round(val) % this.options.gridX === 0) {
70
+ x = val - this.initialX;
71
+ if (this.options.gridX) {
72
+ x = Math.round(x / this.options.gridX) * this.options.gridX;
73
+ }
74
+ if (this.options.containInParent) {
75
+ if (x < 0) {
76
+ x = 0;
77
+ }
78
+ const maxX = this.container.clientWidth - this.element.offsetWidth;
79
+ if (x > maxX) {
80
+ x = maxX;
81
+ }
82
+ }
83
+ this.element.style.left = x + "px";
84
+ raiseEvt = true;
85
+ this.startSize = null;
86
+ //}
87
+ }
88
+ }
89
+ let y = 0;
90
+ if (this.resizeY) {
91
+ const val = this.extractArg(evt, "clientY");
92
+ if (this.startSize != null && this.startSize.y == null) {
93
+ this.startSize.y = val;
94
+ }
95
+ if (this.startSize == null || Math.abs(this.startSize.y - val) >= this.options.moveDelta) {
96
+ //if (!this.options.gridY || Math.round(val) % this.options.gridY === 0) {
97
+ y = val - this.initialY;
98
+ if (this.options.gridY) {
99
+ y = Math.round(y / this.options.gridY) * this.options.gridY;
100
+ }
101
+ if (this.options.containInParent) {
102
+ if (y < 0) {
103
+ y = 0;
104
+ }
105
+ const maxY = this.container.clientHeight - this.element.offsetHeight;
106
+ if (y > maxY) {
107
+ y = maxY;
108
+ }
109
+ }
110
+ this.element.style.top = y + "px";
111
+ raiseEvt = true;
112
+ this.startSize = null;
113
+ //}
114
+ }
115
+ }
116
+ if (raiseEvt) {
117
+ this.options.onMove.notify({
118
+ evt,
119
+ target: this.element,
120
+ x,
121
+ y,
122
+ cancelEvent: () => { }
123
+ });
124
+ }
125
+ };
126
+ this.mouseUp = (evt) => {
127
+ window.removeEventListener("mousemove", this.mouseMove, false);
128
+ window.removeEventListener("mouseup", this.mouseUp, false);
129
+ window.removeEventListener("touchmove", this.mouseMove, false);
130
+ window.removeEventListener("touchend", this.mouseUp, false);
131
+ this.options.onStop.notify({
132
+ evt,
133
+ target: this.element,
134
+ x: this.element.offsetLeft,
135
+ y: this.element.offsetTop,
136
+ cancelEvent: () => { }
137
+ });
138
+ this.startSize = { x: null, y: null };
139
+ };
140
+ if (options.direction === "x" || options.direction === "both") {
141
+ this.resizeX = true;
142
+ }
143
+ if (options.direction === "y" || options.direction === "both") {
144
+ this.resizeY = true;
145
+ }
146
+ this.init();
147
+ }
148
+ init() {
149
+ this.container.addEventListener("mousedown", this.mouseDownContainer, false);
150
+ this.container.addEventListener("touchstart", this.mouseDownContainer, false);
151
+ }
152
+ extractArg(evt, key) {
153
+ return evt[key] != null ? evt[key] : (evt.touches.length > 0 ? evt.touches : evt.changedTouches)[0][key];
154
+ }
155
+ }
156
+ export function Moveable(selector, options) {
157
+ return new MoveableContainer(typeof selector === "string" ?
158
+ document.querySelector(selector) :
159
+ selector, { ...defaultOptions, ...options });
160
+ }
@@ -1,37 +1,37 @@
1
- import "./resizable.css";
2
- import "../core/polyfills";
3
- import { EventHandler } from "./eventhandler";
4
- export interface IResizeEventArg {
5
- x: number;
6
- y: number;
7
- target: HTMLElement;
8
- evt: MouseEvent;
9
- }
10
- export interface IResizeOptions {
11
- minWidth?: number;
12
- maxWidth?: number;
13
- minHeight?: number;
14
- maxHeight?: number;
15
- resizeDelta?: number;
16
- resizeHandlePrefix?: string;
17
- onStart?: EventHandler<IResizeEventArg>;
18
- onStop?: EventHandler<IResizeEventArg>;
19
- onResize?: EventHandler<IResizeEventArg>;
20
- gridX?: number;
21
- gridY?: number;
22
- }
23
- export declare class ResizeContainer {
24
- private container;
25
- private options;
26
- private element;
27
- private resizeX;
28
- private resizeY;
29
- private startSize;
30
- constructor(container: HTMLElement, options: IResizeOptions);
31
- private init;
32
- private mouseDownContainer;
33
- private mouseMove;
34
- private mouseUp;
35
- private extractArg;
36
- }
37
- export declare function Resizable(selector: HTMLElement | string, options?: IResizeOptions): ResizeContainer;
1
+ import "./resizable.css";
2
+ import "../core/polyfills";
3
+ import { EventHandler } from "./eventhandler";
4
+ export interface IResizeEventArg {
5
+ x: number;
6
+ y: number;
7
+ target: HTMLElement;
8
+ evt: MouseEvent;
9
+ }
10
+ export interface IResizeOptions {
11
+ minWidth?: number;
12
+ maxWidth?: number;
13
+ minHeight?: number;
14
+ maxHeight?: number;
15
+ resizeDelta?: number;
16
+ resizeHandlePrefix?: string;
17
+ onStart?: EventHandler<IResizeEventArg>;
18
+ onStop?: EventHandler<IResizeEventArg>;
19
+ onResize?: EventHandler<IResizeEventArg>;
20
+ gridX?: number;
21
+ gridY?: number;
22
+ }
23
+ export declare class ResizeContainer {
24
+ private container;
25
+ private options;
26
+ private element;
27
+ private resizeX;
28
+ private resizeY;
29
+ private startSize;
30
+ constructor(container: HTMLElement, options: IResizeOptions);
31
+ private init;
32
+ private mouseDownContainer;
33
+ private mouseMove;
34
+ private mouseUp;
35
+ private extractArg;
36
+ }
37
+ export declare function Resizable(selector: HTMLElement | string, options?: IResizeOptions): ResizeContainer;