drop.that 0.0.3 → 0.0.4
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 +9 -9
- package/dist/lib.d.ts +24 -20
- package/dist/lib.js +29 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,9 @@ A drop input and download output component for web applications.
|
|
|
4
4
|
Typically to process an input file provided by the user, like in
|
|
5
5
|
online file conversion tools. This is useful in pure frontend
|
|
6
6
|
web applications, where you can't or don't want to deal with any
|
|
7
|
-
backend API or database storage.
|
|
7
|
+
backend API or database storage. Nonetheless there is a basic
|
|
8
|
+
support for REST services if you have them running or CORS is
|
|
9
|
+
enabled.
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
|
|
@@ -24,14 +26,12 @@ Here is a simple example. Drop, upload, paste or enter some text.
|
|
|
24
26
|
It will split the words into lines.
|
|
25
27
|
|
|
26
28
|
``` html
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</script>
|
|
34
|
-
</body>
|
|
29
|
+
<script type="module">
|
|
30
|
+
import { dropIn, dropOut } from 'https://oyo.github.io/drop.that/lib.js'
|
|
31
|
+
const input = await dropIn()
|
|
32
|
+
const output = input.split(' ').join('\n')
|
|
33
|
+
await dropOut(output)
|
|
34
|
+
</script>
|
|
35
35
|
```
|
|
36
36
|
|
|
37
37
|
See https://oyo.github.io/drop.that/0-simple.html
|
package/dist/lib.d.ts
CHANGED
|
@@ -3,30 +3,34 @@ type Validator = (text: string) => boolean
|
|
|
3
3
|
declare const valid: Record<string, Validator>
|
|
4
4
|
|
|
5
5
|
declare interface DropInOptions {
|
|
6
|
-
parent: HTMLElement
|
|
7
|
-
|
|
8
|
-
autoStart: boolean
|
|
9
|
-
showUI: boolean
|
|
10
|
-
valid: Validator
|
|
11
|
-
placeholderText: string
|
|
12
|
-
startButtonText: string
|
|
13
|
-
clearButtonText: string
|
|
14
|
-
pasteButtonText: string
|
|
6
|
+
parent: HTMLElement
|
|
7
|
+
apiIn: string
|
|
8
|
+
autoStart: boolean
|
|
9
|
+
showUI: boolean
|
|
10
|
+
valid: Validator
|
|
11
|
+
placeholderText: string
|
|
12
|
+
startButtonText: string
|
|
13
|
+
clearButtonText: string
|
|
14
|
+
pasteButtonText: string
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
declare interface DropOutOptions {
|
|
18
|
-
parent: HTMLElement
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
parent: HTMLElement
|
|
19
|
+
apiMethod: string
|
|
20
|
+
apiOut: string
|
|
21
|
+
apiOutMimeType: string
|
|
22
|
+
autoDownload: boolean
|
|
23
|
+
autoCopy: boolean
|
|
24
|
+
copyButtonText: string
|
|
25
|
+
downloadButtonText: string
|
|
26
|
+
downloadFileName: string
|
|
27
|
+
downloadFileMimeType: string
|
|
28
|
+
uploadButtonText: string
|
|
29
|
+
rawButtonText: string
|
|
30
|
+
previewButtonText: string
|
|
27
31
|
}
|
|
28
32
|
|
|
29
|
-
declare function dropIn(options
|
|
30
|
-
declare function dropOut(output: string, options
|
|
33
|
+
declare function dropIn(options?: Partial<DropInOptions>): Promise<string>
|
|
34
|
+
declare function dropOut(output: string, options?: Partial<DropOutOptions>): Promise<void>
|
|
31
35
|
|
|
32
36
|
export { dropIn, dropOut, valid, type Validator }
|
package/dist/lib.js
CHANGED
|
@@ -99,7 +99,7 @@ export const valid = {
|
|
|
99
99
|
|
|
100
100
|
const optionsIn = {
|
|
101
101
|
parent: document.body,
|
|
102
|
-
|
|
102
|
+
apiIn: '',
|
|
103
103
|
autoStart: false,
|
|
104
104
|
showUI: true,
|
|
105
105
|
valid: valid.isNotEmpty,
|
|
@@ -111,12 +111,16 @@ const optionsIn = {
|
|
|
111
111
|
|
|
112
112
|
const optionsOut = {
|
|
113
113
|
parent: document.body,
|
|
114
|
+
apiMethod: 'POST',
|
|
115
|
+
apiOut: '',
|
|
116
|
+
apiOutMimeType: 'text/plain',
|
|
114
117
|
autoDownload: false,
|
|
115
118
|
autoCopy: false,
|
|
116
119
|
copyButtonText: 'copy',
|
|
117
120
|
downloadButtonText: 'download',
|
|
118
121
|
downloadFileName: 'output',
|
|
119
122
|
downloadFileMimeType: 'text/plain',
|
|
123
|
+
uploadButtonText: 'upload',
|
|
120
124
|
rawButtonText: 'raw',
|
|
121
125
|
previewButtonText: 'preview',
|
|
122
126
|
}
|
|
@@ -175,7 +179,7 @@ export const dropIn = async (opts = {}) =>
|
|
|
175
179
|
}
|
|
176
180
|
overlay.appendChild(style)
|
|
177
181
|
|
|
178
|
-
config.
|
|
182
|
+
config.apiIn && fetch(config.apiIn)
|
|
179
183
|
.then(response => response.ok ? response.text() : '')
|
|
180
184
|
.then(data => setInput(data))
|
|
181
185
|
|
|
@@ -209,7 +213,11 @@ export const dropIn = async (opts = {}) =>
|
|
|
209
213
|
}
|
|
210
214
|
|
|
211
215
|
if (config.autoStart && isValid) {
|
|
212
|
-
|
|
216
|
+
try {
|
|
217
|
+
config.parent.removeChild(overlay)
|
|
218
|
+
} catch (_) {
|
|
219
|
+
// ignore
|
|
220
|
+
}
|
|
213
221
|
resolve(text)
|
|
214
222
|
}
|
|
215
223
|
}
|
|
@@ -272,6 +280,16 @@ export const dropOut = async (output, opts = {}) =>
|
|
|
272
280
|
}
|
|
273
281
|
}
|
|
274
282
|
|
|
283
|
+
const upload = async () => {
|
|
284
|
+
await fetch(config.apiOut, {
|
|
285
|
+
method: config.apiMethod,
|
|
286
|
+
body: output,
|
|
287
|
+
headers: {
|
|
288
|
+
'content-type': config.apiOutMimeType
|
|
289
|
+
}
|
|
290
|
+
})
|
|
291
|
+
}
|
|
292
|
+
|
|
275
293
|
if (config.autoDownload || config.autoCopy) {
|
|
276
294
|
config.autoCopy && copy()
|
|
277
295
|
config.autoDownload && download()
|
|
@@ -295,6 +313,7 @@ export const dropOut = async (output, opts = {}) =>
|
|
|
295
313
|
<span>
|
|
296
314
|
<button id="download" class="action">${config.downloadButtonText}</button>
|
|
297
315
|
<button id="copy" class="action">${config.copyButtonText}</button>
|
|
316
|
+
${config.apiOut && `<button id="upload" class="action">${config.uploadButtonText}</button>`}
|
|
298
317
|
</span>
|
|
299
318
|
</div>`
|
|
300
319
|
overlay.appendChild(style)
|
|
@@ -324,9 +343,15 @@ export const dropOut = async (output, opts = {}) =>
|
|
|
324
343
|
download()
|
|
325
344
|
resolve(true)
|
|
326
345
|
})
|
|
327
|
-
|
|
346
|
+
const copyButton = document.getElementById('copy')
|
|
347
|
+
copyButton.addEventListener('click', () => {
|
|
328
348
|
copy()
|
|
329
349
|
resolve(true)
|
|
330
350
|
})
|
|
351
|
+
const uploadButton = document.getElementById('upload')
|
|
352
|
+
uploadButton.addEventListener('click', () => {
|
|
353
|
+
upload()
|
|
354
|
+
resolve(true)
|
|
355
|
+
})
|
|
331
356
|
|
|
332
357
|
})
|
package/package.json
CHANGED