diff --git a/src/plugins/GoogleDrive.js b/src/plugins/GoogleDrive.js index 90172d964..b7ef3b520 100644 --- a/src/plugins/GoogleDrive.js +++ b/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 `

Authenticate With Google Drive

Authenticate
` } - render (data) { + renderBrowser (data) { const folders = data.folders.map(folder => `
  • Folder
    • `) const files = data.files.map(file => `
    • `) - return `` } + + 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))) + }) + } } diff --git a/src/plugins/Modal.js b/src/plugins/Modal.js index 37b3640d4..69eece122 100644 --- a/src/plugins/Modal.js +++ b/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) }) diff --git a/website/_config.yml b/website/_config.yml index 6df44e285..52738b93e 100644 --- a/website/_config.yml +++ b/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 diff --git a/website/src/examples/fakemodal/app.css b/website/src/examples/fakemodal/app.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/website/src/examples/modal/app.css b/website/src/examples/modal/app.css index f8e51fec1..e69de29bb 100644 --- a/website/src/examples/modal/app.css +++ b/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; -} diff --git a/website/src/examples/modal/app.es6 b/website/src/examples/modal/app.es6 index 30aa0f2e2..6629ec47e 100644 --- a/website/src/examples/modal/app.es6 +++ b/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 : '

    This is test popin content!

    ' -} - -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() diff --git a/website/src/examples/modal/app.html b/website/src/examples/modal/app.html deleted file mode 100644 index 60b98d9e4..000000000 --- a/website/src/examples/modal/app.html +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/website/src/examples/modal/index.ejs b/website/src/examples/modal/index.ejs index c560e61a0..1809d9d65 100644 --- a/website/src/examples/modal/index.ejs +++ b/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 %} @@ -22,14 +22,14 @@ This is a demo of the Uppy Modal.

    On this page we're using the following HTML snippet:

    -{% include_code lang:html dropbox/app.html %} +{% include_code lang:html fakemodal/app.html %}

    Along with this JavaScript:

    -{% include_code lang:js dropbox/app.es6 %} +{% include_code lang:js fakemodal/app.es6 %}

    And the following CSS:

    -{% include_code lang:css dropbox/app.css %} +{% include_code lang:css fakemodal/app.css %} diff --git a/website/update.js b/website/update.js index d9c798a5f..f7208ac60 100644 --- a/website/update.js +++ b/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