Merge pull request #57 from transloadit/nofake

Rename FakeModal to Modal, deprecating our old Modal

CHANGELOG.md

@@ -49,14 +49,14 @@ look at https://github.com/akiran/react-slick
 
 ## 0.0.3 (March 01, 2016)
 
-- [x] core: throw an error when one Plugin is `.use`d twice. We don't support that now, and will result in very confusing behavior (@kvz)
 - [ ] modal: Make sure modal renders under one dom node (@arturi)
 - [ ] modal: Make `ProgressBar` work with the new Modal (@kvz)
 - [ ] google: Convert `GoogleDrive` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@hedgerh)
 - [ ] modal: Make Modal prettier and accessible using Artur's research (@arturi)
 - [ ] dragdrop: Convert `DragDrop` to adhere to `Dummy`'s format, so it's compatible with the new Modal (@arturi)
-- [ ] modal: Rename FakeModal to Modal, deprecating our old one (@kvz)
 - [ ] modal: Make the Modal look like Harry's sketchup  (@hedgerh)
+- [x] core: throw an error when one Plugin is `.use`d twice. We don't support that now, and will result in very confusing behavior (@kvz)
+- [x] modal: Rename FakeModal to Modal, deprecating our old one (@kvz)
 
 -- 
 

src/plugins/FakeModal.js

@@ -1,140 +0,0 @@
-import Plugin from './Plugin'
-// import Utils from '../core/Utils'
-
-function $$ (selector, context) {
-  return Array.prototype.slice.call((context || document).querySelectorAll(selector) || [])
-}
-
-/**
- * FakeModal
- *
- */
-export default class FakeModal extends Plugin {
-  constructor (core, opts) {
-    super(core, opts)
-    this.type = 'view'
-
-    // set default options
-    const defaultOptions = {}
-
-    // merge default options with the ones set by user
-    this.opts = Object.assign({}, defaultOptions, opts)
-
-    this.targets = {}
-
-    this.targets.spinner = '.UppyDragDrop-One-Spinner'
-
-    this.container = document.body
-  }
-
-  prepareTarget (callerPlugin) {
-    console.log(callerPlugin.type)
-
-    if (callerPlugin.type !== 'selecter' || callerPlugin.type !== 'progress') {
-      this.core.log('Error: Modal can only be used by plugins of type `selecter` or `progress`')
-      return
-    }
-
-    const callerPluginName = callerPlugin.constructor.name
-
-    // add tab panel
-    const modalContent = document.querySelector('.UppyModal-content')
-    const nodeForPlugin = document.createElement('div')
-
-    modalContent.appendChild(nodeForPlugin)
-    nodeForPlugin.outerHTML = `
-      <div role="tabpanel"
-           class="UppyModal-panel"
-           id="${callerPluginName}">
-      </div>
-    `
-
-    // add tab
-    const modalTabs = document.querySelector('.UppyModal-tabList')
-    const modalTab = document.createElement('div')
-
-    modalTabs.appendChild(modalTab)
-    modalTab.outerHTML = `
-      <li><a role="tab"
-         aria-controls="${callerPluginName}"
-         class="UppyModal-tab"
-         href="#${callerPluginName}">
-         ${callerPluginName}
-      </a></li>
-    `
-
-    this.initEvents()
-
-    return document.querySelector(`#${callerPluginName}`)
-  }
-
-  render () {
-    // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
-
-    return `
-      <div class="UppyModal"
-           aria-hidden="true"
-           aria-labelledby="modalTitle"
-           aria-describedby="modalDescription"
-           role="dialog">
-
-        <button data-modal-hide class="UppyModal-close" title="Close uploader modal">×</button>
-
-        <ul role="tablist" class="UppyModal-tabList">
-          <li><a role="tab" aria-controls="dragdrop" class="UppyModal-tab" href="#dragdrop">Dizzy</a></li>
-          <li><a role="tab" aria-controls="dropbox" class="UppyModal-tab" href="#dropbox">Ninja</a></li>
-          <li><a role="tab" aria-controls="instagram" class="UppyModal-tab" href="#instagram">Missy</a></li>
-        </ul>
-
-        <div class="UppyModal-content">
-          <div role="tabpanel" class="UppyModal-panel" id="dragdrop">
-            123
-          </div>
-          <div role="tabpanel" class="UppyModal-panel" id="dropbox">
-            456
-          </div>
-          <div role="tabpanel" class="UppyModal-panel" id="instagram">
-            789
-          </div>
-        </div>
-      </div>
-    `
-  }
-
-  hideAllTabPanels () {
-    this.tabPanels.forEach(tabPanel => {
-      tabPanel.style.display = 'none'
-    })
-  }
-
-  showTabPanel (id) {
-    const tabPanel = document.querySelector(id)
-    tabPanel.style.display = 'block'
-  }
-
-  initEvents () {
-    const tabs = $$('.UppyModal-tab')
-    this.tabPanels = []
-    tabs.forEach(tab => {
-      const tabId = tab.getAttribute('href')
-      const tabPanel = document.querySelector(tabId)
-      this.tabPanels.push(tabPanel)
-
-      tab.addEventListener('click', event => {
-        event.preventDefault()
-        console.log(tabId)
-        this.hideAllTabPanels()
-        this.showTabPanel(tabId)
-      })
-    })
-
-    this.hideAllTabPanels()
-  }
-
-  install () {
-    const node = document.createElement('div')
-    node.innerHTML = this.render()
-    this.container.appendChild(node)
-    this.initEvents()
-  }
-}

