mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-18 00:55:35 +00:00
Merge remote-tracking branch 'origin/master'
# Conflicts: # website/src/examples/fakemodal/app.es6
This commit is contained in:
Artur Paikin
commit
73aa82441e
9 changed files with 64 additions and 273 deletions
|
|
@ -1,42 +1,34 @@
|
|||
// import Utils from '../core/Utils'
|
||||
import Utils from '../core/Utils'
|
||||
import Plugin from './Plugin'
|
||||
|
||||
export default class Drive extends Plugin {
|
||||
export default class Google extends Plugin {
|
||||
constructor (core, opts) {
|
||||
super(core, opts)
|
||||
this.type = 'selecter'
|
||||
this.authenticate = this.authenticate.bind(this)
|
||||
this.connect = this.connect.bind(this)
|
||||
this.render = this.render.bind(this)
|
||||
this.renderAuthentication = this.renderAuthentication.bind(this)
|
||||
this.checkAuthentication = this.checkAuthentication.bind(this)
|
||||
this.getDirectory = this.getDirectory.bind(this)
|
||||
this.files = []
|
||||
this.currentDir = 'root'
|
||||
this.authUrl = 'http://localhost:3020/connect/google'
|
||||
// set default options
|
||||
const defaultOptions = {}
|
||||
|
||||
// merge default options with the ones set by user
|
||||
this.opts = Object.assign({}, defaultOptions, opts)
|
||||
|
||||
this.currentFolder = 'root'
|
||||
this.isAuthenticated = false
|
||||
|
||||
this.checkAuthentication()
|
||||
}
|
||||
|
||||
connect (target) {
|
||||
this.target = target
|
||||
focus () {
|
||||
if (!this.isAuthenticated) {
|
||||
target.innerHTML = this.renderAuthentication()
|
||||
this.target.innerHTML = this.renderAuth()
|
||||
} else {
|
||||
this.getDirectory()
|
||||
.then(data => {
|
||||
target.innerHTML = this.render(data)
|
||||
|
||||
const folders = [...document.querySelectorAll('.GoogleDriveFolder')]
|
||||
const files = [...document.querySelectorAll('.GoogleDriveFile')]
|
||||
|
||||
folders.forEach(folder => folder.addEventListener('click', e => this.getDirectory(folder.dataset.id)))
|
||||
files.forEach(file => file.addEventListener('click', e => this.getFile(file.dataset.id)))
|
||||
})
|
||||
this.renderFolder()
|
||||
}
|
||||
}
|
||||
|
||||
checkAuthentication () {
|
||||
fetch('http://localhost:3002/drive/auth/authorize', {
|
||||
fetch('http://localhost:3020/google/authorize', {
|
||||
method: 'get',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
|
|
@ -48,7 +40,6 @@ export default class Drive extends Plugin {
|
|||
if (res.status >= 200 && res.status <= 300) {
|
||||
return res.json().then(data => {
|
||||
this.isAuthenticated = data.isAuthenticated
|
||||
this.authUrl = data.authUrl
|
||||
})
|
||||
} else {
|
||||
let error = new Error(res.statusText)
|
||||
|
|
@ -58,17 +49,11 @@ export default class Drive extends Plugin {
|
|||
})
|
||||
}
|
||||
|
||||
authenticate () {
|
||||
}
|
||||
|
||||
addFile () {
|
||||
}
|
||||
|
||||
getDirectory (folderId) {
|
||||
getFolder (folderId = this.currentFolder) {
|
||||
/**
|
||||
* Leave this here
|
||||
*/
|
||||
// fetch('http://localhost:3002/drive/logout', {
|
||||
// fetch('http://localhost:3020/google/logout', {
|
||||
// method: 'get',
|
||||
// credentials: 'include',
|
||||
// headers: {
|
||||
|
|
@ -76,7 +61,7 @@ export default class Drive extends Plugin {
|
|||
// 'Content-Type': 'application/json'
|
||||
// }
|
||||
// }).then(res => console.log(res))
|
||||
return fetch('http://localhost:3002/drive/list', {
|
||||
return fetch('http://localhost:3020/google/list', {
|
||||
method: 'get',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
|
|
@ -111,10 +96,10 @@ export default class Drive extends Plugin {
|
|||
|
||||
getFile (fileId) {
|
||||
console.log(typeof fileId)
|
||||
// if (fileId !== 'string') {
|
||||
// return console.log('Error: File Id not a string.')
|
||||
// }
|
||||
return fetch('http://localhost:3002/drive/get', {
|
||||
if (fileId !== 'string') {
|
||||
return console.log('Error: File Id not a string.')
|
||||
}
|
||||
return fetch('http://localhost:3020/google/get', {
|
||||
method: 'get',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
|
|
@ -127,18 +112,33 @@ export default class Drive extends Plugin {
|
|||
})
|
||||
}
|
||||
|
||||
run (results) {
|
||||
|
||||
install () {
|
||||
const caller = this
|
||||
this.target = this.getTarget(this.opts.target, caller)
|
||||
console.log('this.target ===')
|
||||
console.log(this.target)
|
||||
return
|
||||
}
|
||||
|
||||
renderAuthentication () {
|
||||
renderAuth () {
|
||||
return `<div><h1>Authenticate With Google Drive</h1><a href=${ this.authUrl || '#' }>Authenticate</a></div>`
|
||||
}
|
||||
|
||||
render (data) {
|
||||
renderBrowser (data) {
|
||||
const folders = data.folders.map(folder => `<li>Folder<button class="GoogleDriveFolder" data-id="${folder.id}" data-title="${folder.title}">${folder.title}</button></li>`)
|
||||
const files = data.files.map(file => `<li><button class="GoogleDriveFile" data-id="${file.id}" data-title="${file.title}">${file.title}</button></li>`)
|
||||
|
||||
return `<ul>${folders}</ul><ul>${files}</ul>`
|
||||
}
|
||||
|
||||
renderFolder (folder = this.currentFolder) {
|
||||
this.getFolder(folder)
|
||||
.then(data => {
|
||||
this.target.innerHTML = this.renderBrowser(data)
|
||||
const folders = Utils.qsa('.GoogleDriveFolder')
|
||||
const files = Utils.qsa('.GoogleDriveFile')
|
||||
|
||||
folders.forEach(folder => folder.addEventListener('click', e => this.renderFolder(folder.dataset.id)))
|
||||
files.forEach(file => file.addEventListener('click', e => this.getFile(file.dataset.id)))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,6 +122,7 @@ export default class Modal extends Plugin {
|
|||
tab.addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
console.log(tabId)
|
||||
this.core.getPlugin(tabId.substr(1)).focus()
|
||||
this.hideAllTabPanels()
|
||||
this.showTabPanel(tabId)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,13 +2,6 @@
|
|||
## Docs: http://zespia.tw/hexo/docs/configuration.html
|
||||
## Source: https://github.com/tommy351/hexo/
|
||||
|
||||
# Uppy versions, auto updated by update.js
|
||||
uppy_version: 0.0.1
|
||||
|
||||
uppy_dev_size: "96.88"
|
||||
uppy_min_size: "96.88"
|
||||
uppy_gz_size: "96.88"
|
||||
|
||||
# Theme
|
||||
google_analytics: UA-63083-12
|
||||
root_domain: uppy.io
|
||||
|
|
|
|||
|
|
@ -1,177 +0,0 @@
|
|||
html,
|
||||
body {
|
||||
background-color: #ccc;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#UppyModal {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
|
||||
-webkit-transform: translate(-50%, -50%) scale(0.8);
|
||||
-moz-transform: translate(-50%, -50%) scale(0.8);
|
||||
-ms-transform: translate(-50%, -50%) scale(0.8);
|
||||
-o-transform: translate(-50%, -50%) scale(0.8);
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
}
|
||||
|
||||
.Modal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.UppyModalOverlay {
|
||||
background: #000;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: -1500px;
|
||||
left: 0;
|
||||
z-index: 101;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
body,
|
||||
.UppyModal--is-ready .UppyModalOverlay {
|
||||
-webkit-transition: 1s all cubic-bezier(.87,.92,.83,.67);
|
||||
-moz-transition: 1s all cubic-bezier(.87,.92,.83,.67);
|
||||
-ms-transition: 1s all cubic-bezier(.87,.92,.83,.67);
|
||||
-o-transition: 1s all cubic-bezier(.87,.92,.83,.67);
|
||||
transition: 0.6s all cubic-bezier(.87,.92,.83,.67);
|
||||
}
|
||||
|
||||
.UppyModal--is-ready #UppyModal {
|
||||
-webkit-transition: .5s all ease;
|
||||
-moz-transition: 1.5s all ease;
|
||||
-ms-transition: 1.5s all ease;
|
||||
-o-transition: 1.5s all ease;
|
||||
transition: .5s all ease;
|
||||
}
|
||||
|
||||
body.UppyModal--is-ready,
|
||||
.UppyModal--is-ready .UppyModalOverlay,
|
||||
.UppyModal--is-ready #UppyModal {
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
body.UppyModal--is-open {
|
||||
-webkit-transform: scale(0.9);
|
||||
-moz-transform: scale(0.9);
|
||||
-ms-transform: scale(0.9);
|
||||
-o-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#UppyModal.UppyModal--is-open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
|
||||
-webkit-transform: scale(1.1) translate(-50%, -50%);
|
||||
-moz-transform: scale(1.1) translate(-50%, -50%);
|
||||
-ms-transform: scale(1.1) translate(-50%, -50%);
|
||||
-o-transform: scale(1.1) translate(-50%, -50%);
|
||||
transform: scale(1.1) translate(-50%, -50%);
|
||||
|
||||
-webkit-transition: 0.3s all ease;
|
||||
-moz-transition: 0.3s all ease;
|
||||
-ms-transition: 0.3s all ease;
|
||||
-o-transition: 0.3s all ease;
|
||||
transition: 0.3s all ease;
|
||||
}
|
||||
|
||||
body.UppyModal--is-open .UppyModalOverlay {
|
||||
visibility: visible;
|
||||
opacity: .5;
|
||||
filter: alpha(opacity=50);
|
||||
height: 20000px;
|
||||
}
|
||||
|
||||
.avgrund-popin.stack {
|
||||
-webkit-transform: scale(1.5);
|
||||
-moz-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
-o-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.avgrund-active .avgrund-popin.stack {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.avgrund-active .avgrund-blur {
|
||||
-webkit-filter: blur(1px);
|
||||
-moz-filter: blur(1px);
|
||||
-ms-filter: blur(1px);
|
||||
-o-filter: blur(1px);
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
/* Optional close button styles */
|
||||
.UppyModal-closeBtn {
|
||||
display: block;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
#UppyModalDialog {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#UppyModalContent {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.UppyModalSidebar {
|
||||
border-right: 1px solid #ccc;
|
||||
height: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.UppyModalSidebar > ul {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.UppyModalSidebar li {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.UppyModalSidebar button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
|
|
@ -1,27 +1,11 @@
|
|||
// import Uppy from 'uppy/core'
|
||||
// import { DragDrop, Tus10 } from 'uppy/plugins'
|
||||
import Uppy from 'uppy/core'
|
||||
import { Modal, DragDrop } from 'uppy/plugins'
|
||||
import Uppy from '../../../../src/core/Core.js'
|
||||
import Dummy from '../../../../src/plugins/Dummy.js'
|
||||
import GoogleDrive from '../../../../src/plugins/GoogleDrive.js'
|
||||
import Modal from '../../../../src/plugins/Modal.js'
|
||||
|
||||
const defaults = {
|
||||
width : 380, // max = 640
|
||||
height : 280, // max = 350
|
||||
showClose : false,
|
||||
showCloseText : '',
|
||||
closeByEscape : true,
|
||||
closeByDocument : true,
|
||||
holderClass : '',
|
||||
overlayClass : '',
|
||||
enableStackAnimation: false,
|
||||
onBlurContainer : '',
|
||||
openOnEvent : true,
|
||||
setEvent : 'click',
|
||||
onLoad : false,
|
||||
onUnload : false,
|
||||
onClosing : false,
|
||||
template : '<p>This is test popin content!</p>'
|
||||
}
|
||||
|
||||
const uppy = new Uppy({wait: false})
|
||||
|
||||
uppy.use(Modal, {selector: '.ModalTrigger'})
|
||||
const uppy = new Uppy({debug: true})
|
||||
uppy
|
||||
.use(Modal)
|
||||
.use(Dummy, {target: Modal})
|
||||
.use(GoogleDrive, {target: Modal})
|
||||
.run()
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
<button class="ModalTrigger">Launcher</button>
|
||||
|
||||
<!-- <div class="ModalTemplate">
|
||||
<nav class="UploadSidebar">
|
||||
<ul class="InputList">
|
||||
<li><button>Dropbox</button></li>
|
||||
<li><button>Google Drive</button></li>
|
||||
<li><button>Instagram</button></li>
|
||||
<li><button>Local</button></li>
|
||||
<li><button>Webcam</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main class="UploadContent">
|
||||
</main>
|
||||
</div> -->
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
title: Modal
|
||||
layout: example
|
||||
type: examples
|
||||
order: 5
|
||||
order: 1
|
||||
---
|
||||
|
||||
{% blockquote %}
|
||||
This is a demo of the Uppy Modal.
|
||||
Making a modal dialog great again.
|
||||
{% endblockquote %}
|
||||
|
||||
<link rel="stylesheet" href="app.css">
|
||||
|
|
@ -22,14 +22,14 @@ This is a demo of the Uppy Modal.
|
|||
<p>
|
||||
On this page we're using the following HTML snippet:
|
||||
</p>
|
||||
{% include_code lang:html dropbox/app.html %}
|
||||
{% include_code lang:html fakemodal/app.html %}
|
||||
|
||||
<p>
|
||||
Along with this JavaScript:
|
||||
</p>
|
||||
{% include_code lang:js dropbox/app.es6 %}
|
||||
{% include_code lang:js fakemodal/app.es6 %}
|
||||
|
||||
<p>
|
||||
And the following CSS:
|
||||
</p>
|
||||
{% include_code lang:css dropbox/app.css %}
|
||||
{% include_code lang:css fakemodal/app.css %}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,16 @@ var uppyRoot = path.dirname(__dirname)
|
|||
|
||||
var configPath = webRoot + '/themes/uppy/_config.yml'
|
||||
var version = require(uppyRoot + '/package.json').version
|
||||
var configTemplate = '# Uppy versions, auto updated by update.js\nuppy_version: 0.0.1\n\nuppy_dev_size: "0.0"\nuppy_min_size: "0.0"\nuppy_gz_size: "0.0"'
|
||||
var config
|
||||
try {
|
||||
config = fs.readFileSync(configPath, 'utf-8')
|
||||
} catch (e) {
|
||||
config = '# Uppy versions, auto updated by update.js\nuppy_version: 0.0.1\n\nuppy_dev_size: "0.0"\nuppy_min_size: "0.0"\nuppy_gz_size: "0.0"'
|
||||
|
||||
}
|
||||
|
||||
if (!config || !config.trim()) {
|
||||
config = configTemplate
|
||||
}
|
||||
|
||||
// Inject current Uppy version and sizes in website's _config.yml
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue