From 79e338c178c3a0feecd5e4c8fce1580e19324df8 Mon Sep 17 00:00:00 2001 From: Harry Hedger Date: Sun, 21 Feb 2016 16:06:47 +0100 Subject: [PATCH 1/8] Refactored Google plugin to match new API --- src/plugins/GoogleDrive.js | 74 +++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 41 deletions(-) diff --git a/src/plugins/GoogleDrive.js b/src/plugins/GoogleDrive.js index 90172d964..ff71ed37d 100644 --- a/src/plugins/GoogleDrive.js +++ b/src/plugins/GoogleDrive.js @@ -1,42 +1,27 @@ -// 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.type = 'acquire' this.files = [] - this.currentDir = 'root' + 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:3002/google/authorize', { method: 'get', credentials: 'include', headers: { @@ -58,13 +43,7 @@ export default class Drive extends Plugin { }) } - authenticate () { - } - - addFile () { - } - - getDirectory (folderId) { + getFolder (folderId = this.currentFolder) { /** * Leave this here */ @@ -76,7 +55,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:3002/google/list', { method: 'get', credentials: 'include', headers: { @@ -111,10 +90,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:3002/google/get', { method: 'get', credentials: 'include', headers: { @@ -127,18 +106,31 @@ export default class Drive extends Plugin { }) } - run (results) { - + install () { + const caller = this + this.target = this.getTarget(this.opts.target, caller) + 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))) + }) + } } From cf7fcc22da9f2a602d17ec26e3bf7fc083884c7d Mon Sep 17 00:00:00 2001 From: Harry Hedger Date: Sun, 21 Feb 2016 16:32:30 +0100 Subject: [PATCH 2/8] Added new work. --- src/plugins/GoogleDrive.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/plugins/GoogleDrive.js b/src/plugins/GoogleDrive.js index ff71ed37d..2a7592939 100644 --- a/src/plugins/GoogleDrive.js +++ b/src/plugins/GoogleDrive.js @@ -4,8 +4,15 @@ import Plugin from './Plugin' export default class Google extends Plugin { constructor (core, opts) { super(core, opts) - this.type = 'acquire' + this.type = 'selecter' this.files = [] + + // 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 @@ -21,7 +28,7 @@ export default class Google extends Plugin { } checkAuthentication () { - fetch('http://localhost:3002/google/authorize', { + fetch('http://localhost:3020/google/authorize', { method: 'get', credentials: 'include', headers: { @@ -47,7 +54,7 @@ export default class Google extends Plugin { /** * Leave this here */ - // fetch('http://localhost:3002/drive/logout', { + // fetch('http://localhost:3020/google/logout', { // method: 'get', // credentials: 'include', // headers: { @@ -55,7 +62,7 @@ export default class Google extends Plugin { // 'Content-Type': 'application/json' // } // }).then(res => console.log(res)) - return fetch('http://localhost:3002/google/list', { + return fetch('http://localhost:3020/google/list', { method: 'get', credentials: 'include', headers: { @@ -93,7 +100,7 @@ export default class Google extends Plugin { if (fileId !== 'string') { return console.log('Error: File Id not a string.') } - return fetch('http://localhost:3002/google/get', { + return fetch('http://localhost:3020/google/get', { method: 'get', credentials: 'include', headers: { From ecff0cea0ac65637bfc3f914b975d2a57dbeba45 Mon Sep 17 00:00:00 2001 From: Harry Hedger Date: Sun, 21 Feb 2016 16:33:20 +0100 Subject: [PATCH 3/8] Added FakeModal changes --- src/plugins/Modal.js | 3 +++ website/src/examples/fakemodal/app.es6 | 2 ++ 2 files changed, 5 insertions(+) diff --git a/src/plugins/Modal.js b/src/plugins/Modal.js index 40044503a..af7f6a7eb 100644 --- a/src/plugins/Modal.js +++ b/src/plugins/Modal.js @@ -119,6 +119,9 @@ export default class Modal extends Plugin { tab.addEventListener('click', event => { event.preventDefault() console.log(tabId) + this.core.iteratePlugins(plugin => { + console.log('name: ', plugin.name) + }) this.hideAllTabPanels() this.showTabPanel(tabId) }) diff --git a/website/src/examples/fakemodal/app.es6 b/website/src/examples/fakemodal/app.es6 index 9d656d1e7..6629ec47e 100644 --- a/website/src/examples/fakemodal/app.es6 +++ b/website/src/examples/fakemodal/app.es6 @@ -1,9 +1,11 @@ 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 uppy = new Uppy({debug: true}) uppy .use(Modal) .use(Dummy, {target: Modal}) + .use(GoogleDrive, {target: Modal}) .run() From b59f8da0a7cf62f8290d4f440ad7d98846f2ca9e Mon Sep 17 00:00:00 2001 From: Harry Hedger Date: Sun, 21 Feb 2016 17:01:01 +0100 Subject: [PATCH 4/8] Setting up the Google Drive rendering. --- src/plugins/GoogleDrive.js | 3 +++ src/plugins/Modal.js | 4 +--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/plugins/GoogleDrive.js b/src/plugins/GoogleDrive.js index 2a7592939..0f01e7830 100644 --- a/src/plugins/GoogleDrive.js +++ b/src/plugins/GoogleDrive.js @@ -116,10 +116,13 @@ export default class Google extends Plugin { install () { const caller = this this.target = this.getTarget(this.opts.target, caller) + console.log('this.targetgtsds') + console.log(this.target) return } renderAuth () { + console.log('RenderAuth') return `

    Authenticate With Google Drive

    Authenticate
    ` } diff --git a/src/plugins/Modal.js b/src/plugins/Modal.js index af7f6a7eb..7e742e729 100644 --- a/src/plugins/Modal.js +++ b/src/plugins/Modal.js @@ -119,9 +119,7 @@ export default class Modal extends Plugin { tab.addEventListener('click', event => { event.preventDefault() console.log(tabId) - this.core.iteratePlugins(plugin => { - console.log('name: ', plugin.name) - }) + this.core.getPlugin(tabId.substr(1)).focus() this.hideAllTabPanels() this.showTabPanel(tabId) }) From 36dbfe4826eabc031b49510793d3f30b519699e1 Mon Sep 17 00:00:00 2001 From: Harry Hedger Date: Sun, 21 Feb 2016 17:10:39 +0100 Subject: [PATCH 5/8] Console.log --- src/plugins/GoogleDrive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/GoogleDrive.js b/src/plugins/GoogleDrive.js index 0f01e7830..8784b32e3 100644 --- a/src/plugins/GoogleDrive.js +++ b/src/plugins/GoogleDrive.js @@ -116,7 +116,7 @@ export default class Google extends Plugin { install () { const caller = this this.target = this.getTarget(this.opts.target, caller) - console.log('this.targetgtsds') + console.log('this.target ===') console.log(this.target) return } From 6a8bf6abc9a550e26c4b054ca050fdfa64b49022 Mon Sep 17 00:00:00 2001 From: Harry Hedger Date: Sun, 21 Feb 2016 17:45:48 +0100 Subject: [PATCH 6/8] Added authUrl --- src/plugins/GoogleDrive.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/plugins/GoogleDrive.js b/src/plugins/GoogleDrive.js index 8784b32e3..b7ef3b520 100644 --- a/src/plugins/GoogleDrive.js +++ b/src/plugins/GoogleDrive.js @@ -6,7 +6,7 @@ export default class Google extends Plugin { super(core, opts) this.type = 'selecter' this.files = [] - + this.authUrl = 'http://localhost:3020/connect/google' // set default options const defaultOptions = {} @@ -40,7 +40,6 @@ export default class Google 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) @@ -122,7 +121,6 @@ export default class Google extends Plugin { } renderAuth () { - console.log('RenderAuth') return `

    Authenticate With Google Drive

    Authenticate
    ` } From e1096d4c0ca18254e06be7270459cf3a5940ac06 Mon Sep 17 00:00:00 2001 From: Kevin van Zonneveld Date: Sun, 21 Feb 2016 18:07:37 +0100 Subject: [PATCH 7/8] Prevent empty layout configs --- website/update.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 From 01ce1dd813f78a0278140ef5750edac3a8eb0d32 Mon Sep 17 00:00:00 2001 From: Kevin van Zonneveld Date: Sun, 21 Feb 2016 18:11:02 +0100 Subject: [PATCH 8/8] Also rename fakemodal->modal examples. Ref #57 --- website/_config.yml | 7 - website/src/examples/fakemodal/app.css | 0 website/src/examples/fakemodal/app.es6 | 11 -- website/src/examples/fakemodal/app.html | 5 - website/src/examples/fakemodal/index.ejs | 35 ----- website/src/examples/modal/app.css | 177 ----------------------- website/src/examples/modal/app.es6 | 36 ++--- website/src/examples/modal/app.html | 18 +-- website/src/examples/modal/index.ejs | 10 +- 9 files changed, 19 insertions(+), 280 deletions(-) delete mode 100644 website/src/examples/fakemodal/app.css delete mode 100644 website/src/examples/fakemodal/app.es6 delete mode 100644 website/src/examples/fakemodal/app.html delete mode 100644 website/src/examples/fakemodal/index.ejs 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/fakemodal/app.es6 b/website/src/examples/fakemodal/app.es6 deleted file mode 100644 index 6629ec47e..000000000 --- a/website/src/examples/fakemodal/app.es6 +++ /dev/null @@ -1,11 +0,0 @@ -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 uppy = new Uppy({debug: true}) -uppy - .use(Modal) - .use(Dummy, {target: Modal}) - .use(GoogleDrive, {target: Modal}) - .run() diff --git a/website/src/examples/fakemodal/app.html b/website/src/examples/fakemodal/app.html deleted file mode 100644 index e2cde7b55..000000000 --- a/website/src/examples/fakemodal/app.html +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/website/src/examples/fakemodal/index.ejs b/website/src/examples/fakemodal/index.ejs deleted file mode 100644 index 6be9885c8..000000000 --- a/website/src/examples/fakemodal/index.ejs +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Fake Modal -layout: example -type: examples -order: 1 ---- - -{% blockquote %} -Making a modal dialog great again. -{% endblockquote %} - - -<% include app.html %> - - -
    - -

    - Console output (latest logs are at the top):
    -

    - -

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

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

    - Along with this JavaScript: -

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

    - And the following CSS: -

    -{% include_code lang:css fakemodal/app.css %} 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 index 60b98d9e4..e2cde7b55 100644 --- a/website/src/examples/modal/app.html +++ b/website/src/examples/modal/app.html @@ -1,15 +1,5 @@ - + + - + + 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 %}