|
|
@@ -1,32 +1,33 @@
|
|
|
-/* eslint-env browser */
|
|
|
-const marked = require('marked')
|
|
|
-const dragdrop = require('drag-drop')
|
|
|
-const robodog = require('@uppy/robodog')
|
|
|
+import { marked } from 'marked'
|
|
|
+import Uppy from '@uppy/core'
|
|
|
+import DropTarget from '@uppy/drop-target'
|
|
|
+import Dashboard from '@uppy/dashboard'
|
|
|
+import Transloadit from '@uppy/transloadit'
|
|
|
+import RemoteSources from '@uppy/remote-sources'
|
|
|
+import Webcam from '@uppy/webcam'
|
|
|
+import ImageEditor from '@uppy/image-editor'
|
|
|
+
|
|
|
+import '@uppy/core/dist/style.css'
|
|
|
+import '@uppy/dashboard/dist/style.css'
|
|
|
+import '@uppy/image-editor/dist/style.css'
|
|
|
|
|
|
const TRANSLOADIT_EXAMPLE_KEY = '35c1aed03f5011e982b6afe82599b6a0'
|
|
|
const TRANSLOADIT_EXAMPLE_TEMPLATE = '0b2ee2bc25dc43619700c2ce0a75164a'
|
|
|
|
|
|
/**
|
|
|
* A textarea for markdown text, with support for file attachments.
|
|
|
- *
|
|
|
- * ## Usage
|
|
|
- *
|
|
|
- * ```js
|
|
|
- * const element = document.querySelector('textarea')
|
|
|
- * const mdtxt = new MarkdownTextarea(element)
|
|
|
- * mdtxt.install()
|
|
|
- * ```
|
|
|
*/
|
|
|
class MarkdownTextarea {
|
|
|
constructor (element) {
|
|
|
this.element = element
|
|
|
this.controls = document.createElement('div')
|
|
|
this.controls.classList.add('mdtxt-controls')
|
|
|
- this.uploadLine = document.createElement('div')
|
|
|
- this.uploadLine.classList.add('mdtxt-upload')
|
|
|
+ this.uploadLine = document.createElement('button')
|
|
|
+ this.uploadLine.setAttribute('type', 'button')
|
|
|
+ this.uploadLine.classList.add('form-upload')
|
|
|
|
|
|
this.uploadLine.appendChild(
|
|
|
- document.createTextNode('Upload an attachment'),
|
|
|
+ document.createTextNode('Tap here to upload an attachment'),
|
|
|
)
|
|
|
}
|
|
|
|
|
|
@@ -39,18 +40,37 @@ class MarkdownTextarea {
|
|
|
wrapper.appendChild(element)
|
|
|
wrapper.appendChild(this.uploadLine)
|
|
|
|
|
|
- this.setupUploadLine()
|
|
|
+ this.setupUppy()
|
|
|
}
|
|
|
|
|
|
- setupTextareaDrop () {
|
|
|
- dragdrop(this.element, (files) => {
|
|
|
- this.uploadFiles(files)
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- setupUploadLine () {
|
|
|
- this.uploadLine.addEventListener('click', () => {
|
|
|
- this.pickFiles()
|
|
|
+ setupUppy = () => {
|
|
|
+ this.uppy = new Uppy({ autoProceed: true })
|
|
|
+ .use(Transloadit, {
|
|
|
+ waitForEncoding: true,
|
|
|
+ params: {
|
|
|
+ auth: { key: TRANSLOADIT_EXAMPLE_KEY },
|
|
|
+ template_id: TRANSLOADIT_EXAMPLE_TEMPLATE,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .use(DropTarget, { target: this.element })
|
|
|
+ .use(Dashboard, { closeAfterFinish: true, trigger: '.form-upload' })
|
|
|
+ .use(ImageEditor, { target: Dashboard })
|
|
|
+ .use(Webcam, { target: Dashboard })
|
|
|
+ .use(RemoteSources, { companionUrl: Transloadit.COMPANION })
|
|
|
+
|
|
|
+ this.uppy.on('complete', (result) => {
|
|
|
+ const { successful, failed, transloadit } = result
|
|
|
+ if (successful.length !== 0) {
|
|
|
+ this.insertAttachments(
|
|
|
+ matchFilesAndThumbs(transloadit[0].results),
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ failed.forEach(error => {
|
|
|
+ console.error(error)
|
|
|
+ this.reportUploadError(error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.uppy.cancelAll()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -82,66 +102,20 @@ class MarkdownTextarea {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- matchFilesAndThumbs (results) {
|
|
|
- const filesById = {}
|
|
|
- const thumbsById = {}
|
|
|
-
|
|
|
- results.forEach((result) => {
|
|
|
- if (result.stepName === 'thumbnails') {
|
|
|
- thumbsById[result.original_id] = result
|
|
|
- } else {
|
|
|
- filesById[result.original_id] = result
|
|
|
+ uploadFiles = (files) => {
|
|
|
+ const filesForUppy = files.map(file => {
|
|
|
+ return {
|
|
|
+ data: file,
|
|
|
+ type: file.type,
|
|
|
+ name: file.name,
|
|
|
+ meta: file.meta || {},
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
- return Object.keys(filesById).map((key) => ({
|
|
|
- file : filesById[key],
|
|
|
- thumb : thumbsById[key],
|
|
|
- }))
|
|
|
- }
|
|
|
-
|
|
|
- uploadFiles () {
|
|
|
- robodog.upload({
|
|
|
- waitForEncoding: true,
|
|
|
- params: {
|
|
|
- auth: { key: TRANSLOADIT_EXAMPLE_KEY },
|
|
|
- template_id: TRANSLOADIT_EXAMPLE_TEMPLATE,
|
|
|
- },
|
|
|
- }).then((result) => {
|
|
|
- // Was cancelled
|
|
|
- if (result == null) return
|
|
|
- this.insertAttachments(
|
|
|
- this.matchFilesAndThumbs(result.results),
|
|
|
- )
|
|
|
- }).catch((err) => {
|
|
|
- console.error(err)
|
|
|
- this.reportUploadError(err)
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- pickFiles () {
|
|
|
- robodog.pick({
|
|
|
- waitForEncoding: true,
|
|
|
- params: {
|
|
|
- auth: { key: TRANSLOADIT_EXAMPLE_KEY },
|
|
|
- template_id: TRANSLOADIT_EXAMPLE_TEMPLATE,
|
|
|
- },
|
|
|
- }).then((result) => {
|
|
|
- // Was cancelled
|
|
|
- if (result == null) return
|
|
|
- this.insertAttachments(
|
|
|
- this.matchFilesAndThumbs(result.results),
|
|
|
- )
|
|
|
- }).catch((err) => {
|
|
|
- console.error(err)
|
|
|
- this.reportUploadError(err)
|
|
|
- })
|
|
|
+ this.uppy.addFiles(filesForUppy)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const textarea = new MarkdownTextarea(
|
|
|
- document.querySelector('#new textarea'),
|
|
|
-)
|
|
|
+const textarea = new MarkdownTextarea(document.querySelector('#new textarea'))
|
|
|
textarea.install()
|
|
|
|
|
|
function renderSnippet (title, text) {
|
|
|
@@ -170,20 +144,40 @@ function loadSnippets () {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+function matchFilesAndThumbs (results) {
|
|
|
+ const filesById = {}
|
|
|
+ const thumbsById = {}
|
|
|
+
|
|
|
+ for (const [stepName, result] of Object.entries(results)) {
|
|
|
+ result.forEach(result => {
|
|
|
+ if (stepName === 'thumbnails') {
|
|
|
+ thumbsById[result.original_id] = result
|
|
|
+ } else {
|
|
|
+ filesById[result.original_id] = result
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return Object.keys(filesById).map((key) => ({
|
|
|
+ file: filesById[key],
|
|
|
+ thumb: thumbsById[key],
|
|
|
+ }))
|
|
|
+}
|
|
|
+
|
|
|
document.querySelector('#new').addEventListener('submit', (event) => {
|
|
|
event.preventDefault()
|
|
|
|
|
|
- const title = event.target.querySelector('input[name="title"]').value
|
|
|
+ const title = event.target.elements['title'].value
|
|
|
|| 'Unnamed Snippet'
|
|
|
const text = textarea.element.value
|
|
|
|
|
|
saveSnippet(title, text)
|
|
|
renderSnippet(title, text)
|
|
|
|
|
|
+ // eslint-disable-next-line no-param-reassign
|
|
|
event.target.querySelector('input').value = ''
|
|
|
+ // eslint-disable-next-line no-param-reassign
|
|
|
event.target.querySelector('textarea').value = ''
|
|
|
})
|
|
|
|
|
|
-window.addEventListener('DOMContentLoaded', () => {
|
|
|
- loadSnippets()
|
|
|
-})
|
|
|
+window.addEventListener('DOMContentLoaded', loadSnippets, { once: true })
|
Antoine du Hamel