Merge remote-tracking branch 'origin/master'

# Conflicts:
#	website/src/examples/fakemodal/app.es6

src/plugins/GoogleDrive.js

@@ -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)))
+    })
+  }
 }

src/plugins/Modal.js

@@ -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)
       })

website/_config.yml

@@ -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

website/src/examples/modal/app.css

@@ -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;
-}

website/src/examples/modal/app.es6

@@ -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()

website/src/examples/modal/app.html

@@ -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> -->

website/src/examples/modal/index.ejs

@@ -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 %}

website/update.js

@@ -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