src/plugins/Modal.js

@@ -1,96 +1,140 @@
 import Plugin from './Plugin'
-import { ModalTemplate } from './templates'
-import Drive from './GoogleDrive'
+// import Utils from '../core/Utils'
 
+function $$ (selector, context) {
+  return Array.prototype.slice.call((context || document).querySelectorAll(selector) || [])
+}
+
+/**
+ * Modal
+ *
+ */
 export default class Modal extends Plugin {
   constructor (core, opts) {
     super(core, opts)
-    let GoogleDrive = new Drive()
-    this.providers = [{ name: 'Local' }, { name: 'Google Drive', connect: GoogleDrive.connect }]
-    this.type = 'something'
-    this.connect = this.connect.bind(this)
-    this.render = this.render.bind(this)
-    this.initModal = this.initModal.bind(this)
-    this.onDocumentClick = this.onDocumentClick.bind(this)
-    this.parent = this.opts.parent || document.body
-    this.initModal()
-
-    if (this.opts.selector) {
-      this.trigger = this.opts.selector
-      this.connect(this.trigger)
-    }
-  }
-
-  connect (target) {
-    const trigger = document.querySelector(target)
-
-    if (!trigger) {
-      console.error('Uppy: Error. Modal trigger element not found.')
-    }
-    trigger.addEventListener('click', () => {
-      this.openModal()
-    })
-  }
+    this.type = 'view'
 
-  initModal () {
-    document.body.classList.add('UppyModal--is-ready')
+    // set default options
+    const defaultOptions = {}
 
-    let overlay = document.createElement('div')
-    overlay.classList.add('UppyModalOverlay')
-    document.body.appendChild(overlay)
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
 
-    overlay.addEventListener('click', this.closeModal)
+    this.targets = {}
 
-    let modal = document.createElement('div')
-    modal.id = 'UppyModal'
+    this.targets.spinner = '.UppyDragDrop-One-Spinner'
 
-    this.parent.appendChild(modal)
-
-    modal.innerHTML = ModalTemplate({ providers: this.providers })
+    this.container = document.body
+  }
 
-    let a = document.createElement('a')
+  prepareTarget (callerPlugin) {
+    console.log(callerPlugin.type)
 
-    const linkText = document.createTextNode('close')
-    a.appendChild(linkText)
-    a.classList.add('UppyModal-closeBtn')
-    a.addEventListener('click', this.onDocumentClick)
+    if (callerPlugin.type !== 'selecter' || callerPlugin.type !== 'progress') {
+      this.core.log('Error: Modal can only be used by plugins of type `selecter` or `progress`')
+      return
+    }
 
-    modal.appendChild(a)
+    const callerPluginName = callerPlugin.constructor.name
+
+    // add tab panel
+    const modalContent = document.querySelector('.UppyModal-content')
+    const nodeForPlugin = document.createElement('div')
+
+    modalContent.appendChild(nodeForPlugin)
+    nodeForPlugin.outerHTML = `
+      <div role="tabpanel"
+           class="UppyModal-panel"
+           id="${callerPluginName}">
+      </div>
+    `
+
+    // add tab
+    const modalTabs = document.querySelector('.UppyModal-tabList')
+    const modalTab = document.createElement('div')
+
+    modalTabs.appendChild(modalTab)
+    modalTab.outerHTML = `
+      <li><a role="tab"
+         aria-controls="${callerPluginName}"
+         class="UppyModal-tab"
+         href="#${callerPluginName}">
+         ${callerPluginName}
+      </a></li>
+    `
+
+    this.initEvents()
+
+    return document.querySelector(`#${callerPluginName}`)
+  }
 
-    this.modal = document.getElementById('UppyModal')
+  render () {
+    // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
+
+    return `
+      <div class="UppyModal"
+           aria-hidden="true"
+           aria-labelledby="modalTitle"
+           aria-describedby="modalDescription"
+           role="dialog">
+
+        <button data-modal-hide class="UppyModal-close" title="Close uploader modal">×</button>
+
+        <ul role="tablist" class="UppyModal-tabList">
+          <li><a role="tab" aria-controls="dragdrop" class="UppyModal-tab" href="#dragdrop">Dizzy</a></li>
+          <li><a role="tab" aria-controls="dropbox" class="UppyModal-tab" href="#dropbox">Ninja</a></li>
+          <li><a role="tab" aria-controls="instagram" class="UppyModal-tab" href="#instagram">Missy</a></li>
+        </ul>
+
+        <div class="UppyModal-content">
+          <div role="tabpanel" class="UppyModal-panel" id="dragdrop">
+            123
+          </div>
+          <div role="tabpanel" class="UppyModal-panel" id="dropbox">
+            456
+          </div>
+          <div role="tabpanel" class="UppyModal-panel" id="instagram">
+            789
+          </div>
+        </div>
+      </div>
+    `
+  }
 
-    this.providers.forEach(provider => {
-      const elem = document.getElementById(`Uppy-${provider.name.split(' ').join('')}`)
-      if (provider.name !== 'Local') {
-        elem.addEventListener('click', e => {
-          if (provider.name !== 'Local') {
-            provider.connect(document.getElementById('UppyModalContent'))
-          }
-        })
-      }
+  hideAllTabPanels () {
+    this.tabPanels.forEach(tabPanel => {
+      tabPanel.style.display = 'none'
     })
   }
 
-  openModal () {
-    if (this.modal) {
-      this.modal.classList.toggle('UppyModal--is-open')
-      document.body.classList.toggle('UppyModal--is-open')
-      document.body.classList.toggle('UppyModal--is-ready')
-    }
+  showTabPanel (id) {
+    const tabPanel = document.querySelector(id)
+    tabPanel.style.display = 'block'
   }
 
-  closeModal () {
-    document.body.classList.toggle('UppyModal--is-open')
-    document.body.classList.toggle('UppyModal--is-ready')
-    setTimeout(() => this.modal.classList.toggle('UppyModal--is-open'), 500)
-  }
+  initEvents () {
+    const tabs = $$('.UppyModal-tab')
+    this.tabPanels = []
+    tabs.forEach(tab => {
+      const tabId = tab.getAttribute('href')
+      const tabPanel = document.querySelector(tabId)
+      this.tabPanels.push(tabPanel)
+
+      tab.addEventListener('click', event => {
+        event.preventDefault()
+        console.log(tabId)
+        this.hideAllTabPanels()
+        this.showTabPanel(tabId)
+      })
+    })
 
-  onDocumentClick (e) {
-    e.preventDefault()
-    this.closeModal()
+    this.hideAllTabPanels()
   }
 
-  render (files) {
-    this.modal.innerHTML = ModalTemplate({ providers: this.providers })
+  install () {
+    const node = document.createElement('div')
+    node.innerHTML = this.render()
+    this.container.appendChild(node)
+    this.initEvents()
   }
 }

website/src/examples/fakemodal/app.es6

@@ -1,9 +1,9 @@
 import Uppy from '../../../../src/core/Core.js'
 import Dummy from '../../../../src/plugins/Dummy.js'
-import FakeModal from '../../../../src/plugins/FakeModal.js'
+import Modal from '../../../../src/plugins/Modal.js'
 
 const uppy = new Uppy({debug: true})
 uppy
-  .use(FakeModal)
-  .use(Dummy, {target: FakeModal})
+  .use(Modal)
+  .use(Dummy, {target: Modal})
   .run()