drop.that 0.0.2 → 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 +34 -7
- package/package.json +8 -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
|
}
|
|
@@ -127,6 +131,8 @@ export const dropIn = async (opts = {}) =>
|
|
|
127
131
|
|
|
128
132
|
const config = { ...optionsIn, ...opts }
|
|
129
133
|
|
|
134
|
+
let fileInput, inputarea, startButton
|
|
135
|
+
|
|
130
136
|
const debounce = (func, timeout = 250) => {
|
|
131
137
|
let timer
|
|
132
138
|
return (...args) => {
|
|
@@ -158,14 +164,14 @@ export const dropIn = async (opts = {}) =>
|
|
|
158
164
|
<button id="start" class="action" ${config.valid('') ? '' : 'disabled'}>${config.startButtonText}</button>
|
|
159
165
|
</span>
|
|
160
166
|
</div>`
|
|
161
|
-
|
|
167
|
+
inputarea = document.getElementById('inputarea')
|
|
162
168
|
inputarea.focus()
|
|
163
169
|
inputarea.addEventListener('input', (evt) => processText(evt.target.value))
|
|
164
|
-
|
|
170
|
+
fileInput = document.querySelector('input[type=file]')
|
|
165
171
|
fileInput.addEventListener('change', (evt) => readFile(evt.target.files))
|
|
166
172
|
document.getElementById('paste').addEventListener('click', () => paste())
|
|
167
173
|
document.getElementById('clear').addEventListener('click', () => setInput(''))
|
|
168
|
-
|
|
174
|
+
startButton = document.getElementById('start')
|
|
169
175
|
startButton.addEventListener('click', () => {
|
|
170
176
|
config.parent.removeChild(overlay)
|
|
171
177
|
resolve(inputarea.value)
|
|
@@ -173,7 +179,7 @@ export const dropIn = async (opts = {}) =>
|
|
|
173
179
|
}
|
|
174
180
|
overlay.appendChild(style)
|
|
175
181
|
|
|
176
|
-
config.
|
|
182
|
+
config.apiIn && fetch(config.apiIn)
|
|
177
183
|
.then(response => response.ok ? response.text() : '')
|
|
178
184
|
.then(data => setInput(data))
|
|
179
185
|
|
|
@@ -207,7 +213,11 @@ export const dropIn = async (opts = {}) =>
|
|
|
207
213
|
}
|
|
208
214
|
|
|
209
215
|
if (config.autoStart && isValid) {
|
|
210
|
-
|
|
216
|
+
try {
|
|
217
|
+
config.parent.removeChild(overlay)
|
|
218
|
+
} catch (_) {
|
|
219
|
+
// ignore
|
|
220
|
+
}
|
|
211
221
|
resolve(text)
|
|
212
222
|
}
|
|
213
223
|
}
|
|
@@ -270,6 +280,16 @@ export const dropOut = async (output, opts = {}) =>
|
|
|
270
280
|
}
|
|
271
281
|
}
|
|
272
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
|
+
|
|
273
293
|
if (config.autoDownload || config.autoCopy) {
|
|
274
294
|
config.autoCopy && copy()
|
|
275
295
|
config.autoDownload && download()
|
|
@@ -293,6 +313,7 @@ export const dropOut = async (output, opts = {}) =>
|
|
|
293
313
|
<span>
|
|
294
314
|
<button id="download" class="action">${config.downloadButtonText}</button>
|
|
295
315
|
<button id="copy" class="action">${config.copyButtonText}</button>
|
|
316
|
+
${config.apiOut && `<button id="upload" class="action">${config.uploadButtonText}</button>`}
|
|
296
317
|
</span>
|
|
297
318
|
</div>`
|
|
298
319
|
overlay.appendChild(style)
|
|
@@ -322,9 +343,15 @@ export const dropOut = async (output, opts = {}) =>
|
|
|
322
343
|
download()
|
|
323
344
|
resolve(true)
|
|
324
345
|
})
|
|
325
|
-
|
|
346
|
+
const copyButton = document.getElementById('copy')
|
|
347
|
+
copyButton.addEventListener('click', () => {
|
|
326
348
|
copy()
|
|
327
349
|
resolve(true)
|
|
328
350
|
})
|
|
351
|
+
const uploadButton = document.getElementById('upload')
|
|
352
|
+
uploadButton.addEventListener('click', () => {
|
|
353
|
+
upload()
|
|
354
|
+
resolve(true)
|
|
355
|
+
})
|
|
329
356
|
|
|
330
357
|
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drop.that",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "Generic drop/paste input and download/copy output component for web applications.",
|
|
5
5
|
"author": "Martin Rohrmeier <roryphant@gmail.com> (oyo)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -11,6 +11,13 @@
|
|
|
11
11
|
"type": "git",
|
|
12
12
|
"url": "git+https://github.com/oyo/drop.that.git"
|
|
13
13
|
},
|
|
14
|
+
"keywords": [
|
|
15
|
+
"drag",
|
|
16
|
+
"drop",
|
|
17
|
+
"paste",
|
|
18
|
+
"download",
|
|
19
|
+
"zero-dependency"
|
|
20
|
+
],
|
|
14
21
|
"scripts": {
|
|
15
22
|
"build": "mkdir -p dist && cp src/lib* dist",
|
|
16
23
|
"clear": "rm -rf dist"
|