tiny-essentials 1.20.0 → 1.20.2
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/README.md +5 -0
- package/dist/v1/TinyBasicsEs.min.js +1 -1
- package/dist/v1/TinyDragger.min.js +1 -1
- package/dist/v1/TinyEssentials.min.js +1 -1
- package/dist/v1/TinyHtml.min.js +1 -1
- package/dist/v1/TinySmartScroller.min.js +1 -1
- package/dist/v1/TinyUploadClicker.min.js +1 -1
- package/dist/v1/basics/html.cjs +33 -2
- package/dist/v1/basics/html.d.mts +14 -4
- package/dist/v1/basics/html.mjs +27 -2
- package/dist/v1/basics/index.cjs +2 -0
- package/dist/v1/basics/index.d.mts +3 -1
- package/dist/v1/basics/index.mjs +3 -3
- package/dist/v1/basics/simpleMath.cjs +23 -4
- package/dist/v1/basics/simpleMath.d.mts +18 -4
- package/dist/v1/basics/simpleMath.mjs +22 -4
- package/dist/v1/index.cjs +2 -0
- package/dist/v1/index.d.mts +3 -1
- package/dist/v1/index.mjs +3 -3
- package/dist/v1/libs/TinyDragger.cjs +1 -1
- package/dist/v1/libs/TinyDragger.mjs +1 -1
- package/dist/v1/libs/TinyHtml.cjs +500 -105
- package/dist/v1/libs/TinyHtml.d.mts +251 -42
- package/dist/v1/libs/TinyHtml.mjs +448 -96
- package/dist/v1/libs/TinyIframeEvents.cjs +2 -1
- package/dist/v1/libs/TinyNewWinEvents.cjs +4 -2
- package/docs/v1/basics/html.md +78 -22
- package/docs/v1/basics/simpleMath.md +22 -4
- package/docs/v1/libs/TinyHtml.md +268 -6
- package/package.json +1 -1
- package/dist/v1/ColorSafeStringify.js +0 -235
- package/dist/v1/TinyAfterScrollWatcher.js +0 -219
- package/dist/v1/TinyBasicsEs.js +0 -9334
- package/dist/v1/TinyClipboard.js +0 -459
- package/dist/v1/TinyColorConverter.js +0 -617
- package/dist/v1/TinyDomReadyManager.js +0 -213
- package/dist/v1/TinyDragDropDetector.js +0 -307
- package/dist/v1/TinyDragger.js +0 -6569
- package/dist/v1/TinyEssentials.js +0 -20792
- package/dist/v1/TinyEvents.js +0 -402
- package/dist/v1/TinyHtml.js +0 -5545
- package/dist/v1/TinyIframeEvents.js +0 -854
- package/dist/v1/TinyLevelUp.js +0 -291
- package/dist/v1/TinyLocalStorage.js +0 -1440
- package/dist/v1/TinyNewWinEvents.js +0 -888
- package/dist/v1/TinyNotifications.js +0 -408
- package/dist/v1/TinyNotifyCenter.js +0 -493
- package/dist/v1/TinyPromiseQueue.js +0 -299
- package/dist/v1/TinyRateLimiter.js +0 -611
- package/dist/v1/TinySmartScroller.js +0 -7039
- package/dist/v1/TinyTextRangeEditor.js +0 -497
- package/dist/v1/TinyTimeout.js +0 -233
- package/dist/v1/TinyToastNotify.js +0 -441
- package/dist/v1/TinyUploadClicker.js +0 -14353
- package/dist/v1/UltraRandomMsgGen.js +0 -995
|
@@ -1,213 +0,0 @@
|
|
|
1
|
-
/******/ (() => { // webpackBootstrap
|
|
2
|
-
/******/ "use strict";
|
|
3
|
-
/******/ // The require scope
|
|
4
|
-
/******/ var __webpack_require__ = {};
|
|
5
|
-
/******/
|
|
6
|
-
/************************************************************************/
|
|
7
|
-
/******/ /* webpack/runtime/define property getters */
|
|
8
|
-
/******/ (() => {
|
|
9
|
-
/******/ // define getter functions for harmony exports
|
|
10
|
-
/******/ __webpack_require__.d = (exports, definition) => {
|
|
11
|
-
/******/ for(var key in definition) {
|
|
12
|
-
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
13
|
-
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
14
|
-
/******/ }
|
|
15
|
-
/******/ }
|
|
16
|
-
/******/ };
|
|
17
|
-
/******/ })();
|
|
18
|
-
/******/
|
|
19
|
-
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
20
|
-
/******/ (() => {
|
|
21
|
-
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
22
|
-
/******/ })();
|
|
23
|
-
/******/
|
|
24
|
-
/************************************************************************/
|
|
25
|
-
var __webpack_exports__ = {};
|
|
26
|
-
|
|
27
|
-
// EXPORTS
|
|
28
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
29
|
-
TinyDomReadyManager: () => (/* reexport */ libs_TinyDomReadyManager)
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
;// ./src/v1/libs/TinyDomReadyManager.mjs
|
|
33
|
-
/**
|
|
34
|
-
* A basic function that performs a task when the system is ready.
|
|
35
|
-
* Used for handlers in the readiness queue.
|
|
36
|
-
*
|
|
37
|
-
* @typedef {() => void} Fn
|
|
38
|
-
*/
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* A function that determines whether a specific handler should be executed.
|
|
42
|
-
* Should return `true` to allow execution, or `false` to skip the handler.
|
|
43
|
-
*
|
|
44
|
-
* @typedef {() => boolean} FnFilter
|
|
45
|
-
*/
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* @typedef {Object} Handler
|
|
49
|
-
* @property {Fn} fn - Function to execute when ready.
|
|
50
|
-
* @property {boolean} once - Whether to execute only once.
|
|
51
|
-
* @property {number} priority - Execution order (higher priority runs first).
|
|
52
|
-
* @property {FnFilter|null} filter - Optional filter function to determine execution.
|
|
53
|
-
* @property {boolean} domOnly - Whether to run as soon as DOM is ready (before full readiness).
|
|
54
|
-
*/
|
|
55
|
-
|
|
56
|
-
class TinyDomReadyManager {
|
|
57
|
-
/** @type {Handler[]} */
|
|
58
|
-
#handlers = [];
|
|
59
|
-
|
|
60
|
-
/** @type {boolean} */
|
|
61
|
-
#isDomReady = false;
|
|
62
|
-
|
|
63
|
-
/** @type {boolean} */
|
|
64
|
-
#isFullyReady = false;
|
|
65
|
-
|
|
66
|
-
/** @type {Promise<any>[]} */
|
|
67
|
-
#promises = [];
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Checks if the DOM is ready and if all Promises have been resolved.
|
|
71
|
-
*/
|
|
72
|
-
#checkAllReady() {
|
|
73
|
-
if (this.#isDomReady) {
|
|
74
|
-
Promise.all(this.#promises)
|
|
75
|
-
.then(() => {
|
|
76
|
-
this.#isFullyReady = true;
|
|
77
|
-
this.#runHandlers(false); // run non-domOnly
|
|
78
|
-
})
|
|
79
|
-
.catch((err) => {
|
|
80
|
-
console.error('[TinyDomReadyManager] Promise rejected:', err);
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Executes handlers by filtering them by `domOnly` flag and sorting by priority.
|
|
87
|
-
* @param {boolean} domOnlyOnly - Whether to run only `domOnly` handlers.
|
|
88
|
-
*/
|
|
89
|
-
#runHandlers(domOnlyOnly) {
|
|
90
|
-
this.#handlers
|
|
91
|
-
.filter((h) => h.domOnly === domOnlyOnly)
|
|
92
|
-
.sort((a, b) => b.priority - a.priority)
|
|
93
|
-
.forEach((handler) => this.#invokeHandler(handler));
|
|
94
|
-
|
|
95
|
-
this.#handlers = this.#handlers.filter((h) => !(h.once && (domOnlyOnly ? h.domOnly : true)));
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
* Executes a handler if its filter passes.
|
|
100
|
-
* @param {Handler} handler
|
|
101
|
-
*/
|
|
102
|
-
#invokeHandler(handler) {
|
|
103
|
-
if (typeof handler.filter === 'function') {
|
|
104
|
-
try {
|
|
105
|
-
if (!handler.filter()) return;
|
|
106
|
-
} catch (err) {
|
|
107
|
-
console.warn('[TinyDomReadyManager] Filter error:', err);
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
try {
|
|
113
|
-
handler.fn();
|
|
114
|
-
} catch (err) {
|
|
115
|
-
console.error('[TinyDomReadyManager] Handler error:', err);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* Marks the system as DOM-ready and runs DOM-only handlers.
|
|
121
|
-
* @private
|
|
122
|
-
*/
|
|
123
|
-
_markDomReady() {
|
|
124
|
-
this.#isDomReady = true;
|
|
125
|
-
this.#runHandlers(true); // Run domOnly
|
|
126
|
-
this.#checkAllReady(); // Then check for full readiness
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* Initializes the manager using `DOMContentLoaded`.
|
|
131
|
-
*/
|
|
132
|
-
init() {
|
|
133
|
-
if (this.#isDomReady) throw new Error('[TinyDomReadyManager] init() has already been called.');
|
|
134
|
-
|
|
135
|
-
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
|
136
|
-
this._markDomReady();
|
|
137
|
-
} else {
|
|
138
|
-
document.addEventListener('DOMContentLoaded', () => this._markDomReady());
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Adds a Promise to delay full readiness.
|
|
144
|
-
* @param {Promise<any>} promise
|
|
145
|
-
* @throws {TypeError}
|
|
146
|
-
*/
|
|
147
|
-
addPromise(promise) {
|
|
148
|
-
if (!(promise instanceof Promise))
|
|
149
|
-
throw new TypeError('[TinyDomReadyManager] promise must be a valid Promise.');
|
|
150
|
-
|
|
151
|
-
if (this.#isFullyReady) return;
|
|
152
|
-
this.#promises.push(promise);
|
|
153
|
-
if (this.#isDomReady) this.#checkAllReady();
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Registers a handler to run either after DOM is ready or after full readiness.
|
|
158
|
-
*
|
|
159
|
-
* @param {Fn} fn - Function to execute.
|
|
160
|
-
* @param {Object} [options]
|
|
161
|
-
* @param {boolean} [options.once=true] - Execute only once.
|
|
162
|
-
* @param {number} [options.priority=0] - Higher priority runs first.
|
|
163
|
-
* @param {FnFilter|null} [options.filter=null] - Optional filter function.
|
|
164
|
-
* @param {boolean} [options.domOnly=false] - If true, executes after DOM ready only.
|
|
165
|
-
* @throws {TypeError} If fn is not a function.
|
|
166
|
-
*/
|
|
167
|
-
onReady(fn, { once = true, priority = 0, filter = null, domOnly = false } = {}) {
|
|
168
|
-
if (typeof fn !== 'function')
|
|
169
|
-
throw new TypeError('[TinyDomReadyManager] fn must be a function.');
|
|
170
|
-
|
|
171
|
-
const handler = { fn, once, priority, filter, domOnly };
|
|
172
|
-
|
|
173
|
-
if (domOnly && this.#isDomReady) {
|
|
174
|
-
this.#invokeHandler(handler);
|
|
175
|
-
if (!once) this.#handlers.push(handler);
|
|
176
|
-
return;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
if (!domOnly && this.#isFullyReady) {
|
|
180
|
-
this.#invokeHandler(handler);
|
|
181
|
-
} else {
|
|
182
|
-
this.#handlers.push(handler);
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
/**
|
|
187
|
-
* Returns whether the system is fully ready (DOM + Promises).
|
|
188
|
-
* @returns {boolean}
|
|
189
|
-
*/
|
|
190
|
-
isReady() {
|
|
191
|
-
return this.#isFullyReady;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
/**
|
|
195
|
-
* Returns whether the DOM is ready (DOMContentLoaded has fired).
|
|
196
|
-
* Does not wait for promises.
|
|
197
|
-
* @returns {boolean}
|
|
198
|
-
*/
|
|
199
|
-
isDomReady() {
|
|
200
|
-
return this.#isDomReady;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
/* harmony default export */ const libs_TinyDomReadyManager = (TinyDomReadyManager);
|
|
205
|
-
|
|
206
|
-
;// ./src/v1/build/TinyDomReadyManager.mjs
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
window.TinyDomReadyManager = __webpack_exports__.TinyDomReadyManager;
|
|
212
|
-
/******/ })()
|
|
213
|
-
;
|
|
@@ -1,307 +0,0 @@
|
|
|
1
|
-
/******/ (() => { // webpackBootstrap
|
|
2
|
-
/******/ "use strict";
|
|
3
|
-
/******/ // The require scope
|
|
4
|
-
/******/ var __webpack_require__ = {};
|
|
5
|
-
/******/
|
|
6
|
-
/************************************************************************/
|
|
7
|
-
/******/ /* webpack/runtime/define property getters */
|
|
8
|
-
/******/ (() => {
|
|
9
|
-
/******/ // define getter functions for harmony exports
|
|
10
|
-
/******/ __webpack_require__.d = (exports, definition) => {
|
|
11
|
-
/******/ for(var key in definition) {
|
|
12
|
-
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
13
|
-
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
14
|
-
/******/ }
|
|
15
|
-
/******/ }
|
|
16
|
-
/******/ };
|
|
17
|
-
/******/ })();
|
|
18
|
-
/******/
|
|
19
|
-
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
20
|
-
/******/ (() => {
|
|
21
|
-
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
22
|
-
/******/ })();
|
|
23
|
-
/******/
|
|
24
|
-
/************************************************************************/
|
|
25
|
-
var __webpack_exports__ = {};
|
|
26
|
-
|
|
27
|
-
// EXPORTS
|
|
28
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
29
|
-
TinyDragDropDetector: () => (/* reexport */ libs_TinyDragDropDetector)
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
;// ./src/v1/libs/TinyDragDropDetector.mjs
|
|
33
|
-
/**
|
|
34
|
-
* @typedef {Object} DragAndDropOptions
|
|
35
|
-
* @property {HTMLElement} [target=document.body] - The DOM element where drag listeners will be attached. Defaults to `document.body` if `fullscreen` is true or no target is provided.
|
|
36
|
-
* @property {boolean} [fullscreen=true] - If true, listeners are attached to the entire page (`document.body`). If false, the `target` must be specified.
|
|
37
|
-
* @property {string} [hoverClass="dnd-hover"] - CSS class applied to the target element while files are being dragged over it.
|
|
38
|
-
* @property {(files: FileList, event: DragEvent) => void} [onDrop] - Callback function executed when files are dropped onto the target.
|
|
39
|
-
* @property {(event: DragEvent) => void} [onEnter] - Optional callback triggered when dragging enters the target area.
|
|
40
|
-
* @property {(event: DragEvent) => void} [onLeave] - Optional callback triggered when dragging leaves the target area.
|
|
41
|
-
*/
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* TinyDragDropDetector
|
|
45
|
-
*
|
|
46
|
-
* A lightweight utility to detect drag-and-drop file operations on a specific DOM element or the entire page.
|
|
47
|
-
* It handles the drag lifecycle (enter, over, leave, drop) and provides hooks for developers to handle file uploads or UI changes.
|
|
48
|
-
*
|
|
49
|
-
* @class
|
|
50
|
-
*/
|
|
51
|
-
class TinyDragDropDetector {
|
|
52
|
-
/** @type {HTMLElement} */
|
|
53
|
-
#target;
|
|
54
|
-
|
|
55
|
-
/** @type {boolean} */
|
|
56
|
-
#fullscreen;
|
|
57
|
-
|
|
58
|
-
/** @type {string} */
|
|
59
|
-
#hoverClass;
|
|
60
|
-
|
|
61
|
-
/** @type {(files: FileList, event: DragEvent) => void} */
|
|
62
|
-
#onDropCallback;
|
|
63
|
-
|
|
64
|
-
/** @type {(event: DragEvent) => void} */
|
|
65
|
-
#onEnterCallback;
|
|
66
|
-
|
|
67
|
-
/** @type {(event: DragEvent) => void} */
|
|
68
|
-
#onLeaveCallback;
|
|
69
|
-
|
|
70
|
-
/** @type {boolean} */
|
|
71
|
-
#isDragging;
|
|
72
|
-
|
|
73
|
-
/** @type {boolean} */
|
|
74
|
-
#bound;
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Creates a new instance of TinyDragDropDetector to handle drag-and-drop file detection.
|
|
78
|
-
*
|
|
79
|
-
* @param {DragAndDropOptions} [options={}] - Configuration options for the detector.
|
|
80
|
-
* @throws {TypeError} If `target` is not an HTMLElement.
|
|
81
|
-
* @throws {TypeError} If `fullscreen` is not a boolean.
|
|
82
|
-
* @throws {TypeError} If `hoverClass` is not a string.
|
|
83
|
-
* @throws {TypeError} If `onDrop` is defined but not a function.
|
|
84
|
-
* @throws {TypeError} If `onEnter` is defined but not a function.
|
|
85
|
-
* @throws {TypeError} If `onLeave` is defined but not a function.
|
|
86
|
-
*/
|
|
87
|
-
constructor(options = {}) {
|
|
88
|
-
const {
|
|
89
|
-
target,
|
|
90
|
-
fullscreen = true,
|
|
91
|
-
hoverClass = 'dnd-hover',
|
|
92
|
-
onDrop,
|
|
93
|
-
onEnter,
|
|
94
|
-
onLeave,
|
|
95
|
-
} = options;
|
|
96
|
-
|
|
97
|
-
// Validate fullscreen
|
|
98
|
-
if (typeof fullscreen !== 'boolean')
|
|
99
|
-
throw new TypeError('The "fullscreen" option must be a boolean.');
|
|
100
|
-
|
|
101
|
-
// Validate target
|
|
102
|
-
const resolvedTarget = fullscreen ? document.body : target || document.body;
|
|
103
|
-
if (!(resolvedTarget instanceof HTMLElement))
|
|
104
|
-
throw new TypeError('The "target" option must be an instance of HTMLElement.');
|
|
105
|
-
|
|
106
|
-
// Validate hoverClass
|
|
107
|
-
if (typeof hoverClass !== 'string')
|
|
108
|
-
throw new TypeError('The "hoverClass" option must be a string.');
|
|
109
|
-
|
|
110
|
-
// Validate onDrop
|
|
111
|
-
if (typeof onDrop !== 'function')
|
|
112
|
-
throw new TypeError('The "onDrop" option must be a function.');
|
|
113
|
-
|
|
114
|
-
// Validate onEnter
|
|
115
|
-
if (typeof onEnter !== 'function')
|
|
116
|
-
throw new TypeError('The "onEnter" option must be a function.');
|
|
117
|
-
|
|
118
|
-
// Validate onLeave
|
|
119
|
-
if (typeof onLeave !== 'function')
|
|
120
|
-
throw new TypeError('The "onLeave" option must be a function.');
|
|
121
|
-
|
|
122
|
-
// Store properties
|
|
123
|
-
this.#target = resolvedTarget;
|
|
124
|
-
this.#fullscreen = fullscreen;
|
|
125
|
-
this.#hoverClass = hoverClass;
|
|
126
|
-
|
|
127
|
-
this.#onDropCallback = onDrop || (() => {});
|
|
128
|
-
this.#onEnterCallback = onEnter;
|
|
129
|
-
this.#onLeaveCallback = onLeave;
|
|
130
|
-
|
|
131
|
-
this.#isDragging = false;
|
|
132
|
-
this.#bound = false;
|
|
133
|
-
|
|
134
|
-
// Bind event handlers
|
|
135
|
-
this._handleDragEnter = this._handleDragEnter.bind(this);
|
|
136
|
-
this._handleDragOver = this._handleDragOver.bind(this);
|
|
137
|
-
this._handleDragLeave = this._handleDragLeave.bind(this);
|
|
138
|
-
this._handleDrop = this._handleDrop.bind(this);
|
|
139
|
-
|
|
140
|
-
this.#bindEvents();
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/**
|
|
144
|
-
* Returns the current target DOM element where the listeners are attached.
|
|
145
|
-
* @returns {HTMLElement}
|
|
146
|
-
*/
|
|
147
|
-
getTarget() {
|
|
148
|
-
return this.#target;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
/**
|
|
152
|
-
* Returns the CSS class applied during drag hover.
|
|
153
|
-
* @returns {string}
|
|
154
|
-
*/
|
|
155
|
-
getHoverClass() {
|
|
156
|
-
return this.#hoverClass;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* Indicates whether the detector is operating in fullscreen mode.
|
|
161
|
-
* @returns {boolean}
|
|
162
|
-
*/
|
|
163
|
-
isFullScreen() {
|
|
164
|
-
return this.#fullscreen;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
/**
|
|
168
|
-
* Returns whether a drag operation is currently active over the target.
|
|
169
|
-
* @returns {boolean}
|
|
170
|
-
*/
|
|
171
|
-
isDragging() {
|
|
172
|
-
return this.#isDragging;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* Returns whether the event listeners are currently bound to the target.
|
|
177
|
-
* @returns {boolean}
|
|
178
|
-
*/
|
|
179
|
-
bound() {
|
|
180
|
-
return this.#bound;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Binds the drag-and-drop event listeners to the target element.
|
|
185
|
-
* Automatically called on instantiation.
|
|
186
|
-
* @returns {void}
|
|
187
|
-
*/
|
|
188
|
-
#bindEvents() {
|
|
189
|
-
if (this.#bound) return;
|
|
190
|
-
const target = this.getTarget();
|
|
191
|
-
target.addEventListener('dragenter', this._handleDragEnter);
|
|
192
|
-
target.addEventListener('dragover', this._handleDragOver);
|
|
193
|
-
target.addEventListener('dragleave', this._handleDragLeave);
|
|
194
|
-
target.addEventListener('drop', this._handleDrop);
|
|
195
|
-
this.#bound = true;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* Removes all previously attached drag-and-drop event listeners from the target.
|
|
200
|
-
* @returns {void}
|
|
201
|
-
*/
|
|
202
|
-
#unbindEvents() {
|
|
203
|
-
if (!this.#bound) return;
|
|
204
|
-
const target = this.getTarget();
|
|
205
|
-
target.removeEventListener('dragenter', this._handleDragEnter);
|
|
206
|
-
target.removeEventListener('dragover', this._handleDragOver);
|
|
207
|
-
target.removeEventListener('dragleave', this._handleDragLeave);
|
|
208
|
-
target.removeEventListener('drop', this._handleDrop);
|
|
209
|
-
this.#bound = false;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
/**
|
|
213
|
-
* Handles the `dragenter` event.
|
|
214
|
-
* Adds the hover CSS class and triggers the `onEnter` callback if provided.
|
|
215
|
-
* @private
|
|
216
|
-
* @param {DragEvent} event - The dragenter event.
|
|
217
|
-
* @returns {void}
|
|
218
|
-
*/
|
|
219
|
-
_handleDragEnter(event) {
|
|
220
|
-
event.preventDefault();
|
|
221
|
-
if (!this.#isDragging) {
|
|
222
|
-
const target = this.getTarget();
|
|
223
|
-
this.#isDragging = true;
|
|
224
|
-
target.classList.add(this.#hoverClass);
|
|
225
|
-
this.#onEnterCallback(event);
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
/**
|
|
230
|
-
* Handles the `dragover` event.
|
|
231
|
-
* Prevents default to allow drop and sets the drop effect.
|
|
232
|
-
* @private
|
|
233
|
-
* @param {DragEvent} event - The dragover event.
|
|
234
|
-
* @returns {void}
|
|
235
|
-
*/
|
|
236
|
-
_handleDragOver(event) {
|
|
237
|
-
event.preventDefault(); // Required to allow drop
|
|
238
|
-
if (!event.dataTransfer) {
|
|
239
|
-
console.warn('[TinyDragDropDetector] [handleDragOver] DragOver event missing dataTransfer.');
|
|
240
|
-
return;
|
|
241
|
-
}
|
|
242
|
-
event.dataTransfer.dropEffect = 'copy';
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
/**
|
|
246
|
-
* Handles the `dragleave` event.
|
|
247
|
-
* Removes the hover class and triggers the `onLeave` callback if provided.
|
|
248
|
-
* @private
|
|
249
|
-
* @param {DragEvent} event - The dragleave event.
|
|
250
|
-
* @returns {void}
|
|
251
|
-
*/
|
|
252
|
-
_handleDragLeave(event) {
|
|
253
|
-
event.preventDefault();
|
|
254
|
-
const target = this.getTarget();
|
|
255
|
-
// Check if you've completely left the area
|
|
256
|
-
// @ts-ignore
|
|
257
|
-
if (event.relatedTarget === null || !target.contains(event.relatedTarget)) {
|
|
258
|
-
this.#isDragging = false;
|
|
259
|
-
target.classList.remove(this.#hoverClass);
|
|
260
|
-
this.#onLeaveCallback(event);
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
/**
|
|
265
|
-
* Handles the `drop` event.
|
|
266
|
-
* Removes the hover class, resets dragging state, and triggers the `onDrop` callback.
|
|
267
|
-
* @private
|
|
268
|
-
* @param {DragEvent} event - The drop event.
|
|
269
|
-
* @returns {void}
|
|
270
|
-
*/
|
|
271
|
-
_handleDrop(event) {
|
|
272
|
-
event.preventDefault();
|
|
273
|
-
if (!event.dataTransfer) {
|
|
274
|
-
console.warn('[TinyDragDropDetector] [handleDrop] DragOver event missing dataTransfer.');
|
|
275
|
-
return;
|
|
276
|
-
}
|
|
277
|
-
const target = this.getTarget();
|
|
278
|
-
this.#isDragging = false;
|
|
279
|
-
target.classList.remove(this.#hoverClass);
|
|
280
|
-
const files = event.dataTransfer.files;
|
|
281
|
-
if (files.length > 0) {
|
|
282
|
-
this.#onDropCallback(files, event);
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
/**
|
|
287
|
-
* Destroys the detector instance, unbinding all event listeners and cleaning up.
|
|
288
|
-
* Should be called when the detector is no longer needed to avoid memory leaks.
|
|
289
|
-
* @returns {void}
|
|
290
|
-
*/
|
|
291
|
-
destroy() {
|
|
292
|
-
this.#unbindEvents();
|
|
293
|
-
const target = this.getTarget();
|
|
294
|
-
target.classList.remove(this.#hoverClass);
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
/* harmony default export */ const libs_TinyDragDropDetector = (TinyDragDropDetector);
|
|
299
|
-
|
|
300
|
-
;// ./src/v1/build/TinyDragDropDetector.mjs
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
window.TinyDragDropDetector = __webpack_exports__.TinyDragDropDetector;
|
|
306
|
-
/******/ })()
|
|
307
|
-
;
|